/* Northspire core: reset, base, layout, shared components, header, index overlay, shortlist drawer, footer, dialogs, toasts. */
@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
  img,picture,svg,video{display:block;max-width:100%}
  img{height:auto}
  button,input,select,textarea{font:inherit;color:inherit}
  button{cursor:pointer;background:none;border:0;padding:0}
  ul[role=list],ol[role=list]{list-style:none;padding:0}
  a{color:inherit}
  table{border-collapse:collapse}
  [hidden]{display:none!important}
}

@layer base{
  html{scroll-padding-top:calc(var(--hd) + 1rem)}
  html:has(dialog[open]){overflow:clip}
  body{background:var(--porcelain);color:var(--ink);font:400 var(--step-0)/1.6 var(--font-text);overflow-x:clip;min-height:100svh;display:flex;flex-direction:column}
  main{flex:1}
  main:focus{outline:0}
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1;letter-spacing:-.015em;text-wrap:balance;font-optical-sizing:auto;overflow-wrap:anywhere}
  p{text-wrap:pretty}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  ::selection{background:var(--lilac);color:var(--ink)}
  .g-dark :focus-visible,.g-dark::selection{outline-color:var(--iris)}
  .g-dark ::selection{background:var(--uv-deep);color:var(--text)}
  em{font-style:italic}
  .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .skip{position:fixed;left:var(--gut);top:-100px;z-index:200;background:var(--uv);color:var(--paper);padding:.9rem 1.2rem;font-weight:650;text-decoration:none}
  .skip:focus{top:8px}
  .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
  .icon{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
  .icon .node{fill:var(--accent);stroke:none}
  .icon--sm{width:1.125rem;height:1.125rem}
  .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
  /* headline settle (opsz/weight): only when JS is running and motion is allowed */
  @media (prefers-reduced-motion:no-preference){
    .js-ready:not(.js-late) .settle{font-variation-settings:"wght" 400;transition:font-variation-settings .6s var(--ease)}
    .js-ready:not(.js-late) .settle.in{font-variation-settings:"wght" 600}
  }
}

@layer layout{
  .wrap{width:min(100% - 2 * var(--gut),1360px);margin-inline:auto}
  .sec{padding-block:var(--sec);position:relative}
  .sec--tight{padding-block:calc(var(--sec) / 2)}
  .g-paper{background:var(--paper)}
  .g-haze{background:var(--haze)}
  .g-dark{--fg:var(--text);--fg2:var(--text-2);--rule:var(--line-dark);--accent:var(--iris);--ground:var(--basalt-950);background:var(--basalt-950);color:var(--text)}
  .tooth{position:relative;isolation:isolate}
  .tooth::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  /* journal column rules: 4 visible columns on mobile, 8 on tablet, 12 on desktop */
  .cols-rule{position:relative}
  .cols-rule::before{content:"";position:absolute;inset:0 0;pointer-events:none;z-index:0;
    background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px calc(100% / 4))}
  @media (min-width:768px){.cols-rule::before{background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px calc(100% / 8))}}
  @media (min-width:1280px){.cols-rule::before{background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px calc(100% / 12))}}
  .cols-rule>*{position:relative;z-index:1}
  .grid12{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
  .grid12>*{min-width:0}
}

