:root{
    --paper:#F4F2EC;
    --ink:#212121;
    --ink-55:rgba(33,33,33,.56);
    --ink-28:rgba(33,33,33,.30);
    --rule:rgba(33,33,33,.14);
    --gold:#B8862C;      /* accent tone from the logo gradient, holds a 1px rule on paper */
    --gold-ink:#8C6318;  /* gold set as type: AA on paper */
    --serif:"Spectral",Georgia,serif;
    --sans:"Commissioner",system-ui,sans-serif;
    --pad:clamp(24px,5vw,72px);
    --glow:transparent;            /* no bloom in daylight; the dark theme keeps it */
    --vignette:rgba(20,19,15,.06); /* corners settle, centre lifts */
    --grain:.04;                   /* paper tooth: felt, not seen */
  }
  /* night: warm dark ground, light ink, brighter gold so it reads against the dark */
  :root[data-theme="dark"]{
    --paper:#17160F;
    --ink:#ECEAE1;
    --ink-55:rgba(236,234,225,.58);
    --ink-28:rgba(236,234,225,.36);
    --rule:rgba(236,234,225,.16);
    --gold:#C9A227;
    --gold-ink:#E4B54B;
    --glow:rgba(201,162,39,.09);   /* dark grounds eat subtle gradients, so lift it */
    --vignette:rgba(0,0,0,.24);
    --grain:.06;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;height:100dvh;overflow:hidden;
    background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-weight:300;
    /* the page mirrors itself around one line; the group above it is taller,
       so an even split reads top-heavy and the lower half gives a little back */
    display:grid;grid-template-rows:1fr auto .78fr;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  .lbl{
    font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-28);
  }

  /* ── ambient background: glow + vignette + paper grain ──── */
  .bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(1100px 560px at 50% 50%, var(--glow), transparent 70%),
      radial-gradient(150% 120% at 50% 38%, transparent 58%, var(--vignette));
  }
  .bg::after{
    content:"";position:absolute;inset:0;opacity:var(--grain);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* content sits above the ambient layer */
  .above,.below,.horizon{position:relative;z-index:1}

  /* theme colours cross-fade only during a deliberate toggle, never on load */
  :root.theming,:root.theming *,:root.theming *::before,:root.theming *::after{
    transition:background-color .5s ease,color .5s ease,border-color .5s ease,
               background-image .5s ease,fill .5s ease,stroke .5s ease!important;
  }

  /* ── day / night toggle ───────────────────────────────── */
  .theme{
    position:fixed;z-index:10;
    top:max(clamp(12px,2.4vh,24px),env(safe-area-inset-top));
    right:max(clamp(12px,2.4vw,26px),env(safe-area-inset-right));
    width:44px;height:44px;display:grid;place-items:center;   /* 44px min touch target */
    background:none;border:0;border-radius:50%;cursor:pointer;color:var(--ink-55);
    transition:color .3s ease;-webkit-tap-highlight-color:transparent;
  }
  .theme:hover,.theme:focus-visible{color:var(--gold-ink);outline:none}
  .theme:focus-visible{box-shadow:0 0 0 1px var(--rule)}
  .theme svg{
    position:absolute;width:19px;height:19px;stroke:currentColor;fill:none;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);
  }
  .ico-sun{opacity:0;transform:rotate(-45deg) scale(.6)}
  .ico-moon{opacity:1;transform:none}
  :root[data-theme="dark"] .ico-moon{opacity:0;transform:rotate(45deg) scale(.6)}
  :root[data-theme="dark"] .ico-sun{opacity:1;transform:none}

  .above{
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    text-align:center;padding:var(--pad) var(--pad) clamp(24px,3.6vh,44px);
  }
  .below{
    display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
    text-align:center;padding:clamp(24px,3.6vh,44px) var(--pad) var(--pad);
  }

  .glyphwrap{display:block;margin-bottom:clamp(15px,2.1vh,26px)}
  .glyph{width:clamp(48px,6.6vw,84px);height:auto;display:block;margin:0 auto}
  .glyph-d{display:none}
  :root[data-theme="dark"] .glyph-l{display:none}
  :root[data-theme="dark"] .glyph-d{display:block}

  .mark{
    font-family:"Fredoka",system-ui,sans-serif;font-weight:600;
    font-size:clamp(15px,1.9vw,25px);letter-spacing:.2em;text-transform:uppercase;
    margin-bottom:clamp(20px,3vh,36px);
  }
  h1{
    margin:0;font-family:var(--serif);font-weight:200;text-wrap:balance;
    font-size:clamp(28px,5.1vw,74px);line-height:1.08;letter-spacing:-.02em;max-width:19ch;
  }
  h1 em{font-style:italic;color:var(--gold-ink)}
  .sub{
    margin:clamp(14px,2vh,24px) 0 0;max-width:52ch;text-wrap:pretty;
    font-size:clamp(14.5px,1.05vw,17px);line-height:1.62;color:var(--ink-55);
  }

  /* ── the horizon ──────────────────────────────────────── */
  .horizon{
    position:relative;height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:center;
    transition:transform 1.25s cubic-bezier(.16,1,.3,1) .15s;
  }
  .ready .horizon{transform:scaleX(1)}
  /* a soft glint that eases toward the pointer, or to a product on hover */
  .horizon::after{
    content:"";position:absolute;inset:-3px 0;pointer-events:none;
    background:radial-gradient(140px 4px at var(--glint,50%) 50%,rgba(255,238,196,.85),transparent 72%);
    opacity:0;transition:opacity .6s ease .9s;
  }
  .ready .horizon::after{opacity:1}

  /* ── products across the lower half ───────────────────── */
  .set{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(16px,3.4vw,76px);width:100%;max-width:clamp(760px,64vw,1040px);
  }
  .cell{
    display:flex;flex-direction:column;align-items:center;gap:7px;
    text-decoration:none;padding:6px 4px;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .cell:hover,.cell:focus-visible{transform:translateY(-3px);outline:none}
  .cell .n{font-size:clamp(15px,1.1vw,18px);font-weight:300;color:var(--ink)}
  /* the product name carries a gold underline that draws in on hover */
  .cell .t{
    background-image:linear-gradient(var(--gold),var(--gold));
    background-size:0% 1px;background-position:50% 100%;background-repeat:no-repeat;
    padding-bottom:2px;transition:background-size .35s cubic-bezier(.22,1,.36,1);
  }
  .cell:hover .t,.cell:focus-visible .t{background-size:100% 1px}
  .cell .d{
    display:block;margin-top:6px;font-size:clamp(12.5px,0.85vw,14px);font-weight:300;line-height:1.45;
    color:var(--ink-55);max-width:44ch;min-height:2.8em;
  }
  .cell .s{
    font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-55);transition:color .3s ease;
  }
  .cell .s.on{color:var(--gold-ink)}
  /* Scorazi is genuinely live, so the dot is a real status light, not decoration */
  .cell .s.on::before{
    content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
    background:var(--gold-ink);margin-right:6px;vertical-align:1px;
    animation:live 2.6s ease-in-out infinite;
  }
  @keyframes live{0%,100%{opacity:1}50%{opacity:.28}}
  .cell:hover .s,.cell:focus-visible .s{color:var(--gold-ink)}

  /* the lower group hugs the line the way the upper one does */
  .close{margin-top:clamp(28px,5vh,60px);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.3vh,13px)}
  /* short laptops: reclaim vertical budget so the social row still fits one screen */
  @media (min-width:621px) and (max-height:820px){
    .close{margin-top:clamp(18px,3vh,34px);gap:clamp(6px,1vh,10px)}
  }
  .mail{
    text-decoration:none;font-family:var(--serif);font-weight:300;
    font-size:clamp(18px,2.2vw,30px);letter-spacing:-.014em;
    background-image:linear-gradient(var(--gold),var(--gold));
    background-size:0% 1px;background-position:50% 100%;background-repeat:no-repeat;
    padding-bottom:3px;transition:background-size .5s cubic-bezier(.22,1,.36,1),color .3s;
  }
  .mail:hover,.mail:focus-visible{background-size:100% 1px;color:var(--gold-ink);outline:none}
  /* touch: extend the tap area above and below without moving the underline */
  @media (pointer:coarse){
    .mail{position:relative}
    .mail::after{content:"";position:absolute;left:-8px;right:-8px;top:-11px;bottom:-11px}
  }
  .copywrap{position:relative;display:inline-block}
  .copied{
    position:absolute;left:50%;top:-24px;transform:translate(-50%,4px);
    font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold-ink);white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
  }
  .copywrap.show .copied{opacity:1;transform:translate(-50%,0)}

  /* ── social: icon-only, no frame, gold on hover ────────── */
  .social{display:flex;gap:clamp(3px,0.5vw,9px);align-items:center;margin-top:2px}
  .social a{
    display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
    color:var(--ink-55);-webkit-tap-highlight-color:transparent;
    transition:color .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
  }
  @media (pointer:coarse){.social a{width:44px;height:44px}}  /* full touch target on phones */
  .social a:hover,.social a:focus-visible{color:var(--gold-ink);transform:translateY(-2px);outline:none}
  .social a:focus-visible{box-shadow:0 0 0 1px var(--rule)}
  .social svg{width:18px;height:18px;fill:currentColor;display:block}

  [data-in]{opacity:0;transform:translateY(8px);
            transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1)}
  .ready [data-in]{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    *{transition-duration:.01ms!important;animation:none!important}
    [data-in]{opacity:1;transform:none}.horizon{transform:scaleX(1)}
    .horizon::after,.cell .s.on::before{opacity:1}
  }

  @media (max-width:620px),(max-height:560px){
    body{height:auto;min-height:100dvh;overflow:visible;grid-template-rows:auto auto auto}
    /* clear the notch and the fixed toggle; respect side + home-indicator insets */
    .above{
      padding-top:max(clamp(56px,11vh,88px),calc(env(safe-area-inset-top) + 46px));
      padding-left:max(var(--pad),env(safe-area-inset-left));
      padding-right:max(var(--pad),env(safe-area-inset-right));
    }
    .below{
      padding-bottom:max(clamp(40px,8vh,68px),calc(env(safe-area-inset-bottom) + 24px));
      padding-left:max(var(--pad),env(safe-area-inset-left));
      padding-right:max(var(--pad),env(safe-area-inset-right));
    }
    .set{grid-template-columns:1fr;gap:14px;max-width:320px}
    .cell{border-bottom:1px solid var(--rule);padding-bottom:12px}
    .cell:last-child{border-bottom:0}
    .cell .d{min-height:0}
    .close{margin-top:clamp(26px,4vh,40px)}
  }