/* Shared by index, support, privacy and 404 — the masthead, the footer, the
   type scale and the breakpoints. It used to be pasted into each page, which
   is how support and privacy kept a pre-wordmark masthead for weeks after
   index moved on, and how index ended up the only page with a full link
   preview. One copy now; the pages carry only what is theirs alone.

   The filename gets a content hash from scripts/hash-web-assets.py, so
   _headers can cache it immutable for a year the same way it caches the art. */
:root{--bg:#080d16;--panel:#0f1726;--line:#1d2942;--ink:#f2f5fa;--dim:#8b9ab4;
--gold:#f5c542;--green:#4ade80;--blue:#60a5fa}
*{box-sizing:border-box}
/* The cast images are positioned to bleed past the edges of their stage —
   Peet leaning in from the left, Ferrox from the right — which is the
   intent. What was NOT intended is that the bleed made the whole document
   scrollable sideways: 5px of overhang at 320px, 11px at 390, 41px at 768.
   `clip` rather than `hidden` because hidden on one axis forces the other
   to auto and would turn the root into a scroll container. */
html{overflow-x:clip}
body{margin:0;overflow-x:clip;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}
img{max-width:100%;height:auto}
.dim{color:var(--dim)}
h1,h2,h3{letter-spacing:-.03em;margin:0;line-height:1.08}
.wrap{max-width:60rem;margin:0 auto;padding-left:1.75rem;padding-right:1.75rem}
.narrow{max-width:46rem}
.nav{display:flex;align-items:center;gap:.75rem;padding:1.1rem 1.75rem;max-width:60rem;margin:0 auto;position:relative;z-index:3}
.nav img{border-radius:10px;display:block}
.nav .r{margin-left:auto;display:flex;gap:1.4rem;font-size:.89rem}
.nav .r a{color:var(--dim)}.nav .r a:hover{color:var(--ink)}
/* Both marks in one bar. The game leads on its own site; the studio is a
   credit, and its pixel glyph only reads as a logo next to its name, so the
   two travel together. On narrow screens the name drops and the glyph stays,
   rather than the studio vanishing entirely as it used to. */
/* The build-14 wordmark carries its own wooden plank, so it gets no backdrop of
   its own: a second sign behind it is the stacking the art spec warns against.
   A shadow is enough to lift it off the hero. */
.peetmark{display:flex;align-items:center;filter:drop-shadow(0 2px 8px rgba(8,13,22,.55))}
.nav .r a.studio{display:inline-flex;align-items:center;gap:.42rem}
.nav .r a.studio img{border-radius:5px;display:block;opacity:.95}
.nav .r a.studio:hover img{opacity:1}
.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}
/* .wrap owns the sides and .sec owns top and bottom, and neither uses the
   `padding:` shorthand. Every section is class="wrap sec": with shorthands, .sec
   zeroed the sides on desktop, and the later .wrap rule in the 860px block
   zeroed top and bottom on phones, which ran each kicker into the section above
   it. Pages that use .wrap without .sec set their vertical padding inline. */
.sec{padding-top:4.5rem;padding-bottom:4.5rem}
.kicker{font:700 .72rem/1 -apple-system,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .85rem}
.card{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:1.4rem}
footer{border-top:1px solid var(--line);margin-top:2rem;padding:2.2rem 1.75rem 3.5rem;color:var(--dim);
font-size:.88rem;max-width:60rem;margin-left:auto;margin-right:auto;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
footer a{color:var(--dim)}footer a:hover{color:var(--ink)}
/* Social links (.ig, shared with the studio site): an inline SVG glyph in the link's
   own colour. Inline because the CSP allows no remote images; a plain link, not an
   embed, keeps "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}
/* 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}
details{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:.55rem;overflow:hidden}
summary{padding:.85rem 1.05rem;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-weight:700}
details[open] summary::after{content:"\2212"}
details p{padding:0 1.05rem 1.05rem;color:var(--dim);margin:0}
/* 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:640px){.sec{padding-top:3rem;padding-bottom:3rem}}
@media(max-width:860px){
  .nav{gap:.5rem;padding:.9rem 1.1rem}
  .nav b{font-size:.9rem}
  .nav .r{gap:1rem;font-size:.84rem}
  /* The bar cannot hold the wordmark, three links and the studio credit at
     phone widths — at 390px the glyph was clipped off the edge. The studio
     steps out of the NAV only; it keeps its own link and the copyright line in
     the footer, which is where the original design put it too. The subtitle
     goes as well: the wordmark says PEET and the h1 repeats the full title. */
  .nav .r a.studio{display:none}
  .nav b{display:none}
  .peetmark img{width:72px;height:40px}
  .nav .r{gap:.9rem}
  .wrap{padding-left:1.1rem;padding-right:1.1rem}
  /* stack the two-column blocks */
  .split{grid-template-columns:1fr !important;gap:1.75rem !important}
  /* the hero art is busiest in the middle — darken it further so text holds up */
  .heroscrim{background:linear-gradient(180deg,rgba(8,13,22,.80) 0%,rgba(8,13,22,.62) 38%,rgba(8,13,22,.98) 100%) !important}
  .herobox h1{font-size:clamp(1.75rem,8vw,2.4rem) !important}
  .herobox p{font-size:1rem !important}
}


@media(max-width:380px){
  /* iPhone SE and narrower: the bar is down to the wordmark and the three
     links, and even those need the wordmark to give up more width. */
  .peetmark img{width:58px;height:32px}
  .nav{gap:.4rem;padding:.8rem .8rem}
  .nav .r{gap:.72rem;font-size:.8rem}
}