@layer components{
  /* registration ticks: four 10px L-marks drawn with gradients, offset 6px outside the frame */
  .frame{position:relative;outline:1px solid var(--rule);outline-offset:0}
  .frame::before,.btn--ghost::before{--c:var(--fg);content:"";position:absolute;inset:-6px;pointer-events:none;z-index:2;
    background:
      linear-gradient(var(--c),var(--c)) 0 0/var(--tick) 1px,linear-gradient(var(--c),var(--c)) 0 0/1px var(--tick),
      linear-gradient(var(--c),var(--c)) 100% 0/var(--tick) 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--tick),
      linear-gradient(var(--c),var(--c)) 0 100%/var(--tick) 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--tick),
      linear-gradient(var(--c),var(--c)) 100% 100%/var(--tick) 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--tick);
    background-repeat:no-repeat}
  .frame--hover::before{opacity:0;transition:opacity .2s var(--ease)}
  .frame--hover:hover::before,.frame--hover:focus-within::before{opacity:1}
  .frame--uv::before{--c:var(--uv)}

  /* spire window: pointed-gable mask + 1px prism stroke */
  .spire{--peak:18%;position:relative;aspect-ratio:var(--ar,4/5);background:var(--grad-prism);clip-path:polygon(0 var(--peak),50% 0,100% var(--peak),100% 100%,0 100%);overflow:hidden}
  .spire--land{--peak:10%;--ar:4/3}
  .spire>picture,.spire>img,.spire__in{position:absolute;inset:1px;clip-path:polygon(0 var(--peak),50% 0,100% var(--peak),100% 100%,0 100%);overflow:hidden;background:var(--haze)}
  .spire img{width:100%;height:100%;object-fit:cover}
  .spire>picture{display:block}

  .kick{font:500 var(--step--1)/1.3 var(--font-mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.08em;color:var(--fg2)}
  .lead{font-size:var(--step-1);line-height:1.45;max-width:46ch;color:var(--fg2)}
  .prose p+p{margin-top:1em}
  .lnk,.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness .15s}
  .lnk:hover,.prose a:hover{text-decoration-thickness:2px}
  .price{font:600 var(--step-1)/1.1 var(--font-mono);font-variant-numeric:tabular-nums lining-nums}
  .price small{font:500 var(--step--1)/1 var(--font-mono);color:var(--fg2);text-transform:uppercase;letter-spacing:.06em;margin-right:.35em}

  .rule{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-6);font:500 var(--step--1)/1 var(--font-mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.08em;color:var(--fg2)}
  .rule span:first-child{color:var(--accent)}
  .rule::after{content:"";flex:1;height:1px;background:var(--rule);transform-origin:left}
  @media (prefers-reduced-motion:no-preference){
    .js-ready:not(.js-late) .rule::after{transform:scaleX(0);transition:transform .9s var(--ease)}
    .js-ready:not(.js-late) .rule.in::after{transform:none}
  }

  /* buttons */
  .btn,.svc__btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:48px;padding:0 22px;background:var(--uv);color:var(--paper);font:650 var(--step-0)/1.1 var(--font-text);text-decoration:none;text-align:center;border:0;cursor:pointer;transition:background .16s var(--ease)}
  .btn::after,.svc__btn::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--grad-prism);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
  .btn .icon{width:12px;height:12px;stroke-width:2;transition:transform .2s var(--ease)}
  @media (hover:hover){.btn:hover,.svc__btn:hover{background:var(--uv-deep)}.btn:hover::after,.svc__btn:hover::after{transform:none}.btn:hover .icon--needle{transform:translateX(4px)}}
  .btn:active,.svc__btn:active{background:var(--uv-deep)}
  .btn[disabled],.btn[aria-disabled=true]{background:var(--haze);color:var(--ink-2);cursor:not-allowed}
  .btn--ghost{background:transparent;color:var(--fg);outline:1px solid var(--fg);outline-offset:0}
  .btn--ghost::before{--c:var(--fg);inset:-6px;opacity:.9}
  @media (hover:hover){.btn--ghost:hover{background:var(--haze);color:var(--ink)}.g-dark .btn--ghost:hover{background:var(--basalt-800);color:var(--text)}}
  .btn--ghost:active{background:var(--haze);color:var(--ink)}
  .btn--iris{background:var(--iris);color:var(--basalt-950)}
  @media (hover:hover){.btn--iris:hover{background:var(--lilac)}}
  .btn--block{display:flex;width:100%}
  .btn--text{display:inline-flex;align-items:center;background:none;color:var(--accent);padding:0;min-height:44px;text-decoration:underline;text-underline-offset:4px;font-weight:600}
  .btn--text::after{display:none}
  .btn--text:hover{background:none;text-decoration-thickness:2px}
  .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-5);align-items:center}
  @media (max-width:559px){.btn-row .btn{width:100%}}

  /* chips */
  .chip{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);background:transparent;font:500 var(--step--1)/1 var(--font-mono);font-stretch:87.5%;letter-spacing:.04em;text-decoration:none;color:var(--fg);white-space:nowrap;transition:background .16s,border-color .16s}
  .chip .n{color:var(--fg2)}
  @media (hover:hover){.chip:hover{background:var(--haze)}.g-dark .chip:hover{background:var(--basalt-800)}}
  .chip[aria-current],.chip[aria-pressed=true],.chip[aria-checked=true]{background:var(--lilac);color:var(--uv-deep);border-color:var(--uv)}
  .chip[aria-current] .n,.chip[aria-checked=true] .n{color:var(--uv-deep)}

  /* forms */
  .field{display:grid;gap:6px;min-width:0}
  .field>label,.field>legend,.lbl{font:500 .875rem/1.3 var(--font-text);color:var(--ink)}
  .field .opt{color:var(--ink-2);font-weight:400}
  .field .hint{font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
  .inp{width:100%;min-height:52px;padding:12px 14px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-bottom:1px solid var(--ink-2);border-radius:0;appearance:none;transition:border-color .16s,background .16s}
  textarea.inp{min-height:160px;resize:vertical;field-sizing:content;line-height:1.5}
  select.inp{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316131D' stroke-width='1.5'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
  .inp:focus-visible{outline:2px solid var(--uv);outline-offset:2px;border-color:var(--uv)}
  .inp::placeholder{color:var(--ink-2);opacity:.8}
  .field.has-error .inp,.inp[aria-invalid=true]{border-color:var(--err);border-bottom-color:var(--err)}
  .err{display:flex;gap:.4rem;align-items:flex-start;font-size:.875rem;line-height:1.4;color:var(--err);font-weight:500}
  .err:empty{display:none}
  .err .icon{width:1rem;height:1rem;margin-top:.1rem}
  .count{justify-self:end;font:500 .75rem/1 var(--font-mono);color:var(--ink-2)}
  .banner{display:flex;gap:.75rem;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-strong);background:var(--paper);font-size:.9375rem}
  .banner--err{border-color:var(--err);color:var(--err);font-weight:500}
  .banner--ok{border-color:var(--ok);color:var(--ok);font-weight:500}
  .banner .icon{margin-top:.1rem;width:1.125rem;height:1.125rem}
  .flash{margin-top:var(--s-5)}

  /* dialogs */
  dialog{color:var(--ink);padding:0;border:0;max-width:none;max-height:none}
  dialog::backdrop{background:rgb(18 16 22 / .55)}
  .dlg{background:var(--paper);width:min(560px,100% - 2rem);margin:auto;overflow:visible;box-shadow:var(--shadow-lift);--rule:var(--line);--fg:var(--ink)}
  .dlg::before{--c:var(--ink);content:"";position:absolute;inset:-6px;pointer-events:none;
    background:linear-gradient(var(--c),var(--c)) 0 0/10px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 10px,linear-gradient(var(--c),var(--c)) 100% 0/10px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 10px,linear-gradient(var(--c),var(--c)) 0 100%/10px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 10px,linear-gradient(var(--c),var(--c)) 100% 100%/10px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 10px;background-repeat:no-repeat}
  .dlg__body{padding:var(--s-5);max-height:calc(100svh - 3rem);overflow:auto;display:grid;gap:var(--s-5)}
  @media (min-width:768px){.dlg__body{padding:var(--s-6)}}
  .dlg__head{display:flex;justify-content:space-between;gap:var(--s-4);align-items:flex-start}
  .dlg__head h2{font-size:var(--step-3);margin-top:.35rem}
  .dlg__x{width:44px;height:44px;display:grid;place-items:center;flex:none;margin:-6px -8px 0 0}
  .dlg__x:hover{background:var(--haze)}
  .dlg__fields{display:grid;gap:var(--s-4)}
  .dlg__title{font-size:var(--step-2)}
  .dlg__title--lg{font-size:var(--step-3)}
  .dlg__price{margin-top:var(--s-3)}
  .dlg__fields--top,.btn-row--top{margin-top:var(--s-5)}
  .sl__hint--pad{padding-block:var(--s-3)}
  .ix__meta address{font-style:normal}
  .ft__map{margin-top:var(--s-3)}
  .sec-lead{margin-bottom:var(--s-6)}
  .dlg__ok{display:grid;gap:var(--s-4);justify-items:start}
  .dlg__ok h3{font-size:var(--step-3)}
  .dlg[open]{animation:dlg-in .28s var(--ease)}
  @keyframes dlg-in{from{opacity:0;transform:translateY(14px)}}

  /* toast: paper slip with ticks */
  .toasts{position:fixed;z-index:300;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));display:grid;gap:12px;width:min(100% - 32px,380px);pointer-events:none}
  @media (min-width:768px){.toasts{left:24px;transform:none}}
  .toast{pointer-events:auto;position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:12px 8px 12px 16px;background:var(--paper);color:var(--ink);outline:1px solid var(--line);box-shadow:var(--shadow-lift);animation:toast-in .28s var(--ease)}
  .toast::before{--c:var(--uv);content:"";position:absolute;inset:-6px;pointer-events:none;background:linear-gradient(var(--c),var(--c)) 0 0/10px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 10px,linear-gradient(var(--c),var(--c)) 100% 100%/10px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 10px;background-repeat:no-repeat}
  .toast .kick{grid-column:1/-1;color:var(--uv)}
  .toast p{font-size:.9375rem;line-height:1.35;font-weight:500}
  .toast button,.toast a{min-height:44px;min-width:44px;padding:0 10px;display:inline-grid;place-items:center;font-weight:650;font-size:.875rem;color:var(--uv);text-decoration:underline;text-underline-offset:3px}
  .toast.is-out{opacity:0;transform:translateY(8px);transition:.3s}
  @keyframes toast-in{from{opacity:0;transform:translateY(10px)}}

  /* empty-state spire outline */
  .ghost-spire{width:96px;height:120px;position:relative;margin-inline:auto;color:var(--fg2)}
  .ghost-spire svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:4 5}
}

