/* =====================================================================
   SK WEDDING SITES - the 15 home layouts (round 3, 2026-11-10)
   Markup: sk-homes.js. Each one takes the look's tokens (Marquee or
   Folio), or its own mockup palette under .hl-sig. Phones are a
   container query on the section itself (under 760 px), so the
   builder's phone frame gets the phone layout. Decorative layers are
   aria-hidden in the markup; reduced motion turns off the flips, the
   slide and the hover zoom.
   Tokens a layout reads:
     --hk dark  --hp light  --ha accent on dark  --hat accent on light
     --hb button  --hbt button text  --hm muted on light
     --hd display font  --hdi its style  --hdw its weight  --hu UI font
     --hr button corners
   ===================================================================== */
.ws-tpl-marquee .hl{--hk:#17110E;--hp:#F4EEE3;--ha:#E0A23B;--hat:#9A5B12;--hb:#8C1C2A;--hbt:#fff;--hm:#5B514A;
  --hd:'Bodoni Moda',Georgia,serif;--hdi:italic;--hdw:400;--hu:'Manrope',system-ui,sans-serif;--hr:999px;--hl-h:clamp(640px,100vh,900px);--hl-pb:96px}
.ws-tpl-folio .hl{--hk:#22201D;--hp:#FAF7F1;--ha:#C9D3BC;--hat:#56664B;--hb:#22201D;--hbt:#FAF7F1;--hm:#5E5A53;
  --hd:'Fraunces',Georgia,serif;--hdi:italic;--hdw:300;--hu:'Inter',system-ui,sans-serif;--hr:0;--hl-h:clamp(600px,calc(100vh - 76px),900px);--hl-pb:0px}

.hl{--bg:var(--hp);--fg:var(--hk);--ac:var(--hat);--btn:var(--hb);--btnt:var(--hbt);--mut:var(--hm);
  display:block!important;position:relative;min-height:0!important;text-align:left!important;padding:0!important;overflow:hidden;
  container-type:inline-size;container-name:hl;background:var(--bg);color:var(--fg);font-family:var(--hu);line-height:1.5}
