@font-face{font-family:"Cardo";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/cardo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cardo";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/cardo-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cardo";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/cardo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo Narrow";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/archivo-narrow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo Narrow";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/archivo-narrow-latin-500-normal.woff2) format("woff2")}

/* Laid out as a publication. Every colour has a job:
   ink reads; paper holds it; sepia is ink for captions and the quieter lines;
   terracotta marks the one thing on a page that matters (here, the launch list).
   The engravings bring their own colour. Nothing else. */
:root{
  --paper:#EFE9DF;--ink:#231F1C;--sepia:#6B5B47;--rule:rgba(35,31,28,.16);--rule-strong:rgba(35,31,28,.55);
  --mark:#B2412C;--on-mark:#F7F3EB;
  --serif:"Cardo",Palatino,Georgia,serif;
  --sans:"Archivo Narrow",Helvetica,Arial,sans-serif;
  /* one spacing scale, used everywhere */
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:6rem;
  --edge:clamp(1.25rem,5vw,4.5rem);
  --wide:88rem;
  --measure:34rem;
  color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
:root:has(#dark:checked){
  --paper:#1A1714;--ink:#EDE6DA;--sepia:#B5A48D;--rule:rgba(237,230,218,.16);--rule-strong:rgba(237,230,218,.5);
  --mark:#E07A5F;--on-mark:#1A1714;color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:1.1875rem;line-height:1.6;font-variant-numeric:oldstyle-nums;
  font-kerning:normal;text-rendering:optimizeLegibility}
p{margin:0 0 var(--s2);text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--rule-strong);text-underline-offset:.2em}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
.mode-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule-strong)}
.mast-in{max-width:var(--wide);margin:0 auto;padding:var(--s3) var(--edge) var(--s2);
  display:flex;align-items:baseline;gap:var(--s4)}
.wordmark{font-family:var(--serif);font-size:1.75rem;line-height:1;letter-spacing:.005em;
  color:var(--ink);text-decoration:none;margin:0}
.masthead nav{display:flex;gap:var(--s3);margin-left:auto;font-family:var(--sans);font-size:1rem;letter-spacing:.02em}
.masthead nav a{text-decoration:none;padding-bottom:.2rem;border-bottom:1px solid transparent}
.masthead nav a:hover{border-bottom-color:var(--rule-strong)}
.masthead nav a[aria-current=page]{border-bottom-color:var(--ink)}
.mode{font-family:var(--sans);font-size:.9rem;letter-spacing:.02em;color:var(--sepia);cursor:pointer;
  padding-left:var(--s3);border-left:1px solid var(--rule);user-select:none;-webkit-user-select:none}