/* ---------- header ---------- */
@layer components{
  .hd{position:sticky;top:0;z-index:60;background:rgb(246 244 248 / .96);border-bottom:1px solid var(--line);transition:top .28s var(--ease)}
  .hd.is-hidden{top:calc(var(--hd) * -1 - 2px)}
  .hd__in{height:var(--hd);display:flex;align-items:center;gap:var(--s-4)}
  .hd__brand{display:flex;align-items:center;flex:none;min-height:44px}
  .hd__brand img{height:28px;width:auto}
  .hd__logo-mark{display:none}
  @media (max-width:379px){.hd__logo-full{display:none}.hd__logo-mark{display:block;height:30px!important}}
  @media (min-width:768px){.hd__brand img{height:34px}}
  .hd__nav{display:none}
  .hd__act{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
  .hd__bearing{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad-prism);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
  .hd-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 12px;font:650 .9375rem/1 var(--font-text);color:var(--ink);position:relative}
  .hd-btn:hover{background:var(--haze)}
  .hd-btn .lbl-t{display:none}
  @media (min-width:768px){.hd-btn .lbl-t{display:inline}}
  .hd__sec{display:none}
  @media (min-width:1280px){
    .hd__nav{display:flex;gap:var(--s-6);margin-left:var(--s-7)}
    .hd__nav a{position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;text-decoration:none;font:500 var(--step--1)/1 var(--font-mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.06em}
    .hd__nav a span{color:var(--ink-2)}
    .hd__nav a[aria-current=page]::before{content:"";position:absolute;left:0;top:6px;width:6px;height:14px;background:var(--uv);clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%)}
    .hd__nav a:hover{color:var(--uv)}
    .hd__sec{display:inline-flex}
    .hd__menu{display:none}
  }

  /* shortlist trigger */
  .cart-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 8px 0 12px;font:650 .9375rem/1 var(--font-text)}
  .cart-btn:hover{background:var(--haze)}
  .cart-btn .lbl-t{display:none}
  @media (min-width:768px){.cart-btn .lbl-t{display:inline}}
  .sl-tile{position:relative;min-width:28px;height:28px;padding:0 6px;display:inline-grid;place-items:center;background:var(--grad-platinum);color:var(--ink);font:600 .8125rem/1 var(--font-mono);font-variant-numeric:tabular-nums;transition:background .2s}
  .sl-tile.has{background:var(--uv);color:var(--paper)}
  .sl-tile i{position:absolute;left:50%;top:-5px;width:1px;height:6px;background:var(--uv);transform-origin:50% 100%}
  .sl-tile.is-bump i{animation:needle-swing .9s var(--ease)}
  @keyframes needle-swing{0%{transform:rotate(0)}30%{transform:rotate(24deg)}60%{transform:rotate(-14deg)}100%{transform:rotate(0)}}
  @media (prefers-reduced-motion:reduce){.sl-tile.is-bump i{animation:none}}

  /* shortlist drawer */
  .sl-veil{position:fixed;inset:0;z-index:150;background:rgb(18 16 22 / .55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .sl-veil.is-open{opacity:1;visibility:visible}
  .sl{position:fixed;z-index:160;top:0;right:0;bottom:0;width:min(100%,440px);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .32s var(--ease),visibility .32s;visibility:hidden;box-shadow:var(--shadow-lift)}
  .sl.is-open{transform:none;visibility:visible}
  .sl__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding:var(--s-5);border-bottom:1px solid var(--line)}
  .sl__head h2{font-size:var(--step-2);margin-top:.3rem}
  .sl__x{width:44px;height:44px;display:grid;place-items:center;margin:-6px -8px 0 0}
  .sl__x:hover{background:var(--haze)}
  .sl__body{flex:1;overflow:auto;padding:0 var(--s-5);overscroll-behavior:contain}
  .sl__row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line);transition:opacity .2s}
  .sl__row[wire\:loading\.attr],.sl__row.is-busy{opacity:.6}
  .sl__row .spire{--ar:4/5;--peak:18%}
  .sl__name{font:600 1rem/1.3 var(--font-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sl__ctl{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-3)}
  .sl__unit{font-size:.8125rem;color:var(--ink-2);margin-top:2px}
  .qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong)}
  .qty button{width:44px;height:44px;display:grid;place-items:center;font-size:1.25rem}
  .qty button:hover{background:var(--haze)}
  .qty output,.qty span{min-width:2ch;text-align:center;font:600 .9375rem/1 var(--font-mono)}
  .sl__rm{min-height:44px;padding:0 6px;font-size:.875rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
  .sl__rm:hover{color:var(--err)}
  .sl__foot{padding:var(--s-5);border-top:1px solid var(--line);display:grid;gap:var(--s-3);background:var(--paper)}
  .sl__total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4)}
  .sl__total strong{font:600 var(--step-2)/1 var(--font-mono);font-variant-numeric:tabular-nums}
  .sl__note{font-size:.8125rem;color:var(--ink-2);line-height:1.45}
  .sl__empty{display:grid;gap:var(--s-4);justify-items:center;text-align:center;padding:var(--s-8) 0}
  .sl__empty h3{font-size:var(--step-1)}
  .sl__hint{font-size:.75rem;color:var(--ink-2);margin-top:2px}
}

