/* ===================================================================
   v3 — "Daylight" skin, layered over style.css
   Branch: usability3

   WHY THIS IS A LAYER AND NOT A REWRITE
   style.css already drives every component off CSS custom properties.
   Re-pointing those properties re-skins the whole site — product cards,
   the buy box, the configurator steps, the cart drawer, the commission
   form — without touching one line of behaviour. Every function, the
   catalog, the customizer, Stripe, Netlify Identity and the admin pages
   are untouched by design. The admin pages do not load this file at all.

   Palette and metrics taken from the Option A v10 reference
   (store.css -> concept.css -> clarity.css, in that cascade order):
     paper #f4f5f8 · ink #294363 · muted #53667e · line #bac4d2
     soft  #e7edf8 · accent #294cab · hero ground #f3f2ed
     header 100px · buttons radius 28px, weight 650
     h1 500 · h2 550 · h3 650

   Load order matters: this file must come AFTER style.css.
=================================================================== */

:root{
  /* --- the remap. Everything else follows from these six lines. --- */
  --bg:        #f4f5f8;
  --panel:     #ffffff;
  --panel-2:   #e7edf8;
  --ink:       #294363;
  --dim:       #53667e;
  --gold:      #294cab;   /* the accent role, now blue rather than gold */
  --gold-soft: rgba(41,76,171,.12);
  --line:      #bac4d2;
  --radius:    4px;

  /* v3-only additions */
  --v3-hero:      #f3f2ed;
  --v3-btn-bg:    #e2eafa;
  --v3-btn-ink:   #2946a1;
  --v3-btn-line:  #8ea4d2;
  --v3-imgground: #ffffff;
}

body{
  background:var(--bg); color:var(--ink);
  font-family:'Manrope','Inter',-apple-system,sans-serif;
  font-size:16px; line-height:1.7;
}

/* ====================================================================
   ONE TYPEFACE, EVERYWHERE.

   style.css line 30 sets h1-h4 to Inter, and the rule above only puts
   Manrope on body - which headings do not inherit. So every heading on
   this site has been Inter sitting next to a Manrope wordmark and a
   Manrope menu: two grotesques similar enough to read as an error
   rather than a decision. Buttons, inputs and .mono had drifted too.

   The wordmark also drops from 800 to 600, one step above the menu and
   one above the headings, so it belongs to the same ladder instead of
   looking like a different species.
==================================================================== */
:root{ --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; }
h1,h2,h3,h4,h5,h6,button,input,select,textarea,.mono{ font-family:var(--font); }
.logo{
  font-weight:600; font-size:clamp(1.05rem,1.3vw,1.2rem);
  line-height:1; letter-spacing:-.02em; color:var(--ink);
}
.nav-links a{ font-weight:500; font-size:.9rem; letter-spacing:0; color:var(--dim); }
.nav-links a:hover{ color:var(--gold); }
/* Below 760 the link row had no side padding, so the first and last
   links touched the screen edge while the logo sat inset. */
@media (max-width:760px){
  .site-nav .wrap{ padding-left:16px; padding-right:16px; }
  .nav-links a{ font-size:.875rem; }
}
h1,h2,h3,h4{ color:var(--ink); letter-spacing:-.035em; }
h1{ font-weight:500; line-height:1.12; }
h2{ font-weight:500; line-height:1.14; }
h3,h4{ font-weight:600; }
strong{ font-weight:700; }
a{ color:inherit; }

/* The eyebrow was gold-on-navy; as a small caps label on paper it needs
   to stop shouting, so it drops to the muted ink and loses the tracking. */
.eyebrow{
  color:var(--dim); font-weight:600; font-size:13px;
  letter-spacing:.01em; text-transform:none;
}