.mode:hover{color:var(--ink)}
.to-light{display:none}
:root:has(#dark:checked) .to-light{display:inline}
:root:has(#dark:checked) .to-dark{display:none}
:root:has(#dark:focus-visible) .mode{outline:2px solid var(--mark);outline-offset:3px}

main{max-width:var(--wide);margin:0 auto;padding:0 var(--edge)}

/* ---------- home: the opening ---------- */
.intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s5);
  align-items:start;padding:var(--s6) 0 var(--s5)}
.intro h1{margin:0 0 var(--s4);font-weight:400;font-size:clamp(2.1rem,1.2rem + 2.2vw,3.15rem);
  line-height:1.14;letter-spacing:-.01em;max-width:17em}
.intro-text{max-width:var(--measure)}
.intro-text h1{max-width:17em;width:calc(100% + 8rem)}
.lede{font-size:1.45rem;line-height:1.4;margin-bottom:var(--s3)}
.onward{display:flex;gap:var(--s3);margin-top:var(--s3);font-family:var(--sans);font-size:1rem;letter-spacing:.02em}

/* figures: the thing itself, framed by a hairline, captioned like a plate */
figure{margin:0}
figcaption{margin-top:var(--s2);font-family:var(--sans);font-size:.9rem;line-height:1.45;
  letter-spacing:.01em;color:var(--sepia);max-width:var(--measure);text-wrap:pretty}
figcaption i{font-family:var(--serif);font-size:1rem;letter-spacing:0;color:var(--ink)}
.card-fig{justify-self:end;width:100%;max-width:22rem}
.card-dark{display:none!important}
:root:has(#dark:checked) .card-light{display:none!important}
:root:has(#dark:checked) .card-dark{display:block!important}

.plate{padding:var(--s4) 0 0;border-top:1px solid var(--rule)}
.plate img{width:100%}

/* ---------- pages still on the older layout (redone after the home page is agreed) ---------- */
.page-head{padding:var(--s6) 0 var(--s4)}
.page-head h2,.split h2,.card-split h2{margin:0 0 var(--s2)}
.headline{font-size:clamp(2rem,1.2rem + 2vw,3rem);line-height:1.14;margin:0;max-width:18em}
.big{font-size:1.45rem;line-height:1.4}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.cols > div{max-width:var(--measure)}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s5);padding:var(--s6) 0}
.proof img{max-height:80vh;width:auto}
.doc{max-width:var(--measure);padding:var(--s6) 0 0}
.doc h1{margin:0 0 var(--s3);font-weight:400;font-size:clamp(2.1rem,1.2rem + 2.2vw,3.15rem);line-height:1.12}
.doc h2{margin:var(--s4) 0 var(--s1)}
.date{font-family:var(--sans);font-size:.9rem;color:var(--sepia);margin-top:var(--s3)}

/* labels: the sans doing its one job */
h2,h3{font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin:0 0 var(--s2);line-height:1.3}

/* ---------- footer ---------- */
.site-foot{margin-top:var(--s6);border-top:1px solid var(--rule-strong)}
.foot-in{max-width:var(--wide);margin:0 auto;padding:var(--s4) var(--edge) var(--s4);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,1.6fr);gap:var(--s4)}
.site-foot p,.site-foot li,.site-foot label{font-size:1rem;line-height:1.5}
.foot-id .wordmark{font-size:1.4rem;margin-bottom:var(--s2)}
.foot-id p{color:var(--sepia);margin-bottom:var(--s1)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:var(--s1)}
.site-foot li a{text-decoration:none}
.site-foot li a:hover{text-decoration:underline}
.notify label[for=email]{display:block;color:var(--sepia);margin-bottom:var(--s2)}
.field{display:flex;gap:var(--s1)}
.field input{flex:1;min-width:0;font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:1px solid var(--rule-strong);border-radius:0;padding:.55rem .7rem;-webkit-appearance:none;appearance:none}
.field input::placeholder{color:var(--sepia);opacity:.8}
.field input:focus{outline:none;border-color:var(--ink)}
.field button{font-family:var(--sans);font-weight:500;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-mark);background:var(--mark);border:0;border-radius:0;padding:0 1.1rem;cursor:pointer}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.foot-base{max-width:var(--wide);margin:0 auto;padding:0 var(--edge) var(--s4)}
.foot-base p{margin:0;padding-top:var(--s2);border-top:1px solid var(--rule);font-family:var(--sans);font-size:.9rem;color:var(--sepia)}

/* ---------- the reduction ---------- */
@media (max-width:56rem){
  body{font-size:1.125rem}
  .mast-in{flex-wrap:wrap;gap:var(--s2) var(--s3)}
  .masthead nav{order:3;width:100%;margin-left:0;overflow-x:auto;white-space:nowrap}
  .mode{margin-left:auto}
  .intro,.split,.cols{display:block}
  .intro{padding-top:var(--s5)}
  .intro-text h1{width:auto}
  .card-fig{margin:var(--s5) auto 0;max-width:20rem}
  .cols > div + div{margin-top:var(--s4)}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-id,.notify{grid-column:1 / -1}
}
.cols h3,.split h3{margin-top:var(--s4)}
.cols h3:first-child,.split h3:first-child{margin-top:0}

/* a personal note: one measured column, a little larger */
.note{max-width:var(--measure);padding:var(--s6) 0 0}
.note .headline{margin:0 0 var(--s4)}
.note p:not(.headline){font-size:1.3rem;line-height:1.58}
.about-lede{max-width:30em;margin-bottom:0}
.page-head h3{margin:0 0 var(--s1)}

