/* Ether Concept Store
   Calm, friendly product UI: soft sage page, rounded cards that group related
   things, pill buttons, a warm serif for headings (Literata), a clean sans for
   text (Commissioner) and small mono labels (JetBrains Mono). The olive of the
   shop sign is the one accent. All three fonts have full Greek.
   Motion is limited to soft reveals and hover states and is switched off under
   prefers-reduced-motion. No frameworks. */

@layer reset, tokens, base, components, sections, motion;

@font-face{font-family:"Literata";font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/literata-greek-wght.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF,U+1F00-1FFF}
@font-face{font-family:"Literata";font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/literata-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/commissioner-greek-wght-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/commissioner-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono-greek-wght-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/gfs-didot-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/gfs-didot-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ======================================================================== */
@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body,h1,h2,h3,p,figure,ol,ul,address{margin:0}
  ol[role="list"],ul[role="list"]{list-style:none;padding:0}
  img{display:block;max-inline-size:100%;block-size:auto}
  button{font:inherit;color:inherit}
  a{color:inherit}
  table{border-collapse:collapse}
  [hidden]{display:none!important}
}

/* ======================================================================== */
@layer tokens{
  :root{
    --bg:#EEF0EC;           /* page */
    --surface:#F9FAF7;      /* cards */
    --alt:#E2E8E1;          /* alternate bands */
    --ink:#17201C;          /* 15.6:1 on --bg */
    --muted:#56625B;        /* 5.6:1 on --bg, 5.1:1 on --alt */
    --line:#D2D9D2;
    --accent:#4F552B;       /* olive from the shop sign, 7.2:1 on --bg */
    --accent-hover:#3C4120;
    --accent-soft:#E3E6CF;  /* olive tint for highlighted cards */
    --open:#2E7A3B;
    --closed:#B23C33;

    --display:"Literata",Georgia,"Times New Roman",serif;
    --text:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
    --logo:"GFS Didot",Didot,Georgia,serif;

    --gutter:20px;
    --max:1120px;
    --r:16px;
    --header-h:72px;
    --section:clamp(48px,5.5vw,80px);
    --ease:cubic-bezier(.2,.8,.2,1);

    color-scheme:light;
    interpolate-size:allow-keywords;
  }
  @media (min-width:1024px){:root{--header-h:88px}}
}

