/* Shared by the studio's three pages: index, support and privacy.

   Kept in one file for the reason goldenharvest/site.css exists — four
   hand-kept copies of one design drifted twice over there before anyone
   noticed. The filename carries a content hash from scripts/hash-web-assets.py
   so _headers can cache it immutable. */
:root{--bg:#080d16;--panel:#0f1726;--line:#1d2942;--ink:#f2f5fa;--dim:#8b9ab4;
--gold:#f5c542;--green:#4ade80;--blue:#60a5fa}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.dim{color:var(--dim)}
h1,h2{letter-spacing:-.03em;margin:0;line-height:1.06}
.nav{display:flex;align-items:center;gap:.7rem;padding:1.15rem 1.75rem;max-width:64rem;margin:0 auto}
.nav img{border-radius:13px;display:block}
.nav .r{margin-left:auto;display:flex;gap:1.5rem;font-size:.88rem}
.nav .r a{color:var(--dim)}
.badge{display:inline-block;font:600 .7rem/1 -apple-system,sans-serif;letter-spacing:.1em;
text-transform:uppercase;color:#0b1220;background:var(--gold);border-radius:4px;padding:.35rem .55rem}
footer{border-top:1px solid var(--line);margin-top:4rem;padding:2rem 0 3.5rem;color:var(--dim);
font-size:.87rem;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
footer a{color:var(--dim)}
/* The trading-name line (App Review 4.1(a)): its own row, right-aligned under the
   copyright and pulled up to sit with it. It inherits the footer's font, size and
   colour. Plain text on every page; do not move it behind a link or a toggle.
   text-wrap:balance keeps the name on one line when a phone wraps it, without
   touching the sentence, which must stay one unbroken string in the source. */
footer .trading{flex-basis:100%;text-align:right;margin-top:-1rem;text-wrap:balance}
/* Instagram and TikTok (.ig is the shared social-link class): an inline SVG glyph in the link's own colour. Inline because the CSP
   allows no remote images, and a plain link keeps the privacy page's "no embedded
   third-party content" true. */
footer a.ig{display:inline-flex;align-items:center;gap:.45rem}
footer a.ig svg{display:block;flex:none}
footer a.ig:hover{color:var(--ink)}

/* ---- the text pages (support, privacy) --------------------------------- */
/* index lays itself out with a grid; these two are a column of prose, so they
   share the page container and nothing else. */
.wrap{max-width:64rem;margin:0 auto;padding:2.5rem 1.75rem}
.narrow{max-width:46rem}
.nav .r a:hover{color:var(--ink)}
h1.page{font-size:clamp(1.7rem,4.6vw,2.2rem);margin-bottom:.5rem}
.card{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:1.4rem}
.q{border:1px solid var(--line);background:var(--panel);border-radius:12px;
padding:1.05rem 1.2rem;margin-bottom:.6rem}
.q b{display:block;margin-bottom:.2rem}
.q span{color:var(--dim);font-size:.95rem}
details{border-top:1px solid var(--line);padding:1rem 0}
details summary{cursor:pointer;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+ ";color:var(--gold)}
details[open] summary::before{content:"\2212 "}
details p{color:var(--dim);margin:.7rem 0 0;font-size:.95rem}
/* the footer sits inside .wrap on every page, so it needs no width of its own */
/* The bar holds a 52px glyph, the studio name and three links. Below about
   560px that is more than the width allows and the name breaks across two
   lines, which pushes the links down with it — so the glyph and the type both
   give up a little rather than the layout giving way. */
/* Tap targets. Nav, footer and standalone links are ~19-23px tall as text; an
   invisible ::after grows each hit area to ~44px (Apple's minimum, WCAG 2.5.8's
   is 24) without moving anything. Sideways growth is only 4px because nav links
   sit 9px apart on a phone, so no two hit areas overlap. .tap marks a link
   that stands alone on its line; .tap.tight is for list lines only 14px apart.
   Links inside a sentence are exempt under 2.5.8 and are left alone. */
.nav .r a,.nav b a,footer a,a.tap{position:relative}
.nav .r a::after,.nav b a::after,a.tap::after{content:"";position:absolute;inset:-12px -4px}
footer a::after{content:"";position:absolute;inset:-11px -4px}
a.tap.tight::after{inset:-7px -4px}

@media(max-width:760px){
  .nav{gap:.55rem;padding:1rem 1.1rem}
  .nav .r{gap:1rem;font-size:.84rem}
  .wrap{padding:2rem 1.1rem}
}
@media(max-width:560px){
  .nav img{width:38px;height:38px;border-radius:10px}
  .nav b{font-size:.95rem;white-space:nowrap}
  .nav .r{gap:.7rem;font-size:.76rem}
}
@media(max-width:400px){
  .nav img{width:34px;height:34px;border-radius:9px}
  .nav b{font-size:.88rem}
  .nav .r{gap:.55rem;font-size:.72rem}
}
/* Below this the three links and the name cannot both fit on one line at any
   readable size. The glyph carries the identity on its own — it is the same
   mark as the favicon — and the links are what someone at this width came for. */
@media(max-width:345px){
  .nav b{display:none}
}