/* =========================================================
   HOME: a first impression, set by hand.
   Cardo has a small x-height, so it is set larger and a little
   tighter than a default serif: 21px on 1.5 for reading, the
   measure held near 65 characters. Hierarchy is size and space.
   ========================================================= */
::selection{background:var(--ink);color:var(--paper)}
body{font-feature-settings:"kern","liga","clig","calt";hanging-punctuation:first allow-end}

.home main{max-width:var(--wide)}
.opening{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(4rem,7vw,7.5rem);
  align-items:start;padding:clamp(3.5rem,8vh,6rem) 0 clamp(5rem,12vh,8rem)}
.opening-text{max-width:35rem;padding-top:clamp(1rem,4vh,2.75rem)}
.opening h1{margin:0 0 2.75rem;font-weight:400;font-size:clamp(2.35rem,1.35rem + 2.1vw,3.35rem);
  line-height:1.09;letter-spacing:-.014em;max-width:none;width:auto;text-wrap:balance}
.opening .lede{font-size:clamp(1.45rem,1.15rem + .55vw,1.7rem);line-height:1.32;letter-spacing:-.004em;
  margin:0 0 1.6rem;max-width:24em;text-wrap:balance}
.opening-body{font-size:1.3125rem;line-height:1.5;max-width:33em;margin:0 0 2.25rem}
.onward{display:flex;gap:2rem;margin:0;font-family:var(--sans);font-size:.98rem;letter-spacing:.03em}
.onward a{text-decoration-color:var(--rule-strong)}

/* the card, close to the size of the phone it lives on, never cropped */
.card-life{margin:0;justify-self:end;width:min-content}
.card-life img{height:clamp(36rem,calc(100svh - 10.25rem),52rem);width:auto;max-width:none}
.card-life figcaption{max-width:none;margin-top:1rem}

/* the engraving, edge to edge: the richest thing on the page */
.plate-full{margin:0 calc(50% - 50vw);padding:0}
.plate-full img{width:100vw;max-width:none;height:auto}
.plate-full figcaption{max-width:var(--wide);margin:1.1rem auto 0;padding:0 var(--edge);box-sizing:border-box}
.plate-full figcaption span{display:block;max-width:35rem}
.home .site-foot{margin-top:clamp(6rem,14vh,9rem)}

@media (max-width:56rem){
  .opening{display:block;padding-top:2.5rem}
  .opening-text{padding-top:0}
  .card-life{margin-top:3.5rem;display:flex;flex-direction:column;align-items:center}
  .card-life img{height:auto;width:min(92vw,24rem)}
}

/* =========================================================
   A page with contents: the list stays put on the left,
   each section reads on its own.
   ========================================================= */
.with-contents{display:grid;grid-template-columns:13.5rem minmax(0,36rem);column-gap:clamp(3.5rem,7vw,7rem);
  padding:clamp(3.5rem,8vh,6rem) 0 0}
.contents-head{grid-column:2;margin-bottom:clamp(3rem,7vh,4.5rem)}
.contents-head h2{margin:0 0 1rem}
.contents-head .headline{font-size:clamp(2.2rem,1.3rem + 1.9vw,3.1rem);line-height:1.1;letter-spacing:-.012em;max-width:15em}
.contents{grid-column:1;grid-row:1 / span 2;align-self:start;position:sticky;top:2.5rem;
  padding-top:.35rem}
.contents-label{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sepia);margin:0 0 1rem}
.contents ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.contents li{margin:0}
.contents a{display:block;padding:.42rem 0 .42rem 1rem;margin-left:-1px;border-left:1px solid transparent;
  font-family:var(--sans);font-size:1rem;letter-spacing:.02em;line-height:1.3;text-decoration:none;color:var(--sepia)}
