/* The preparation guide popup (guide.js). Scoped to .gd-* so it can open over
   any view: home, the studio, the gallery. 2026-10-15: night sheet, one
   chapter per page, drawings with rings and elbow leaders (see guide.js). */
html.gd-lock{overflow:hidden;}
.gd-overlay{
  --gd-night:#111213; --gd-night-2:#1A1B1C; --gd-chalk:#F1F0EC; --gd-ash:#8F8F8A; --gd-line:rgba(241,240,236,.16);
  --gd-display:'Anybody','Arial Narrow',sans-serif; --gd-label:'Michroma','IBM Plex Sans',sans-serif;
  --gd-body:'IBM Plex Sans','IBM Plex Sans Thai',-apple-system,'Segoe UI',sans-serif; --gd-mono:'IBM Plex Mono',Consolas,monospace;
  --gd-ease:cubic-bezier(.16,.84,.24,1);
  position:fixed;inset:0;z-index:9500;background:var(--gd-night);color:var(--gd-chalk);
  font-family:var(--gd-body);opacity:0;transition:opacity .25s ease;
}
.gd-overlay[hidden]{display:none;}
.gd-overlay.on{opacity:1;}
.gd-overlay *,.gd-overlay *::before,.gd-overlay *::after{box-sizing:border-box;}
.gd-sheet{position:absolute;inset:0;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}

/* ---- top bar ---- */
.gd-bar{flex:none;display:flex;align-items:center;gap:20px;padding:16px clamp(16px,4vw,56px);border-bottom:1px solid var(--gd-line);}
.gd-brand{margin:0;flex:1;display:flex;align-items:center;gap:14px;font:400 10px/1 var(--gd-label);letter-spacing:.24em;text-transform:uppercase;}
.gd-brand svg{width:30px;height:auto;flex:none;}
.gd-count{font:400 10px/1 var(--gd-label);letter-spacing:.2em;color:var(--gd-ash);font-variant-numeric:tabular-nums;}
.gd-close{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--gd-line);background:none;color:var(--gd-chalk);font-size:14px;cursor:pointer;transition:background-color .2s,color .2s;}
.gd-close:hover{background:var(--gd-chalk);color:var(--gd-night);}
.gd-overlay button:focus-visible,.gd-overlay input:focus-visible+.gd-ftag{outline:1px solid var(--gd-chalk);outline-offset:3px;}