/* ---------- Navigation ---------- */
.site-nav{
  background:rgba(244,245,248,.94); border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.site-nav .wrap{ height:88px; }
.nav-links a{ opacity:1; color:var(--dim); font-weight:500; }
.nav-links a:hover{ color:var(--gold); }
.logo{ color:var(--ink); }
@media (max-width:760px){
  .site-nav .wrap{ height:66px; }
  .nav-links{ background:#fff; box-shadow:0 12px 24px rgba(41,67,99,.12); }
  .nav-links a{ color:var(--ink); }
  .nav-links a:hover{ background:var(--panel-2); }
  #mobile-nav-toggle span{ background:var(--ink); }
}

/* ---------- Buttons ---------- */
.btn{
  border-radius:28px; font-weight:600; font-size:14px;
  padding:.85rem 1.4rem; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-solid, .cart-btn{
  background:var(--v3-btn-bg); color:var(--v3-btn-ink);
  border:1px solid var(--v3-btn-line);
}
.btn-solid:hover, .cart-btn:hover{
  background:#cddbf7; color:#233f8c; transform:none; box-shadow:none;
}
.btn-outline{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-outline:hover{ background:var(--panel-2); color:var(--v3-btn-ink); border-color:var(--v3-btn-line); }
.cart-count{ background:var(--v3-btn-ink); color:#fff; }
/* The hero pair inherited a heavy 3D press treatment built for the dark
   theme — drop shadows and a translateY on hover. On paper it reads as
   a toy, so both revert to the flat reference treatment. */
.hero-actions .btn-solid,
.hero-actions .btn-solid:hover,
.hero-actions .btn-solid:active{
  background:var(--v3-btn-bg); color:var(--v3-btn-ink);
  border:1px solid var(--v3-btn-line);
  box-shadow:none; transform:none;
}
.hero-actions .btn-outline{ background:#fff; border-color:var(--line); color:var(--ink); backdrop-filter:none; }

/* ---------- Hero ---------- */
.hero{ background:var(--v3-hero); min-height:auto; }
.hero-bg{
  /* was background-size:cover, which cropped a portrait photograph into
     a landscape band. The daylight room shot is composed with empty wall
     on the left for the type, so it is positioned rather than trimmed. */
  background-size:cover; background-position:center right;
}
.hero-inner{ padding-top:clamp(3rem,7vw,6rem); padding-bottom:clamp(3rem,7vw,6rem); }
.hero h1{ font-size:clamp(38px,4.4vw,64px); font-weight:500; color:var(--ink); text-shadow:none; }
.hero .eyebrow{ color:#355788; font-size:clamp(14px,1.2vw,18px); text-shadow:none; letter-spacing:0; }
.hero-tagline{ color:var(--dim); font-size:clamp(15px,1.3vw,19px); max-width:41ch; }
.hero-tagline-sub{ color:var(--dim); }
.hero-tagline-mark{ background:var(--gold); }
/* A light scrim so the headline never lands on the window frame or the
   hard shadow bands in the room photograph. Reads as more daylight on
   the wall rather than as an overlay panel. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(248,248,245,.95) 0%, rgba(248,248,245,.88) 26%,
    rgba(248,248,245,.60) 46%, rgba(248,248,245,0) 64%);
}
.hero-inner{ position:relative; z-index:2; }
.hero-video-panel{ z-index:2; }
@media (max-width:900px){ .hero::after{ display:none; } }

/* The Frank badge: white card on paper instead of a floating pill. */
.hero-frank-badge{
  background:#fff; border:1px solid var(--line); border-radius:28px;
  box-shadow:0 2px 10px rgba(41,67,99,.06);
}
.hero-frank-badge span, .hero-frank-badge b{ color:var(--ink); }

/* ---------- Panels, cards, product grid ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:4px; }
.card:hover{ transform:none; border-color:var(--v3-btn-line); box-shadow:0 6px 18px rgba(41,67,99,.07); }
.card-media{
  background:var(--v3-imgground);
  border-bottom:1px solid var(--line);
  aspect-ratio:4/5; padding:18px;
}
/* contain, never cover. The pieces are tall; a square crop removes the
   base and the tip in the browse grid, which is the first time anyone
   sees the work. */
.card-media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.card-body h4{ font-weight:600; font-size:1.02rem; color:var(--ink); }
.price{ color:var(--ink); font-weight:600; }
.card-foot span:last-child{ color:var(--gold); font-weight:600; }

.quote-box{ background:#fff; border-left:3px solid var(--gold); color:var(--ink); }
.buy-box, .pd-buybox{ background:#fff; border:1px solid var(--line); border-radius:4px; }
.buy-box{ border-width:1px; }
.pd-stage, .pd-main-img{ background:var(--v3-imgground); border:1px solid var(--line); }
.spec-item .label{ color:var(--dim); text-transform:none; letter-spacing:0; font-size:.8rem; }

/* ---------- Configurator (behaviour untouched, surface only) ---------- */
.step{ border:1px solid var(--line); border-radius:4px; background:#fff; }
.step-header{ background:#fff; }
.step-num{ background:var(--v3-btn-bg); color:var(--v3-btn-ink); }
.step.done .step-num{ background:var(--panel-2); color:var(--v3-btn-ink); }
.step-body{ border-top:1px solid var(--line); }
.opt-card{ background:#fff; border:2px solid var(--line); border-radius:4px; }
.opt-card.selected{ border-color:var(--gold); }
.opt-card img{ background:var(--v3-imgground); }
.color-card .swatch-img{ background:var(--v3-imgground); border-color:var(--line); }
.preview-box{ background:var(--v3-imgground); border:1px solid var(--line); border-radius:4px; }
.preview-price{ background:#fff; border:1px solid var(--line); }
/* The attention pulse was tuned for a dark ground; on paper the gold
   flash reads as an error state. Same idea, quieter, in the accent. */
@keyframes stepHeaderBg{ 0%,100%{ background:#fff; } 50%{ background:var(--panel-2); } }
@keyframes stepHeaderRing{
  0%{ box-shadow:0 0 0 0 rgba(41,76,171,.35); }
  70%{ box-shadow:0 0 0 12px rgba(41,76,171,0); }
  100%{ box-shadow:0 0 0 0 rgba(41,76,171,0); }
}

/* ---------- Forms ---------- */
input, textarea, select{ background:#fff !important; color:var(--ink) !important; border-color:var(--line) !important; }
input::placeholder, textarea::placeholder{ color:#8d99ab; }
.field label, .gl{ color:var(--dim); }

/* ---------- Cart drawer & footer ---------- */
.cart-drawer{ background:#fff; border-left:1px solid var(--line); }
.cart-head, .cart-items, .empty-cart{ color:var(--ink); }
footer{ background:var(--panel-2); border-top:1px solid var(--line); color:var(--dim); }
footer a{ color:var(--ink); }
footer a:hover{ color:var(--gold); }

/* ---------- Misc surfaces that assumed a dark ground ---------- */
.explore-card{ background:var(--v3-btn-bg); border:1px solid var(--v3-btn-line); color:var(--v3-btn-ink); }
.explore-card:hover{ background:#cddbf7; transform:none; }
.explore-card .icon, .explore-card .title{ color:var(--v3-btn-ink); }
.explore-card .sub{ color:#3d5a9a; }
.cat-tab{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.cat-tab.active, .cat-tab:hover{ background:var(--v3-btn-bg); color:var(--v3-btn-ink); border-color:var(--v3-btn-line); }
.path-chip{ background:var(--gold); color:#fff; }
.gallery-grid > div{ background:var(--v3-imgground); }
.t-media img, .t-media video{ background:var(--v3-imgground); object-fit:contain; }
.t-dot{ box-shadow:0 0 0 6px var(--bg), 0 0 0 7px rgba(41,76,171,.25); }
.page-index{ background:#fff; border:1px solid var(--line); }
.page-index li{ color:var(--dim); }
.page-index strong{ color:var(--ink); }
.story-text p{ color:var(--dim); }
.pull{ color:var(--ink); border-color:var(--line); }
.frank-tooltip-body{ color:var(--dim); }
.gia-chat-btn{ background:var(--v3-btn-bg) !important; color:var(--v3-btn-ink) !important; border:1px solid var(--v3-btn-line) !important; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ===================================================================
   Page-level overrides.

   Each page carries its own <style> block, and those load after this
   file, so a hardcoded colour in one of them beats the token remap
   above. These are the seven places that happens. Everything here is
   surface only; no behaviour, no layout logic, and nothing in the
   admin pages, which never load this file.
=================================================================== */

/* customize.html ---------------------------------------------------- */
/* The empty-state panel was a navy gradient over a photo. On paper it
   read as a hole in the page. */
#preview-hint{
  background:linear-gradient(rgba(244,245,248,.72), rgba(244,245,248,.86)),
             url('../images/the-igal/original-gift.jpg') center/cover !important;
  color:var(--ink) !important;
}
/* The preview cropped the configured piece to fill a 4:5 box, which is
   the one image on the page the customer is actually judging. */
.preview-box{ background:var(--v3-imgground) !important; }
.preview-box img{ object-fit:contain !important; }
.preview-price{ background:#fff !important; }
.step-header{ background:#fff !important; }
.step-num{ background:var(--v3-btn-bg) !important; color:var(--v3-btn-ink) !important; }
.step.done .step-num{ background:var(--panel-2) !important; color:var(--v3-btn-ink) !important; }
.opt-card, .color-card .swatch-img{ background:var(--v3-imgground) !important; }
.opt-card img, .color-card img{ background:var(--v3-imgground) !important; }

/* product.html ------------------------------------------------------ */
/* White arrows with a black text-shadow, sized for a dark stage. The
   stage is now white, so they were invisible. */
.pd-nav-btn{ color:var(--v3-btn-ink) !important; text-shadow:none !important; background:rgba(255,255,255,.88) !important; border:1px solid var(--line) !important; border-radius:50% !important; width:44px !important; height:44px !important; display:flex !important; align-items:center; justify-content:center; padding:0 !important; }
.pd-nav-btn:hover{ background:#fff !important; color:var(--gold) !important; }
.pd-main-img{ background:var(--v3-imgground) !important; border:1px solid var(--line); }
.pd-main-img img{ object-fit:contain !important; }

/* frank.html -------------------------------------------------------- */
.story-text p{ color:var(--dim) !important; }
.story-text p.drop::first-letter{ color:var(--gold) !important; }
.quote-box{ background:#fff !important; color:var(--ink) !important; }
#yt-thumb::before{ background:rgba(244,245,248,.28) !important; }
#yt-thumb .play-btn{ background:rgba(255,255,255,.95) !important; color:var(--v3-btn-ink) !important; }
.t-media img, .t-media video{ background:var(--v3-imgground) !important; object-fit:contain !important; }

/* how-its-made.html ------------------------------------------------- */
/* Video tiles were dark cards with white captions. */
.vid-card, .video-card{ background:#fff !important; border:1px solid var(--line) !important; }
.vid-card h4, .video-card h4{ color:var(--ink) !important; }

/* frank-gallery.html / commission.html ------------------------------ */
/* Certificate mock and gallery captions assumed a dark page. */
.cert-mock{ background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important; }

/* The hero photograph -------------------------------------------------
   index.html sets its background-image inline on .hero-bg, so it is
   overridden here rather than edited, which keeps every HTML file at
   exactly the two <link> lines this branch adds.

   The daylight room shot: the piece lit by a window in a real room
   rather than floating on a backdrop, and composed with an empty left
   third so the headline can sit straight on the photograph. */
.hero-bg.active{
  background-image:url('../images/room/flowers-daylight.png') !important;
  background-position:right center !important;
  background-size:112% auto !important;
}
/* The autoplaying video panel competed with the room photograph for the
   same corner. The still is the stronger image, so the panel stands
   down on the home hero. */
.hero .hero-video-panel{ display:none !important; }

/* Hero composition ----------------------------------------------------
   With the room photograph in place the copy was running straight over
   the tulips: .hero-inner is a full-width .wrap and the headline had
   max-width:16ch, which at this size still reached past the middle of
   the frame. The reference solves it by holding all copy inside the
   empty left wall of the photograph, so the same constraint is applied
   here and the scrim is extended to cover exactly that column. */
.hero{ min-height:min(78vh,720px); }
/* Two-class selectors throughout: style.css sets .hero h1{max-width:16ch}
   at (0,1,1), so a bare .hero-inner > * at (0,1,0) loses to it and the
   headline kept spilling across the glass. */
.hero .hero-inner > *,
.hero .hero-inner h1,
.hero .hero-frank-badge{ max-width:46%; }
@media (max-width:1100px){
  .hero .hero-inner > *,
  .hero .hero-inner h1,
  .hero .hero-frank-badge{ max-width:58%; }
}
@media (max-width:900px){
  /* Stacked: copy sits on paper below the photograph, so no constraint
     and no scrim are needed or wanted. */
  .hero .hero-inner > *,
  .hero .hero-inner h1,
  .hero .hero-frank-badge{ max-width:100%; }
  .hero{ min-height:0; }
}
/* Holds the copy column, then clears early. The old stops faded out at
   70%, which washed the torch flame - the one thing in the photograph
   that has to stay hot. The copy ends near 47% of the viewport, so the
   scrim is gone by 58% and the flame and the figure are untouched. */
.hero::after{
  background:linear-gradient(100deg,
    rgba(248,248,245,.97) 0%, rgba(248,248,245,.93) 30%,
    rgba(248,248,245,.62) 45%, rgba(248,248,245,0) 58%) !important;
}

/* Two things the remap broke, found by looking at the page ------------
   1. #preview-hint's copy was white text on a navy gradient. Lightening
      the gradient without recolouring the text left it pale-on-pale and
      effectively invisible.
   2. .path-chip was solid gold on navy; as solid accent-blue on paper it
      is the heaviest object on a light page and outweighs the actual
      primary action. */
#preview-hint, #preview-hint *{ color:var(--ink) !important; }
#preview-hint strong, #preview-hint b{ color:var(--v3-btn-ink) !important; }

.path-chip{
  background:var(--v3-btn-bg) !important; color:var(--v3-btn-ink) !important;
  border:1px solid var(--v3-btn-line) !important; font-weight:600;
}
.path-chip:hover{ background:#cddbf7 !important; color:#233f8c !important; }
.path-chip[aria-current="page"], .path-chip.active{
  background:#dce6fc !important; color:#2946a1 !important; border-color:var(--v3-btn-line) !important;
}

/* ====================================================================
   HERO, CORRECTED.

   Three real faults in the first attempt, all mine:

   1. The scrim. I put a white gradient over the whole hero to protect
      the type. It fogged the photograph - the tulips on the left went
      milky. That is the "clouds". The reference never does this; it
      simply keeps the copy off the picture. Removed entirely.

   2. Blur. background-size:cover stretched a 1536x1024 image across a
      ~1920px hero, a 1.25x upscale on a photograph with fine specular
      detail. Now contained at its own size, so it is never enlarged
      past what it actually has.

   3. The crop. cover also cut the base of the piece off the bottom.
      contain keeps the whole object.

   The composition is now the reference's: plain paper on the left with
   the type sitting on it at full contrast, the photograph held to the
   right at its natural proportions. No overlay, no upscale, no crop.
==================================================================== */
.hero::after{ content:none !important; }

.hero{
  background:var(--v3-hero) !important;
  min-height:min(70vh,660px);
}
.hero-bg.active{
  background-image:url('../images/room/flowers-daylight.png') !important;
  background-size:contain !important;
  background-position:right center !important;
  background-repeat:no-repeat !important;
  /* Held to the right half so it can never sit under the copy. */
  left:auto !important; right:0 !important; width:58% !important;
}
@media (max-width:900px){
  /* Stacked: full-width photograph above, copy on paper below. */
  .hero-bg.active{
    position:relative !important; width:100% !important; right:auto !important;
    height:46vw !important; min-height:220px;
    background-position:center !important;
  }
  .hero{ display:block; min-height:0; }
}

/* ====================================================================
   BUTTONS, CORRECTED.

   Measured, the pale-blue pills were 7.0:1 - they pass. But luminance
   contrast is not the same as looking like a control: pale blue text on
   a pale blue pill reads as a DISABLED button, so the primary action on
   every page looked switched off. Passing a checker is not the goal.

   Primary is now solid accent with white text. Secondary stays white
   with an ink border. The difference between them is now obvious at a
   glance, which is the actual job.
==================================================================== */
.btn-solid,
.hero-actions .btn-solid,
.hero-actions .btn-solid:active,
.cart-btn,
.path-chip{
  background:var(--gold) !important;
  color:#fff !important;
  border:1px solid var(--gold) !important;
  font-weight:600;
}
.btn-solid:hover,
.hero-actions .btn-solid:hover,
.cart-btn:hover,
.path-chip:hover{
  background:#1d3a8f !important; border-color:#1d3a8f !important; color:#fff !important;
  transform:none; box-shadow:none;
}
.cart-count{ background:#fff !important; color:var(--gold) !important; }

.btn-outline,
.hero-actions .btn-outline{
  background:#fff !important; color:var(--ink) !important;
  border:1.5px solid var(--ink) !important; font-weight:600;
}
.btn-outline:hover,
.hero-actions .btn-outline:hover{ background:var(--panel-2) !important; color:var(--gold) !important; border-color:var(--gold) !important; }

/* A real disabled state, so "off" and "primary" can never be confused. */
.btn:disabled, .btn[disabled]{
  background:#e4e8ef !important; color:#8390a4 !important;
  border-color:#d2d9e3 !important; cursor:default;
}

/* The actual grey haze -------------------------------------------------
   style.css puts .hero::before{background:rgba(11,13,18,.5)} over the
   whole hero - a 50% black scrim added so white headline text could sit
   on a dark photograph. With a light hero and dark ink it does nothing
   but fog the picture and flatten the ground to grey. This is what was
   making the photograph look hazy and washed out, and it was there
   before my own scrim was added on top of it. Both are now gone. */
.hero::before{ content:none !important; background:none !important; }

/* ====================================================================
   .explore-card — the "black on blue" Igal reported, and he was right.

   Defined in each page's own <style> block, so it loads after this file
   and kept color:#1a1206 (a near-black brown chosen to sit on the old
   gold button) while its background became accent blue. Measured 2.40:1
   against a 4.5 requirement: genuinely unreadable, not marginal.
==================================================================== */
.explore-card{
  background:var(--gold) !important;
  border:1.5px solid var(--gold) !important;
  color:#fff !important;
}
.explore-card:hover{ background:#1d3a8f !important; border-color:#1d3a8f !important; transform:none; }
.explore-card .icon,
.explore-card .title{ color:#fff !important; }
.explore-card .sub{ color:rgba(255,255,255,.82) !important; }

/* Tap targets that stayed under 44px after the reskin (WCAG 2.5.5).
   Inline links inside running prose are exempt and deliberately left. */
#account-menu-btn{ min-height:44px !important; }
.cart-btn{ min-height:44px !important; }
footer a, .site-footer a{ display:inline-block; min-height:44px; line-height:44px; }

/* ====================================================================
   #e2e0da — the old light body ink. Measured at 1.12:1 on the story
   page: not low contrast, invisible. It survives in three forms and
   each needs catching separately:
     .story-text p        page <style>, beats the token remap
     .page-index li       same
     style="color:#e2e0da" inline on two <p> tags, which beats every
                           normal rule, so an attribute selector plus
                           !important is the only thing that reaches it
   wix-archive is untouched on purpose; it never loads this file.
==================================================================== */
.page-index li{ color:var(--dim) !important; }
[style*="e2e0da"], [style*="E2E0DA"]{ color:var(--dim) !important; }
[style*="f4f2ec"], [style*="F4F2EC"]{ color:var(--ink) !important; }
[style*="a6a9b2"]{ color:var(--dim) !important; }
/* The same class of bug in the opposite direction: text hardcoded to the
   old dark-brown that only worked on gold. */
[style*="1a1206"]{ color:#fff !important; }

/* ====================================================================
   The full "dark text on the accent" set.

   One colour pair, #1a1206 on var(--gold), is used in nine places. It
   was correct when --gold was #d9a441; with --gold now #294cab every
   one of them is near-black on blue, measured 2.40:1. Igal spotted this
   by eye before the audit did. Listed explicitly rather than swept with
   a wildcard so each stays greppable.
==================================================================== */
.frank-link,
.explore-card,
.explore-card .icon,
.explore-card .title,
.order-status,
.choice-btn.selected,
.path-chip{
  background:var(--gold) !important;
  color:#fff !important;
  border-color:var(--gold) !important;
}
.frank-link:hover,
.explore-card:hover,
.choice-btn.selected:hover{
  background:#1d3a8f !important; border-color:#1d3a8f !important;
  color:#fff !important; transform:none !important;
}
/* Play buttons are a white disc; their glyph must be the accent, not
   near-black, or it reads as a smudge. */
#yt-thumb .play-btn,
.video-thumb .play-btn{
  background:#fff !important; color:var(--gold) !important;
}
/* The configurator step number sits on a pale chip, so it takes the
   accent as ink rather than white. */
.step-num{ background:var(--v3-btn-bg) !important; color:var(--v3-btn-ink) !important; }
.step.done .step-num{ background:var(--gold) !important; color:#fff !important; }

/* ====================================================================
   HERO, FINAL — full bleed, text on the image.

   Igal's call, and the reference's own composition: the photograph
   fills the band and the copy sits on top of it, over the empty wall on
   the left. My previous attempt held the image to the right half and
   put the type on plain paper beside it. That was safer and wrong - it
   loses the whole effect of the piece being in a real room.

   This works without any scrim only because both fog layers are gone:
   style.css's .hero::before (50% black, built for white text on a dark
   photo) and my own ::after gradient. Nothing is painted over the
   picture now.

   The photograph must therefore carry its own empty left third. That is
   a shooting requirement, not a CSS one, and it is in the image spec.
==================================================================== */
.hero-bg.active{
  position:absolute !important;
  inset:0 !important;
  left:0 !important; right:0 !important; width:100% !important;
  /* 112% rather than cover, anchored right. The photograph has a dark
     window frame running from its left edge to about column 128 of
     1536 - 8.3% of the width - and cover crops nothing horizontally at
     this box ratio, so the frame lands on the page edge as a black
     stripe. Showing it slightly larger pushes that column out of frame.
     Done here rather than by trimming the file: re-encoding the PNG
     through a canvas stripped its colour profile and left the whole
     scene flat and washed out. */
  background-size:112% auto !important;
  background-position:right center !important;
  background-repeat:no-repeat !important;
}
.hero{
  min-height:min(76vh,700px);
  background:var(--v3-hero) !important;
  display:flex; align-items:center;
}
@media (max-width:900px){
  /* Stacked on a phone: the copy cannot sit on the picture at this width
     without covering the piece, so the band becomes a normal image with
     the text on paper underneath. */
  .hero{ display:block; min-height:0; }
  .hero-bg.active{
    position:relative !important; inset:auto !important; width:100% !important;
    height:58vw !important; min-height:230px;
    background-position:center !important;
  }
}

/* ====================================================================
   THE SWITCH — see js/site-config.js

   html.shop-off  -> story site. Commerce markup hidden, story markup shown.
   html.shop-on   -> the reverse.

   Both sets of markup stay in the HTML permanently. Nothing is deleted,
   so turning the shop back on needs no files restored and no decisions
   remade. !important because several commerce elements carry inline
   display styles of their own.
==================================================================== */
html.shop-off [data-commerce]{ display:none !important; }
html.shop-on  [data-story]{ display:none !important; }

/* The vertical bar beside the hero tagline (.hero-tagline-mark, 3x76px).
   It was a dark-theme accent that gave the tagline an edge to sit
   against. On the light ground it reads as a stray line running through
   the copy, so it goes. The tagline keeps its indent, which is what the
   bar was really providing. */
.hero-tagline-mark{ display:none !important; }
.hero-tagline{ padding-left:0 !important; }

/* The hero tagline kept style.css's text-shadow ---------------------
   0 2px 12px rgba(0,0,0,.6) was written for white type on a dark
   photograph. Under the daylight skin it is a black glow behind grey
   text on pale paper: it reads as a cheap bevel, not as depth. The
   headline and eyebrow were already cleared; these were missed. */
.hero-tagline, .hero-tagline-sub, .hero p{ text-shadow:none !important; }

/* The maker, small and to one side ----------------------------------
   Igal at the torch belongs on the page but not at the centre of it -
   the glass is the subject. So it sits low in the hero as a small
   print: white border, a few degrees off square, the way a photograph
   gets left on a desk. */
.hero-snap{
  /* block, or it flows onto the same line as the Frank badge. */
  display:block;
  /* figure carries a 40px default side margin; zero it so the print
     lines up with the headline above. */
  margin:clamp(1.4rem,3vw,2.2rem) 0 0;
  background:#fff; padding:8px 8px 30px; border-radius:2px;
  box-shadow:0 8px 24px rgba(41,67,99,.22), 0 1px 3px rgba(41,67,99,.18);
  transform:rotate(-2.4deg); transform-origin:left center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  position:relative; width:min(230px,52%);
}
.hero-snap:hover{ transform:rotate(-1deg) scale(1.02); }
.hero-snap img{ width:100%; height:auto; display:block; border-radius:1px; }
.hero-snap figcaption{
  position:absolute; left:0; right:0; bottom:9px;
  text-align:center; font-size:.72rem; color:#6b7b90; letter-spacing:.01em;
}
@media (prefers-reduced-motion:reduce){
  .hero-snap{ transition:none; }
  .hero-snap:hover{ transform:rotate(-2.4deg); }
}
@media (max-width:900px){
  .hero-snap{ width:min(200px,60%); margin-top:1.2rem; }
}

/* Local click-to-play poster (frank.html) — same control as the
   YouTube one, but the file is served from this site. */
.local-play{
  position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  cursor:pointer; background-size:cover; background-position:center;
  background-color:#20222a;
}
.local-play:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.local-play::before{ content:''; position:absolute; inset:0; background:rgba(11,13,18,.32); }
.local-play .play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#1a1a1a; padding-left:3px;
}
.local-play:hover .play-btn{ background:#fff; }
/* The inline video in the same column keeps the picture's own shape. */
.t-media video{ width:100%; height:auto; display:block; }

/* "What is on this page" ---------------------------------------------
   The contents list was a full screen of reading before the story even
   began, which is what made the page feel like a document. The facts
   stay - they are what makes this page findable, and they are the
   citations - but they fold away so the story starts immediately. */
.page-contents{ margin:.4rem 0 0; }
.page-contents > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.45rem;
  font-size:.86rem; font-weight:600; color:var(--v3-btn-ink);
  padding:.4rem .9rem; border:1px solid var(--v3-btn-line);
  background:var(--v3-btn-bg); border-radius:100px;
}
.page-contents > summary::-webkit-details-marker{ display:none; }
.page-contents > summary::after{ content:"\25BE"; font-size:.7rem; }
.page-contents[open] > summary::after{ content:"\25B4"; }
.page-contents > summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.page-contents ul{ margin-top:1rem; }

/* The Frank badge, without the thumbnail -----------------------------
   It was a 58px circle of a dark piece on a dark ground: unreadable at
   that size, and it forced the card wide enough to leave a slab of
   empty white beside the two lines of text. The words do the work. */
.hero-frank-badge{ gap:0 !important; padding:.85rem 1.15rem !important; }
.hero-frank-badge span{ line-height:1.45; }

/* Body text reads left to right ------------------------------------
   frank.html right-aligned the copy in every odd timeline row, so
   each line began in a different place and the eye had to hunt for
   the start of every one. Fine for a single line, punishing for a
   paragraph. The paragraphs are pinned left here.

   The date and the heading are NOT. They are single lines, and in the
   left-hand column the inside edge is the one nearest their own dot,
   which is the whole point of a timeline. index.html aligns those two
   to the right; this rule deliberately leaves them alone. */
.t-item:nth-child(odd) .story-text,
.t-item:nth-child(odd) .story-text p{ text-align:left !important; }

/* The drop cap floats left, so it only works with left-aligned text. */
.story-text p.drop::first-letter{ color:var(--gold); }
/* The print, back in the hero where he asked for it ---------------
   It was parked above the footer to keep the hero at its original
   height. That saved ~240px and put it somewhere nobody would look,
   which was the wrong trade: he wants it on the main page. Back under
   the buttons, deliberately small so it costs as little height as it
   can while still being visible. */
.hero-snap{ width:164px; padding:7px 7px 25px; margin:1.3rem 0 0; }
.hero-snap figcaption{ bottom:7px; font-size:.67rem; }
@media (max-width:900px){
  .hero-snap{ width:min(170px,52%); margin-top:1.1rem; }
}

/* Click-to-play video posters (js/yt.js and frank.html) --------------
   Lost in an earlier edit to this file and restored here: without it the
   poster has no aspect ratio and no play button styling. */
.yt-play{
  max-width:520px;
  position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  cursor:pointer; background-size:cover; background-position:center;
  background-color:#20222a;
}
.yt-play:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.yt-play::before{ content:''; position:absolute; inset:0; background:rgba(11,13,18,.28); }
.yt-play .play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:#1a1a1a; padding-left:4px;
}
.yt-play:hover .play-btn{ background:#fff; }
.yt-frame{ max-width:520px; position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; }
.yt-frame iframe{ width:100%; height:100%; border:none; display:block; }
/* A player cropped to its footage (data-aspect in js/yt.js) positions
   its iframe absolutely, so the frame has to be the containing block. */
.yt-frame{ position:relative; }
.video-note{ color:var(--dim); font-size:.88rem; margin:.7rem 0 0; }

/* The archive grid keeps every picture's own proportions -------------
   Also lost in an earlier edit. frank-gallery.html sets the grid to
   repeat(4,1fr) with aspect-ratio:1 and object-fit:cover in its own
   <style>, so a 1900x1200 render lost a third of its width and the
   poster lost its top and bottom. Columns instead of a grid: each image
   sets its own height and nothing is cropped or stretched. Addressed by
   id because that page's <style> loads after this file. */
#full-gallery{
  display:block !important;
  column-count:4; column-gap:10px;
}
#full-gallery a{
  aspect-ratio:auto !important;
  display:block; break-inside:avoid; margin:0 0 10px;
}
#full-gallery img{
  width:100% !important; height:auto !important;
  object-fit:initial !important; display:block;
}
@media (max-width:1200px){ #full-gallery{ column-count:3; } }
@media (max-width:860px){ #full-gallery{ column-count:2; } }
@media (max-width:520px){ #full-gallery{ column-count:1; } }

/* One invitation at the top of the archive, instead of a note on each
   picture. The wall stays a wall; anyone who wants the story behind a
   piece is told how to ask for it. */
.archive-intro{
  max-width:62ch; margin:0 0 clamp(1.4rem,3vw,2.2rem);
  color:var(--dim); font-size:clamp(.95rem,1.1vw,1.04rem); line-height:1.6;
}
.archive-intro a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* Archive tiles: no hover trick, no false affordance ------------------
   The grid scaled each image 1.08 on hover and set a pointer cursor.
   Igal is right that it promises something it does not deliver: the
   pictures are shown at the size they are meant to be seen, so there is
   nothing to magnify, and a cursor change invites a click that only
   opens the same picture again. */
#full-gallery a{ cursor:default !important; }
#full-gallery a:hover img{ transform:none !important; }
#full-gallery img{ transition:none !important; }

/* Make casual copying awkward -----------------------------------------
   None of this stops a screenshot and nothing can; it stops the easy
   routes - right-click Save Image As, drag-to-desktop, and select-and-
   copy. The real protection is that the files themselves are no larger
   than they need to be on screen. */
#full-gallery img,
.story-media img,
.work-item img{
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none; -webkit-touch-callout:none;
  /* The image itself takes no pointer events, so a right-click lands
     on the figure around it - which is where js/image-contact.js
     listens, and what lets it name the piece in the message. */
  pointer-events:none;
}

/* The note under the archive grid, explaining the dated sheets. */
.archive-note{
  max-width:62ch; margin:2.2rem 0 0;
  color:var(--dim); font-size:.92rem; line-height:1.6;
}

/* The home hero, split ------------------------------------------------
   Two problems at once: six things stacked in a 520px column with the
   headline running over the glass, and a hero photograph that had been
   through enough AI passes to lose its shape and colour.

   Both are solved by not putting type on a picture. The copy takes the
   left half on plain paper, with real space between each element, and a
   photograph Igal actually took takes the right. No scrim, no overlap,
   nothing painted over anything. */
.hero{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:min(82vh,760px);
  position:relative;
}
.hero-bg.active{
  position:relative !important;
  grid-column:2 !important;
  inset:auto !important; left:auto !important; right:auto !important;
  width:100% !important; height:100% !important;
  background-image:url('../images/hero-main.jpg') !important;
  background-size:cover !important;
  background-position:center !important;
}
.hero-inner{
  grid-column:1; grid-row:1;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,3.5rem) !important;
  max-width:none !important;
}
/* Room to breathe: the complaint was crowding, not content. */
.hero .hero-inner > *,
.hero .hero-inner h1,
.hero .hero-frank-badge{ max-width:100% !important; }
.hero .eyebrow{ display:block; margin-bottom:.9rem; }
.hero h1{ margin:0 0 1.4rem !important; max-width:15ch; }
.hero-tagline{ margin:0 0 1.8rem !important; max-width:38ch; }
.hero-frank-badge{ margin:0 0 1.8rem !important; }
/* "Frank Stella" was the loudest thing in the hero. It is a signpost,
   not the headline. */
.hero-frank-badge span, .hero-frank-badge b{ font-size:.9rem !important; }
.hero-frank-badge b{ font-weight:700 !important; }
.hero-actions{ margin:0 0 1.8rem !important; }
.hero-snap{ margin:0 !important; width:150px; }

@media (max-width:900px){
  .hero{ display:block !important; min-height:0; }
  .hero-bg.active{
    width:100% !important; height:58vw !important; min-height:230px;
  }
  .hero-inner{ padding:clamp(1.5rem,5vw,2.5rem) !important; }
}

/* Card names and the line under them ---------------------------------
   Four cards all captioned "Blown glass" said nothing. A short name and
   one line of description is also the only writing on this page about
   the glass itself, which is what a search engine has to work with. */
.card-body p{
  margin:.3rem 0 0; font-size:.86rem; line-height:1.45; color:var(--dim);
}

/* One link, under the pictures ---------------------------------------
   It used to sit beside the section heading, far from the images, and
   read as the end of the page. */
.section-more{ margin:1.5rem 0 0; }
.section-more a{
  font-weight:600; font-size:.95rem; color:var(--v3-btn-ink);
  text-decoration:none; border-bottom:1px solid var(--v3-btn-line);
  padding-bottom:2px;
}
.section-more a:hover{ border-bottom-color:var(--gold); }

/* How It's Made on the home page -------------------------------------
   The nav offers five places and the home page only gestured at two, so
   it read as a three-section site. */
.home-strip{ padding:clamp(3rem,6vw,4.5rem) 0; }
.strip-lead{ color:var(--dim); max-width:56ch; margin:.2rem 0 1.8rem; }
.strip-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,2vw,1.4rem);
}
.strip-card{ display:block; text-decoration:none; color:inherit; }
.strip-card img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:6px; background:#20222a;
}
.strip-card span{
  display:block; margin-top:.6rem; font-size:.92rem;
  font-weight:600; color:var(--ink);
}
.strip-card:hover span{ color:var(--v3-btn-ink); }
@media (max-width:760px){ .strip-grid{ grid-template-columns:1fr; } }

/* The page closes instead of stopping. */
.home-close{ padding:0 0 clamp(3rem,6vw,4.5rem); }
.home-close p{
  max-width:60ch; color:var(--dim); font-size:1rem; line-height:1.65; margin:0;
}
.home-close a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* ====================================================================
   THE SKIP LINK, WHICH WAS NEVER STYLED.

   work.html opens with <a class="skip-link" href="#main">Skip to
   content</a>, and no stylesheet on this site has ever had a rule for
   it. So it rendered as what it is - a plain anchor - and sat as raw
   blue text above the header on the only page that carries it.

   A skip link is for keyboard and screen-reader users: it has to be
   reachable by Tab but out of the way for everyone else. Moving it off
   the top of the screen and bringing it back on :focus is the standard
   way, and it keeps working for the people it exists for. Not
   display:none, which would remove it from the tab order and defeat
   the point.
==================================================================== */
.skip-link{
  position:absolute; left:16px; top:-100px; z-index:100;
  padding:.7rem 1.1rem; border-radius:4px;
  background:var(--gold); color:#fff; font-weight:600; font-size:.9rem;
  text-decoration:none; transition:top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible{ top:14px; outline:2px solid #fff; outline-offset:2px; }

/* ====================================================================
   MOBILE NAVIGATION, WHICH DID NOT EXIST.

   style.css hides .nav-links below 760px and shows them again only
   when they get a .mobile-open class, put there by a hamburger with
   the id #mobile-nav-toggle.

   There is no such button on any page of this site. Not one. So on a
   phone the header has been a logo and nothing else, and The Work, How
   It Started, How It's Made and The Archive have been unreachable -
   every page, every phone, the whole time.

   Rather than add a button and a script to every page to open a
   dropdown, the links simply stay visible and wrap onto a second line.
   Four short links fit comfortably, it needs no JavaScript, and there
   is no state to get stuck open.
==================================================================== */
@media (max-width:760px){
  .site-nav .wrap{
    height:auto !important; flex-wrap:wrap;
    padding-top:.65rem; padding-bottom:.65rem;
  }
  .site-nav .nav-links{
    display:flex !important; position:static !important;
    flex-direction:row !important; flex-wrap:wrap;
    width:100%; gap:.1rem 1.1rem !important;
    background:none !important; box-shadow:none !important;
    border-bottom:none !important; padding:.2rem 0 0 !important;
  }
  .site-nav .nav-links li{ width:auto !important; }
  .site-nav .nav-links a{
    display:inline-block !important; padding:.3rem 0 !important;
    font-size:.82rem !important; background:none !important;
  }
}


/* ====================================================================
   THE STICKY NAV THAT WAS NEVER STICKY.

   style.css sets body{overflow-x:hidden}, which makes the body a scroll
   container - and position:sticky does nothing inside one. So the nav
   on every page has been declared sticky and has been scrolling away
   with the page the whole time, leaving no way back up except the
   scroll wheel.

   overflow:clip stops the sideways scroll the same way without turning
   the element into a scroll container, so the nav sticks again. The
   declaration is repeated with -webkit- absent on purpose: a browser
   too old for clip keeps the hidden behaviour it has today.
==================================================================== */
html, body{ overflow-x:clip; }
.site-nav{ position:sticky; top:0; z-index:60; }

/* ====================================================================
   THE CARD THAT ANSWERS A RIGHT-CLICK.

   Deliberately small, deliberately quiet, and worded as an offer. It
   never mentions saving, downloading or copying: someone reaching for a
   picture is interested, and the useful reply to interest is an address
   rather than a refusal.
==================================================================== */
.gia-ask{
  position:fixed; z-index:9999; max-width:280px;
  display:flex; flex-direction:column; gap:.5rem;
  padding:.95rem 2.2rem .95rem 1.05rem;
  background:rgba(252,252,254,.97); backdrop-filter:blur(10px);
  border:1px solid rgba(41,67,99,.16); border-radius:5px;
  box-shadow:0 14px 40px rgba(28,40,58,.22);
  font-family:'Manrope','Inter',system-ui,sans-serif;
  opacity:0; transform:translateY(5px);
  transition:opacity .18s ease, transform .18s ease;
}
.gia-ask.in{ opacity:1; transform:none; }
.gia-ask p{
  margin:0; font-size:.88rem; line-height:1.45; color:#2d3a4e; font-weight:500;
}
.gia-ask-mail{
  font-size:.86rem; font-weight:600; color:#294cab; text-decoration:none;
  border-bottom:1px solid rgba(41,76,171,.35); align-self:flex-start;
  padding-bottom:1px; word-break:break-all;
}
.gia-ask-mail:hover{ border-bottom-color:#294cab; }
.gia-ask-close{
  position:absolute; top:.3rem; right:.4rem;
  width:26px; height:26px; line-height:1; padding:0;
  background:none; border:none; cursor:pointer;
  font-size:1.2rem; color:#8794a8;
}
.gia-ask-close:hover{ color:#2d3a4e; }
@media (prefers-reduced-motion:reduce){
  .gia-ask{ transition:none; opacity:1; transform:none; }
}


/* ====================================================================
   A HEADER THAT GETS OUT OF THE WAY.

   89px of a 900px screen, held for the whole of a ten-screen page, is
   a tenth of every view spent on a bar you have already read. Past the
   hero it contracts: the type steps down, the padding halves, and a
   hairline appears so it still separates from whatever is behind it.
==================================================================== */
.site-nav{ transition:box-shadow .25s ease, background .25s ease; }
.site-nav .wrap{ transition:height .25s ease; }
.site-nav.compact .wrap{ height:58px !important; }
/* The logo keeps its size. Resizing it on scroll made the brand jitter
   every time the threshold was crossed. */
.site-nav.compact{
  background:rgba(244,245,248,.97) !important;
  box-shadow:0 1px 0 rgba(41,67,99,.12);
}
@media (prefers-reduced-motion:reduce){
  .site-nav, .site-nav .wrap, .site-nav .logo{ transition:none; }
}


/* The bar comes out of the flow on the long page, so shrinking it moves
   nothing behind it. The hero reserves the full height itself and never
   changes, which is what stops the jump. */
body.home-v4 .site-nav{ position:fixed; left:0; right:0; top:0; }
body.home-v4 .home-hero{ padding-top:88px; }
@media (max-width:760px){
  body.home-v4 .site-nav{ position:sticky; }
  body.home-v4 .home-hero{ padding-top:1.6rem; }
}