.contents a:hover{color:var(--ink);border-left-color:var(--rule-strong)}
.sections{grid-column:2}
.sections section{scroll-margin-top:2.5rem;padding-bottom:clamp(3.25rem,7vh,4.5rem)}
.sections section:target .sec-title{color:var(--ink)}
.sections section + section{padding-top:clamp(3.25rem,7vh,4.5rem);border-top:1px solid var(--rule)}
.sec-title{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.2;letter-spacing:-.006em;
  text-transform:none;color:var(--ink);margin:0 0 1.1rem}
.sections p{font-size:1.3125rem;line-height:1.5;max-width:33em}
.sections p:last-child{margin-bottom:0}

@media (max-width:56rem){
  .with-contents{display:block;padding-top:2.5rem}
  .contents{position:static;margin-bottom:3rem}
  .contents-head{margin-bottom:2rem}
  .sections p{font-size:1.1875rem}
}

/* the section you jumped to is marked in the contents, without a script */
.with-contents:has(#answer:target) .contents a[href="#answer"]{color:var(--ink);border-left-color:var(--ink)}
.with-contents:has(#wrong:target) .contents a[href="#wrong"]{color:var(--ink);border-left-color:var(--ink)}
.with-contents:has(#make:target) .contents a[href="#make"]{color:var(--ink);border-left-color:var(--ink)}
.with-contents:has(#free:target) .contents a[href="#free"]{color:var(--ink);border-left-color:var(--ink)}
.with-contents:has(#departments:target) .contents a[href="#departments"]{color:var(--ink);border-left-color:var(--ink)}
.with-contents:has(#hold:target) .contents a[href="#hold"]{color:var(--ink);border-left-color:var(--ink)}

/* =========================================================
   HOME, redrawn as a publisher's front page.
   One thing is large (the line); everything else is small
   beside it. A twelve-column grid, sections of different
   widths, and room left empty on purpose.
   ========================================================= */
.utility{border-bottom:1px solid var(--rule)}
.utility-in{max-width:var(--wide);margin:0 auto;padding:.55rem var(--edge);display:flex;justify-content:space-between;
  align-items:baseline;font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;color:var(--sepia)}
.utility-in p{margin:0}
.utility-right{display:flex;gap:1.5rem;align-items:baseline}
.utility .mode{padding-left:1.5rem;font-size:.8rem}
.masthead{border-bottom:1px solid var(--ink)}
.mast-in{padding:1.35rem var(--edge) 1.15rem;align-items:baseline}
.wordmark{font-size:2.1rem;letter-spacing:-.005em}
.masthead nav{gap:2rem;font-size:1.02rem}

.home main{max-width:var(--wide);padding:0 var(--edge)}
.h-open{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;
  padding:clamp(3rem,7vh,4.5rem) 0 clamp(5rem,12vh,7.5rem)}
.h-line{grid-column:1 / span 8;grid-row:1;margin:0;font-weight:400;
  font-size:clamp(3.1rem,.9rem + 3.75vw,5.4rem);line-height:1.01;letter-spacing:-.022em;text-wrap:balance}
.h-text{grid-column:1 / span 5;grid-row:2;margin-top:clamp(2.5rem,6vh,3.75rem);padding-top:1.1rem;border-top:1px solid var(--ink)}
.h-lede{font-size:1.5rem;line-height:1.3;letter-spacing:-.004em;margin:0 0 1rem;text-wrap:balance}
.h-body{font-size:1.3125rem;line-height:1.5;margin:0 0 1.75rem;max-width:32em}
.h-onward{display:flex;gap:2rem;margin:0;font-family:var(--sans);font-size:.98rem;letter-spacing:.03em}
.h-card{grid-column:9 / span 4;grid-row:1 / span 2;justify-self:end;margin:0;width:min(24.4rem,100%)}
.h-card img{width:100%;height:auto}
.h-card figcaption{margin-top:.9rem}

/* the plate: caption in the margin, the engraving running off the right edge */
.h-plate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;
  border-top:1px solid var(--ink);padding-top:1.1rem}
.h-plate-cap{grid-column:1 / span 3;margin:0;max-width:none;font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--sepia)}
.h-plate-cap p{margin:0 0 .9rem;text-wrap:pretty}
.h-label{font-weight:500;font-size:.78rem!important;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:1.1rem!important}
.h-credit{font-size:.85rem;margin-top:1.5rem!important}
.h-plate-img{grid-column:4 / span 9;margin-right:calc(-1 * var(--edge) - max(0px,(100vw - var(--wide)) / 2))}
.h-plate-img img{width:100%;height:auto}

/* a section that is mostly room */
.h-quiet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;
  padding:clamp(9rem,26vh,15rem) 0 clamp(7rem,20vh,12rem)}
.h-quiet p{grid-column:4 / span 9;margin:0;font-size:clamp(2rem,1.2rem + 1.5vw,2.7rem);line-height:1.15;letter-spacing:-.012em}

/* the footer, set in reverse: ink as the ground */
.site-foot{background:var(--ink);color:var(--paper);border-top:0;margin-top:0}
.site-foot h2{color:var(--paper)}
.site-foot a{color:var(--paper);text-decoration-color:rgba(239,233,223,.45)}
.foot-id p,.notify label[for=email],.foot-base p{color:rgba(239,233,223,.7)}
.foot-id .wordmark{color:var(--paper)}
.foot-base p{border-top-color:rgba(239,233,223,.18)}
.field input{border-color:rgba(239,233,223,.5);color:var(--paper)}
.field input::placeholder{color:rgba(239,233,223,.6)}
.field input:focus{border-color:var(--paper)}
:root:has(#dark:checked) .site-foot{background:#0F0D0B;color:var(--ink)}
:root:has(#dark:checked) .site-foot h2,:root:has(#dark:checked) .site-foot a,:root:has(#dark:checked) .foot-id .wordmark{color:var(--ink)}
:root:has(#dark:checked) .foot-id p,:root:has(#dark:checked) .notify label[for=email],:root:has(#dark:checked) .foot-base p{color:var(--sepia)}
:root:has(#dark:checked) .field input{color:var(--ink);border-color:var(--rule-strong)}

@media (max-width:56rem){
  .utility-in > p:first-child{display:none}
  .h-open,.h-plate,.h-quiet{display:block}
  .h-line{font-size:2.6rem;line-height:1.05}
  .h-card{margin:3rem auto 0;width:min(92vw,24.4rem)}
  .h-plate-img{margin:1.5rem calc(-1 * var(--edge)) 0}
  .h-quiet{padding:6rem 0}
}
.h-left{grid-column:1 / span 8}
.h-line{grid-column:auto;grid-row:auto}
.h-text{grid-column:auto;grid-row:auto;max-width:31rem}
.h-card{grid-row:1}
.signed{font-style:italic;margin-top:-.25rem}
.with-contents:has(#read:target) .contents a[href="#read"],.with-contents:has(#thanks:target) .contents a[href="#thanks"]{color:var(--ink);border-left-color:var(--ink)}

/* ---------- the working card ---------- */
.card-frame{display:block;width:360px;height:760px;border:0;border-radius:38px;background:transparent}
.h-card{width:auto}

/* ---------- how this card was made ---------- */
.h-made{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;
  border-top:1px solid var(--ink);padding:1.1rem 0 clamp(5rem,12vh,7.5rem)}
.h-made-head{grid-column:1 / span 4}
.h-made-head p{font-size:1.125rem;line-height:1.55;color:var(--ink);max-width:24em}
.h-made-lede{font-size:1.45rem!important;line-height:1.3!important;margin:0 0 1.25rem}
.h-made-list{grid-column:6 / span 7}
.h-list-head{margin:0 0 .5rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
.ours-head{margin-top:2.75rem;color:var(--mark)}
.h-made-list dl{margin:0;display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);column-gap:2rem}
.h-made-list dt{font-family:var(--serif);font-size:1.125rem;line-height:1.4;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.h-made-list dd{margin:0;font-size:1.125rem;line-height:1.45;color:var(--sepia);padding:.85rem 0;border-bottom:1px solid var(--rule)}
.h-made-list dd i{color:var(--ink)}
.ours dt::before{content:"";display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--mark);
  margin:0 .55em .12em 0;vertical-align:middle}

/* ---------- the whole sheet, to move around ---------- */
.h-sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;border-top:1px solid var(--ink);padding-top:1.1rem}
.h-sheet-head{grid-column:1 / span 4}
.h-sheet-head p{font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--sepia);max-width:22rem}
.z-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.z-controls{grid-column:5 / span 8;justify-self:end;align-self:end;display:flex;gap:1.5rem;margin:0 0 .8rem;
  font-family:var(--sans);font-size:.95rem;letter-spacing:.02em}
.z-controls label{cursor:pointer;color:var(--sepia);padding-bottom:.15rem;border-bottom:1px solid transparent}
.z-controls label:hover{color:var(--ink)}
#z1:checked ~ .z-controls label[for=z1],#z2:checked ~ .z-controls label[for=z2],#z3:checked ~ .z-controls label[for=z3]{color:var(--ink);border-bottom-color:var(--ink)}
.z-input:focus-visible ~ .z-controls{outline:2px solid var(--mark);outline-offset:4px}
.pan{grid-column:1 / -1;height:min(78vh,52rem);overflow:auto;border:1px solid var(--rule);background:#2a2420;
  overscroll-behavior:contain;cursor:grab}
.pan:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
.pan img{display:block;width:100%;height:auto;max-width:none}
#z2:checked ~ .pan img{width:2200px}
#z3:checked ~ .pan img{width:3300px}
.h-sheet .h-credit{grid-column:1 / -1;font-family:var(--sans);font-size:.85rem;color:var(--sepia);margin:.8rem 0 0}
.h-quiet{padding-top:clamp(8rem,22vh,13rem)}

@media (max-width:56rem){
  .h-made,.h-sheet{display:block}
  .h-made-list{margin-top:2.5rem}
  .h-made-list dl{grid-template-columns:1fr}
  .h-made-list dt{border-bottom:0;padding-bottom:.2rem}
  .h-made-list dd{padding-top:0}
  .z-controls{margin-top:1.5rem}
  .card-frame{margin:0 auto}
}
.h-label{font-family:var(--sans)}
.h-made-list dl{column-gap:0}
.h-made-list dt{padding-right:2rem}
.h-card{width:min-content}

/* the sheet: three fixed views of the same map, same frame, switched without a script */
.views{grid-column:1 / -1;position:relative;aspect-ratio:1910 / 1140;border:1px solid var(--rule);background:#2a2420;overflow:hidden}
.views .v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
#z1:checked ~ .views .v1,#z2:checked ~ .views .v2,#z3:checked ~ .views .v3{visibility:visible}

/* the map you can move */
.v-controls{grid-column:5 / span 8;justify-self:end;align-self:end;display:flex;gap:1.5rem;margin:0 0 .8rem}
.v-controls button{font:inherit;font-family:var(--sans);font-size:.95rem;letter-spacing:.02em;color:var(--sepia);
  background:none;border:0;border-bottom:1px solid transparent;padding:0 0 .15rem;cursor:pointer;border-radius:0}
.v-controls button:hover{color:var(--ink);border-bottom-color:var(--rule-strong)}
.v-controls button[data-act=in],.v-controls button[data-act=out]{font-family:var(--serif);font-size:1.25rem;line-height:1;min-width:1.2rem}
.v-stage{grid-column:1 / -1;aspect-ratio:1910 / 1140;overflow:auto;border:1px solid var(--rule);background:#2a2420;
  cursor:grab;touch-action:pan-x pan-y;overscroll-behavior:contain;scrollbar-width:thin;user-select:none;-webkit-user-select:none}
.v-stage.grabbing{cursor:grabbing}
.v-stage:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
.v-wrap{position:relative;width:100%}
.v-wrap img{display:block;width:100%;height:auto;max-width:none;pointer-events:none}
.v-ring{position:absolute;left:38.43%;top:37.19%;width:3.2%;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.v-ring circle{fill:none;stroke:var(--mark);stroke-width:5;vector-effect:non-scaling-stroke}