/* F · Stack — the supporting pages: how it works, help, gifts, about, privacy, terms and the brand guide. Same tokens
   (f-tokens.css), type roles, buttons, cards, FAQ and closing panel as the homepage and the product pages (base.css,
   f.css); only the page patterns below are new, and they use the six sizes, three weights and the 8 px scale only.
   Loads after f.css. */
.dir-f.page{--pc:var(--ink)}

/* ---------------------------------------------------------------- page header: a label, the title, one line, the action */
.pg-hero{padding-block:var(--s6) var(--s5)}
.pg-hero-grid{display:grid;gap:var(--s3)}
.pg-label{font:var(--w-2) var(--fs-1)/1.3 var(--font-body);color:var(--muted)}
.pg-h1{max-width:13em;font:var(--w-3) var(--fs-5)/1 var(--font-display);letter-spacing:var(--display-track)}
.pg-hero .t-lead{max-width:32em}
.pg-hero .actions{margin-top:var(--s1)}
.pg-hero .facts{max-width:32em}
@media (min-width:1024px){
  .pg-hero{padding-block:var(--s7) var(--s6)}
  .pg-hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .pg-hero-grid>*{grid-column:1/10}
}
/* the header's section follows on white: a hairline keeps the two apart */
.pg-hero+.section{border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- contents: pills that jump to a section */
.toc{display:flex;flex-wrap:wrap;gap:var(--s1)}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);border:1px solid var(--line);border-radius:var(--btn-radius);
  text-decoration:none;transition:border-color .2s,background-color .2s,color .2s}
@media (hover:hover) and (pointer:fine){ .toc a:hover{border-color:var(--text)} }
.toc a.is-on{background:var(--text);border-color:var(--text);color:var(--bg)}

/* ---------------------------------------------------------------- two columns: contents on the left, the page on the right */
.side-grid{display:grid;gap:var(--s5)}
.side-body{display:grid;gap:var(--s7);min-width:0}
.side-sec{scroll-margin-top:calc(var(--stick-top) + var(--s3))}
.side-sec>h2{margin-bottom:var(--s3)}
.side-sec>p{max-width:36em}
.side-sec>p+p{margin-top:var(--s2)}
@media (min-width:1024px){
  .side-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .side-nav{grid-column:1/4;position:sticky;top:calc(var(--stick-top) + var(--s4))}
  .side-nav .toc{flex-direction:column;align-items:flex-start}
  .side-body{grid-column:5/-1}
}

/* ---------------------------------------------------------------- contact: one card, one way to reach us */
.contact{display:grid;gap:var(--s3);padding:var(--s4);border-radius:var(--radius);background:var(--surface)}
.contact h3{font:var(--w-3) var(--fs-4)/1.05 var(--font-display);letter-spacing:var(--h-track)}
.contact p{max-width:34em;color:var(--muted)}
.contact ol{display:grid;gap:var(--s1);counter-reset:c}
.contact li{counter-increment:c;display:grid;grid-template-columns:var(--s4) minmax(0,1fr);gap:var(--s1)}
.contact li::before{content:counter(c) ".";font-weight:var(--w-2);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- how it works: one row per step, a picture beside it */
.how-rows{display:grid;gap:var(--s7)}
.how-row{display:grid;gap:var(--s4);align-items:center}
.how-copy{display:grid;gap:var(--s2);align-content:start}
.how-n{font:var(--w-3) var(--fs-5)/1 var(--font-display);letter-spacing:var(--display-track);color:var(--sc,var(--text))}
.how-copy h2{font:var(--w-3) var(--fs-4)/1.05 var(--font-display);letter-spacing:var(--h-track)}
.how-copy p{max-width:32em;color:var(--muted)}
.ticks{display:grid;gap:var(--s1);margin-top:var(--s1)}
.ticks li{position:relative;padding-left:var(--s4)}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:var(--s2);height:var(--s1);border-left:2px solid var(--sc,var(--text));border-bottom:2px solid var(--sc,var(--text));transform:rotate(-45deg) translateY(-2px)}
.how-media{display:grid;place-items:center;padding:var(--s5) var(--s3);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.how-media.wide{padding:0}
.how-media.wide img{width:100%;height:auto}
.shot{width:min(100%,300px);height:auto;border-radius:var(--radius);box-shadow:0 24px 48px -24px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.06)}
@media (min-width:1024px){
  .how-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .how-copy{grid-column:1/6}
  .how-media{grid-column:7/-1;min-height:560px}
  .how-media.wide{min-height:0}
  .how-row:nth-child(even) .how-copy{grid-column:8/-1;grid-row:1}
  .how-row:nth-child(even) .how-media{grid-column:1/7;grid-row:1}
}