/* ======================================================================== */
@layer base{
  html{scroll-padding-block-start:calc(var(--header-h) + 12px);overflow-x:clip}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{background:var(--bg);color:var(--ink);font-family:var(--text);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
  :lang(el) body{line-height:1.62}
  ::selection{background:var(--accent);color:#fff}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

  h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance}
  h1{font-size:clamp(2.6rem,1.7rem + 3.6vw,4.5rem);line-height:1.02;letter-spacing:-.025em}
  h2{font-size:clamp(1.9rem,1.45rem + 1.7vw,2.75rem);line-height:1.08;letter-spacing:-.015em}
  h3{font-size:1.375rem;line-height:1.2;letter-spacing:-.01em}
  :lang(el) :is(h1,h2){letter-spacing:-.01em}
  h1 em,h2 em{font-style:normal;color:var(--accent)}
  p,li{text-wrap:pretty}
  :lang(el) :is(p,li,address){hyphens:auto;-webkit-hyphens:auto}
  address{font-style:normal}

  .wrap{inline-size:100%;max-inline-size:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
  .label{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1.5}
  :lang(el) .label{letter-spacing:.12em}
  .sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .skip{position:fixed;inset-inline-start:16px;inset-block-start:-80px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;transition:inset-block-start .2s}
  .skip:focus{inset-block-start:12px}
  .i{inline-size:18px;block-size:18px;flex:none}
  .i--sm{inline-size:16px;block-size:16px}
  .i--lg{inline-size:30px;block-size:30px}
}

/* ======================================================================== */
@layer components{
  .btn{
    --b-bg:var(--accent);--b-fg:#fff;--b-bd:var(--accent);
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;
    min-block-size:46px;padding:11px 22px;border-radius:999px;
    background:var(--b-bg);color:var(--b-fg);border:1px solid var(--b-bd);
    text-decoration:none;font-family:var(--text);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;
    transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),translate .2s var(--ease);
    &:hover{--b-bg:var(--accent-hover);--b-bd:var(--accent-hover)}
    &:active{translate:0 1px}
    &[aria-busy="true"]{opacity:.7;pointer-events:none}
  }
  .btn--line{--b-bg:transparent;--b-fg:var(--ink);--b-bd:var(--ink);&:hover{--b-bg:var(--ink);--b-fg:#fff;--b-bd:var(--ink)}}
  .btn--sm{min-block-size:38px;padding:7px 16px;font-size:14px}
  .btn--light{--b-bg:#fff;--b-fg:var(--accent);--b-bd:#fff;&:hover{--b-bg:var(--accent-soft);--b-bd:var(--accent-soft)}}
  .btn--ghost-light{--b-bg:transparent;--b-fg:#fff;--b-bd:rgb(255 255 255 / .55);&:hover{--b-bg:#fff;--b-fg:var(--accent);--b-bd:#fff}}
  .btns{display:flex;flex-wrap:wrap;gap:10px}

  .menu-btn{display:inline-grid;place-items:center;inline-size:44px;block-size:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;
    & .i{inline-size:20px;block-size:20px}
    &:hover{border-color:var(--ink)}
    &:disabled{opacity:.35;pointer-events:none}
  }
  .icon-btn{display:inline-grid;place-items:center;inline-size:44px;block-size:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;& .i{inline-size:20px;block-size:20px}}

  .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--muted);line-height:1.5;background:transparent}
  .pill--accent{background:var(--accent);border-color:var(--accent);color:#fff;font-family:var(--text);font-weight:600;font-size:12.5px;letter-spacing:0;vertical-align:4px}
  .chips{display:flex;flex-wrap:wrap;gap:8px}

  /* a rounded box whose children are separated by hairlines */
  .group{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}

  .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
  .brand__gem{inline-size:30px;block-size:26px;flex:none}
  .brand__word{display:flex;flex-direction:column}
  .brand__name{font-family:var(--logo);font-size:24px;letter-spacing:.06em;line-height:1}
  .brand__tag{white-space:nowrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-block-start:5px}

  .status{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--muted)}
  .status__dot{inline-size:8px;block-size:8px;border-radius:50%;background:currentColor;flex:none}
  [data-state="open"]{color:var(--open)}
  [data-state="closed"]{color:var(--closed)}
  .status:not([data-state]){display:none}
  [data-status-mini]:not([data-state]) .status__dot{display:none}
}

/* ======================================================================== */
@layer sections{

  .lang-suggest{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
    padding:8px var(--gutter);background:var(--alt);font-size:14px;
    & .btn{min-block-size:34px;padding:5px 14px;font-size:13px}
    & .icon-btn{inline-size:34px;block-size:34px;& .i{inline-size:16px;block-size:16px}}
  }

  /* ---------- header ---------- */
  .header{position:sticky;inset-block-start:0;z-index:40;block-size:var(--header-h);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block-end:1px solid var(--line)}
  .header__bar{block-size:100%;max-inline-size:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
  .header__nav{display:flex;gap:4px 26px;
    & a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted);padding-block:6px;transition:color .2s}
    & a:hover{color:var(--ink)}
  }
  .header__end{display:flex;align-items:center;justify-content:flex-end;gap:12px}
  .lang{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
    & a{min-inline-size:34px;padding:3px 9px;border-radius:999px;text-align:center;text-decoration:none;font-family:var(--mono);font-size:12px;color:var(--muted)}
    & a:hover{color:var(--ink)}
    & a[aria-current]{background:var(--ink);color:#fff}
  }
  .header__menu{display:none}
  @media (max-width:1023px){
    .header__bar{grid-template-columns:1fr auto}
    .header__nav,.header .lang{display:none}
    .header__menu{display:inline-grid}
  }
  @media (max-width:420px){
    .header__cta{padding-inline:12px;font-size:13px}
    .brand__gem{inline-size:26px;block-size:22px}
    .brand__name{font-size:21px}
  }

  /* ---------- mobile menu ---------- */
  .menu{
    position:fixed;inset:0;inline-size:100%;block-size:100dvh;max-inline-size:none;max-block-size:none;
    margin:0;padding:0 var(--gutter) 28px;border:0;background:var(--bg);color:var(--ink);
    &:popover-open{display:flex;flex-direction:column}
  }
  .menu__top{display:flex;align-items:center;justify-content:space-between;block-size:var(--header-h);border-block-end:1px solid var(--line)}
  .menu__nav{display:grid;margin-block:8px auto;
    & a{padding-block:16px;border-block-end:1px solid var(--line);text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.75rem;letter-spacing:-.01em}
    & a:hover{color:var(--accent)}
  }
  .menu__foot{display:grid;gap:16px;padding-block-start:20px;justify-items:start}
  .lang--lg a{padding:6px 14px;font-size:13px}
  body:has(.menu:popover-open){overflow:hidden}

  /* ================= HERO ================= */
  .hero{padding-block:clamp(28px,4vw,48px) clamp(48px,6vw,80px)}
  .hero__grid{display:grid;gap:36px;align-items:center}
  .hero__copy{display:grid;gap:0;
    & .label{margin-block-end:14px}
  }
  .hero__lede{margin-block:20px 26px;max-inline-size:46ch;color:var(--muted);font-size:1.0625rem}
  .perks{display:grid;gap:12px;margin-block-start:28px;padding-block-start:24px;border-block-start:1px solid var(--line);
    & li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}
  }
  .perk__ic{display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);flex:none;
    & .i{inline-size:18px;block-size:18px}
  }
  @media (min-width:600px) and (max-width:899px),(min-width:1100px){
    .perks{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
      & li{flex-direction:column;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.35}
    }
  }
  .hero__art{position:relative}
  @media (max-width:899px){
    .hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
    .hero__copy,.hero__art{display:contents}
    .hero__copy .label{order:1}
    .hero__grid .hero__photo{order:2;aspect-ratio:auto;block-size:min(56svh,520px);max-block-size:none}
    .hero__copy h1{order:3;margin-block-start:24px}
    .hero__lede{order:4}
    .hero__copy .btns{order:5}
    .hero__copy .perks{order:6}
    .hero__grid .now{order:7;margin:28px 0 0}
  }
  .hero__photo{border-radius:var(--r);overflow:hidden;background:var(--alt);aspect-ratio:4/5;max-block-size:72svh;inline-size:100%;
    & img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 0%}
  }
  /* live store status card, overlapping the photo */
  .now{position:relative;margin:-56px 12px 0;padding:14px 16px 6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -24px rgb(23 32 28 / .35)}
  .now__title{margin-block-end:4px}
  .now__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding-block:10px;text-decoration:none;border-block-start:1px solid var(--line)}
  .now li:first-child .now__row{border-block-start:0}
  .now__name{font-family:var(--display);font-weight:600;font-size:1.0625rem}
  .now__status{grid-column:1;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
  .now__status[data-state="open"]{color:var(--open)}
  .now__status[data-state="closed"]{color:var(--closed)}
  .now__go{grid-column:2;grid-row:1 / 3;color:var(--muted);transition:translate .2s var(--ease)}
  .now__row:hover .now__go{translate:3px 0;color:var(--ink)}
  .now__row:hover .now__name{color:var(--accent)}
  @media (min-width:900px){
    .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
    .hero__photo{aspect-ratio:auto;block-size:min(70svh,600px);max-block-size:none}
    .now{position:absolute;inset-inline-start:-48px;inset-block-end:28px;margin:0;inline-size:min(400px,92%)}
  }

  /* ================= SECTIONS ================= */
  .section{padding-block:var(--section)}
  .section--alt{background:var(--alt)}
  .head{display:grid;gap:12px;margin-block-end:clamp(28px,4vw,40px);max-inline-size:760px}
  .head__text{color:var(--muted);max-inline-size:60ch;font-size:1.0625rem}
  .head--row{max-inline-size:none;grid-template-columns:minmax(0,1fr);align-items:end;
    & > div:first-child{display:grid;gap:12px;max-inline-size:760px}
  }
  @media (min-width:768px){.head--row{grid-template-columns:minmax(0,1fr) auto}}
  .head__after{margin-block-start:24px}

  /* ================= COLLECTION ================= */
  /* horizontal rails (collection + feed): two cards side by side on phones */
  .rail{
    display:grid;grid-auto-flow:column;gap:12px;
    grid-auto-columns:calc((100% - 2 * var(--gutter) - 12px) / 2.15);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2));
    scroll-padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2));
    padding-block:2px;
    &::-webkit-scrollbar{display:none}
    & > li{scroll-snap-align:start}
  }
  @media (min-width:600px){.rail{grid-auto-columns:clamp(220px,30vw,280px);gap:16px}}
  @media (min-width:1100px){.rail{grid-auto-columns:calc((min(100%,var(--max) + 2 * var(--gutter)) - 2 * var(--gutter) - 48px) / 4)}}
  .cat{position:relative;container:cat / inline-size;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .2s,translate .3s var(--ease)}
  .cat:hover{border-color:var(--ink)}
  .cat>a{display:flex;flex-direction:column;block-size:100%;text-decoration:none}
  .cat__img{display:block;aspect-ratio:1;overflow:hidden;background:var(--alt);
    & img{inline-size:100%;block-size:100%;object-fit:cover;transition:scale .5s var(--ease)}
  }
  .cat>a:hover img{scale:1.05}
  .cat__body{display:grid;gap:3px;padding:12px 12px 14px}
  .cat__name{font-family:var(--display);font-weight:600;font-size:1.125rem;line-height:1.2}
  .cat__sub{font-size:13.5px;color:var(--muted);line-height:1.4}
  @container cat (min-width:240px){
    .cat__body{padding:16px 18px 18px}
    .cat__name{font-size:1.3rem}
    .cat__sub{font-size:14.5px}
  }
  .cat--note{background:var(--accent-soft);border-color:var(--accent-soft)}
  .cat--note>a{justify-content:space-between;gap:20px;padding:clamp(16px,2.2vw,24px)}
  .cat__note{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,1rem + 1vw,1.75rem);line-height:1.15;letter-spacing:-.01em;text-wrap:balance;
    & em{font-style:normal;color:var(--accent)}
  }
  .cat--note .btn{align-self:start;white-space:normal;text-align:start}

  /* ================= HOW (connected steps) ================= */
  .steps{display:grid}
  .step{display:grid;gap:8px;align-content:start;padding:24px;
    & p{color:var(--muted);font-size:15.5px}
  }
  .step+.step{border-block-start:1px solid var(--line)}
  .step__n{margin-block-end:4px}
  @media (min-width:768px){
    .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
    .step+.step{border-block-start:0;border-inline-start:1px solid var(--line)}
  }

  /* ================= VALUES (cards, one dark) ================= */
  .values{display:grid;gap:14px}
  @media (min-width:768px){.values{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .value{display:grid;gap:10px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
    & h3{font-size:1.6rem}
    & p{color:var(--muted);font-size:15.5px}
  }

  /* ================= FEED ================= */
  .rail-ctrl{display:flex;gap:8px}
  .post{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .2s;
    & a{display:flex;flex-direction:column;block-size:100%;text-decoration:none}
  }
  .post:hover{border-color:var(--ink)}
  .post__img{display:block;aspect-ratio:4/5;overflow:hidden;
    & img{inline-size:100%;block-size:100%;object-fit:cover;transition:scale .5s var(--ease)}
  }
  .post a:hover img{scale:1.05}
  .post__cap{padding:12px 16px 14px;font-size:15px;font-weight:500}
  .post--end{background:var(--ink);border-color:var(--ink);color:#EEF0EC}
  .post--end a{justify-content:space-between;gap:16px;padding:22px;min-block-size:100%}
  .post--end .label{color:#B9C3BC}
  .post__endtitle{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);line-height:1.15}
  .post--end .i{transition:translate .2s var(--ease)}
  .post--end a:hover .i{translate:3px -3px}

  /* ================= STORES (schedule-style list) ================= */
  .stores__msg{min-block-size:1.4em;margin-block:-16px 10px;font-size:14px;color:var(--accent);font-weight:500}
  .storelist{display:grid}
  .store{container:store / inline-size;display:grid;gap:20px 24px;padding:22px 20px;transition:background-color .6s var(--ease)}
  .store+.store{border-block-start:1px solid var(--line)}
  .store__id{display:grid;gap:4px;justify-items:start;
    & h3{font-size:1.4rem}
    & address{color:var(--muted);font-size:15px}
  }
  .store__dist[data-nearest]{background:var(--accent);border-color:var(--accent);color:#fff}
  .store__when{display:grid;gap:12px;justify-items:start}
  .store__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .hours{font-size:14px;inline-size:100%;max-inline-size:340px;
    & summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;color:var(--muted);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
    & summary:hover{color:var(--ink)}
    & summary::-webkit-details-marker{display:none}
    & .hours__chev{inline-size:16px;block-size:16px;transition:rotate .3s var(--ease)}
    &[open] .hours__chev{rotate:180deg}
    & table{inline-size:100%;margin-block-start:8px;font-family:var(--mono);font-size:12.5px}
    & th,& td{padding:5px 0;border-block-end:1px solid var(--line);text-align:start;font-weight:400}
    & td{text-align:end;color:var(--muted)}
    & tr.is-today :is(th,td){font-weight:700;color:var(--ink)}
  }
  @media (min-width:900px){
    .store{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:start;padding:24px 28px}
    .store__actions{justify-content:flex-end}
  }
  .store:target,.store.is-target{animation:flash 2.2s var(--ease) 1}
  @keyframes flash{0%,35%{background:var(--accent-soft)}100%{background:var(--surface)}}

  /* ================= FAQ ================= */
  .faq{max-inline-size:780px;border-block-start:1px solid var(--line)}
  .qa{border-block-end:1px solid var(--line);
    & summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;cursor:pointer;list-style:none;font-size:1.0625rem;font-weight:600}
    & summary::-webkit-details-marker{display:none}
    & summary:hover{color:var(--accent)}
    &::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
    &[open]::details-content{block-size:auto}
  }
  .qa__icon{inline-size:18px;block-size:18px;transition:rotate .3s var(--ease)}
  .qa[open] .qa__icon{rotate:45deg}
  .qa__a{padding:0 34px 20px 0;color:var(--muted)}

  /* ================= CTA ================= */
  .cta-wrap{padding-block-end:var(--section)}
  .cta{display:grid;gap:24px;align-items:end;padding:clamp(28px,4vw,48px);border-radius:calc(var(--r) + 4px);background:var(--accent);color:#fff;
    & .label{color:#D9DDC2;margin-block-end:10px}
    & h2 em{color:#E3E6CF}
    & :focus-visible{outline-color:#fff}
  }
  .cta__text{margin-block-start:12px;max-inline-size:46ch;color:#ECEEDF}
  @media (min-width:900px){.cta{grid-template-columns:1fr auto;gap:48px}}

  /* ================= FOOTER ================= */
  .foot{border-block-start:1px solid var(--line);padding-block:40px 28px;font-size:15px;
    & a{text-decoration:none}
    & a:hover{color:var(--accent)}
  }
  .foot__grid{display:grid;gap:28px;padding-block-end:32px}
  .foot__brand p{max-inline-size:38ch;margin-block-start:14px;color:var(--muted)}
  .foot .label{margin-block-end:12px}
  .foot ul{display:grid;gap:8px;& a{display:inline-flex;align-items:center;gap:8px}}
  .foot__legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block-start:20px;border-block-start:1px solid var(--line);font-size:14px;color:var(--muted)}
  @media (min-width:900px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
}

/* ======================================================================== */
@layer motion{
  @media (prefers-reduced-motion:no-preference){
    @view-transition{navigation:auto}
    .hero__copy{animation:rise .8s var(--ease) both}
    .hero__photo{animation:rise .8s var(--ease) both .1s}
    .now{animation:rise .8s var(--ease) both .3s}
    @keyframes rise{from{opacity:0;translate:0 14px}}
    /* sections animate in as they enter the screen (classes added by site.js) */
    .js .anim{opacity:0;translate:0 28px;transition:opacity .8s var(--ease),translate .8s var(--ease),scale .8s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
    .js .anim--zoom{translate:none;scale:.96}
    .js .anim.in{opacity:1;translate:0 0;scale:1}
  }
}


/* desktop hero: photo stays uncovered; store card sits under the button, perks span the full width */
@layer sections{
  @media (min-width:900px){
    .hero__grid{grid-template-rows:auto auto auto auto 1fr auto;row-gap:0;align-items:start}
    .hero__copy,.hero__art{display:contents}
    .hero__copy .label{grid-column:1;grid-row:1}
    .hero__copy h1{grid-column:1;grid-row:2}
    .hero__lede{grid-column:1;grid-row:3}
    .hero__copy .btns{grid-column:1;grid-row:4}
    .hero__grid .now{grid-column:1;grid-row:5;position:static;inline-size:auto;max-inline-size:520px;margin:32px 0 0;box-shadow:none}
    .hero__photo{grid-column:2;grid-row:1 / 6;block-size:100%;min-block-size:min(72svh,620px);align-self:stretch}
    .hero__copy .perks{grid-column:1 / -1;grid-row:6;margin-block-start:40px}
  }
}

/* FAQ as one card: heading, button and photo on the left, questions on the right */
@layer sections{
  .faq-card{display:grid;gap:28px;padding:clamp(22px,3.5vw,48px);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);background:var(--surface)}
  .faq-card__side{display:grid;gap:20px;align-content:start;justify-items:start;
    & .head{margin:0}
  }
  .faq-card__ph{display:none;border-radius:var(--r);overflow:hidden;inline-size:100%;aspect-ratio:4/3;background:var(--alt);
    & img{inline-size:100%;block-size:100%;object-fit:cover}
  }
  .faq-card .faq{max-inline-size:none}
  @media (min-width:900px){
    .faq-card{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
    .faq-card__ph{display:block}
  }
}

/* CTA: light olive card; footer: deep olive with a large wordmark */
@layer sections{
  .cta{background:var(--accent-soft);color:var(--ink);
    & .label{color:var(--muted)}
    & h2 em{color:var(--accent)}
    & :focus-visible{outline-color:var(--accent)}
  }
  .cta__text{color:var(--muted)}
  .foot{position:relative;overflow:hidden;margin-block-start:8px;padding-block:56px 28px;border:0;
    border-radius:28px 28px 0 0;background:#2F3419;color:#ECEEDF;
    background-image:radial-gradient(60% 80% at 100% 0%,rgb(160 170 90 / .28),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgb(120 130 60 / .3),transparent 70%);
    & a:hover{color:#fff}
    & .label{color:#BFC79A}
    & :focus-visible{outline-color:#fff}
    & .brand{color:#fff}
    & .brand__tag{color:#BFC79A}
  }
  .foot__brand p{color:#D3D8BC}
  .foot__legal{border-block-start-color:rgb(236 238 223 / .2);color:#C9CEB3;position:relative}
}

@layer sections{
  @media (max-width:599px){
    .hero__copy .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .hero__copy .btns .btn{padding-inline:8px;font-size:14px}
  }
}

/* hero perks: short serif headline + one small line */
@layer sections{
  .perks li{align-items:center}
  .perk__txt{display:grid;gap:2px;line-height:1.25}
  .perk__txt strong{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink)}
  .perk__txt small{font-size:13.5px;font-weight:400;color:var(--muted)}
  .perk__ic{inline-size:42px;block-size:42px}
  @media (min-width:600px) and (max-width:899px),(min-width:900px){
    .perks{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
    .perks li{flex-direction:row;align-items:center;gap:14px}
  }
}

/* phones: perks as three centred columns */
@layer sections{
  @media (max-width:599px){
    .perks{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;text-align:center;padding-block-start:20px}
    .perks li{flex-direction:column;align-items:center;gap:8px;padding-inline:6px}
    .perks li+li{border-inline-start:1px solid var(--line)}
    .perk__txt{gap:4px}
    .perk__txt strong{font-size:1rem}
    .perk__txt small{font-size:12px;line-height:1.35}
    .perk__ic{inline-size:38px;block-size:38px}
  }
}

/* footer: description as a statement; gem + wordmark lockup like the shop sign */
@layer sections{
  .foot__brand p{margin:0;font-family:var(--display);font-weight:500;font-size:1.125rem;line-height:1.35;color:#ECEEDF;max-inline-size:34ch}
  .foot__brand p span{display:block;margin-block-start:8px;font-family:var(--text);font-weight:400;font-size:14.5px;line-height:1.55;color:#C9CEB3}
}

/* green header + mobile menu, matching the footer */
@layer sections{
  .header{background:color-mix(in srgb,#2F3419 94%,transparent);border-block-end-color:rgb(236 238 223 / .12);color:#ECEEDF;
    & :focus-visible{outline-color:#fff}
    & .brand{color:#fff}
    & .brand__tag{color:#BFC79A}
    & .header__nav a{color:#D3D8BC}
    & .header__nav a:hover{color:#fff}
    & .lang{background:rgb(255 255 255 / .06);border-color:rgb(236 238 223 / .22)}
    & .lang a{color:#D3D8BC}
    & .lang a:hover{color:#fff}
    & .lang a[aria-current]{background:#ECEEDF;color:#2F3419}
    & .header__cta{--b-bg:#ECEEDF;--b-fg:#2F3419;--b-bd:#ECEEDF}
    & .header__cta:hover{--b-bg:#fff;--b-bd:#fff}
    & .menu-btn{background:rgb(255 255 255 / .06);border-color:rgb(236 238 223 / .25);color:#fff}
    & .menu-btn:hover{border-color:#fff}
  }
  .menu{background:#2F3419;color:#ECEEDF;
    background-image:radial-gradient(70% 50% at 100% 0%,rgb(160 170 90 / .25),transparent 70%),radial-gradient(60% 40% at 0% 100%,rgb(120 130 60 / .28),transparent 70%);
    & :focus-visible{outline-color:#fff}
    & .brand{color:#fff}
    & .menu-btn,& .icon-btn{background:rgb(255 255 255 / .06);border-color:rgb(236 238 223 / .25);color:#fff}
    & .btn{--b-bg:#ECEEDF;--b-fg:#2F3419;--b-bd:#ECEEDF}
    & .lang{background:rgb(255 255 255 / .06);border-color:rgb(236 238 223 / .22)}
    & .lang a{color:#D3D8BC}
    & .lang a[aria-current]{background:#ECEEDF;color:#2F3419}
  }
  .menu__top{border-block-end-color:rgb(236 238 223 / .15)}
  .menu__nav a{border-block-end-color:rgb(236 238 223 / .15);color:#ECEEDF;
    &:hover{color:#fff}
  }
}

/* footer: back-to-top as a round arrow button */
@layer sections{
  .foot__legal{align-items:center;flex-wrap:nowrap;justify-content:space-between;text-align:start}
  .foot .foot__top{flex:none}
  .foot .foot__top{display:inline-grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;border:1px solid rgb(236 238 223 / .35);color:#ECEEDF;transition:background-color .2s,color .2s,border-color .2s,translate .2s}
  .foot .foot__top:hover{background:#ECEEDF;color:#2F3419;border-color:#ECEEDF;translate:0 -2px;text-decoration:none}
}

/* status on two lines: keep the dot on the first line */
@layer sections{
  .status,.now__status{align-items:flex-start}
  .status .status__dot,.now__status .status__dot{margin-block-start:.5em}
}


/* narrow rail cards (phones): end cards fit their text, feed photos fill the card */
@layer sections{
  .cat--note>a{gap:14px;padding:14px}
  .cat__note{font-size:clamp(1.05rem,.9rem + 1vw,1.75rem);overflow-wrap:anywhere}
  .cat--note .btn{inline-size:100%;justify-content:flex-start;padding:9px 10px;font-size:12px;letter-spacing:0;line-height:1.3;min-block-size:0;border-radius:12px;white-space:normal;overflow-wrap:normal;hyphens:none}
  .cat--note .btn .i{display:none}
  @container cat (min-width:240px){
    .cat--note>a{padding:clamp(18px,2.2vw,24px)}
    .cat--note .btn{inline-size:auto;padding:7px 16px;border-radius:999px}
    .cat--note .btn .i{display:block}
  }
  .post{container:post / inline-size}
  .post__img{block-size:100%;aspect-ratio:auto;min-block-size:0}
  .post>a{aspect-ratio:4/5}
  .post--end a{padding:16px;gap:10px}
  .post--end .label{font-size:11px;letter-spacing:.06em;overflow-wrap:anywhere}
  .post__endtitle{font-size:clamp(1.15rem,.95rem + 1vw,1.85rem);overflow-wrap:anywhere}
  @container post (min-width:220px){
    .post--end a{padding:22px}
    .post--end .label{font-size:12px;letter-spacing:.18em}
  }
}

@layer sections{
  @container cat (max-width:239px){
    .cat--note .btn{background:none;border:0;color:var(--accent);padding:0;inline-size:auto;font-size:min(12.5px,9.6cqi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  }
}

/* ================= HERO BANNER =================
   Phones: photo (cropped to the jewelry) then the text.
   Tablet: full landscape photo then the text.
   Desktop: the text sits on the photo's empty, light left side. */
@layer sections{
  .hb{position:relative;display:grid;gap:24px}
  .hb__media{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--alt)}
  .hb__pic img{display:block;inline-size:100%;block-size:auto;aspect-ratio:1176/941;object-fit:cover}
  @media (min-width:600px){.hb__pic img{aspect-ratio:1672/941}}
  .hb__copy{display:grid;justify-items:start;
    & .label{margin-block-end:12px}
    & .hero__lede{margin-block:16px 24px;max-inline-size:44ch}
  }
  @media (max-width:599px){
    .hb__copy .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;inline-size:100%}
    .hb__copy .btns .btn{padding-inline:8px;font-size:14px}
  }
  @media (min-width:900px){
    .hb{display:block}
    .hb__media{border-radius:calc(var(--r) + 8px)}
    .hb__pic img{aspect-ratio:auto;block-size:clamp(520px,58vw,660px);object-position:100% 50%}
    .hb__copy{position:absolute;inset-block:0;inset-inline-start:0;inline-size:min(50%,560px);align-content:center;padding:clamp(32px,4vw,56px)}
    .hb__copy h1{font-size:clamp(2.75rem,1.5rem + 2.6vw,4.25rem)}
  }
  /* below the photo: live store status as a strip, then the three perks */
  .hb__below{display:grid;gap:8px;margin-block-start:20px}
  .hb__below .now{position:static;inline-size:auto;margin:0;box-shadow:none;animation:none}
  @media (min-width:900px){
    .hb__below .now ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
    .hb__below .now li .now__row{border-block-start:0}
    .hb__below .now li+li .now__row{border-inline-start:1px solid var(--line);padding-inline-start:24px}
  }
}

@layer sections{
  .hb__copy > *{order:0}
  @media (min-width:900px){
    .hb::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
      background:linear-gradient(90deg,rgb(246 241 233 / .55) 0%,rgb(246 241 233 / .35) 30%,rgb(246 241 233 / 0) 48%)}
    .hb{border-radius:calc(var(--r) + 8px);overflow:hidden}
    .hb__copy{z-index:1;inline-size:min(44%,520px);padding-inline-end:16px}
    .hb__copy .hero__lede{max-inline-size:34ch;color:#3E4A43}
    .hb__copy h1{font-size:clamp(2.6rem,1.4rem + 2.4vw,4rem)}
  }
}
@layer sections{@media (min-width:900px){.hb__copy .btn--line{--b-bg:rgb(250 248 243 / .85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.hb__copy .btn--line:hover{--b-bg:var(--ink)}}}

/* phones: edge-to-edge portrait photo, like a story */
@layer sections{
  @media (max-width:599px){
    .hero{padding-block-start:0}
    .hb{gap:22px}
    .hb__media{margin-inline:calc(var(--gutter) * -1);border-radius:0 0 28px 28px}
    .hb__pic img{aspect-ratio:753/941;max-block-size:78svh;object-position:50% 40%}
  }
}

/* hero entrance: the photo settles in with a slow zoom, the text follows line by line;
   on scroll the photo drifts a little slower than the page (parallax) */
@layer motion{
  @media (prefers-reduced-motion:no-preference){
    .hb__pic img{animation:hb-zoom 1.8s cubic-bezier(.16,1,.3,1) both}
    @keyframes hb-zoom{from{scale:1.12;opacity:0;filter:blur(6px)}}
    .hb__copy > *{animation:hb-rise .9s cubic-bezier(.16,1,.3,1) both}
    .hb__copy > :nth-child(1){animation-delay:.25s}
    .hb__copy > :nth-child(2){animation-delay:.38s}
    .hb__copy > :nth-child(3){animation-delay:.5s}
    .hb__copy > :nth-child(4){animation-delay:.62s}
    @keyframes hb-rise{from{opacity:0;translate:0 18px}}
    .hb__below{animation:hb-rise .9s cubic-bezier(.16,1,.3,1) .75s both}
    @supports (animation-timeline:view()){
      .hb__media{overflow:hidden}
      .hb__pic img{animation:hb-zoom 1.8s cubic-bezier(.16,1,.3,1) both,hb-drift linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%}
      @keyframes hb-drift{to{translate:0 14%;scale:1.06}}
    }
  }
}

/* ================= HERO light sweep =================
   Once the photo has loaded, a soft band of light passes over the jewelry once. */
@layer sections{.hb__pic{display:block}}
@layer motion{
  @media (prefers-reduced-motion:no-preference){
    .hb__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
      background:linear-gradient(105deg,transparent 38%,rgb(255 250 235 / .5) 50%,transparent 62%) no-repeat;background-size:250% 100%;background-position:120% 0}
    .hb__media.is-shining::after{animation:hb-shine 1.9s cubic-bezier(.4,0,.2,1) forwards}
    @keyframes hb-shine{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-30% 0}}
  }
}