/* Girih — an oud and attar house. A book of couplets on oxblood: ivory type, gold-leaf girih. */
@font-face{font-family:"Aboreto";src:url(/assets/fonts/specimen/aboreto-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Amiri";src:url(/assets/fonts/specimen/amiri-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Amiri";font-style:italic;src:url(/assets/fonts/specimen/amiri-400-italic.woff2) format("woff2");font-display:swap}
@property --gi-fa{syntax:"<angle>";inherits:false;initial-value:180deg}
@property --gi-so{syntax:"<number>";inherits:true;initial-value:1}

body.spec-girih{background:#3E0D16;margin:0}

.gi{--gi-ground:#3E0D16;--gi-well:#2A0810;--gi-ink:#F3E6CF;--gi-ink-2:#D8C4A8;--gi-gold:#D9A441;--gi-support:#8A2A3A;--gi-leaf-hi:#F0D08A;--gi-leaf-lo:#9C6F24;
 --gi-g90:rgb(217 164 65/.9);--gi-g60:rgb(217 164 65/.6);--gi-g45:rgb(217 164 65/.45);--gi-g14:rgb(217 164 65/.14);--gi-lg:var(--gi-ground);
 --gi-s2:13px;--gi-s3:21px;--gi-s4:34px;--gi-s5:55px;--gi-s6:89px;--gi-s7:144px;
 --gi-t-mast:clamp(5rem,2.214rem + 11.429vw,12.5rem);--gi-t-h1:clamp(2.375rem,2.05rem + 1.333vw,3.25rem);--gi-t-h2:clamp(1.375rem,.957rem + 1.714vw,2.5rem);
 --gi-t-h3:clamp(1.125rem,.986rem + .571vw,1.5rem);--gi-t-door:clamp(1.1875rem,1.071rem + .476vw,1.5rem);--gi-t-lede:clamp(1.125rem,1.055rem + .286vw,1.3125rem);
 --gi-t-body:clamp(1.09375rem,1.059rem + .143vw,1.1875rem);--gi-t-small:clamp(.9375rem,.914rem + .095vw,1rem);--gi-t-label:clamp(.6875rem,.664rem + .095vw,.75rem);
 --gi-t-roll:clamp(1rem,.86rem + .57vw,1.375rem);--gi-gut-h1:clamp(3.4375rem,2.648rem + 3.238vw,5.5625rem);--gi-gut:55px;
 --gi-cap:"Aboreto","Copperplate","Cinzel","Trajan Pro","Times New Roman",serif;--gi-txt:"Amiri","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
 --gi-ease:cubic-bezier(.22,.61,.36,1);--gi-pg:clamp(16px,20vw - 70px,97px);--gi-pw:clamp(16px,3vw,24px);
 position:relative;isolation:isolate;padding-bottom:var(--gi-s7);color:var(--gi-ink);background:var(--gi-ground);font:400 var(--gi-t-body)/1.65 var(--gi-txt);letter-spacing:.005em;font-synthesis:none;font-variant-numeric:oldstyle-nums proportional-nums;-webkit-font-smoothing:antialiased}
.gi *,.gi *::before,.gi *::after{box-sizing:border-box}
.gi [hidden]{display:none!important}
.gi ::selection{background:rgb(217 164 65/.35);color:var(--gi-ink)}
.gi :focus-visible{outline:2px solid var(--gi-gold);outline-offset:4px}
.gi a{color:inherit}
.gi i{font-style:italic}
.gi-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gi-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the girih behind the leaves: a fixed canvas with JavaScript, a generated band without it and under reduced motion */
.gi-girih{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.gi:not(.gi-js) .gi-girih{display:none}
.gi-rm .gi-girih{position:absolute}
.gi:not(.gi-js)::before,.gi-rm::before{content:"";position:absolute;inset:0;z-index:0;background:url(girih-band.svg) center top/960px 1600px repeat;pointer-events:none}

/* the symbols: tiles with their straps, stars in leaf */
.gi-so{fill:none;stroke:var(--gi-edge,var(--gi-support));stroke-width:1px;vector-effect:non-scaling-stroke}
.gi-sf{fill:var(--gi-star,url(#gi-leaf));fill-opacity:var(--gi-so)}
.gi-sl{fill:none;stroke:var(--gi-line,var(--gi-gold));stroke-width:1.25px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.gi-mo{fill:var(--gi-well);stroke:var(--gi-gold);stroke-width:1px;vector-effect:non-scaling-stroke}
.gi-sk,.gi-sg{fill:var(--gi-gold)}
.gi-kn{fill:url(#gi-leaf);stroke:var(--gi-lg);stroke-width:2}

/* ── nav ─────────────────────────────────────────────────────────────── */
.gi-nav{position:sticky;top:var(--bar-h,0px);z-index:50;height:48px;background:var(--gi-ground);transition:box-shadow .3s}
.gi-nav.gi-scr{box-shadow:0 1px 0 var(--gi-g45)}
.gi-nav-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:48px;padding-inline:clamp(10px,3vw,32px)}
.gi-nav-b{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;background:none;border:0;color:var(--gi-ink);font:400 var(--gi-t-label)/1 var(--gi-cap);letter-spacing:.28em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.gi-nav-w{justify-self:end}
.gi-nav-n{padding:14px 6px;font:400 15px/1 var(--gi-cap);letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase;text-decoration:none}
.gi-toc{position:absolute;top:50px;left:clamp(10px,3vw,32px);width:min(390px,calc(100vw - 20px));padding:var(--gi-s4) var(--gi-s4) var(--gi-s3);background:var(--gi-well);box-shadow:inset 0 0 0 1px var(--gi-g90),inset 0 0 0 6px var(--gi-well),inset 0 0 0 7px var(--gi-g45)}
.gi-toc::before,.gi-leaf::before{content:"";position:absolute;inset:-14px;background:url(med.svg) 0 0/28px no-repeat,url(med.svg) 100% 0/28px no-repeat,url(med.svg) 0 100%/28px no-repeat,url(med.svg) 100% 100%/28px no-repeat;pointer-events:none}
.gi-toc ol{margin:0;padding:0;list-style:none}
.gi-toc a{display:grid;grid-template-columns:2.4em 11px 1fr;align-items:center;gap:13px;min-height:40px;text-decoration:none}
.gi-toc i{font-size:17px;color:var(--gi-ink-2);text-align:end}
.gi-toc svg{width:11px;height:11px}
.gi-toc span{font:400 var(--gi-t-label)/1.3 var(--gi-cap);letter-spacing:.2em;text-transform:uppercase}
.gi-toc a:hover span{color:var(--gi-gold)}

/* ── the couplet: two half-lines facing each other across the axis ───── */
.gi-bayt{display:grid;grid-template-columns:1fr var(--gi-gut) 1fr;align-items:baseline;width:fit-content;max-width:100%;margin:var(--gi-s3) auto 0;font:italic 400 var(--gi-t-door)/1.45 var(--gi-txt);text-align:center}
.gi-mis{white-space:nowrap}
.gi-mis:first-child{text-align:end}
.gi-mis:last-child{text-align:start}
.gi-mis--short{text-align-last:justify}
.gi-gut{justify-self:center;align-self:center;width:13px;height:13px}
.gi-gut--t{width:40px;height:40px;transition:--gi-so .5s .9s}
@media (max-width:759px){
 .gi-bayt{grid-template-columns:1fr;width:auto;text-align:start}
 .gi-mis{white-space:normal;text-wrap:balance;max-width:84%}
 .gi-mis:first-child{justify-self:start}
 .gi-mis:last-child{justify-self:end;text-align:end}
 .gi-mis--short{text-align-last:auto}
 .gi-gut{scale:.6;margin-block:-4px}
 .gi-gut--t{scale:.55;margin-block:-12px}
}

/* ── the hashiya: glosses at 18°, parallel to the straps ─────────────── */
.gi-para{position:relative}
.gi-hashiya{display:block;margin:var(--gi-s2) 0 0;font:italic 400 var(--gi-t-small)/1.5 var(--gi-txt);color:var(--gi-ink-2);text-align:end;text-wrap:pretty}
.gi-hashiya::before{content:"";display:inline-block;width:9px;height:9px;margin-inline-end:9px;background:var(--gi-gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.gi-hw{font:400 var(--gi-t-label)/1 var(--gi-cap);letter-spacing:.28em;margin-inline-end:.35em;text-transform:uppercase;color:var(--gi-gold)}
.gi-say{font-style:normal;white-space:nowrap}
@media (min-width:1200px){
 /* each card turns on its lower inner corner, so the corner nearest the leaf stays 21px off the rule
    whatever the card's height; it narrows where the margin is short, so its outer corner clears too */
 .gi-leaf .gi-hashiya{position:absolute;top:.2em;z-index:2;inline-size:clamp(9em,(100vw - var(--gi-lw))/2 - 80px,12em);margin:0;padding:8px 13px;background:var(--gi-well);box-shadow:inset 0 0 0 1px var(--gi-g45);text-align:start}
 .gi-leaf .gi-hashiya::before{display:none}
 .gi-leaf .gi-hashiya--r{left:calc(100% + (var(--gi-lw) - 100%)/2 + 21px);rotate:18deg;transform-origin:0 100%}
 .gi-leaf .gi-hashiya--l{right:calc(100% + (var(--gi-lw) - 100%)/2 + 21px);rotate:-18deg;transform-origin:100% 100%}
}
@media (min-width:1200px) and (max-width:1439px){.gi-leaf--w .gi-hashiya{position:static;rotate:none;inline-size:auto;margin-top:var(--gi-s2);background:none;box-shadow:none;padding:0;text-align:end}.gi-leaf--w .gi-hashiya::before{display:inline-block}}

/* ── the doorway ─────────────────────────────────────────────────────── */
.gi-hero{position:relative;z-index:1;--gi-stage:max(560px,calc(100svh - var(--bar-h,0px) - 48px));--gi-fi:32px;--gi-b:14px;background:var(--gi-ground);
 /* on a short window the name, the h1 and its gutter scale with the stage's height as well as the width, so the lintel,
    the doors and the smoke's run under them keep their proportions (the 1440 × 900 composition, scaled) */
 --gi-t-mast:min(clamp(5rem,2.214rem + 11.429vw,12.5rem),calc(var(--gi-stage)*.3584 - 67px));
 --gi-t-h1:min(clamp(2.375rem,2.05rem + 1.333vw,3.25rem),calc(var(--gi-stage)*.0932 - 17.5px));
 --gi-gut-h1:min(clamp(3.4375rem,2.648rem + 3.238vw,5.5625rem),calc(var(--gi-stage)*.11));
 /* the name's top clears the label; the h1 hangs a fixed fraction of the name's size below it */
 --gi-mt:max(calc(var(--gi-stage)*.106),calc(var(--gi-fi) + var(--gi-b) + 39px));--gi-ht:max(calc(var(--gi-stage)*.365),calc(var(--gi-mt) + 1.045*var(--gi-t-mast)))}
.gi-stage{position:relative;height:var(--gi-stage);overflow:clip;container-type:inline-size;background:#1c0508;touch-action:pan-y}
.gi-poster img,.gi-clean img{position:absolute;top:0;left:-8px;display:block;width:calc(100% + 16px);max-width:none;height:100%;object-fit:cover;object-position:calc(50% + var(--gi-emit-dx,7px)) 100%}
.gi-clean{position:absolute;inset:0;opacity:.9;pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent calc(50% - 100px),#000 calc(50% - 46px),#000 calc(50% + 58px),transparent calc(50% + 116px)),linear-gradient(#000 calc(var(--gi-ey,60%) - 34px),transparent calc(var(--gi-ey,60%) - 4px));-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent calc(50% - 100px),#000 calc(50% - 46px),#000 calc(50% + 58px),transparent calc(50% + 116px)),linear-gradient(#000 calc(var(--gi-ey,60%) - 34px),transparent calc(var(--gi-ey,60%) - 4px));mask-composite:intersect}
.gi-clean img{translate:136px 0}
/* wider than about 1.8 : 1 the photograph no longer covers by width (which would crop its top and raise the burner into the
   h1): it is sized by the stage's height, the crown held just over half way down, and its sides feather into the ground */
@media (min-width:701px){
 .gi-stage{--gi-ph:max(var(--gi-stage),min(calc((100cqw + 16px)/1.5),calc(var(--gi-stage)*1.205),calc((var(--gi-stage)*.9 - var(--gi-ht) - .83*var(--gi-t-h1))/.388)))}
 .gi-poster img,.gi-clean img{top:auto;bottom:0;left:calc(50% - var(--gi-ph)*.75);width:calc(var(--gi-ph)*1.5);height:var(--gi-ph);object-position:50% 100%;translate:var(--gi-emit-dx,calc(var(--gi-ph)*.0075)) 0;--gi-fe:clamp(0px,(100cqw + 16px - 1.5*var(--gi-ph))*1.2,200px);-webkit-mask:linear-gradient(90deg,transparent,#000 var(--gi-fe),#000 calc(100% - var(--gi-fe)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--gi-fe),#000 calc(100% - var(--gi-fe)),transparent)}
 .gi-clean img{translate:calc(var(--gi-emit-dx,calc(var(--gi-ph)*.0075)) + 136px) 0}
 .gi-frame{--gi-gap:calc(var(--gi-ph)*.1236)}
}
@media (min-width:700px){.gi-hero{--gi-t-lede:max(17px,min(clamp(1.125rem,1.055rem + .286vw,1.3125rem),calc(var(--gi-stage)*.0261)))}}
/* under 1200 the left panel sits under the second gloss, so on a short stage it keeps to 17px and four lines */
@media (min-width:700px) and (max-width:1199px){.gi-hero{--gi-t-lede:max(17px,min(clamp(1.125rem,1.055rem + .286vw,1.3125rem),calc(var(--gi-stage)*.0261 - 2px)))}}
.gi-smoke-gl{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.gi-glow{position:absolute;inset:0;background:radial-gradient(circle at var(--gi-ex,50%) var(--gi-ey,58%),rgb(217 164 65/.22),transparent 60vmin);mix-blend-mode:screen;opacity:calc(.42 + var(--gi-coal,1)*.22);pointer-events:none}
.gi-frame{position:absolute;inset:var(--gi-fi);pointer-events:none;--gi-gap:120px}
.gi-frame::before,.gi-frame::after{content:"";position:absolute;-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 40px) no-repeat,linear-gradient(90deg,#000 calc(50% - var(--gi-gap)),transparent 0 calc(50% + var(--gi-gap)),#000 0) bottom/100% 40px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 40px) no-repeat,linear-gradient(90deg,#000 calc(50% - var(--gi-gap)),transparent 0 calc(50% + var(--gi-gap)),#000 0) bottom/100% 40px no-repeat}
.gi-frame::before{inset:-5px;border:1px solid var(--gi-g90);background:url(fh.svg) 0 4px/auto var(--gi-b) repeat-x,url(fh.svg) 0 calc(100% - 4px)/auto var(--gi-b) repeat-x,url(fv.svg) 4px 0/var(--gi-b) auto repeat-y,url(fv.svg) calc(100% - 4px) 0/var(--gi-b) auto repeat-y}
.gi-frame::after{inset:calc(var(--gi-b) + 4px);border:1px solid var(--gi-g45)}
/* the medallions sit on an unmasked sibling of the frame, so the frame's drawing-in never cuts them */
.gi-frame-m{position:absolute;inset:var(--gi-fi);pointer-events:none}
.gi-fm{position:absolute;z-index:1;width:40px;height:40px;margin:-20px;overflow:visible}
.gi-frame-m .gi-fm{--o:calc(var(--gi-b)/2)}
.gi-fm--tl{left:var(--o,0);top:var(--o,0)}.gi-fm--tc{left:50%;top:var(--o,0)}.gi-fm--tr{left:calc(100% - var(--o,0px));top:var(--o,0)}
.gi-fm--bl{left:var(--o,0);top:calc(100% - var(--o,0px))}.gi-fm--br{left:calc(100% - var(--o,0px));top:calc(100% - var(--o,0px))}
.gi-label{position:absolute;top:calc(var(--gi-fi) + var(--gi-b) + 22px);left:0;right:0;z-index:2;margin:0;padding-left:.28em;text-align:center;font:400 var(--gi-t-label)/1.5 var(--gi-cap);letter-spacing:.28em;text-transform:uppercase;color:var(--gi-gold)}
.gi-mast-w{position:absolute;top:var(--gi-mt);left:50%;z-index:2;translate:-50% 0}
.gi-mast{margin:0 -.2em 0 0;font:400 var(--gi-t-mast)/1 var(--gi-cap);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.gi-bayt--h1{position:absolute;top:var(--gi-ht);left:50%;z-index:2;translate:-50% 0;margin:0;--gi-gut:var(--gi-gut-h1);font-size:var(--gi-t-h1);line-height:1.15;white-space:nowrap}
.gi-hero-foot{position:absolute;inset:0 0 auto;z-index:3;height:var(--gi-stage);pointer-events:none}
.gi-hero-foot>*{pointer-events:auto}
.gi-jamb{position:absolute;top:calc(57% - max(0px,(720px - var(--gi-stage))*.06));width:300px;font-size:var(--gi-t-lede);line-height:1.6;text-wrap:pretty}
.gi-jamb p{margin:0}
.gi-jamb--l{right:calc(50% + 116px);text-align:right}
.gi-jamb--r{left:calc(50% + 116px)}
.gi-links{display:flex;align-items:center;gap:var(--gi-s2);width:max-content;margin-top:var(--gi-s2)!important}
.gi-knot{width:11px;height:11px;flex:none}
.gi-a{display:inline-block;padding:12px 0;white-space:nowrap;background:linear-gradient(var(--gi-gold),var(--gi-gold)) 50% calc(100% - 8px)/0 1px no-repeat;border:0;color:var(--gi-gold);font:400 var(--gi-t-label)/1.4 var(--gi-cap);letter-spacing:.28em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-size .3s var(--gi-ease)}
.gi-a:hover,.gi-a:focus-visible{background-size:100% 1px}
.gi-cap{position:absolute;left:calc(var(--gi-fi) + var(--gi-s5));bottom:calc(var(--gi-fi) + var(--gi-s4));max-width:17em;margin:0;font:italic 400 var(--gi-t-small)/1.5 var(--gi-txt);color:var(--gi-ink-2)}
.gi-add{position:absolute;right:calc(var(--gi-fi) + var(--gi-s5));bottom:calc(var(--gi-fi) + var(--gi-s4) - 8px)}
.gi-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 21px 0 calc(21px + .28em);background:transparent;border:1px solid var(--gi-g90);color:var(--gi-ink);font:400 var(--gi-t-label)/1 var(--gi-cap);letter-spacing:.28em;text-transform:uppercase;cursor:pointer;transition:background-color .3s}
.gi-btn:hover{background-color:var(--gi-g14)}
.gi-h-gloss{position:absolute;--gi-gt:min(calc(var(--gi-stage)*.3),calc(var(--gi-stage)*.57 - 200px));top:var(--gi-gt);right:calc(50% + 6.56*var(--gi-t-h1) + var(--gi-gut-h1)/2 + 21px + max(0px,(var(--gi-ht) + .85*var(--gi-t-h1) - var(--gi-gt))*.325 - 28px))}
.gi-hero .gi-hashiya{position:absolute;inline-size:12em;margin:0;padding:8px 13px;background:rgb(42 8 16/.92);box-shadow:inset 0 0 0 1px var(--gi-g45);text-align:start}
.gi-hero .gi-hashiya::before{display:none}
.gi-mast-w .gi-hashiya{top:40%;left:calc(100% + 21px);rotate:18deg;transform-origin:0 0}
.gi-h-gloss .gi-hashiya{top:0;right:0;rotate:-18deg;transform-origin:100% 0}
.gi-folio--hero{position:static!important;padding-top:var(--gi-s2)}
@media (min-width:1200px) and (max-width:1279px){.gi-hero .gi-hashiya{inline-size:10.4em;font-size:15px}.gi-h-gloss{--gi-gt:min(calc(var(--gi-stage)*.3),calc(var(--gi-stage)*.57 - 225px))}}
@media (max-width:1199px){
 .gi-hero .gi-hashiya{position:static;rotate:none;inline-size:auto;padding:0;background:none;box-shadow:none;text-align:center;white-space:nowrap}
 /* the glosses keep clear of the axis, where the smoke rises: the first above the name, the second on the left */
 /* here both glosses stack with the name and the h1 (the first above the name, the second under the h1, the left panel under
    that), so on a short stage the name is held to what that stack can take, and the h1 to the name */
 .gi-hero{--gi-mt:max(calc(var(--gi-stage)*.106),calc(var(--gi-fi) + var(--gi-b) + 50px));--gi-ht:max(calc(var(--gi-stage)*.365),calc(var(--gi-mt) + 30px + 1.045*var(--gi-t-mast)));
  --gi-t-mast:min(clamp(5rem,2.214rem + 11.429vw,12.5rem),calc(var(--gi-stage)*.3584 - 67px),calc((var(--gi-stage) - 420px)/1.493));
  --gi-t-h1:min(clamp(2.375rem,2.05rem + 1.333vw,3.25rem),calc(var(--gi-stage)*.0932 - 17.5px),calc((var(--gi-stage) - 420px)/1.493*.28))}
 .gi-jamb--l{top:max(calc(57% - max(0px,(720px - var(--gi-stage))*.06)),calc(var(--gi-ht) + 1.6*var(--gi-t-h1) + 3.2*var(--gi-t-small) + 13px))}
 .gi-mast-w{display:flex;flex-direction:column-reverse;align-items:center}
 .gi-mast-w .gi-hashiya{margin:0 0 6px}
 .gi-h-gloss{left:calc(var(--gi-fi) + 34px);right:calc(50% + 70px);top:calc(var(--gi-ht) + 1.6*var(--gi-t-h1))}
 .gi-h-gloss .gi-hashiya{white-space:normal;text-align:right}
 .gi-links{width:auto;flex-direction:column;align-items:flex-start;row-gap:0}
 .gi-knot{display:none}
}

/* ── leaves ──────────────────────────────────────────────────────────── */
.gi-leaf{position:relative;z-index:1;width:min(720px,100% - 2*var(--gi-pg));margin:var(--gi-s7) auto 0;padding:var(--gi-s5) 37px;background:var(--gi-lg);box-shadow:inset 0 0 0 1px var(--gi-g90),inset 0 0 0 6px var(--gi-lg),inset 0 0 0 7px var(--gi-g45);text-align:center;--gi-lw:min(720px,100vw - 2*var(--gi-pg))}
.gi-leaf--ros{width:min(760px,100% - 2*var(--gi-pw));--gi-lw:min(760px,100vw - 2*var(--gi-pw))}
.gi-leaf--w{width:min(960px,100% - 2*var(--gi-pw));--gi-lw:min(960px,100vw - 2*var(--gi-pw))}
.gi-h2{margin:0;padding-left:.14em;font:400 var(--gi-t-h2)/1.2 var(--gi-cap);letter-spacing:.14em;text-transform:uppercase;text-wrap:balance}
.gi-h3{margin:var(--gi-s5) 0 0;padding-left:.12em;font:400 var(--gi-t-h3)/1.25 var(--gi-cap);letter-spacing:.12em;text-transform:uppercase}
.gi-col{max-width:30em;margin:var(--gi-s5) auto 0;text-align:start}
.gi-col p,.gi-col .gi-para{margin:0 0 1em;text-wrap:pretty;hanging-punctuation:first}
.gi-col .gi-para p{margin:0}
.gi-lede{font-size:var(--gi-t-lede);line-height:1.6}
.gi-caption{max-width:30em;margin:var(--gi-s2) auto 0;font:italic 400 var(--gi-t-small)/1.5 var(--gi-txt);color:var(--gi-ink-2);text-align:center;text-wrap:balance}
.gi-inst{max-width:30em;margin:var(--gi-s4) auto 0;font-style:italic;text-align:center;text-wrap:balance}
.gi:not(.gi-js) .gi-inst-d{display:none}
.gi-folio{position:absolute;top:calc(100% + 16px);left:0;right:0;margin:0;text-align:center;font:italic 400 17px/1.3 var(--gi-txt);color:var(--gi-ink-2)}
.gi-folio i,.gi-fl,.gi-fc{padding:2px 7px;background:var(--gi-ground)}
.gi-folio i{padding-inline:9px 4px}
.gi-fl,.gi-fc,.gi-count{font:400 var(--gi-t-label)/1.6 var(--gi-cap);letter-spacing:.28em;text-transform:uppercase;color:var(--gi-gold)}
.gi-fl{padding-inline:0}
.gi-fc:empty{display:none}
.gi-n{display:inline-block;min-width:2.6ch;text-align:end;font-variant-numeric:lining-nums tabular-nums}
.gi-ini{float:left;width:64px;height:64px;margin:.2em 14px 2px 0;shape-outside:circle(50%);shape-margin:5px;background:url(ini.svg) center/contain no-repeat;color:var(--gi-ground);font:400 30px/66px var(--gi-cap);text-align:center;text-transform:uppercase}

/* plates */
.gi-draw{margin-top:var(--gi-s5)}
.gi-plate{display:flex;justify-content:center;align-items:flex-end;gap:var(--gi-s4);margin:0}
.gi-plate--1{--gi-pe:47px}
.gi-plate--2{--gi-pe:46px;gap:var(--gi-s5);align-items:center}
.gi-pl-f{margin:0;display:grid;justify-items:center;gap:var(--gi-s2)}
.gi-pl-svg,.gi-p2-svg{display:block;width:calc(var(--w)*var(--gi-pe));height:calc(var(--h)*var(--gi-pe));overflow:visible}
.gi-pl-f figcaption{display:grid;gap:2px;font-size:var(--gi-t-small);line-height:1.3;color:var(--gi-ink-2)}
.gi-pl-n{font:400 11px/1.3 var(--gi-cap);letter-spacing:.2em;color:var(--gi-ink)}
.gi-p-o,.gi-p-ko{fill:none;stroke:var(--gi-support);stroke-width:1px;vector-effect:non-scaling-stroke}
.gi-p-ko{stroke-width:.75px}
.gi-p-s,.gi-p-ks,.gi-p-po{fill:none;stroke:var(--gi-gold);stroke-width:1.25px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.gi-p-ks{stroke-width:.8px}
.gi-p-po{stroke-width:1.5px;stroke-dasharray:4 3}
.gi-p-leaf{fill:url(#gi-leaf)}
.gi-p-in{fill:var(--gi-support);fill-opacity:.4}
.gi-fig-plate{margin:var(--gi-s5) 0 0}

/* the rosette */
.gi-leaf--ros{margin-block:var(--gi-s7);padding-bottom:var(--gi-s6)}
.gi-blends{display:flex;justify-content:center;gap:4px;margin-top:var(--gi-s5)}
.gi-bl{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;width:116px;padding:11px 2px 16px;background:none;border:0;color:var(--gi-ink-2);cursor:pointer;--gi-star:transparent;--gi-line:rgb(216 196 168/.55);--gi-edge:rgb(138 42 58/.8);transition:color .26s}
.gi-bl:hover{color:var(--gi-ink)}
.gi-bl[aria-checked=true]{color:var(--gi-ink);--gi-star:url(#gi-leaf);--gi-line:var(--gi-gold)}
.gi-bl[aria-checked=true]::after,.gi-chk input:checked~span::after{content:"";position:absolute;bottom:2px;left:50%;width:9px;height:9px;margin-left:-4.5px;background:var(--gi-gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.gi-bl-g{width:72px;height:72px}
.gi-bl-n{font:400 11px/1.3 var(--gi-cap);letter-spacing:.18em;text-transform:uppercase}
.gi-bl-r{display:none;font:400 13px/1 var(--gi-cap);letter-spacing:.1em}
/* the dot sits at the head of the glyph, as the material sits at the head of the wheel; ink, not gold */
.gi-bl-d{position:absolute;top:2px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gi-ink-2);opacity:0;transition:opacity .26s}
.gi-bl.gi-uses .gi-bl-d{opacity:1}
.gi-bl-now,.gi-ros-head{display:none}
.gi-ros{position:relative;width:var(--gi-rp);height:var(--gi-rp);max-width:100%;margin:var(--gi-s3) auto 0;--gi-rs:520px;--gi-rp:calc(var(--gi-rs)*760/600);--gi-lr:calc(var(--gi-rs)*.5 + 56px);--gi-rot:0deg;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.gi-ros.gi-drag{cursor:grabbing}
.gi-ros-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gi-ros-plate{fill:var(--gi-well);stroke:var(--gi-g45);stroke-width:1.5}
.gi-ros-w{transform:rotate(var(--gi-rot));transform-origin:300px 300px}
.gi-ros-u{fill:var(--gi-support);fill-opacity:.28}
.gi-cell{fill:url(#gi-leaf);fill-opacity:0;transition:fill-opacity .26s var(--gi-ease)}
.gi-cell.gi-on{fill-opacity:1}
.gi-cell[data-t="1"]{transition-delay:.14s}.gi-cell[data-t="2"]{transition-delay:.28s}
.gi-ros-s1{fill:none;stroke:var(--gi-support);stroke-width:4;stroke-linejoin:round}
.gi-ros-s2{fill:none;stroke:var(--gi-gold);stroke-width:1;stroke-linejoin:round}
.gi-ros-ring{fill:none;stroke:var(--gi-gold);stroke-width:1}
.gi-ros-hub{fill:var(--gi-well);stroke:var(--gi-gold);stroke-width:1.5}
.gi-ros-hn{font:400 13.5px var(--gi-cap);letter-spacing:.16em;fill:var(--gi-ink)}
.gi-ros-t{font:400 13px var(--gi-cap);letter-spacing:.12em;fill:var(--gi-ink-2)}
.gi-js .gi-ros-t{display:none}
.gi-mats{position:absolute;inset:0;pointer-events:none}
.gi-mat{position:absolute;top:50%;left:50%;display:grid;place-items:center;min-width:44px;min-height:44px;padding:4px 6px;background:none;border:0;color:var(--gi-ink-2);font:400 11px/1.3 var(--gi-cap);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;pointer-events:auto;white-space:nowrap;--a:calc(var(--k)*36deg + var(--gi-rot));transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1*var(--gi-lr))) rotate(calc(-1*var(--a)));transition:color .26s}
.gi-mat:hover,.gi-mat[aria-checked=true]{color:var(--gi-ink)}
.gi-mat[aria-checked=true]{text-shadow:0 0 12px rgb(217 164 65/.45)}
.gi-mat-n span{display:block}
.gi-mat-i{display:none}
.gi-gloss{max-width:30em;margin:var(--gi-s4) auto 0;font-size:var(--gi-t-lede);line-height:1.6;text-align:start}
.gi-gloss:focus-visible{outline-offset:8px}
.gi-gloss p{margin:0 0 .6em}
.gi-gloss .gi-bayt{margin:0 auto var(--gi-s3)}
.gi-bayt--g .gi-gut{width:30px;height:30px}
.gi-g-u,.gi-g-b2{font-size:var(--gi-t-small);font-style:italic;color:var(--gi-ink-2)}
.gi:not(.gi-js) :is(.gi-gloss,.gi-blends,.gi-mats,.gi-ros-ring){display:none}
.gi-matlist{max-width:30em;margin:var(--gi-s5) auto 0;padding:0;list-style:none;text-align:start}
.gi-matlist li{margin-top:var(--gi-s4)}
.gi-matlist p{margin:0 0 .5em}
.gi-matlist .gi-bayt{margin:0 auto var(--gi-s2)}
.gi-used{font-size:var(--gi-t-small);font-style:italic;color:var(--gi-ink-2)}
.gi-js .gi-matlist{display:none}

/* register, weave */
.gi-reg{margin:var(--gi-s5) 0 0;padding:0;list-style:none}
.gi-reg li+li{margin-top:var(--gi-s5)}
.gi-reg .gi-h3{margin:0}
.gi-reg .gi-bayt{margin-top:var(--gi-s2)}
.gi-notes{margin:var(--gi-s2) 0 0;font-size:var(--gi-t-small)}
.gi-notes i{color:var(--gi-ink-2)}
.gi-plain{max-width:30em;margin:6px auto 0;font-size:var(--gi-t-small);font-style:italic;color:var(--gi-ink-2)}
.gi-wv{display:block;width:100%;max-width:600px;height:auto;margin:0 auto;overflow:visible}
.gi-wv--narrow,.gi-wv-key{display:none}
.gi-wv-b{fill:none;stroke:var(--gi-gold);stroke-width:7}
.gi-wv-f{fill:none;stroke:var(--gi-support);stroke-width:5}
.gi-wv-m{font:italic 400 15px var(--gi-txt);fill:var(--gi-ink);letter-spacing:0;font-kerning:normal;font-variant-ligatures:none}
.gi-wv-n{font:400 13px var(--gi-cap);letter-spacing:.12em;fill:var(--gi-gold)}
.gi-sub .gi-h3{margin-top:var(--gi-s4)}
.gi-sub .gi-col{margin-top:var(--gi-s3)}

/* method */
.gi-method{position:relative;margin-top:var(--gi-s5)}
.gi-mstrap{position:absolute;top:13px;left:0;width:100%;height:26px}
.gi-ms-b{fill:none;stroke:var(--gi-gold);stroke-width:5}
.gi-ms-f{fill:none;stroke:var(--gi-support);stroke-width:3}
.gi-ms-k{fill:var(--gi-leaf-hi)}
.gi-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none}
.gi-steps li{display:grid;justify-items:center;align-content:start;padding:0 5px;font-size:14px;line-height:1.5}
.gi-steps p{margin:6px 0 0;text-wrap:pretty}
.gi-med5{position:relative;width:52px;height:52px;overflow:visible}
.gi-med5 path{fill:var(--gi-well);stroke:var(--gi-gold);stroke-width:1.2;vector-effect:non-scaling-stroke}
.gi-med5 text{font:400 7px var(--gi-cap);fill:var(--gi-gold);letter-spacing:.05em}
.gi-st-n{margin:var(--gi-s3) 0 0;font:400 13px/1.3 var(--gi-cap);letter-spacing:.22em;text-transform:uppercase}
.gi-mk-v{display:none}
.gi-method .gi-caption{margin-top:var(--gi-s4)}

/* photographs, framed in the double rule */
.gi-photo{width:min(480px,100%);margin:var(--gi-s5) auto 0}
.gi-photo--hands{width:min(400px,100%)}
.gi-photo--vials{width:min(320px,70%)}
.gi-photo--wide{width:100%}
.gi-photo picture{display:block;padding:7px;box-shadow:inset 0 0 0 1px var(--gi-g90),inset 0 0 0 6px var(--gi-lg),inset 0 0 0 7px var(--gi-g45)}
.gi-photo img{display:block;width:100%;height:auto}

/* the interlude */
.gi-finer{position:relative;z-index:1;height:130vh;margin-top:var(--gi-s7)}
.gi-finer-st{position:sticky;top:0;display:grid;place-items:center;height:100vh;overflow:clip}
/* the cartouche: a chamfered panel inside an unclipped wrapper; the two chamfers are laid with level-IV girih
   in gold, and the medallions sit on the chamfers' real corners */
.gi-cart-w{position:relative;z-index:1;width:min(480px,92%)}
.gi-cart-w::before,.gi-cart-w::after{content:"";position:absolute;width:20%;height:34%;background:url(chamfer.svg) 0 0/120px 120px,var(--gi-well)}
.gi-cart-w::before{top:0;left:0;clip-path:polygon(0 0,100% 0,0 100%);box-shadow:inset 1px 1px 0 var(--gi-g90)}
.gi-cart-w::after{right:0;bottom:0;clip-path:polygon(100% 0,100% 100%,0 100%);box-shadow:inset -1px -1px 0 var(--gi-g90);background-position:100% 100%,0 0}
.gi-cart{position:relative;display:grid;align-content:space-between;justify-items:center;gap:var(--gi-s2);width:100%;min-height:300px;padding:var(--gi-s3) var(--gi-s4);background:var(--gi-well);box-shadow:inset 0 0 0 1px var(--gi-g90),inset 0 0 0 5px var(--gi-well),inset 0 0 0 6px var(--gi-g45);clip-path:polygon(20% 0,100% 0,100% 66%,80% 100%,0 100%,0 34%)}
.gi-cart-w .gi-fm{z-index:2;width:28px;height:28px;margin:-14px}
.gi-fm--c1{left:20%;top:0}.gi-fm--c2{left:100%;top:66%}.gi-fm--c3{left:80%;top:100%}.gi-fm--c4{left:0;top:34%}
.gi-cart::before,.gi-cart::after{content:"";position:absolute;width:20%;height:34%;background:linear-gradient(to bottom right,transparent calc(50% - .6px),var(--gi-gold) 0 calc(50% + .6px),transparent 0)}
.gi-cart::before{top:0;left:0}.gi-cart::after{right:0;bottom:0}
.gi-h2--s{font-size:var(--gi-t-h3)}
.gi-slant{max-width:15em;margin:var(--gi-s3) 0;rotate:-18deg;font:italic 400 var(--gi-t-door)/1.35 var(--gi-txt);text-align:center}
.gi-count{margin:0;text-align:center}
.gi-count .gi-fl,.gi-count .gi-fc{background:none;padding:0}
.gi-count .gi-fc{display:block}
.gi-rm .gi-finer{height:100vh}

/* the form */
.gi-form{position:relative;width:min(560px,100%);margin:var(--gi-s5) auto 0;padding:var(--gi-s5) var(--gi-s4) var(--gi-s4);background:var(--gi-well);box-shadow:inset 0 0 0 1px var(--gi-g45);text-align:start}
.gi-form .gi-fm{width:28px;height:28px;margin:-14px;--o:0px}
.gi-row{display:grid;gap:4px;min-width:0;margin:0 0 var(--gi-s4);padding:0;border:0}
.gi-row>label,.gi-row legend{font:italic 400 var(--gi-t-door)/1.3 var(--gi-txt)}
.gi-row--f{justify-items:center;text-align:center}
.gi-row--f legend{margin:0 auto var(--gi-s2);padding:0}
.gi-field{min-width:0}
.gi-form :is(input:not([type=checkbox]),select,textarea){display:block;width:100%;padding:6px 0;background:transparent;border:0;border-bottom:1px solid var(--gi-g60);border-radius:0;color:var(--gi-ink);font:400 19px/1.4 var(--gi-txt);-webkit-appearance:none;appearance:none}
.gi-form :is(input,select,textarea):focus-visible{border-bottom:2px solid var(--gi-gold);padding-bottom:5px;outline-offset:6px}
.gi-form select{padding-right:24px;background:linear-gradient(45deg,transparent 50%,var(--gi-gold) 0) calc(100% - 9px) 55%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--gi-gold) 0) calc(100% - 3px) 55%/6px 6px no-repeat;cursor:pointer}
.gi-form option{color:#2A0810;background:#F3E6CF}
.gi-form textarea{resize:vertical;min-height:7em;margin-top:6px;padding:8px 10px;border:1px solid var(--gi-g45);border-bottom-color:var(--gi-g60)}
.gi-form textarea:focus-visible{border:1px solid var(--gi-gold);border-bottom:2px solid var(--gi-gold);padding-bottom:7px}
.gi-hint{margin:6px 0 0;font:italic 400 var(--gi-t-small)/1.45 var(--gi-txt);color:var(--gi-ink-2)}
.gi-row--f .gi-hint{text-align:center}
.gi-chks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.gi-chk{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;width:64px;padding-bottom:14px;font:italic 400 14px/1.2 var(--gi-txt);color:var(--gi-ink-2);text-align:center;cursor:pointer;--gi-star:transparent;--gi-line:rgb(216 196 168/.55);--gi-edge:rgb(138 42 58/.8)}
.gi-chk input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.gi-chk-g{width:40px;height:40px;overflow:visible}
.gi-chk:has(input:checked){color:var(--gi-ink);--gi-star:url(#gi-leaf);--gi-line:var(--gi-gold)}
.gi-chk:has(input:focus-visible){outline:2px solid var(--gi-gold);outline-offset:3px}
.gi-nosend{margin:var(--gi-s4) 0 var(--gi-s3);font:italic 400 var(--gi-t-small)/1.5 var(--gi-txt);color:var(--gi-ink-2);text-align:center}
#gi-send{display:flex;margin:0 auto}
.gi-status{min-height:1.6em;margin:var(--gi-s2) 0 0;font-style:italic;text-align:center}
@media (min-width:760px){.gi-row--c{grid-template-columns:1fr var(--gi-gut) 1fr;align-items:end}.gi-row--c>label{padding-bottom:7px;text-align:end;text-wrap:balance}}

/* the close: end titles over the ash, the words, the tapering colophon */
.gi-end{position:relative;margin-top:var(--gi-s5);timeline-scope:--gi-end;view-timeline:--gi-end}
/* at rest (reduced motion, no scroll timelines, no JavaScript) the whole list stands over the ash;
   the rolling window with its faded edges is the enhancement */
.gi-roll{position:absolute;inset:7px;display:grid;place-items:start center;padding-top:var(--gi-s3)}
.gi-roll-l{margin:0;padding:0 var(--gi-s2);list-style:none;text-align:center;font:400 clamp(.8125rem,.7rem + .45vw,1.0625rem)/1.7 var(--gi-cap);letter-spacing:.24em;text-transform:uppercase;color:rgb(243 230 207/.86);text-shadow:0 0 10px rgb(0 0 0/.7)}
.gi-roll-e{font:italic 400 var(--gi-t-door)/1.7 var(--gi-txt);letter-spacing:0;text-transform:none}
.gi-words{display:grid;grid-template-columns:1fr 1fr;gap:var(--gi-s3) var(--gi-s5);max-width:42em;margin:var(--gi-s4) auto 0;text-align:start;font-size:var(--gi-t-small);line-height:1.5}
.gi-words div{break-inside:avoid}
.gi-words dt{font:400 var(--gi-t-label)/1.5 var(--gi-cap);letter-spacing:.28em;color:var(--gi-gold)}
.gi-words dd{margin:2px 0 0}
/* --gi-cone-h without JavaScript is tuned to the text as it stands then (no live tile count): 19 to 19.5em wherever the
   column is at its full measure, taller as a phone's column narrows; the script refits it once the count is written */
.gi-colo{max-width:30em;margin:var(--gi-s6) auto 0;--gi-cone-h:max(min(19.5em,calc(263px + 4vw)),calc(784px - 87.1vw))}
.gi-colo p{margin:0;font-size:var(--gi-t-small);line-height:1.5;text-align:justify;text-align-last:center;hyphens:auto}
.gi-cone{float:left;width:calc(50% - 3em);height:var(--gi-cone-h);shape-outside:polygon(0 0,100% 100%,0 100%)}
.gi-cone--r{float:right;shape-outside:polygon(100% 0,100% 100%,0 100%)}
.gi-star{display:block;width:34px;height:34px;margin:var(--gi-s2) auto 0;overflow:visible}
.gi-bayt--last{margin-top:var(--gi-s4);font-size:var(--gi-t-small)}
.gi-relight-w{margin:var(--gi-s4) 0 0;text-align:center}

/* ── motion: slow as smoke, exact as a compass ───────────────────────── */
@keyframes gi-rise{from{opacity:0;translate:0 16px}}
@keyframes gi-door-a{from{clip-path:inset(-.4em 0 -.4em 100%)}to{clip-path:inset(-.4em)}}
@keyframes gi-door-b{from{clip-path:inset(-.4em 100% -.4em 0)}to{clip-path:inset(-.4em)}}
@keyframes gi-up6{from{opacity:0;translate:0 6px}}
@keyframes gi-fade{from{opacity:0}}
@keyframes gi-frame{from{--gi-fa:0deg}}
@keyframes gi-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes gi-roll{from{translate:0 34%}to{translate:0 -34%}}
@keyframes gi-dusk{69%{opacity:.06}to{opacity:.32}}
@keyframes gi-coal{to{opacity:.4}}
@media (prefers-reduced-motion:no-preference){
 .gi-js:not(.gi-rm) .gi-rv{opacity:0;translate:0 16px;transition:opacity .9s var(--gi-ease),translate .9s var(--gi-ease)}
 .gi-js:not(.gi-rm) .gi-rv.gi-in{opacity:1;translate:0}
 @supports (animation-timeline:view()){
  .gi-js:not(.gi-rm) .gi-rv{opacity:1;translate:0;transition:none;animation:gi-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .gi-js:not(.gi-rm) .gi-roll{inset:7px 7px auto;height:55%;padding:0;place-items:center;overflow:clip;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
  .gi-js:not(.gi-rm) .gi-roll-l{line-height:2.4;text-shadow:none;animation:gi-roll linear both;animation-timeline:--gi-end;animation-range:cover 15% cover 85%}
  .gi-js:not(.gi-rm) .gi-roll-e{line-height:2}
  .gi{timeline-scope:--gi-close}
  #gi-close{view-timeline:--gi-close}
  .gi-js:not(.gi-rm) .gi-girih{animation:gi-coal linear both;animation-timeline:--gi-close;animation-range:entry 10% cover 55%}
 }
 /* the evening darkens: one fixed veil over the girih, under the leaves; only its opacity moves, on the compositor */
 @supports (animation-timeline:scroll()){.gi-js:not(.gi-rm)::after{content:"";position:fixed;inset:0;z-index:0;background:#000;opacity:0;pointer-events:none;animation:gi-dusk linear both;animation-timeline:scroll(root)}}
 /* the doorway arrives: frame, gold leaf across the name, the doors open from the gutter, the jambs */
 .gi-js:not(.gi-rm) .gi-frame-m .gi-fm{animation:gi-fade .5s var(--gi-ease) var(--gi-md,.95s) both}
 .gi-frame-m :is(.gi-fm--bl,.gi-fm--br){--gi-md:.55s}.gi-frame-m .gi-fm--tc{--gi-md:1.7s}
 .gi-js:not(.gi-rm) .gi-frame{-webkit-mask:conic-gradient(from 180deg,#000 var(--gi-fa),transparent 0 calc(360deg - var(--gi-fa)),#000 0);mask:conic-gradient(from 180deg,#000 var(--gi-fa),transparent 0 calc(360deg - var(--gi-fa)),#000 0);animation:gi-frame 1.6s var(--gi-ease) .3s both}
 .gi-js:not(.gi-rm) .gi-mast{background:linear-gradient(100deg,var(--gi-ink) 42%,var(--gi-leaf-hi) 50%,var(--gi-ink) 58%) 100% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gi-sweep 1.5s var(--gi-ease) .7s both}
 .gi-js:not(.gi-rm) .gi-bayt--h1:not(.gi-open)>.gi-mis{clip-path:inset(-.4em 0 -.4em 100%)}
 .gi-js:not(.gi-rm) .gi-bayt--h1:not(.gi-open)>.gi-mis:last-child{clip-path:inset(-.4em 100% -.4em 0)}
 .gi-js:not(.gi-rm) .gi-bayt--h1.gi-open>.gi-mis{animation:gi-door-a .9s var(--gi-ease) var(--gi-dd,1s) both}
 .gi-js:not(.gi-rm) .gi-bayt--h1.gi-open>.gi-mis:last-child{animation-name:gi-door-b}
 .gi-js:not(.gi-rm) :is(.gi-jamb,.gi-cap){animation:gi-up6 .9s var(--gi-ease) 1.2s both}
 .gi-js:not(.gi-rm) :is(.gi-links,.gi-add){animation:gi-up6 .9s var(--gi-ease) 1.4s both}
 .gi-js:not(.gi-rm) .gi-hero .gi-hashiya,.gi-js:not(.gi-rm) .gi-label{animation:gi-fade 1s var(--gi-ease) 1.6s both}
 .gi-js:not(.gi-rm) .gi-label{animation-delay:.2s}
 .gi-js:not(.gi-rm) .gi-glow{animation:gi-fade 1.4s var(--gi-ease) both}
 /* leaf doors: the knot first, then both halves open from the gutter */
 .gi-js:not(.gi-rm) .gi-bayt:not(.gi-bayt--h1,.gi-bayt--g)>.gi-mis{clip-path:inset(-.4em 0 -.4em 100%);transition:clip-path .7s var(--gi-ease) .3s}
 .gi-js:not(.gi-rm) .gi-bayt:not(.gi-bayt--h1,.gi-bayt--g)>.gi-mis:last-child{clip-path:inset(-.4em 100% -.4em 0)}
 .gi-js:not(.gi-rm) .gi-bayt:not(.gi-bayt--h1,.gi-bayt--g)>.gi-gut{opacity:0;scale:.4;transition:opacity .3s,scale .3s var(--gi-ease)}
 .gi-js:not(.gi-rm) .gi-bayt.gi-in>.gi-mis,.gi-js:not(.gi-rm) .gi-bayt.gi-in:not(.gi-bayt--h1,.gi-bayt--g)>.gi-mis:last-child{clip-path:inset(-.4em)}
 .gi-js:not(.gi-rm) .gi-bayt.gi-in>.gi-gut{opacity:1;scale:1}
 .gi-js:not(.gi-rm) .gi-reg li:not(.gi-in) .gi-gut--t{--gi-so:0}
 /* glosses write in along their baseline */
 .gi-js:not(.gi-rm) .gi-para .gi-hashiya--r{clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--gi-ease) .4s}
 .gi-js:not(.gi-rm) .gi-para .gi-hashiya--l{clip-path:inset(0 0 0 100%);transition:clip-path .6s var(--gi-ease) .4s}
 .gi-js:not(.gi-rm) .gi-para.gi-in .gi-hashiya{clip-path:inset(0)}
 .gi-js:not(.gi-rm) .gi-ini{opacity:0;scale:.8;transition:opacity .5s .2s,scale .9s var(--gi-ease) .2s}
 .gi-js:not(.gi-rm) .gi-in .gi-ini,.gi-js:not(.gi-rm) .gi-in.gi-ini{opacity:1;scale:1}
 /* plates: outlines, then straps, then leaf */
 .gi-js:not(.gi-rm) .gi-draw :is(.gi-p-o,.gi-p-ko,.gi-p-po,.gi-wv-v,.gi-ms-b,.gi-ms-f){opacity:0;transition:opacity .4s}
 .gi-js:not(.gi-rm) .gi-draw :is(.gi-p-s,.gi-p-ks){opacity:0;transition:opacity .6s .4s}
 .gi-js:not(.gi-rm) .gi-draw :is(.gi-p-leaf,.gi-p-in){opacity:0;transition:opacity .3s 1s}
 .gi-js:not(.gi-rm) .gi-draw .gi-wv-h{clip-path:inset(0 50%);transition:clip-path .9s var(--gi-ease)}
 .gi-js:not(.gi-rm) .gi-draw .gi-wv-v{clip-path:inset(50% 0);transition:clip-path .9s var(--gi-ease),opacity .2s}
 .gi-js:not(.gi-rm) .gi-draw .gi-wv-k use{opacity:0;transition:opacity .3s calc(.9s + var(--i)*30ms)}
 .gi-js:not(.gi-rm) .gi-draw .gi-ms-k{opacity:0;transition:opacity .15s calc(.3s + var(--i)*62ms)}
 .gi-js:not(.gi-rm) .gi-draw.gi-in :is(.gi-p-o,.gi-p-ko,.gi-p-po,.gi-p-s,.gi-p-ks,.gi-p-leaf,.gi-p-in,.gi-wv-v,.gi-wv-k use,.gi-ms-b,.gi-ms-f,.gi-ms-k){opacity:1}
 .gi-js:not(.gi-rm) .gi-draw.gi-in :is(.gi-wv-h,.gi-wv-v){clip-path:inset(0)}
 /* photographs brighten as if the coal had just caught */
 .gi-js:not(.gi-rm) .gi-photo img{filter:brightness(.35);transition:filter 1.2s var(--gi-ease)}
 .gi-js:not(.gi-rm) .gi-photo.gi-in img{filter:none}
 .gi-rv,.gi-bl,.gi-mat{will-change:auto}
}
@media (prefers-reduced-motion:reduce){.gi *,.gi *::before,.gi *::after{transition-duration:0s!important;animation-duration:0s!important;transition-delay:0s!important}}

/* ── 1199 and down: the tablet ───────────────────────────────────────── */
@media (max-width:1199px){
 .gi-jamb{width:240px}
 .gi-jamb--l{right:calc(50% + 100px)}.gi-jamb--r{left:calc(50% + 100px)}
}
/* 1000 to 1199: the panels keep their desktop measure and the links their single row */
@media (min-width:1000px) and (max-width:1199px){
 .gi-jamb{width:300px}
 .gi-links{width:max-content;flex-direction:row;align-items:center}
 .gi-knot{display:block}
}
@media (max-width:999px){
 .gi-leaf{padding-inline:34px}
 .gi-plate--1{--gi-pe:40px;gap:var(--gi-s3)}
}

/* ── 759 and down ───────────────────────────────────────────────────── */
@media (max-width:759px){
 .gi-steps{grid-template-columns:1fr;justify-items:center}
 .gi-steps::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:5px;margin-left:-2.5px;background:var(--gi-support);box-shadow:-1px 0 0 var(--gi-gold),1px 0 0 var(--gi-gold)}
 .gi-steps li{position:relative;max-width:22em;padding:0}
 .gi-steps li :is(.gi-st-n,p){position:relative;padding:4px 10px;background:var(--gi-lg)}
 .gi-steps p{margin:0;font-size:var(--gi-t-small)}
 .gi-mstrap{display:none}
 .gi-mk-v{display:block;width:12px;height:calc(var(--n)*5px + 6px);margin:var(--gi-s2) 0 var(--gi-s3);position:relative}
 .gi-steps li:last-child .gi-mk-v{margin-bottom:0}
 .gi-row--c>label{padding:0}
}

/* ── 699 and down: the phone ─────────────────────────────────────────── */
@media (max-width:699px){
 .gi-hero{--gi-stage:clamp(560px,calc(100svh - var(--bar-h,0px) - 228px),680px)}
 .gi-hero{--gi-fi:12px;--gi-b:10px}
 .gi-frame{--gi-gap:62px}
 .gi-fm{width:28px;height:28px;margin:-14px}
 .gi-label{top:calc(var(--gi-fi) + var(--gi-b) + 16px)}
 .gi-label span{display:block}
 .gi-mast-w{top:13%}
 .gi-links{width:auto;flex-wrap:wrap}
 .gi-mast{margin-right:-.14em;letter-spacing:.14em}
 .gi-hero .gi-hashiya{white-space:normal;max-width:17em;margin-inline:auto}
 .gi-mast-w .gi-hashiya{max-width:none;white-space:nowrap;font-size:14px}
 /* the doors on a phone: two narrow leaves facing each other across a clear gutter, stepped like a stair */
 .gi-bayt--h1{top:33.5%;left:22px;right:22px;translate:none;width:auto;grid-template-columns:1fr var(--gi-gut-h1) 1fr;align-items:start;font-size:clamp(1.9rem,1.35rem + 2.6vw,2.375rem);line-height:1.1;white-space:normal}
 .gi-bayt--h1>.gi-mis{max-width:none;white-space:normal;text-wrap:balance}
 .gi-bayt--h1>.gi-mis:first-child{justify-self:stretch;text-align:end}
 .gi-bayt--h1>.gi-mis:last-child{justify-self:stretch;margin-top:1.1em;text-align:start}
 .gi-bayt--h1>.gi-gut{width:auto;height:auto;margin:0;scale:none}
 .gi-hero-foot{position:static;display:grid;gap:var(--gi-s2);height:auto;padding:var(--gi-s3) 16px 0}
 .gi-jamb,.gi-cap,.gi-add,.gi-h-gloss{position:static;width:auto}
 .gi-jamb{text-align:left}
 .gi-jamb--r{margin-top:-6px}
 .gi-h-gloss .gi-hashiya{text-align:left;margin:0}
 .gi-cap{max-width:none}
 .gi-add{justify-self:start;margin-top:var(--gi-s2)}
 .gi-leaf{margin-top:var(--gi-s6);padding:var(--gi-s4) var(--gi-s3)}
 .gi-leaf--ros{margin-block:var(--gi-s6);padding-bottom:var(--gi-s4)}
 .gi-plate--1{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gi-s3) 4px;--gi-pe:32px;justify-items:center;align-items:end}
 .gi-plate--1 .gi-pl-f{grid-column:span 2}
 .gi-plate--1 .gi-pl-r,.gi-plate--1 .gi-pl-h{grid-column:span 3}
 .gi-plate--2{--gi-pe:30px;gap:var(--gi-s3)}
 .gi-blends{gap:2px}
 .gi-bl{width:58px;padding-bottom:14px;gap:4px}
 .gi-bl-g{width:44px;height:44px}
 .gi-bl-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .gi-bl-r{display:block}
 .gi-js .gi-bl-now,.gi-js .gi-ros-head{display:block;margin:var(--gi-s2) 0 0;font:400 11px/1.4 var(--gi-cap);letter-spacing:.24em;text-transform:uppercase;color:var(--gi-ink-2)}
 .gi-js .gi-ros-head{position:absolute;top:-6px;left:0;right:0;font-size:15px;letter-spacing:.2em;color:var(--gi-ink)}
 .gi-ros{--gi-rs:288px;--gi-lr:152px;margin-top:var(--gi-s4)}
 .gi-mat-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .gi-mat-i{display:block;font-size:14px;letter-spacing:0}
 .gi-ros-t{display:none}
 .gi-wv--wide{display:none}
 .gi-wv--narrow{display:block}
 .gi-wv-key{display:block;margin:var(--gi-s2) 0 0;font:italic 400 var(--gi-t-small)/1.5 var(--gi-txt);color:var(--gi-ink-2)}
 .gi-words{grid-template-columns:1fr}
 .gi-roll-l{letter-spacing:.14em}
 .gi-finer{margin-top:var(--gi-s6)}
 .gi-form{padding:var(--gi-s4) var(--gi-s2) var(--gi-s3)}
 .gi-chks{gap:8px 2px}
 .gi-chk{width:66px}
 .gi-mast-w{display:block}
 .gi-mast-w .gi-hashiya{margin:4px 0 0}
 .gi-folio{font-size:15px}
 .gi-fc{display:block;width:fit-content;margin:2px auto 0}
 .gi-ini{width:52px;height:52px;font-size:25px;line-height:54px}
}
/* the smallest phones: the material ring comes in a little so its right-hand labels stay on screen */
@media (max-width:359px){.gi-ros{--gi-rs:252px;--gi-lr:134px}}