.hl *{box-sizing:border-box}
.hl.hl-dark{--bg:var(--hk);--fg:var(--hp);--ac:var(--ha);--btn:var(--ha);--btnt:var(--hk);--mut:color-mix(in srgb,var(--hp) 78%,var(--hk))}
.hl h1,.hl p{margin:0}
.hl button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.hl :focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.hl .hl-in{position:relative;min-height:var(--hl-h);padding-bottom:var(--hl-pb)}
.hl .hl-dis{font-family:var(--hd);font-style:var(--hdi);font-weight:var(--hdw);letter-spacing:-.01em;line-height:.95}
.hl .hl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.hl .hl-ph{position:relative;display:block;overflow:hidden;background:color-mix(in srgb,var(--fg) 14%,var(--bg))}
.hl .hl-ph image-slot{position:absolute;inset:0;width:100%;height:100%}
.hl .hl-ph img{width:100%;height:100%;object-fit:cover}
.hl .hl-nb{min-height:48px;padding:0 18px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.hl .hl-nb:hover{opacity:.8}
.hl .hl-rs{background:var(--btn);color:var(--btnt);border-radius:var(--hr);min-height:52px;padding:0 26px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.hl .hl-rs:hover{filter:brightness(1.08)}
.hl .hl-nav{display:flex;flex-wrap:wrap;gap:8px}
.hl .hl-bg{position:absolute!important;inset:0}
.hl .hl-scrim{position:absolute;inset:0;pointer-events:none}

/* the dark layouts: muted text is light */
.hl-H01,.hl-H02,.hl-H04,.hl-H07,.hl-H11,.hl-H14{--mut:color-mix(in srgb,var(--hp) 80%,var(--hk))}

/* ---------- H01 Cinema sign ---------- */
.hl-H01{--bg:var(--hk);--fg:var(--hp);--ac:var(--ha);--btn:var(--ha);--btnt:var(--hk)}
.hl-H01 .hl-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px;padding:90px 40px calc(60px + var(--hl-pb))}
.hl-H01 .hl-scrim{background:rgba(10,7,6,.66)}
.hl-H01 .hl-sign{position:relative;width:min(980px,100%);padding:46px 60px 50px;background:color-mix(in srgb,var(--hk) 92%,#000);border:3px solid var(--ac);text-align:center;
  box-shadow:0 0 0 14px color-mix(in srgb,var(--hk) 92%,#000),0 0 0 17px var(--ac),0 30px 80px rgba(0,0,0,.6)}
.hl-H01 .hl-bulbs{position:absolute;inset:-13px;border:11px dotted #FFE3A0;pointer-events:none;filter:drop-shadow(0 0 5px rgba(255,205,110,.95)) drop-shadow(0 0 12px rgba(255,170,60,.5))}
.hl-H01 .hl-ns{font-family:'Oswald',var(--hu);letter-spacing:.5em;font-size:16px;color:var(--ac);text-transform:uppercase}
.hl-H01 h1{font-family:var(--hd);font-style:normal;font-weight:500;font-size:clamp(46px,9.2cqi,132px);line-height:.95;margin:18px 0 6px;letter-spacing:.02em;color:#FFF3DC;text-transform:uppercase;text-shadow:0 0 24px rgba(255,200,110,.35);overflow-wrap:anywhere}
.hl-H01 h1 i{font-style:italic;font-weight:400;color:var(--ac);font-size:.6em;vertical-align:.18em;margin:0 .1em}
.hl-H01 .hl-one{font-family:'Oswald',var(--hu);font-size:clamp(14px,1.5cqi,22px);letter-spacing:.38em;text-transform:uppercase;margin-top:8px}
.hl-H01 .hl-nav{position:relative;justify-content:center;gap:14px}
.hl-H01 .hl-nb{font-family:'Oswald',var(--hu);font-weight:500;border:1px solid color-mix(in srgb,var(--fg) 60%,transparent);padding:0 26px;min-height:52px}
.hl-H01 .hl-nb.hl-rs{background:var(--ac);color:var(--hk);border-color:var(--ac);border-radius:0}
.hl-H01.hl-sig{--hk:#120C0A;--hp:#F6E7C8;--ha:#D9A441;--hd:'Bodoni Moda',serif;--hu:'Oswald',sans-serif}

/* ---------- H02 Film strip ---------- */
.hl-H02{--bg:var(--hk);--fg:var(--hp);--ac:var(--ha)}
.hl-H02 .hl-in{display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:56px 0 calc(48px + var(--hl-pb))}
.hl-H02 .hl-top{text-align:center;padding:0 24px}
.hl-H02 h1{font-size:clamp(46px,6.7cqi,96px)}
.hl-H02 .hl-sub{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.3em;color:var(--mut);margin-top:18px;text-transform:uppercase}
.hl-H02 .hl-stripw{overflow:hidden;padding:30px 0}
.hl-H02 .hl-strip{position:relative;margin:0 -40px;background:color-mix(in srgb,var(--hk) 80%,#000);transform:rotate(-2deg);padding:54px 40px}
.hl-H02 .hl-sp{position:absolute;left:0;right:0;height:26px;background:repeating-linear-gradient(90deg,transparent 0 14px,var(--hp) 14px 34px,transparent 34px 48px);opacity:.85}
.hl-H02 .hl-sp.t{top:14px}.hl-H02 .hl-sp.b{bottom:14px}
.hl-H02 .hl-frs{display:flex;gap:18px;justify-content:center}
.hl-H02 .hl-fr{position:relative;flex:0 0 auto;height:clamp(180px,23cqi,330px);aspect-ratio:3/2}
.hl-H02 .hl-fr.v{aspect-ratio:2/3}
.hl-H02 .hl-fr .hl-ph{width:100%;height:100%}
.hl-H02 .hl-fn{position:absolute;left:0;bottom:-24px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ac);letter-spacing:.2em}
.hl-H02 .hl-nav{justify-content:center;gap:28px;font-family:'IBM Plex Mono',monospace;padding:0 20px}
.hl-H02 .hl-nb{flex-direction:column;gap:4px;font-weight:400;font-size:14px;letter-spacing:.14em;text-transform:none;padding:0 8px}
.hl-H02 .hl-nb b{font-weight:500;color:var(--ac);font-size:12px}
.hl-H02 .hl-nb.hl-rs{flex-direction:row;background:transparent;color:var(--fg);border:1px solid var(--ac);border-radius:0;gap:10px}
.hl-H02.hl-sig{--hk:#0E0D0C;--hp:#F2EDE4;--ha:#E0A23B;--hd:'Fraunces',serif;--hdi:italic;--hdw:300;--hu:'IBM Plex Mono',monospace}

/* ---------- H03 Polaroid table ---------- */
.hl-H03{--bg:color-mix(in srgb,var(--hp) 88%,#C9B79A);background:var(--bg) radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--hp) 92%,#fff),transparent 60%)}
.hl-H03 .hl-in{display:flex;flex-direction:column;justify-content:space-between;padding:60px 60px calc(38px + var(--hl-pb))}
.hl-H03 .hl-table{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto;gap:24px 40px;align-items:center;flex:1}
.hl-H03 .hl-pol{position:relative;margin:0;width:100%;max-width:calc((var(--hl-h) - 230px) * .4);justify-self:center;background:#FDFBF6;padding:14px 14px 56px;box-shadow:0 14px 30px rgba(60,40,20,.22);aspect-ratio:4/5}
.hl-H03 .hl-pol .hl-ph{width:100%;height:100%}
.hl-H03 .hl-pol figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:'Caveat',cursive;font-size:26px;color:#2A2522;line-height:1.1}
.hl-H03 .p0{grid-column:1;grid-row:1;transform:rotate(-7deg)}
.hl-H03 .p1{grid-column:1;grid-row:2;transform:rotate(5deg);aspect-ratio:9/8}
.hl-H03 .p2{grid-column:3;grid-row:1;transform:rotate(6deg);aspect-ratio:9/8}
.hl-H03 .p3{grid-column:3;grid-row:2;transform:rotate(-4deg)}
.hl-H03 .hl-tape{position:absolute;width:120px;height:30px;background:rgba(240,225,180,.78);top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);z-index:2}
.hl-H03 .hl-mid{grid-column:2;grid-row:1/3;text-align:center}
.hl-H03 h1{font-size:clamp(54px,7.6cqi,110px);line-height:.92}
.hl-H03 .hl-hand{font-family:'Caveat',cursive;font-size:clamp(26px,2.4cqi,34px);margin-top:16px;color:var(--ac)}
.hl-H03 .hl-nav{justify-content:center;gap:12px;margin-top:28px}
.hl-H03 .hl-nb{font-family:'Caveat',cursive;font-size:28px;font-weight:500;letter-spacing:0;text-transform:none;background:#FDFBF6;color:#2A2522;padding:2px 20px;box-shadow:0 4px 10px rgba(60,40,20,.15);transform:rotate(-2deg)}
.hl-H03 .hl-nb:nth-child(even){transform:rotate(2deg)}
.hl-H03 .hl-nb.hl-rs{background:var(--btn);color:var(--btnt);border-radius:0}
.hl-H03.hl-sig{--hp:#F3EEE5;--hk:#2A2522;--hat:#8A4B2E;--hb:#8A4B2E;--hbt:#FDFBF6;--hd:'Cormorant Garamond',serif;--hdi:italic;--hdw:500;--hu:'Work Sans',sans-serif;--bg:#E9E2D5}

/* ---------- H04 Diptych ---------- */
.hl-H04{--bg:var(--hk);--fg:#F7F1E6;--ac:var(--ha);--btn:var(--ha);--btnt:var(--hk)}
.hl-H04 .hl-in{padding:0}
.hl-H04 .hl-halves{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.hl-H04 .hl-half{position:relative;overflow:hidden}
.hl-H04 .hl-half .hl-ph{position:absolute;inset:0}
.hl-H04 .hl-half::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,10,8,.78),rgba(15,10,8,0) 50%);pointer-events:none}
.hl-H04 .hl-nm{position:absolute;bottom:calc(70px + var(--hl-pb));left:60px;z-index:2;font-size:clamp(56px,9.7cqi,140px);line-height:.9;color:#F7F1E6}
.hl-H04 .hl-half.r .hl-nm{left:auto;right:60px;text-align:right}
.hl-H04 .hl-med{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(130px,14cqi,200px);aspect-ratio:1;border-radius:999px;background:#F7F1E6;color:#17110E;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;box-shadow:0 0 0 10px rgba(247,241,230,.25)}
.hl-H04 .hl-med b{font-size:clamp(52px,5.8cqi,84px);line-height:.8}
.hl-H04 .hl-med span{font-size:12px;letter-spacing:.24em;margin-top:10px;font-weight:600;font-family:var(--hu)}
.hl-H04 .hl-nav{position:absolute;top:0;left:0;right:0;padding:26px 20px 40px;background:linear-gradient(180deg,rgba(15,10,8,.66),rgba(15,10,8,0));justify-content:center;gap:6px;z-index:4;color:#F7F1E6}
.hl-H04 .hl-nb{font-size:12px;letter-spacing:.24em}
.hl-H04.hl-sig{--hk:#120C0A;--ha:#E0A23B;--hd:'Bodoni Moda',serif;--hdi:italic;--hdw:400;--hu:'Manrope',sans-serif;--hr:999px}

/* ---------- H05 Boarding pass ---------- */
.hl-H05{--bg:var(--hk);--fg:#fff}
.hl-H05 .hl-in{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:30px 70px calc(70px + var(--hl-pb))}
.hl-H05 .hl-scrim{background:linear-gradient(90deg,rgba(10,14,22,.62),rgba(10,14,22,.12) 60%),linear-gradient(0deg,rgba(10,14,22,.35),transparent 40%)}
.hl-H05 .hl-nav{position:relative;justify-content:flex-end;gap:10px;color:#fff}
.hl-H05 .hl-nb{font-weight:500;letter-spacing:.2em}
.hl-H05 .hl-hl{position:relative;max-width:560px;color:#fff}
.hl-H05 .hl-hl h1{font-size:clamp(52px,7.2cqi,104px);line-height:.92}
.hl-H05 .hl-hl p{letter-spacing:.24em;text-transform:uppercase;font-size:13px;margin-top:22px;font-weight:600}
.hl-H05 .hl-pass{position:relative;align-self:flex-end;width:min(720px,100%);background:#FBF8F2;color:#1D2633;border-radius:22px;display:grid;grid-template-columns:minmax(0,1fr) 210px;box-shadow:0 30px 70px rgba(0,0,0,.35);font-family:'Space Grotesk',var(--hu)}
.hl-H05 .hl-main{padding:26px 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px;align-content:start}
.hl-H05 .hl-k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#5D6573;font-weight:600}
.hl-H05 .hl-v{font-size:20px;font-weight:500;margin-top:2px;line-height:1.2;overflow-wrap:anywhere}
.hl-H05 .hl-big{grid-column:1/-1;display:flex;align-items:center;gap:22px;border-bottom:1px dashed #C9C2B5;padding-bottom:16px}
.hl-H05 .hl-big b{font-size:54px;font-weight:600;letter-spacing:-.02em;line-height:1}
.hl-H05 .hl-stub{border-left:2px dashed #C9C2B5;padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.hl-H05 .hl-stub .hl-rs{background:#1D2633;color:#fff;border-radius:12px;padding:0 12px;letter-spacing:.18em;width:100%}
.hl-H05 .hl-bar{display:block;height:54px;background:repeating-linear-gradient(90deg,#1D2633 0 2px,transparent 2px 5px,#1D2633 5px 6px,transparent 6px 9px)}
.hl-H05.hl-sig{--hd:'Fraunces',serif;--hdi:italic;--hdw:300;--hu:'Space Grotesk',sans-serif}

/* ---------- H06 Magazine cover ---------- */
.hl-H06{--bg:color-mix(in srgb,var(--hp) 95%,#D8CFC0)}
.hl-H06 .hl-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0}
.hl-H06 .hl-cov{position:relative;overflow:hidden;min-height:var(--hl-h)}
.hl-H06 .hl-cov>.hl-ph{position:absolute;inset:0}
.hl-H06 .hl-cov::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 30%,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.hl-H06 .hl-mast{position:absolute;top:18px;left:0;right:0;text-align:center;font-family:var(--hd);font-style:normal;font-weight:900;font-size:clamp(110px,15.3cqi,220px);line-height:.8;color:#F3EFE8;letter-spacing:-.02em;z-index:1}
.hl-H06 .hl-cl{position:absolute;left:34px;bottom:calc(40px + var(--hl-pb));color:#fff;max-width:340px;z-index:1;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hl-H06 .hl-cl b{display:block;font-family:var(--hd);font-style:italic;font-weight:400;font-size:clamp(28px,3.2cqi,46px);line-height:1.02}
.hl-H06 .hl-cl span{display:block;margin-top:10px;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.hl-H06 .hl-iss{position:absolute;right:30px;top:clamp(130px,17cqi,250px);color:#fff;font-size:14px;letter-spacing:.2em;text-align:right;text-transform:uppercase;z-index:1;text-shadow:0 1px 10px rgba(0,0,0,.45);font-weight:600}
.hl-H06 .hl-toc{padding:70px 80px calc(50px + var(--hl-pb));display:flex;flex-direction:column}
.hl-H06 .hl-k{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ac);font-weight:600;margin-bottom:12px}
.hl-H06 h1{font-family:var(--hd);font-style:normal;font-weight:700;font-size:clamp(40px,4.4cqi,64px);line-height:1}
.hl-H06 h1 i{font-style:italic;font-weight:400}
.hl-H06 ul{list-style:none;margin:36px 0 0;padding:0}
.hl-H06 li button{width:100%;display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;text-align:left;padding:16px 0;border-top:1px solid var(--fg);min-height:64px}
.hl-H06 li button:hover .hl-t{color:var(--ac)}
.hl-H06 .hl-p{font-family:var(--hd);font-weight:900;font-style:normal;font-size:30px;color:var(--ac);line-height:1}
.hl-H06 .hl-t{font-family:var(--hd);font-size:26px;line-height:1.1}
.hl-H06 .hl-t small{display:block;font-family:var(--hu);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:4px}
.hl-H06 .hl-rs{margin-top:28px;width:100%;border-radius:0;background:var(--fg);color:var(--bg);min-height:58px;letter-spacing:.26em}
.hl-H06.hl-sig{--hp:#F3EFE8;--hk:#141210;--hat:#9A3B2A;--hm:#5B554D;--hd:'Playfair Display',serif;--hu:'Archivo Narrow',sans-serif;--bg:#F3EFE8}

/* ---------- H07 Split-flap countdown ---------- */
.hl-H07{--bg:color-mix(in srgb,var(--hk) 92%,#2a2826);--fg:var(--hp);--ac:var(--ha);--btn:var(--ha);--btnt:var(--hk)}
.hl-H07 .hl-in{display:flex;flex-direction:column;gap:36px;padding:44px 70px calc(60px + var(--hl-pb))}
.hl-H07 .hl-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hl-H07 .hl-tn{font-size:44px;line-height:1}
.hl-H07 .hl-nav{font-family:'Oswald',var(--hu)}
.hl-H07 .hl-nb{font-weight:400;font-size:15px}
.hl-H07 .hl-board{display:flex;justify-content:center;gap:clamp(10px,1.8cqi,26px);align-items:flex-start;margin-top:20px}
.hl-H07 .hl-grp{display:flex;flex-direction:column;align-items:center;gap:14px}
.hl-H07 .hl-digs{display:flex;gap:8px}
.hl-H07 .hl-d{position:relative;width:clamp(54px,8.2cqi,118px);height:clamp(78px,11.8cqi,170px);background:linear-gradient(#2A2826 0 49.6%,#11100F 49.6% 50.4%,#232120 50.4%);border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-size:clamp(62px,9.7cqi,140px);font-weight:600;line-height:1;color:#F6E9C9;box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.4)}
.hl-H07 .hl-d.flip{animation:hl-flip .45s ease-out}
@keyframes hl-flip{0%{transform:perspective(400px) rotateX(70deg)}100%{transform:none}}
.hl-H07 .hl-lab{font-family:'Oswald',sans-serif;font-size:16px;letter-spacing:.4em;text-transform:uppercase;color:var(--mut)}
.hl-H07 .hl-colon{font-family:'Oswald',sans-serif;font-size:clamp(54px,8.3cqi,120px);color:var(--ac);line-height:clamp(78px,11.8cqi,170px)}
.hl-H07 .hl-when{text-align:center;font-size:clamp(20px,2.1cqi,30px);color:var(--mut);line-height:1.3}
.hl-H07 .hl-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(180px,260px);gap:14px;height:clamp(160px,17cqi,250px);margin-top:auto}
.hl-H07 .hl-row .hl-ph{height:100%}
.hl-H07 .hl-rs{border-radius:0;height:100%;flex-direction:column;font-family:'Oswald',var(--hu);font-size:22px;font-weight:500;letter-spacing:.2em}
.hl-H07 .hl-rs small{font-size:13px;letter-spacing:.2em}
.hl-H07.hl-sig{--hk:#151413;--hp:#F2ECE1;--ha:#E0A23B;--hd:'Fraunces',serif;--hdi:italic;--hdw:300;--hu:'Oswald',sans-serif;--bg:#151413}

/* ---------- H08 Hover index ---------- */
.hl-H08 .hl-in{padding:36px 70px calc(40px + var(--hl-pb));display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:30px 60px}
.hl-H08 .hl-hd{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;letter-spacing:.26em;text-transform:uppercase;font-weight:600}
.hl-H08 nav{grid-column:1;grid-row:2;align-self:center}
.hl-H08 .hl-idx{list-style:none;margin:0;padding:0}
.hl-H08 .hl-idx button{font-family:var(--hd);font-weight:300;font-size:clamp(48px,8.2cqi,118px);line-height:1.02;letter-spacing:-.03em;display:flex;align-items:baseline;gap:22px;min-height:48px;color:color-mix(in srgb,var(--fg) 52%,var(--bg))}
.hl-H08 .hl-idx button small{font-family:var(--hu);font-size:14px;letter-spacing:.2em;color:var(--mut);font-weight:600}
.hl-H08 .hl-idx li.on button{color:var(--fg);font-style:italic}
.hl-H08 .hl-peeks{grid-column:2;grid-row:2;position:relative;align-self:center;aspect-ratio:3/4;max-height:560px;width:100%;max-width:420px;justify-self:center}
.hl-H08 .hl-peek{position:absolute;inset:0;opacity:0;transform:rotate(4deg) scale(.97);transition:opacity .35s,transform .45s;box-shadow:0 30px 60px rgba(0,0,0,.2)}
.hl-H08 .hl-peek.on{opacity:1;transform:rotate(4deg)}
.hl-H08 .hl-peek .hl-ph{width:100%;height:100%}
.hl-H08>.hl-in>.hl-rs{grid-column:2;grid-row:3;justify-self:end;border-radius:var(--hr)}
.hl-H08.hl-sig{--hp:#F6F1E8;--hk:#1E1C1A;--hm:#5E574D;--hb:#1E1C1A;--hbt:#F6F1E8;--hd:'Fraunces',serif;--hdi:italic;--hdw:300;--hu:'Inter',sans-serif;--hr:0}

/* ---------- H09 Photo-filled names ---------- */
.hl-H09 .hl-in{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:50px 70px calc(46px + var(--hl-pb))}
.hl-H09 .hl-fill{position:relative;margin:auto 0;text-align:center;font-family:'Anton',Impact,sans-serif;font-weight:400;font-style:normal;font-size:clamp(64px,22cqi,318px);line-height:.86;letter-spacing:-.01em;
  background-color:var(--ac);background-position:50% 48%;background-size:cover;-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere;max-width:100%}
.hl-H09 .hl-fill.plain{background:none;color:var(--fg)}
.hl-H09 .hl-fill span{display:block}
.hl-H09 .hl-amp{position:absolute;left:50%;top:calc(50px + clamp(64px,22cqi,318px) * .86);transform:translate(-50%,-50%);font-family:'Anton',sans-serif;font-size:clamp(40px,6.2cqi,90px);background:var(--bg);color:var(--ac);width:clamp(64px,8.3cqi,120px);aspect-ratio:1;border-radius:999px;display:flex;align-items:center;justify-content:center;line-height:1}
.hl-H09 .hl-bar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--fg);padding-top:22px;margin-top:30px}
.hl-H09 .hl-bar p{font-size:14px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.hl-H09 .hl-nb.hl-rs{border-radius:var(--hr)}
.hl-H09.hl-sig{--hp:#F4EFE6;--hk:#1C1A18;--hat:#B4472E;--hb:#B4472E;--hbt:#fff;--hu:'Inter',sans-serif;--hr:0}

/* ---------- H10 Opened envelope ---------- */
.hl-H10{--bg:color-mix(in srgb,var(--hp) 80%,#C99F92);--env:color-mix(in srgb,var(--hat) 45%,#C99F92);--env2:color-mix(in srgb,var(--hat) 55%,#B88A7C)}
.hl-H10 .hl-in{display:grid;grid-template-columns:200px minmax(0,1fr) 200px;padding:60px 60px 0}
.hl-H10 .hl-nav{flex-direction:column;gap:6px;align-self:start}
.hl-H10 .hl-nb{justify-content:flex-start;padding:0;font-weight:500}
.hl-H10 .hl-envw{position:relative;grid-column:2;width:min(900px,100%);justify-self:center;display:flex;justify-content:center;align-items:flex-start;padding-bottom:calc(190px + var(--hl-pb))}
.hl-H10 .hl-env,.hl-H10 .hl-back,.hl-H10 .hl-flap{position:absolute;left:0;right:0;bottom:calc(var(--hl-pb) - 40px)}
.hl-H10 .hl-back{height:420px;background:var(--env2);z-index:1}
.hl-H10 .hl-flap{bottom:calc(var(--hl-pb) + 380px);height:240px;background:var(--env2);clip-path:polygon(0 100%,50% 0,100% 100%);z-index:0}
.hl-H10 .hl-env{height:420px;background:var(--env);z-index:3;clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%)}
.hl-H10 .hl-card{position:relative;z-index:2;width:min(620px,92%);background:#FFFCF7;color:#2B2321;padding:22px 22px 150px;box-shadow:0 20px 50px rgba(60,30,20,.25);transform:rotate(-1.5deg);animation:hl-slide .9s ease-out both}
@keyframes hl-slide{from{transform:translateY(80px) rotate(-1.5deg)}to{transform:rotate(-1.5deg)}}
.hl-H10 .hl-card .hl-ph{height:clamp(220px,23cqi,330px)}
.hl-H10 .hl-card h1{font-family:var(--hd);font-size:clamp(44px,4.9cqi,70px);line-height:1;margin-top:26px;text-align:center}
.hl-H10 .hl-card p{text-align:center;letter-spacing:.28em;font-size:13px;text-transform:uppercase;margin-top:14px}
.hl-H10 .hl-card .hl-cd{letter-spacing:.18em}
.hl-H10 .hl-seal{position:absolute;left:50%;bottom:calc(150px + var(--hl-pb));transform:translateX(-50%);z-index:4;width:120px;height:120px;border-radius:999px;background:radial-gradient(circle at 35% 30%,#B23A3A,#7E1E22);color:#F5D9C4;font-family:var(--hd);font-style:italic;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.hl-H10 .hl-seal:hover{filter:brightness(1.1)}
.hl-H10.hl-sig{--hp:#F4E7E2;--hk:#2B2321;--hat:#7E1E22;--hd:'Cormorant Garamond',serif;--hdi:italic;--hdw:400;--hu:'Jost',sans-serif;--bg:#E8D6CF;--env:#C99F92;--env2:#B88A7C}

/* ---------- H11 Iris spotlight ---------- */
.hl-H11{--bg:color-mix(in srgb,var(--hk) 85%,#000);--fg:var(--hp);--ac:var(--ha);--btn:transparent;--btnt:var(--ha)}
.hl-H11 .hl-in{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr) auto;align-items:center;gap:0;padding:90px 70px calc(90px + var(--hl-pb)) 120px}
.hl-H11 .hl-iris{width:100%;max-width:720px;aspect-ratio:1;border-radius:999px;overflow:hidden;box-shadow:0 0 0 2px var(--ac),0 0 0 18px var(--bg),0 0 0 19px color-mix(in srgb,var(--ac) 50%,transparent),0 0 120px color-mix(in srgb,var(--ac) 25%,transparent)}
.hl-H11 .hl-iris .hl-ph{width:100%;height:100%}
.hl-H11 .hl-tx{position:relative;margin-left:-200px;z-index:2}
.hl-H11 h1{font-size:clamp(60px,10.4cqi,150px);line-height:.88;color:var(--fg);text-shadow:0 2px 24px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.6)}
.hl-H11 .hl-d{margin:28px 0 0 20px;font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:var(--ac);font-weight:500}
.hl-H11 .hl-nav{flex-direction:column;align-items:flex-end;gap:10px}
.hl-H11 .hl-nb{justify-content:flex-end;font-weight:500;letter-spacing:.28em;padding:0}
.hl-H11 .hl-nb.hl-rs{margin-top:16px;border:1px solid var(--ac);color:var(--ac);background:transparent;padding:0 22px;border-radius:var(--hr)}
.hl-H11.hl-sig{--hk:#0D0C0B;--hp:#F1EADD;--ha:#C9A45C;--hd:'Playfair Display',serif;--hdi:italic;--hdw:400;--hu:'Jost',sans-serif;--hr:0;--bg:#0D0C0B}

/* ---------- H12 Weekend rail ---------- */
.hl-H12 .hl-in{display:flex;flex-direction:column;padding:40px 70px calc(40px + var(--hl-pb))}
.hl-H12 .hl-hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.hl-H12 .hl-hd h1{font-size:clamp(40px,4.3cqi,62px);line-height:1}
.hl-H12 .hl-hd>span{font-size:13px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--ac)}
.hl-H12 .hl-rail{list-style:none;margin:36px 0;padding:0;flex:1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,230px));justify-content:space-around;grid-template-rows:1fr 1fr;position:relative;column-gap:16px;min-height:560px}
.hl-H12 .hl-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--fg)}
.hl-H12 .hl-stop{position:relative;grid-row:1;grid-column:var(--c,1)}
.hl-H12 .hl-stop.dn{grid-row:2}
.hl-H12 .hl-stop.only{grid-row:1}
.hl-H12 .hl-stop button{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding-bottom:24px}
.hl-H12 .hl-stop.dn button{justify-content:flex-start;padding:24px 0 0}
.hl-H12 .hl-stop .hl-ph{width:100%;aspect-ratio:23/30;max-height:300px}
.hl-H12 .hl-stop.dn .hl-ph{aspect-ratio:23/20;order:3}
.hl-H12 .hl-stop b{font-size:clamp(22px,2.2cqi,32px);line-height:1.1;margin-top:10px}
.hl-H12 .hl-stop.dn b{order:2;margin:0 0 10px}
.hl-H12 .hl-stop small{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--mut)}
.hl-H12 .hl-stop.dn small{order:1;margin-bottom:4px}
.hl-H12 .hl-dot{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);width:20px;height:20px;border-radius:999px;background:var(--btn);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--btn)}
.hl-H12 .hl-stop.dn .hl-dot{bottom:auto;top:-9px}
.hl-H12 .hl-stop button:hover b{color:var(--ac)}
.hl-H12 .hl-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hl-H12 .hl-nb{font-size:12px;padding:0 12px 0 0}
.hl-H12.hl-sig{--hp:#F4EEE3;--hk:#17110E;--hat:#9A5B12;--hb:#8C1C2A;--hbt:#fff;--hm:#5B514A;--hd:'Bodoni Moda',serif;--hdi:italic;--hdw:400;--hu:'Manrope',sans-serif;--hr:999px}

/* ---------- H13 Postcard ---------- */
.hl-H13{--bg:color-mix(in srgb,var(--hp) 70%,#BFD3D0)}
.hl-H13 .hl-in{display:flex;align-items:center;justify-content:center;padding:70px 60px calc(70px + var(--hl-pb))}
.hl-H13 .hl-pc{width:min(1140px,100%);background:#FFFDF6;color:#24312F;transform:rotate(-2deg);box-shadow:0 30px 60px rgba(30,50,48,.25);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:600px}
.hl-H13 .hl-front{position:relative;margin:26px;overflow:hidden;min-height:360px}
.hl-H13 .hl-front>.hl-ph{position:absolute;inset:0}
.hl-H13 .hl-front::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 55%);pointer-events:none}
.hl-H13 .hl-front h1{position:absolute;left:24px;right:24px;bottom:30px;z-index:1;font-family:'Lobster',cursive;font-weight:400;font-size:clamp(44px,5cqi,72px);line-height:1;color:#FFE9A8;text-shadow:3px 3px 0 #D2542F,6px 6px 0 rgba(0,0,0,.25);overflow-wrap:anywhere}
.hl-H13 .hl-front h1 small{display:block;font-size:.48em;color:#fff;text-shadow:2px 2px 0 #D2542F}
.hl-H13 .hl-pback{position:relative;padding:40px 46px 40px 40px;border-left:1px solid #C9C4B6;margin:26px 0;display:flex;flex-direction:column;gap:26px}
.hl-H13 .hl-msg{font-family:'Special Elite',monospace;font-size:clamp(17px,1.5cqi,21px);line-height:1.6;max-width:300px;margin-right:150px}
.hl-H13 .hl-stamp{position:absolute;right:40px;top:20px;width:120px;height:150px;border:3px dashed #D2542F;padding:8px;background:#FFFDF6}
.hl-H13 .hl-stamp .hl-ph{width:100%;height:100%}
.hl-H13 .hl-pm{position:absolute;right:30px;top:180px;width:150px;height:150px;border-radius:999px;border:3px solid rgba(36,49,47,.55);display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Special Elite',monospace;font-size:14px;color:rgba(36,49,47,.8);transform:rotate(-14deg);pointer-events:none}
.hl-H13 .hl-lines{margin-top:auto;display:flex;flex-direction:column;gap:22px}
.hl-H13 .hl-lines span{border-bottom:1px solid #9FA8A3;font-family:'Special Elite',monospace;font-size:18px;padding-bottom:4px}
.hl-H13 .hl-nav{gap:10px}
.hl-H13 .hl-nb{border:1px solid #24312F;padding:0 16px;font-size:12px;letter-spacing:.2em}
.hl-H13 .hl-nb.hl-rs{background:#D2542F;color:#fff;border-color:#D2542F;border-radius:0}
.hl-H13.hl-sig{--hp:#E5EEEC;--hk:#24312F;--hu:'Work Sans',sans-serif;--bg:#D9E4E2}

/* ---------- H14 Contact sheet ---------- */
.hl-H14{--bg:color-mix(in srgb,var(--hk) 70%,#000);--fg:#EDE8E0;--ac:var(--ha);--red:#E8604F}
.hl-H14 .hl-in{display:grid;grid-template-columns:minmax(0,900px) minmax(0,1fr);gap:50px;padding:60px 60px calc(60px + var(--hl-pb));font-family:'IBM Plex Mono',monospace;align-items:start}
.hl-H14 .hl-sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 14px}
.hl-H14 .hl-f{position:relative}
.hl-H14 .hl-f .hl-ph{aspect-ratio:3/2;filter:grayscale(.15)}
.hl-H14 .hl-fn{position:absolute;left:0;bottom:-19px;font-size:11px;color:var(--ac)}
.hl-H14 .hl-f.x .hl-ph{filter:grayscale(1) brightness(.6)}
.hl-H14 .hl-f.x::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 48.5%,var(--red) 49% 51%,transparent 51.5%)}
.hl-H14 .hl-f.pick{z-index:2}
.hl-H14 .hl-circ{position:absolute;inset:-18px -22px;width:calc(100% + 44px);height:calc(100% + 36px);color:var(--red);pointer-events:none}
.hl-H14 .hl-mk{font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(40px,4.6cqi,66px);line-height:1.05;color:var(--red);transform:rotate(-3deg);overflow-wrap:anywhere}
.hl-H14 .hl-meta{margin-top:28px;font-size:14px;line-height:1.8;color:#C9C2B6}
.hl-H14 .hl-nav{margin-top:36px;flex-direction:column;gap:6px}
.hl-H14 .hl-nb{justify-content:flex-start;padding:0;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:15px;letter-spacing:.04em;text-transform:none;gap:14px}
.hl-H14 .hl-nb b{color:var(--ac);font-weight:500}
.hl-H14 .hl-rs{margin-top:22px;font-family:'Permanent Marker',cursive;font-size:30px;letter-spacing:0;text-transform:none;color:#111;background:#F3D34A;padding:4px 22px;transform:rotate(-2deg);border-radius:0;min-height:56px;font-weight:400}
.hl-H14.hl-sig{--hk:#111;--ha:#E0A23B;--bg:#111}

/* ---------- H15 Text thread ---------- */
.hl-H15{--bg:color-mix(in srgb,var(--hp) 92%,#D5D0C8);--bub:#0B84FE}
.hl-H15 .hl-in{display:grid;grid-template-columns:420px minmax(0,1fr);gap:110px;align-items:center;padding:50px 90px calc(50px + var(--hl-pb)) 150px}
.hl-H15 .hl-phone{height:800px;max-height:calc(var(--hl-h) - 100px - var(--hl-pb));min-height:620px;background:#fff;color:#1F1D1A;border-radius:52px;box-shadow:0 0 0 12px #1F1D1A,0 40px 80px rgba(0,0,0,.25);padding:60px 24px 24px;display:flex;flex-direction:column;gap:10px;overflow:hidden;font-family:'Inter',system-ui,sans-serif}
.hl-H15 .hl-who{text-align:center;font-size:13px;color:#5F5A54;margin-bottom:10px}
.hl-H15 .hl-who b{display:block;color:#1F1D1A;font-size:16px}
.hl-H15 .hl-b{max-width:78%;padding:12px 16px;border-radius:20px;font-size:17px;line-height:1.35}
.hl-H15 .them{background:#E9E9EB;align-self:flex-start}
.hl-H15 .me{background:var(--bub);color:#fff;align-self:flex-end}
.hl-H15 .hl-pic{align-self:flex-end;width:250px;max-width:70%;flex:1 1 300px;max-height:300px;min-height:140px;border-radius:20px;overflow:hidden}
.hl-H15 .hl-pic .hl-ph{width:100%;height:100%}
.hl-H15 .hl-rd{align-self:flex-end;font-size:12px;color:#6E6962}
.hl-H15 h1{font-size:clamp(54px,7.5cqi,108px);line-height:.92}
.hl-H15 .hl-d{margin-top:24px;font-size:14px;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.hl-H15 .hl-qr{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.hl-H15 .hl-q{min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--qc,var(--btn));color:var(--qc,var(--btn));font-size:15px;font-weight:500}
.hl-H15 .hl-q.hl-rs{background:var(--qc,var(--btn));color:var(--btnt);letter-spacing:0;text-transform:none;font-weight:500;font-size:15px}
.hl-H15.hl-sig{--hp:#EFECE7;--hk:#1F1D1A;--hb:#0A6FD6;--hbt:#fff;--hd:'Fraunces',serif;--hdi:italic;--hdw:300;--hu:'Inter',sans-serif;--bg:#EFECE7}

/* =================== phones: under 760 px =================== */
@container hl (max-width: 760px){
  .hl .hl-in{min-height:0}
  .hl .hl-nb{letter-spacing:.16em;padding:0 12px}
  /* H01: sign full width, nav a 2-column grid */
  .hl-H01 .hl-in{padding:64px 20px calc(36px + var(--hl-pb));gap:40px;min-height:620px}
  .hl-H01 .hl-sign{padding:30px 18px 32px;box-shadow:0 0 0 8px color-mix(in srgb,var(--hk) 92%,#000),0 0 0 10px var(--ac),0 20px 50px rgba(0,0,0,.6)}
  .hl-H01 .hl-bulbs{inset:-9px;border-width:7px}
  .hl-H01 .hl-ns{letter-spacing:.3em;font-size:12px}
  .hl-H01 h1{font-size:clamp(38px,13cqi,64px)}
  .hl-H01 .hl-one{letter-spacing:.2em;font-size:13px}
  .hl-H01 .hl-nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}
  .hl-H01 .hl-nb{padding:0 8px}
  .hl-H01 .hl-nb.hl-rs{grid-column:1/-1}
  /* H02: names above, strip scrolls sideways, nav below */
  .hl-H02 .hl-in{padding:44px 0 calc(28px + var(--hl-pb))}
  .hl-H02 .hl-strip{margin:0;transform:rotate(-2deg) scale(1.04);padding:48px 0}
  .hl-H02 .hl-frs{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 26px;scrollbar-width:none}
  .hl-H02 .hl-frs::-webkit-scrollbar{display:none}
  .hl-H02 .hl-fr{height:220px;scroll-snap-align:center}
  .hl-H02 .hl-fn{bottom:-22px}
  .hl-H02 .hl-nav{gap:6px 14px}
  /* H03: a stack, names between */
  .hl-H03 .hl-in{padding:40px 22px calc(28px + var(--hl-pb))}
  .hl-H03 .hl-table{display:flex;flex-direction:column;align-items:center;gap:22px}
  .hl-H03 .hl-pol{width:min(280px,82%);max-width:none;aspect-ratio:4/5}
  .hl-H03 .p0{order:1}.hl-H03 .hl-mid{order:2;margin:10px 0}.hl-H03 .p2{order:3;margin-top:-6px}
  .hl-H03 .p1,.hl-H03 .p3{display:none}
  .hl-H03 h1{font-size:clamp(46px,14cqi,72px)}
  .hl-H03 .hl-nb{font-size:24px;padding:0 14px}
  /* H04: halves stack, the badge on the seam */
  .hl-H04 .hl-in{display:flex;flex-direction:column;padding-bottom:var(--hl-pb)}
  .hl-H04 .hl-halves{position:relative;grid-template-columns:1fr;grid-template-rows:clamp(320px,62cqi,460px) clamp(320px,62cqi,460px)}
  .hl-H04 .hl-nm,.hl-H04 .hl-half.r .hl-nm{left:22px;right:auto;text-align:left;bottom:22px;font-size:clamp(48px,16cqi,80px)}
  .hl-H04 .hl-half.r .hl-nm{left:auto;right:22px;text-align:right}
  .hl-H04 .hl-med{top:clamp(320px,62cqi,460px);width:112px}
  .hl-H04 .hl-med b{font-size:48px}.hl-H04 .hl-med span{font-size:10px;letter-spacing:.18em}
  .hl-H04 .hl-nav{position:relative;order:2;background:var(--bg);padding:20px 16px;display:grid;grid-template-columns:1fr 1fr}
  .hl-H04 .hl-nb.hl-rs{grid-column:1/-1}
  /* H05: the card under the photo, the stub folds below */
  .hl-H05 .hl-in{padding:20px 16px calc(24px + var(--hl-pb));gap:24px}
  .hl-H05 .hl-bg{bottom:auto;height:min(560px,120cqi)}
  .hl-H05 .hl-scrim{bottom:auto;height:min(560px,120cqi)}
  .hl-H05 .hl-nav{justify-content:flex-start;gap:0}
  .hl-H05 .hl-hl{min-height:calc(min(560px,120cqi) - 160px);display:flex;flex-direction:column;justify-content:flex-end}
  .hl-H05 .hl-pass{grid-template-columns:1fr;align-self:stretch;border-radius:18px}
  .hl-H05 .hl-main{grid-template-columns:1fr 1fr;padding:22px 20px}
  .hl-H05 .hl-big b{font-size:42px}
  .hl-H05 .hl-stub{border-left:0;border-top:2px dashed #C9C2B5;padding:20px}
  /* H06: cover first, contents below */
  .hl-H06 .hl-in{grid-template-columns:minmax(0,1fr)}
  .hl-H06 .hl-cov{min-height:min(620px,150cqi)}
  .hl-H06 .hl-mast{font-size:clamp(90px,34cqi,170px)}
  .hl-H06 .hl-cl{bottom:24px;left:20px;right:20px}
  .hl-H06 .hl-iss{top:clamp(110px,40cqi,200px);right:20px}
  .hl-H06 .hl-toc{padding:40px 20px calc(36px + var(--hl-pb))}
  .hl-H06 .hl-t{font-size:22px}
  /* H07: smaller digits, photos a 2×2 grid */
  .hl-H07 .hl-in{padding:28px 18px calc(28px + var(--hl-pb));gap:26px}
  .hl-H07 .hl-tn{font-size:32px}
  .hl-H07 .hl-nav{gap:0}
  .hl-H07 .hl-board{gap:6px;flex-wrap:nowrap}
  .hl-H07 .hl-digs{gap:4px}
  .hl-H07 .hl-d{width:clamp(30px,10.4cqi,56px);height:clamp(44px,15cqi,80px);font-size:clamp(32px,12cqi,64px);border-radius:6px}
  .hl-H07 .hl-colon{font-size:clamp(28px,9cqi,50px);line-height:clamp(44px,15cqi,80px)}
  .hl-H07 .hl-lab{font-size:11px;letter-spacing:.24em}
  .hl-H07 .hl-row{grid-template-columns:1fr 1fr;height:auto}
  .hl-H07 .hl-row .hl-ph{aspect-ratio:1;height:auto}
  .hl-H07 .hl-rs{grid-column:1/-1;min-height:72px}
  /* H08: the photo above smaller words */
  .hl-H08 .hl-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;padding:26px 20px calc(28px + var(--hl-pb));gap:22px}
  .hl-H08 .hl-hd{font-size:11px;letter-spacing:.18em}
  .hl-H08 .hl-peeks{grid-column:1;grid-row:2;max-width:260px;max-height:340px}
  .hl-H08 nav{grid-column:1;grid-row:3}
  .hl-H08 .hl-idx button{font-size:clamp(36px,12cqi,58px);gap:14px}
  .hl-H08>.hl-in>.hl-rs{grid-column:1;grid-row:4;justify-self:stretch}
  /* H09: letters scale with the width */
  .hl-H09 .hl-in{padding:40px 18px calc(28px + var(--hl-pb))}
  .hl-H09 .hl-fill{font-size:clamp(56px,25cqi,190px)}
  .hl-H09 .hl-amp{top:calc(40px + clamp(56px,25cqi,190px) * .86)}
  .hl-H09 .hl-bar{flex-direction:column;align-items:flex-start}
  .hl-H09 .hl-nav{gap:0}
  /* H10: the card nearly full width, the lip at the bottom */
  .hl-H10 .hl-in{display:flex;flex-direction:column;padding:22px 12px 0;gap:18px}
  .hl-H10 .hl-nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 4px}
  .hl-H10 .hl-nb{padding:0 10px}
  .hl-H10 .hl-envw{width:100%}
  .hl-H10 .hl-card{width:94%;padding:14px 14px 96px}
  .hl-H10 .hl-envw{padding-bottom:calc(70px + var(--hl-pb))}
  .hl-H10 .hl-back,.hl-H10 .hl-env{height:200px}
  .hl-H10 .hl-flap{display:none}
  .hl-H10 .hl-seal{bottom:calc(58px + var(--hl-pb));width:96px;height:96px;font-size:20px}
  .hl-H10 .hl-card .hl-ph{height:clamp(200px,58cqi,300px)}
  /* H11: circle on top, names below without the overlap */
  .hl-H11 .hl-in{grid-template-columns:minmax(0,1fr);padding:40px 22px calc(36px + var(--hl-pb));gap:30px;justify-items:center}
  .hl-H11 .hl-iris{max-width:min(340px,86cqi)}
  .hl-H11 .hl-tx{margin:0;text-align:center}
  .hl-H11 h1{font-size:clamp(48px,15cqi,90px);text-shadow:none}
  .hl-H11 .hl-d{margin:18px 0 0}
  .hl-H11 .hl-nav{align-items:center;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 6px}
  .hl-H11 .hl-nb{padding:0 10px}
  .hl-H11 .hl-nb.hl-rs{flex-basis:100%;margin-top:8px;justify-content:center}
  /* H12: the rail turns vertical */
  .hl-H12 .hl-in{padding:30px 20px calc(30px + var(--hl-pb))}
  .hl-H12 .hl-rail{display:flex;flex-direction:column;gap:26px;min-height:0;margin:30px 0;padding-left:34px}
  .hl-H12 .hl-rail::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .hl-H12 .hl-stop button,.hl-H12 .hl-stop.dn button{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;text-align:left;align-items:start;padding:0;justify-content:start}
  .hl-H12 .hl-stop .hl-ph,.hl-H12 .hl-stop.dn .hl-ph{grid-column:1;grid-row:1/4;order:0;aspect-ratio:4/5}
  .hl-H12 .hl-stop b,.hl-H12 .hl-stop.dn b{grid-column:2;grid-row:2;order:0;margin:4px 0 0;font-size:26px}
  .hl-H12 .hl-stop small,.hl-H12 .hl-stop.dn small{grid-column:2;grid-row:1;order:0;margin:6px 0 0}
  .hl-H12 .hl-dot,.hl-H12 .hl-stop.dn .hl-dot{left:-34px;top:18px;bottom:auto;transform:none}
  .hl-H12 .hl-foot{flex-direction:column;align-items:stretch}
  .hl-H12 .hl-rs{width:100%}
  /* H13: front first, back below */
  .hl-H13 .hl-in{padding:36px 14px calc(36px + var(--hl-pb))}
  .hl-H13 .hl-pc{grid-template-columns:minmax(0,1fr);transform:rotate(-1deg);min-height:0}
  .hl-H13 .hl-front{margin:14px;min-height:clamp(300px,90cqi,440px)}
  .hl-H13 .hl-pback{border-left:0;border-top:1px solid #C9C4B6;margin:0 14px 14px;padding:24px 6px 10px}
  .hl-H13 .hl-msg{margin-right:110px;font-size:16px;min-height:220px}
  .hl-H13 .hl-stamp{right:6px;top:22px;width:88px;height:110px}
  .hl-H13 .hl-pm{right:2px;top:130px;width:104px;height:104px;font-size:11px}
  /* H14: two columns, notes and nav below */
  .hl-H14 .hl-in{grid-template-columns:minmax(0,1fr);padding:30px 18px calc(30px + var(--hl-pb));gap:44px}
  .hl-H14 .hl-sheet{grid-template-columns:1fr 1fr;gap:26px 12px}
  .hl-H14 .hl-f:nth-child(n+9){display:none}
  .hl-H14 .hl-mk{font-size:clamp(36px,11cqi,54px)}
  /* H15: the thread is the page, the chips stick to the bottom */
  .hl-H15 .hl-in{grid-template-columns:minmax(0,1fr);padding:24px 16px 0;gap:24px}
  .hl-H15 .hl-side{order:-1;text-align:center}
  .hl-H15 h1{font-size:clamp(44px,13cqi,72px)}
  .hl-H15 .hl-d{font-size:12px;letter-spacing:.18em}
  .hl-H15 .hl-phone{height:auto;min-height:0;max-height:none;border-radius:34px;box-shadow:0 0 0 8px #1F1D1A;padding:40px 16px 20px;margin:0 6px}
  .hl-H15 .hl-pic{flex:none;height:240px}
  .hl-H15 .hl-qr{position:sticky;bottom:calc(var(--hl-pb) + 8px);z-index:5;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:12px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .hl-H15 .hl-qr::-webkit-scrollbar{display:none}
  .hl-H15 .hl-q{flex:none}
}
@media (prefers-reduced-motion: reduce){
  .hl *{animation:none!important;transition:none!important}
  .hl-H08 .hl-peek,.hl-H08 .hl-peek.on{transform:rotate(4deg)}
}