/* ---- pages ---- */
.gd-pages{position:relative;flex:1;min-height:0;}
.gd-page{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.gd-page[hidden]{display:none;}
/* the page fits the screen: header rows take what they need, the drawing
   gets the rest and sizes itself to that box (container query units) */
.gd-in{position:relative;max-width:1440px;height:100%;margin:0 auto;padding:clamp(16px,3vh,36px) clamp(16px,4vw,56px) clamp(14px,2.6vh,28px);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,22vw,300px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hd hd" "main side";gap:clamp(14px,2.4vh,28px) clamp(56px,6vw,96px);}
.gd-enter .gd-in{animation:gdIn .45s var(--gd-ease) both;}
.gd-enter .gd-h{animation:gdStretch 1.3s var(--gd-ease) both;}
@keyframes gdIn{from{opacity:.25;transform:translateX(18px);}to{opacity:1;transform:none;}}
@keyframes gdStretch{from{font-variation-settings:"wdth" 70,"wght" 300;}to{font-variation-settings:"wdth" 125,"wght" 850;}}

.gd-hd{grid-area:hd;display:grid;grid-template-columns:auto minmax(0,440px);align-items:end;gap:10px clamp(32px,5vw,80px);}
.gd-tag{grid-column:1/-1;margin:0;font:400 10px/1 var(--gd-label);letter-spacing:.24em;text-transform:uppercase;color:var(--gd-ash);}
.gd-h{margin:0;font-family:var(--gd-display);font-weight:850;font-size:clamp(34px,min(6.4vw,8.6vh),88px);line-height:.92;
  font-variation-settings:"wdth" 125,"wght" 850;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance;}
.gd-lead{margin:0;font:300 clamp(15px,1.25vw,18px)/1.5 var(--gd-body);color:var(--gd-chalk);opacity:.78;max-width:46ch;}

.gd-main{grid-area:main;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;}
.gd-stage{flex:1;min-height:0;container-type:size;}
.gd-ftop{margin:0;font:400 9.5px/1 var(--gd-label);letter-spacing:.24em;text-transform:uppercase;color:var(--gd-ash);}
.gd-fig{position:relative;overflow:hidden;background:#F4F3EF;width:100%;}
.gd-stage>.gd-fig{width:min(100cqw, calc(100cqh * var(--ar, 1.39)));}
.gd-stage>.gd-mock{width:100%;height:100%;aspect-ratio:auto !important;}
.gd-fig svg{display:block;width:100%;height:100%;}

.gd-side{grid-area:side;min-width:0;min-height:0;display:flex;flex-direction:column;gap:20px;padding-top:20px;}
.gd-notes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:clamp(18px,3vh,30px);counter-reset:gdn;}
.gd-notes li{display:flex;flex-direction:column;gap:7px;counter-increment:gdn;}
.gd-notes b{font:400 10.5px/1.35 var(--gd-label);letter-spacing:.18em;text-transform:uppercase;}
.gd-notes span{font:300 15.5px/1.4 var(--gd-body);opacity:.72;}
.gd-inset{margin:auto 0 0;display:flex;flex-direction:column;gap:8px;}
.gd-inset figcaption,.gd-ftag{font:400 9.5px/1 var(--gd-label);letter-spacing:.24em;text-transform:uppercase;color:var(--gd-ash);}
.gd-inset .gd-fig{width:min(100%, calc(19dvh * var(--ar, 1.39)));}
.gd-noinset .gd-inset{display:none;}
.gd-small .gd-fig{width:min(53%, calc(10dvh * var(--ar, 1.39)));}
/* phones: the "as modelled" view under the drawing, swapped in by a chip */
.gd-bad{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;}
.gd-showbad .gd-bad{opacity:1;}
.gd-swap{display:none;position:absolute;right:10px;bottom:10px;padding:9px 12px;border:0;border-radius:999px;background:var(--gd-night);color:var(--gd-chalk);font:400 9px/1 var(--gd-label);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;}
.gd-swap span+span,.gd-swap[aria-pressed="true"] span:first-child{display:none;}
.gd-swap[aria-pressed="true"] span+span{display:inline;}

/* leaders, drawn by guide.js into one svg over the page */
.gd-wires{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;}
.gd-wires .gd-halo{fill:none;stroke:#111213;stroke-opacity:.45;stroke-width:3.5;}
.gd-wires .gd-wire{fill:none;stroke:var(--gd-chalk);stroke-width:1.2;}
.gd-wires .gd-dot{fill:var(--gd-chalk);}
.gd-wires .gd-numring{fill:#111213;stroke:var(--gd-chalk);stroke-width:1;}
.gd-wires .gd-num{fill:var(--gd-chalk);font:400 10px var(--gd-label);text-anchor:middle;}

/* eye-level line (camera) and the 1920 px dimension (size) */
.gd-hz{position:absolute;left:0;right:0;border-top:1px dashed rgba(17,18,19,.6);pointer-events:none;}
.gd-hz em{position:absolute;left:10px;bottom:6px;font:400 9px/1 var(--gd-label);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#3E3F3B;}
.gd-dim{position:absolute;left:16px;right:16px;top:18px;height:12px;border-left:1px solid #262624;border-right:1px solid #262624;}
.gd-dim::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid #262624;}
.gd-dim b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:3px 10px;background:#F4F3EF;font:500 12px/1 var(--gd-mono);letter-spacing:.08em;color:#191A18;}

/* shadows: one drawing split in two, drag to compare */
.gd-split>svg,.gd-on{position:absolute;inset:0;}
.gd-on{clip-path:inset(0 0 0 var(--cut));}
.gd-handle{position:absolute;top:0;bottom:0;left:var(--cut);width:0;border-left:2px solid var(--gd-chalk);pointer-events:none;}
.gd-handle::after{content:"";position:absolute;left:-19px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:var(--gd-night);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M14 12l-6 6 6 6M22 12l6 6-6 6' fill='none' stroke='%23F1F0EC' stroke-width='1.5'/%3E%3C/svg%3E");}
.gd-split input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;}
.gd-split .gd-ftag{position:absolute;top:12px;padding:6px 9px;background:var(--gd-night);color:var(--gd-chalk);pointer-events:none;}
.gd-split .gd-l{left:12px;}
.gd-split .gd-r{right:12px;}

/* notes: the Notes box, as typed and as recommended */
.gd-mock{background:var(--gd-night-2);border:1px solid var(--gd-line);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(18px,4%,44px);}
.gd-field{display:flex;flex-direction:column;gap:10px;}
.gd-k{font:400 9.5px/1 var(--gd-label);letter-spacing:.24em;text-transform:uppercase;color:var(--gd-ash);}
.gd-field p{margin:0;border:1px solid var(--gd-line);padding:14px 18px;font:300 clamp(16px,1.6vw,22px)/1.4 var(--gd-body);}
.gd-weak{color:var(--gd-ash);}
.gd-good p{border-color:var(--gd-chalk);}
.gd-field i{display:inline-block;width:2px;height:1.1em;background:var(--gd-chalk);vertical-align:-.18em;margin-left:3px;animation:gdBlink 1.1s steps(1) infinite;}
@keyframes gdBlink{50%{opacity:0;}}

/* contents page */
.gd-cover .gd-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"hd main" "index main";}
.gd-cover .gd-hd{grid-template-columns:minmax(0,1fr);}
.gd-cover .gd-index{align-self:end;}
.gd-cover .gd-stage{display:flex;align-items:flex-end;}
.gd-xl{font-size:clamp(38px,min(6vw,9.5vh),104px);}
.gd-index{grid-area:index;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;border-top:1px solid var(--gd-line);}
.gd-index button{width:100%;display:flex;flex-direction:column;gap:5px;padding:11px 0;background:none;border:0;border-bottom:1px solid var(--gd-line);color:var(--gd-chalk);text-align:left;cursor:pointer;}
.gd-index b{font:400 9.5px/1.3 var(--gd-label);letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--gd-ash);transition:color .2s;}
.gd-index span{font:300 15px/1.3 var(--gd-body);}
.gd-index button:hover b{color:var(--gd-chalk);}

/* last page */
.gd-last .gd-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"hd" "list" "sign";}
.gd-expect{grid-area:list;margin:clamp(12px,4vh,48px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid var(--gd-line);padding-top:28px;}
.gd-expect li{display:flex;flex-direction:column;gap:10px;}
.gd-expect svg{width:40px;height:40px;fill:none;stroke:var(--gd-chalk);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px;}
.gd-expect b{font:400 11px/1.35 var(--gd-label);letter-spacing:.18em;text-transform:uppercase;font-weight:400;}
.gd-expect span{font:300 16px/1.4 var(--gd-body);opacity:.72;}
.gd-sign{grid-area:sign;margin:clamp(24px,8vh,96px) 0 0;display:flex;align-items:center;gap:16px;font:400 13px/1 var(--gd-label);letter-spacing:.28em;text-transform:uppercase;}
.gd-sign svg{width:56px;height:auto;}

/* ---- bottom nav ---- */
.gd-nav{flex:none;display:flex;align-items:center;gap:16px;padding:12px clamp(16px,4vw,56px);border-top:1px solid var(--gd-line);}
.gd-tabs{flex:1;min-width:0;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;}
.gd-tabs::-webkit-scrollbar{display:none;}
.gd-tabs button{flex:none;padding:10px 0;background:none;border:0;border-bottom:1px solid transparent;color:var(--gd-ash);font:400 9.5px/1 var(--gd-label);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s;}
.gd-tabs button:hover{color:var(--gd-chalk);}
.gd-tabs button[aria-current]{color:var(--gd-chalk);border-bottom-color:var(--gd-chalk);}
.gd-nav{position:relative;}
.gd-prog{position:absolute;left:0;right:0;top:-1px;height:2px;}
.gd-prog i{display:block;height:100%;width:0;background:var(--gd-chalk);transition:width .45s var(--gd-ease);}
.gd-back{flex:none;display:flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 16px;border:1px solid var(--gd-line);border-radius:999px;background:none;color:var(--gd-chalk);
  font:400 9.5px/1 var(--gd-label);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,opacity .2s;}
.gd-back:hover:not(:disabled){border-color:var(--gd-chalk);}
.gd-back:disabled{opacity:.25;cursor:default;}
.gd-back i,.gd-go i{width:8px;height:8px;border-left:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);}
.gd-go{flex:none;display:flex;align-items:center;gap:12px;height:52px;padding:0 24px 0 26px;border:0;border-radius:999px;background:var(--gd-chalk);color:var(--gd-night);cursor:pointer;transition:transform .2s;}
.gd-go-k{font:400 9px/1 var(--gd-label);letter-spacing:.2em;text-transform:uppercase;opacity:.55;}
.gd-go b{font:400 11px/1 var(--gd-label);letter-spacing:.18em;text-transform:uppercase;font-weight:400;}
.gd-go i{transform:rotate(-135deg);margin-left:4px;animation:gdNudge 1.8s ease-in-out infinite;}
.gd-go:hover{transform:translateX(2px);}
@keyframes gdNudge{0%,60%,100%{translate:0 0;}30%{translate:4px 0;}}

/* ---- narrow: one column, numbered rings instead of leaders ---- */
@media (max-width:899px){
  .gd-in,.gd-cover .gd-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(30vh,1fr) auto;grid-template-areas:"hd" "main" "side";gap:14px;}
  .gd-cover .gd-in{grid-template-areas:"hd" "main" "index";}
  .gd-last .gd-in{grid-template-rows:auto auto auto;}
  .gd-lead{font-size:14px;line-height:1.45;}
  .gd-ftop{display:none;}
  .gd-stage{display:flex;align-items:center;}
  .gd-inset{display:none;}
  .gd-swap{display:block;}
  .gd-notes{gap:10px;}
  .gd-notes span{font-size:13.5px;}
  .gd-index span{display:none;}
  .gd-index button{padding:9px 0;}
  .gd-back{width:48px;padding:0;justify-content:center;}
  .gd-back span{display:none;}
  .gd-go{flex:1;justify-content:center;}
  .gd-hd{grid-template-columns:minmax(0,1fr);}
  .gd-side{padding-top:0;}
  .gd-notes li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;}
  .gd-notes li::before{content:counter(gdn);grid-row:span 2;width:22px;height:22px;border:1px solid var(--gd-chalk);border-radius:50%;display:grid;place-items:center;font:400 9px/1 var(--gd-label);}
  .gd-notes li:not([data-p])::before{visibility:hidden;}
  .gd-expect{grid-template-columns:minmax(0,1fr);}
  .gd-tabs{display:none;}
}
@media (max-width:560px){ .gd-brand span{display:none;} }
@media (prefers-reduced-motion: reduce){ .gd-overlay{transition:none;} .gd-enter .gd-in,.gd-enter .gd-h,.gd-field i,.gd-go i{animation:none;} }