/* ---------------------------------------------------------------- policies (privacy, terms): readable prose */
.prose{max-width:40em}
.prose h2{margin-top:var(--s6);font:var(--w-3) var(--fs-4)/1.1 var(--font-display);letter-spacing:var(--h-track);scroll-margin-top:calc(var(--stick-top) + var(--s3))}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s4);font:var(--w-2) var(--fs-3)/1.3 var(--font-body)}
.prose p,.prose ul{margin-top:var(--s2)}
.prose ul{padding-left:var(--s3);list-style:disc}
.prose li+li{margin-top:var(--s1)}
.prose li::marker{color:var(--muted)}
.prose a{font-weight:var(--w-2);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.28em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.updated{font-size:var(--fs-1);color:var(--muted)}

/* ---------------------------------------------------------------- about: three facts with their pictures */
.made{display:grid;gap:var(--s5)}
.made-item{display:grid;gap:var(--s2);align-content:start}
.made-media{display:block;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.made-media img{width:100%;height:100%;object-fit:cover}
.made-item h3{margin-top:var(--s1)}
.made-item p{max-width:28em;color:var(--muted)}
@media (min-width:768px){ .made{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)} }
.credits{display:grid;gap:var(--s2);max-width:40em;color:var(--muted)}

/* a picture that must not be cropped (a proof, a cut-out tile): shown whole on a soft card */
.page .detail-media.cut{display:grid;place-items:center;aspect-ratio:auto;padding:var(--s3);background:var(--surface)}
.page .detail-media.cut img{width:100%;height:auto;object-fit:contain}

/* ---------------------------------------------------------------- gifts: who it's for (the cards are f.css's .gift) */
.gift-grid .gift{min-height:100%}

/* ---------------------------------------------------------------- the brand guide */
.bg-grid{display:grid;gap:var(--s3)}
.bg-note{max-width:36em;color:var(--muted)}
.bg-h3{margin-top:var(--s5);margin-bottom:var(--s2)}
/* logo */
.logos{display:grid;gap:var(--s2)}
@media (min-width:768px){ .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)} }
.logo-tile{display:grid;place-items:center;aspect-ratio:3/2;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.logo-tile.ink{background:var(--ink);border-color:var(--ink);color:#FFFFFF;--mark-top:#FFFFFF}
.logo-tile.city{background:var(--city);border-color:var(--city);color:#FFFFFF;--mark-top:#FFFFFF}
.logo-tile .logo{margin:0;font-size:var(--fs-3);pointer-events:none}
.logo-tile .logo svg{width:40px;height:40px}
.logo-big{width:96px;height:96px}
/* colour */
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
@media (min-width:768px){ .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)} }
.swatch{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.swatch-chip{display:flex;align-items:flex-end;aspect-ratio:3/2;padding:var(--s2);background:var(--c);color:var(--on,#FFFFFF);font:var(--w-3) var(--fs-3)/1 var(--font-display)}
.swatch figcaption{display:grid;gap:var(--s1);padding:var(--s2)}
.swatch figcaption b{font-weight:var(--w-2)}
.swatch figcaption span{font-size:var(--fs-1);color:var(--muted);font-variant-numeric:tabular-nums}
/* type */
.type-list{border-bottom:1px solid var(--line)}
.type-row{display:grid;gap:var(--s1);padding-block:var(--s3);border-top:1px solid var(--line);min-width:0}
.type-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--fs-1);color:var(--muted);font-variant-numeric:tabular-nums}
.type-meta b{color:var(--text);font-weight:var(--w-2)}
.type-sample{overflow-wrap:anywhere}
.ts-6{font:var(--w-3) var(--fs-6)/var(--lh-display) var(--font-display);letter-spacing:var(--display-track)}
.ts-5{font:var(--w-3) var(--fs-5)/1 var(--font-display);letter-spacing:var(--display-track)}
.ts-4{font:var(--w-3) var(--fs-4)/1.05 var(--font-display);letter-spacing:var(--h-track)}
.ts-3{font:var(--w-1) var(--fs-3)/1.42 var(--font-body)}
.ts-2{font:var(--w-1) var(--fs-2)/var(--lh-body) var(--font-body)}
.ts-1{font:var(--w-1) var(--fs-1)/1.45 var(--font-body)}
.weights{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--fs-3)}
/* spacing */
.space-list{display:grid;gap:var(--s2)}
.space-row{display:grid;grid-template-columns:7em minmax(0,1fr);align-items:center;gap:var(--s2);font-size:var(--fs-1);font-variant-numeric:tabular-nums}
.space-bar{display:block;height:var(--s2);width:var(--w);max-width:100%;border-radius:2px;background:var(--text)}
/* shape + components */
.demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.demo-box{display:grid;place-items:center;padding:var(--s4);border-radius:var(--radius);background:var(--surface)}
.demo-box.ink{background:var(--ink);color:#FFFFFF}
.demo-box.city{background:var(--city);color:#FFFFFF}
.demo-card{width:min(100%,280px)}
/* do / don't */
.dodont{display:grid;gap:var(--s3)}
@media (min-width:768px){ .dodont{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)} }
.dd{padding:var(--s4);border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 6px 0 var(--dd,var(--golf))}
.dd.no{--dd:var(--race)}
.dd h3{margin-bottom:var(--s2)}
.dd ul{display:grid;gap:var(--s1);padding-left:var(--s3);list-style:disc}
.dd li::marker{color:var(--muted)}
/* the closing panel's product cards, shown as a demo: f.css places them in the closing row's columns on desktop */
.bg-grid .kinds{grid-column:auto}