/* ---------- index overlay (sectors on desktop, site menu below 1280) ---------- */
@layer components{
  .ix{position:fixed;inset:0;width:100%;height:100%;background:var(--basalt-950);color:var(--text);--fg:var(--text);--fg2:var(--text-2);--rule:var(--line-dark);--accent:var(--iris)}
  .ix[open]{display:flex;flex-direction:column;animation:ix-wipe .28s var(--ease)}
  @keyframes ix-wipe{from{clip-path:polygon(0 0,100% 0,100% 0,50% 0,0 0)}to{clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%)}}
  .ix::backdrop{background:var(--basalt-950)}
  .ix__bar{display:flex;align-items:center;justify-content:space-between;min-height:var(--hd);flex:none;border-bottom:1px solid var(--line-dark)}
  .ix__bar img{height:28px;width:auto}
  .ix__close{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 12px;font-weight:650;margin-right:-12px}
  .ix__close:hover{background:var(--basalt-800)}
  .ix__scroll{flex:1;overflow:auto;overscroll-behavior:contain}
  .ix__mob{padding-block:var(--s-6) var(--s-8);display:grid;gap:var(--s-7)}
  .ix__nav{display:grid}
  .ix__nav a{display:flex;align-items:baseline;gap:var(--s-4);min-height:56px;padding:6px 0;font:600 var(--step-4)/1.05 var(--font-display);text-decoration:none;border-bottom:1px solid var(--line-dark)}
  .ix__nav a span{font:500 var(--step--1)/1 var(--font-mono);color:var(--iris)}
  .ix__nav a[aria-current=page]{color:var(--iris)}
  .ix__nav a.small{font-size:var(--step-1);font-family:var(--font-text);font-weight:500}
  .ix__chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-4)}
  @media (min-width:768px){.ix__chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .ix__chips .chip{white-space:normal;line-height:1.25;padding-block:8px;justify-content:flex-start;gap:.6rem}
  .ix__meta{display:grid;gap:var(--s-2);font-size:.9375rem;color:var(--text-2)}
  .ix__meta a{color:var(--iris)}
  .ix__desk{display:none}
  @media (min-width:1280px){
    .ix__mob,.ix__bar .ix__logo-m{display:none}
    .ix__desk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-6);padding-block:var(--s-7);align-items:start}
    .ix__list{grid-column:1/8;display:grid}
    .ix__list a{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;align-items:baseline;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line-dark);text-decoration:none;transition:padding-left .25s var(--ease),color .2s}
    .ix__list a .no{font:500 var(--step--1)/1 var(--font-mono);color:var(--iris)}
    .ix__list a .t{font:600 var(--step-4)/1 var(--font-display);letter-spacing:-.015em}
    .ix__list a .c{font:500 var(--step--1)/1 var(--font-mono);color:var(--text-2)}
    .ix__list a .b{grid-column:2/4;font-size:.9375rem;color:var(--text-2);max-height:0;overflow:hidden;opacity:0;transition:max-height .3s var(--ease),opacity .3s}
    .ix__list a:hover,.ix__list a:focus-visible{padding-left:var(--s-4);color:var(--iris)}
    .ix__list a:hover .b,.ix__list a:focus-visible .b{max-height:3rem;opacity:1;margin-top:var(--s-2)}
    .ix__prev{grid-column:9/13;position:sticky;top:var(--s-6)}
    .ix__prev .spire{--ar:4/5;width:100%}
    .ix__prev picture,.ix__prev img{transition:opacity .5s}
    .ix__prev .spire picture{opacity:0}
    .ix__prev .spire picture.on{opacity:1}
  }
}

/* ---------- footer ---------- */
@layer components{
  .ft{background:var(--basalt-950);color:var(--text);--fg:var(--text);--fg2:var(--text-2);--rule:var(--line-dark);--accent:var(--iris);padding-top:var(--sec);margin-top:0}
  .ft a{text-underline-offset:4px}
  .ft__top{display:grid;gap:var(--s-6);padding-bottom:var(--s-8);border-bottom:1px solid var(--line-dark)}
  .ft__addr{font:500 var(--step-5)/.98 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
  .ft__addr span{display:block}
  .ft__mark{height:72px;width:auto}
  .ft__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7);padding-block:var(--s-8)}
  @media (min-width:768px){.ft__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (min-width:1280px){.ft__cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}}
  .ft h2{font:500 var(--step--1)/1 var(--font-mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:var(--s-4)}
  .ft ul{list-style:none;padding:0;display:grid;gap:0}
  .ft li a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none}
  .ft li a:hover{color:var(--iris);text-decoration:underline}
  .ft address{font-style:normal;color:var(--text-2);line-height:1.55}
  .ft__note{font-size:.875rem;line-height:1.6;color:var(--text-2);max-width:42ch}
  .ft__bar{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);justify-content:space-between;padding-block:var(--s-5) var(--s-6);border-top:1px solid var(--line-dark);font-size:.875rem;color:var(--text-2)}
  .ft__bar a{color:var(--text-2)}
}