/* ============================================================================
   DJs ON GOLD — deco-gold WEB system
   Screen adaptation of the print spotlight template
   (Media/spotlights/_article-source/article-v7.html).

   PORTED verbatim in spirit: palette, sunburst ground, double-rule deco frame
   with corner dots, letterspaced gold brand lines, serif Hebrew display,
   teal pull-quote cartouche, gold-rule blockquote, ribbon dividers.

   NOT ported: A5 page geometry (148x210mm), mm units, page-break furniture.
   Those become fluid sections on a continuous scroll.

   BIDI: document is RTL. Every Latin run must be wrapped in
   <bdi class="ltr">…</bdi> — the class carries white-space:nowrap, which is
   load-bearing (see HOUSE-STYLE-NOTES.md: without it Chrome splits
   "DJs ON GOLD" and "U-RECKEN" across lines and shatters the isolated run).

   SELF-CONTAINED: every font and every image lives under assets/. The folder
   uploads as-is; the page makes ZERO external requests.
   ========================================================================= */

/* =========================================================================
   TYPE — self-hosted, both OFL, subsetted by unicode-range so a page only
   downloads the scripts it actually paints.

     Suez One          — display: masthead wordmark, headlines, card names,
                         pull quotes, plate captions. Hebrew + Latin.
     Frank Ruhl Libre  — body: running text, deks, teases, colophon.

   woff2 files fetched from the Google Fonts CDN (fonts.gstatic.com) and
   placed in assets/fonts/. Nothing is requested at runtime.

   font-weight RANGES on the @font-face, not single values, are deliberate:
     · Frank Ruhl Libre v23 IS a variable font (wght 300–900, one file) —
       the range unlocks true interpolated weights instead of one static cut.
     · Suez One is a SINGLE static weight. Declaring 400–900 tells the browser
       the face already covers those weights, which suppresses the synthetic
       (smeared) bold Chrome would otherwise fake for `font-weight:700`.
       Half the deco rules in this sheet ask for 700 — without this line every
       one of them would render as a faked bold.
   ========================================================================= */

/* ---- Frank Ruhl Libre (variable, wght 300–900) ---- */
@font-face{
  font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:300 900;
  font-display:swap;
  src:url('fonts/frankruhllibre-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:300 900;
  font-display:swap;
  src:url('fonts/frankruhllibre-latin.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:'Frank Ruhl Libre'; font-style:normal; font-weight:300 900;
  font-display:swap;
  src:url('fonts/frankruhllibre-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Suez One (static 400; range declared to kill synthetic bold) ---- */
@font-face{
  font-family:'Suez One'; font-style:normal; font-weight:400 900;
  font-display:swap;
  src:url('fonts/suezone-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Suez One'; font-style:normal; font-weight:400 900;
  font-display:swap;
  src:url('fonts/suezone-latin.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:'Suez One'; font-style:normal; font-weight:400 900;
  font-display:swap;
  src:url('fonts/suezone-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* --- house palette, lifted from article-v7.html --- */
  --paper:#f6ecd4;        /* warm parchment */
  --paper2:#eddfba;
  --paper3:#e3d1a4;
  --ink:#231708;
  --ink2:#54401f;
  --gold:#a97f1e;
  --gold-lt:#d9ae4a;
  --gold-deep:#7c5a10;
  --teal:#0e3a46;
  --teal-dk:#092630;

  /* --- type roles ---
     --body  runs the page; --deco is the display voice (Hebrew AND Latin).
     The legacy names --sans / --serif are kept as aliases so the class="serif"
     hooks already in both articles keep working. */
  --body:'Frank Ruhl Libre','FrankRuehl','David','Noto Serif Hebrew',Georgia,
         'Times New Roman',serif;
  --deco:'Suez One',Georgia,'Times New Roman',serif;
  --sans:var(--body);
  --serif:var(--deco);

  /* --- rhythm --- */
  --measure:37rem;        /* article text column */
  --gutter:1.15rem;
  --sec-gap:2.1rem;       /* vertical beat between article sections */
  --frame-color:var(--gold);

  /* --- motion --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --rise:14px;

  /* --- the deco hem silhouette ------------------------------------------
     One polygon, used twice: once in gold, once in parchment three pixels
     below it, which is what draws a gold rule along every tread without a
     second shape to keep in sync. Terraces stand full-height at both edges
     and step DOWN toward the middle, leaving a valley for the half-sun —
     the poster's own composition (stone terraces either side, sun in the
     gap), rebuilt as the seam between the dark masthead and the parchment
     page. Percentages, so the steps keep their proportions at every width. */
  --ziggurat:polygon(
    0% 0%,   10% 0%,
    10% 22%, 19% 22%,
    19% 44%, 28% 44%,
    28% 66%, 37% 66%,
    37% 84%, 63% 84%,
    63% 66%, 72% 66%,
    72% 44%, 81% 44%,
    81% 22%, 90% 22%,
    90% 0%,  100% 0%,
    100% 100%, 0% 100%
  );
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* TYPE SCALE — the root is the single lever.
   Almost every size in this sheet is expressed in rem, so raising the ROOT
   raises headings, body, deks, teases, gutters and the article measure
   together and keeps every proportion the design was drawn at. Raising only
   `body{font-size}` would have moved the running text and left every label,
   card name and heading behind, which is how a page ends up with big
   paragraphs under small titles.
     phone   17px root -> 18.0px body      (owner bar: >=17px on mobile)
     560     18px root -> 19.1px body
     900     19px root -> 20.1px body
   The measure grows with the type, so the line stays ~62-68 characters. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  font-size:17px;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.06rem;
  line-height:1.78;
  direction:rtl;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  print-color-adjust:exact;
}

/* height:auto is LOAD-BEARING. Every <img> carries width/height attributes so
   the browser can reserve the box before the file lands (no layout shift).
   Those attributes are also presentational hints for the width/height CSS
   properties — and with both set, they win over `aspect-ratio` and pin the
   element to the file's pixel height. That stretched the ribbon strip from a
   39px band to its full 152px and squashed every framed photo. height:auto
   drops the hint back to "aspect ratio only", which is all it was wanted for;
   the rules that genuinely need a fixed height (.card-plate img, .cover .hero)
   are more specific and still win. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* Latin isolation helper — nowrap is load-bearing, see header note. */
.ltr{ direction:ltr; unicode-bidi:isolate; white-space:nowrap; }

/* Display face. Suez One is a single static cut: never ask it for italic
   (there is none — Chrome would shear it) and never ask it for a weight the
   @font-face range does not cover. */
.serif{ font-family:var(--deco); }

/* =========================================================================
   MOTION — scroll-reveal + interaction.
   Everything below is gated on .js on <html> (set by an inline one-liner in
   each page head) so the page is FULLY VISIBLE with JavaScript off or broken:
   no JS, no hidden content. prefers-reduced-motion cancels the whole system
   at the bottom of this sheet.
   ========================================================================= */
.js .reveal{
  opacity:0;
  transform:translateY(var(--rise));
  transition:opacity .72s var(--ease), transform .72s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
/* The revealed state goes through --lift/--grow rather than `transform:none`.
   `.js .reveal.is-in` outranks `a.card:hover`, so a flat `none` here silently
   ate the card hover-lift (measured: transform stayed `none` on hover while
   the shadow and the image zoom both fired). Composing through custom
   properties lets the interaction rule win on --lift and --grow without a
   specificity war. --grow is the card GROW (see the SPOTLIGHT GRID block) and
   has to be composed in the same declaration for the same reason. */
.js .reveal.is-in{ opacity:1; transform:translateY(var(--lift,0px)) scale(var(--grow,1)); }
/* Once the reveal has finished: drop the compositor hint and hand the element
   back to interaction-speed transitions — otherwise every hover would inherit
   the reveal's .72s duration and its stagger delay, and feel stuck. */
.js .reveal.is-done{
  will-change:auto;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease),
             opacity .3s var(--ease);
  transition-delay:0ms;
}

/* Focus: one visible ring everywhere, never the browser default hairline. */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:1px;
}
.card--live :focus-visible,
.topbar :focus-visible,
.cover :focus-visible{ outline-color:var(--gold-lt); }

/* Underline-grow link. Base hairline sits at .45 opacity in the link's own
   ink; a second, heavier rule wipes in from the RTL start edge on hover/focus.
   currentColor is what lets one rule serve parchment AND teal grounds. */
.ulink{
  position:relative; display:inline-block; text-decoration:none;
  padding-bottom:.3rem;
  transition:color .3s var(--ease);
}
.ulink::before,
.ulink::after{
  content:""; position:absolute; inset-inline:0; bottom:0;
  height:1px; background:currentColor;
}
.ulink::before{ opacity:.45; }
.ulink::after{
  height:2px; opacity:1;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .42s var(--ease);
}
.ulink:hover::after,
.ulink:focus-visible::after{ transform:scaleX(1); }

/* ---------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:64rem; margin-inline:auto; padding-inline:var(--gutter);
       position:relative; }
.measure{ width:100%; max-width:var(--measure); margin-inline:auto; }

/* ---- PAGE FRAME --------------------------------------------------------
   The print pages carry a double rule with corner dots around every page.
   On screen that language already lives at COMPONENT scale (.deco on the
   cards, .deco-plate on the masthead). This puts a whisper of it back at
   PAGE scale — outer hairline, inner hairline, four corner dots — so the
   column below the poster reads as a printed leaf rather than a web column.

   Deliberately NOT a heavy box: 1px at 30% and 16% gold. It should be felt
   before it is noticed.

   Gated to >=1120px because that is the first width where .wrap (64rem =
   1024px) is genuinely narrower than the viewport. Below it the rules would
   sit flush against the screen edge and read as browser chrome, not as a
   page. Phones and tablets already get the frame language from the card
   borders, which are 2px and unmissable.

   Gate raised 1120 -> 1300 with the type pass: .wrap is 64rem, and 64rem is
   1216px once the root reaches 19px, so the old gate would have opened the
   frame at widths where .wrap is still flush to the screen edge. */
@media (min-width:1300px){
  .wrap::before,
  .wrap::after{ content:""; position:absolute; z-index:0; pointer-events:none; }
  .wrap::before{ inset:0; border:1px solid rgba(169,127,30,.30); }
  /* percentage background-position resolves as P x (box - tile), so
     calc(100% - 9px) lands a 9px tile's CENTRE 13.5px in from the far edge
     — the same inset the near-edge dots get from `9px`. */
  .wrap::after{
    inset:5px; border:1px solid rgba(169,127,30,.16);
    background:
      radial-gradient(circle at 50% 50%, rgba(169,127,30,.55) 0 2.2px, transparent 2.7px)
        9px 9px/9px 9px no-repeat,
      radial-gradient(circle at 50% 50%, rgba(169,127,30,.55) 0 2.2px, transparent 2.7px)
        calc(100% - 9px) 9px/9px 9px no-repeat,
      radial-gradient(circle at 50% 50%, rgba(169,127,30,.55) 0 2.2px, transparent 2.7px)
        9px calc(100% - 9px)/9px 9px no-repeat,
      radial-gradient(circle at 50% 50%, rgba(169,127,30,.55) 0 2.2px, transparent 2.7px)
        calc(100% - 9px) calc(100% - 9px)/9px 9px no-repeat;
  }
}

/* =========================================================================
   ORNAMENTS — ported from the print template
   ========================================================================= */

/* sunburst ground (article-v7 .sunground). Stripe angles widened slightly
   from 1.6deg/7deg to 1.8deg/8deg: at screen DPI the tighter print value
   moires on low-DPR displays. */
.sunground{
  position:absolute; inset:-30% -40%; z-index:1; pointer-events:none; opacity:.5;
  background:repeating-conic-gradient(from -90deg at 50% 88%,
    rgba(217,174,74,.20) 0deg 1.8deg, transparent 1.8deg 8deg);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 88%, #000 25%, transparent 70%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 88%, #000 25%, transparent 70%);
}

/* deco frame: outer thick rule + inner hairline + four corner dots.
   Print did this per PAGE; on screen it migrates down to component scale. */
.deco{ position:relative; border:2px solid var(--frame-color); }
.deco::before{
  content:""; position:absolute; inset:5px; z-index:6; pointer-events:none;
  border:1px solid var(--frame-color); opacity:.85;
}
.deco::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, var(--frame-color) 0 2.4px, transparent 2.9px) 11px 11px/9px 9px no-repeat,
    radial-gradient(circle at 50% 50%, var(--frame-color) 0 2.4px, transparent 2.9px) calc(100% - 20px) 11px/9px 9px no-repeat,
    radial-gradient(circle at 50% 50%, var(--frame-color) 0 2.4px, transparent 2.9px) 11px calc(100% - 20px)/9px 9px no-repeat,
    radial-gradient(circle at 50% 50%, var(--frame-color) 0 2.4px, transparent 2.9px) calc(100% - 20px) calc(100% - 20px)/9px 9px no-repeat;
}
.deco--dark{ --frame-color:var(--gold-lt); }

/* the print template puts corner dots on EVERY page frame, cover included --
   masthead and article cover use .deco-plate, so they get them too */
.masthead .deco-plate::after,
.cover .deco-plate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, var(--gold-lt) 0 2.4px, transparent 2.9px) 12px 12px/9px 9px no-repeat,
    radial-gradient(circle at 50% 50%, var(--gold-lt) 0 2.4px, transparent 2.9px) calc(100% - 21px) 12px/9px 9px no-repeat,
    radial-gradient(circle at 50% 50%, var(--gold-lt) 0 2.4px, transparent 2.9px) 12px calc(100% - 21px)/9px 9px no-repeat,
    radial-gradient(circle at 50% 50%, var(--gold-lt) 0 2.4px, transparent 2.9px) calc(100% - 21px) calc(100% - 21px)/9px 9px no-repeat;
}

/* half-sun mark (article-v7 .cover .sunmark) */
.sunmark{ width:74px; height:37px; margin:0 auto; position:relative; }
.sunmark::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 100%, var(--gold-lt) 0 12px, transparent 12.5px),
    repeating-conic-gradient(from -90deg at 50% 100%,
      var(--gold-lt) 0deg 4deg, transparent 4deg 14deg);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 100%, #000 60%, transparent 75%);
          mask-image:radial-gradient(ellipse 100% 100% at 50% 100%, #000 60%, transparent 75%);
}
.sunmark--ink::before{
  background:
    radial-gradient(circle at 50% 100%, var(--gold) 0 12px, transparent 12.5px),
    repeating-conic-gradient(from -90deg at 50% 100%,
      var(--gold) 0deg 4deg, transparent 4deg 14deg);
}

/* diamond rule (article-v7 .rule) */
.rule{ display:flex; align-items:center; gap:.7rem; margin:1.6rem 0; color:var(--gold); }
.rule::before,.rule::after{ content:""; flex:1; height:1px; background:var(--gold); opacity:.6; }
.rule i{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }

/* deco ribbon strip (assets/img/ribbon-gold.jpg, from the merch ribbon sheet) */
img.ribbon{ width:100%; margin:1.7rem 0; }
/* index uses the same plate at two structural beats: once as the divider
   between the intro and the grid, once as the closing art strip above the
   footer's double rule. Same file both times — one request, cached. */
.ribbon--sec{ margin:2rem 0 .3rem; }
.ribbon--close{ margin:2.8rem 0 0; }

/* letterspaced gold brand line (article-v7 .brand) */
.brandline{
  font-family:var(--deco); font-weight:400;
  font-size:.66rem; letter-spacing:.26em;
  color:var(--gold-lt); text-align:center;
}
.brandline--ink{ color:var(--gold-deep); }
.brandline::after{
  content:""; display:block; width:78px; height:1px; margin:.6rem auto 0;
  background:currentColor; opacity:.9;
}

/* =========================================================================
   MASTHEAD — the brand moment (index)

   Rebuilt 2026-08-02 (s207b) on owner verdict at 1920: the hero "reads as
   two cut images with an ugly blue strip wedged between, and the title
   balloons huge at wide screens".

   It did. The old masthead was FIVE stacked blocks — title band, teal rail,
   scene band, teal foot, frame — and the two art bands were opposite halves
   of ONE poster with 202 rows deleted between them. Nothing was going to
   make that read as a single picture.

   Now, top to bottom:

     .mast-art--full    ONE poster plate, capped and centred
     .mast-foot         teal — strap + series line, over the sunburst ground
     .deco-plate        the print frame, redrawn around all of it

   THE PLATE
     assets/img/hero-full.webp — 1432x875, master 120,33 - 1552,908, one
     continuous cut. The date/time/venue rows the poster printed between the
     title and the sun were LIFTED OUT of the sky rather than cut around;
     the full method note lives in index.html above <header>. There is no
     seam in this file because nothing in it was joined.

     Cut INSIDE the poster's printed frame on all four sides — x120/x1552
     clear the corner brackets, y33 clears the inner top rule — so
     .deco-plate is not a second frame beside the printed one, it IS the
     frame, in CSS, exactly as .cover works on the article pages.

   THE CAP — this is the "balloons huge" fix
     The plate stops at 1450px and centres. Past that the page teal runs as
     mats either side and the masthead reads as a poster MOUNTED in a ruled
     frame, which is the print idiom the rest of the page already speaks.
     Below 1450 it is full-bleed and the frame's side rules cross the art,
     which is where crossing looks intentional.

   NO CROP AT ANY WIDTH
     The plate is never object-fit:cover'd. The old build had to crop
     because a 206px-tall title band at phone width is unreadable; the whole
     poster at 390 gives glyphs ~51px tall and a ~47px sun, both legible, and
     a crop tight enough to enlarge the title would cut "DJS" and "GOLD"
     off its own ends (the title spans 1310 of the plate's 1432 columns).
     So: one image, one scale, every width. Height is width x 875/1432.

   The top mat (padding) stays: the title glyphs sit ~16px below the plate's
   top edge, so the frame's top rule needs teal to land on.
   ========================================================================= */
.masthead{
  position:relative; background:var(--teal-dk); overflow:hidden;
  padding:clamp(26px,2.8vw,46px) 0 0;
}
.masthead .deco-plate{
  position:absolute; inset:12px; z-index:5; pointer-events:none;
  border:2px solid var(--gold-lt);
}
.masthead .deco-plate::before{
  content:""; position:absolute; inset:5px; border:1px solid var(--gold-lt); opacity:.75;
}
.masthead .inner{ position:relative; z-index:7; text-align:center; }

/* --- the art plate ------------------------------------------------------ */
/* line-height:0 kills the inline-descender gap under the <img>, which would
   otherwise open a 4-6px teal seam under the plate and make the frame look
   mis-registered. */
.mast-art{
  position:relative; background:var(--teal-dk);
  line-height:0; margin:0;
}
/* <h1> on the plate: the poster's title IS the page's top-level name, and the
   alt text is what a screen reader gets. font-size is reset so the UA's h1
   sizing cannot leak into anything. */
h1.mast-art{ font-size:1rem; font-weight:400; }

/* ONE plate: capped, centred, never cropped. width:100% + height:auto means
   the intrinsic 1432x875 drives the box, so there is no aspect-ratio to keep
   in sync at breakpoints and no object-fit window that can eat the title. */
.mast-art--full{
  display:block;
  width:100%; max-width:1450px;
  margin-inline:auto;
}
.mast-art--full img{
  display:block; width:100%; height:auto;
}

/* --- the teal foot under the scene ------------------------------------ */
.mast-foot{
  position:relative; overflow:hidden; background:var(--teal-dk);
  padding:1.9rem 1.35rem 2.3rem;
}

.eyebrow{
  font-family:var(--deco); font-weight:400;
  font-size:.7rem; letter-spacing:.36em;
  color:var(--gold-lt); text-transform:uppercase;
}
.eyebrow-frame{ display:flex; align-items:center; justify-content:center; gap:.85rem; }
.eyebrow-frame::before,.eyebrow-frame::after{
  content:""; width:min(52px,10vw); height:1px; background:var(--gold-lt); opacity:.8;
}

/* wordmark: RETIRED from the index masthead — the poster's own gold title
   (inside assets/img/hero-full.webp) is the wordmark now. Kept live and unchanged
   so restoring the lockup is a markup-only revert; see the commented block
   in index.html above <header>. Costs nothing while unused.

   Original note: two-line stack. A single letterspaced "DJs ON GOLD" run
   cannot hold its tracking at 390px, so the run breaks after ON — a real
   wordmark lockup rather than a shrunken headline.
   Suez One is heavier and wider than the Georgia it replaced, so l2 drops
   from 17vw/5.9rem to 15vw/5rem and the tracking from .13em to .1em. */
.wordmark{ margin:1.6rem 0 1.15rem; direction:ltr; }
.wordmark .l1{
  font-family:var(--deco); font-weight:400;
  font-size:clamp(1.02rem,5.4vw,1.6rem); letter-spacing:.3em;
  color:var(--gold-lt); text-indent:.3em;
}
.wordmark .l2{
  font-family:var(--deco); font-weight:400;
  font-size:clamp(2.8rem,15vw,5rem); line-height:1;
  letter-spacing:.1em; text-indent:.1em;
  background:linear-gradient(180deg,#f4dfa4 0%,var(--gold-lt) 42%,var(--gold) 72%,#8a6614 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.masthead .sunmark{ margin-top:.55rem; }

/* the strap now opens .mast-foot, which supplies its own top padding */
.masthead .strap{
  margin-top:0;
  /* the strap is PROSE, so it stays on the body face even though the markup
     carries class="serif" for the print lineage */
  font-family:var(--body); font-weight:400;
  font-size:1.2rem; line-height:1.6; color:#efe2c6;
  max-width:27rem; margin-inline:auto;
}
.masthead .series{
  margin-top:1.25rem; font-family:var(--deco); font-weight:400;
  font-size:.58rem; letter-spacing:.28em; color:#9c8a60;
}

/* =========================================================================
   DECO HEM — the seam between the dark masthead and the parchment page.

   Owner note: "the hard cliff from dark hero to parchment body reads as
   dissonance." It did, because it was a cliff — teal-dk stopped and #f6ecd4
   started on the same pixel row, full width, with nothing in between.

   This band is the step down, and it is built from the poster's own
   composition rather than a gradient smear: stone terraces standing full
   height at both edges, stepping DOWN toward a central valley, with the
   house half-sun rising out of the valley floor. Teal above, parchment
   below, gold along every tread.

   Three layers, no image, no request:
     background   teal deepening upward, so the masthead's ground carries in
     ::before     the SAME polygon in gold, sitting 3px proud
     ::after      the polygon in parchment, which is the page arriving

   The 3px offset is the whole trick for the gold rule: one silhouette,
   drawn twice, and the tread lines can never fall out of register because
   there is only one shape to keep.
   ========================================================================= */
.deco-hem{
  position:relative; overflow:hidden;
  height:clamp(74px,9vw,132px);
  background:linear-gradient(180deg, var(--teal-dk) 0%, #0c3541 46%, #114552 100%);
}
.deco-hem::before,
.deco-hem::after{
  content:""; position:absolute; left:0; right:0; bottom:0; pointer-events:none;
  -webkit-clip-path:var(--ziggurat); clip-path:var(--ziggurat);
}
.deco-hem::before{ top:-3px; background:var(--gold-lt); opacity:.9; }
.deco-hem::after{  top:0;    background:var(--paper); }
/* the half-sun sits ON the valley floor (the 84% tread), rising into the
   teal — same mark, same geometry, as the seal and the dormant plates */
.deco-hem .sunmark{
  position:absolute; left:50%; bottom:16%; z-index:3;
  transform:translateX(-50%);
  width:clamp(58px,7vw,96px); height:clamp(29px,3.5vw,48px);
}

/* =========================================================================
   INTRO
   ========================================================================= */
.intro{ padding:2.8rem 0 1.5rem; text-align:center; }

/* SUMMER TIME — the season line, rehoused (s207b). It was a teal rail wedged
   between two halves of the poster; the poster is one plate now and carries no
   bars, so the line opens the page's first words instead, one beat above the
   gold seal. Same .eyebrow / .eyebrow-frame it always wore — this rule only
   places it, it restyles nothing. */
.intro-eyebrow{ margin:0 0 1.5rem; }

/* ---- the gold seal — "חותמת זהב" made visual ---------------------------
   The owner's word for what DJs ON GOLD is: a gold stamp, a standard. So the
   sentence gets a stamp sitting on top of it. Built from the house sunmark,
   turned from a half-sun into a full circular seal:

     .seal      outer 2pt ring
     ::before   tick roulette in the annulus — what makes it read as a
                STAMP rather than just another sun
     i          inner hairline ring (the double-rule, at seal scale)
     b          sunburst core + centre disc

   Three separate boxes because mask-image applied to an element also masks
   its children — the ticks and the burst need different masks, so they
   cannot share one. All CSS: no new file, no new request, ~0 bytes.
   Used ONCE on the page, deliberately. */
.seal{
  display:block; position:relative;
  width:84px; height:84px; margin:0 auto 1.25rem;
  border:2px solid var(--gold); border-radius:50%;
}
/* The tick roulette — what makes this read as a STAMP and not a medallion.

   `circle closest-side` IS LOAD-BEARING. Two cuts of this seal shipped an
   invisible tick ring before the reason showed up: an unsized radial-gradient
   defaults to farthest-CORNER, which on an 84px square is 59.4px, not the
   42px radius. Every percentage was therefore being measured against a
   circle half again bigger than the seal, and the whole visible disc fell
   inside the `transparent 0 84%` stop — the ticks were painted and then
   masked clean off. closest-side pins 100% to the 42px radius, so these
   stops mean what they read as. */
.seal::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    var(--gold) 0 2.4deg, transparent 2.4deg 12deg);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,
    transparent 0 76%, #000 79% 99%, transparent 100%);
          mask-image:radial-gradient(circle closest-side at 50% 50%,
    transparent 0 76%, #000 79% 99%, transparent 100%);
}
.seal i{
  position:absolute; inset:13px; border-radius:50%;
  border:1px solid var(--gold); opacity:.65;
}
/* the core: a solid sun on chunky rays. Thin rays at a tight angle read as
   a dandelion clock at 84px, not as a stamped sun — the ray/gap ratio and
   the centre disc are both up from the first cut. */
.seal b{
  position:absolute; inset:21px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 34%, transparent 35%),
    repeating-conic-gradient(from 0deg at 50% 50%,
      var(--gold) 0deg 3.6deg, transparent 3.6deg 12deg);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%, #000 74%, transparent 98%);
          mask-image:radial-gradient(circle closest-side at 50% 50%, #000 74%, transparent 98%);
  opacity:.9;
}

.intro .kickerline{
  font-size:.72rem; letter-spacing:.12em; font-weight:700;
  color:var(--gold-deep); margin-bottom:1.05rem;
}
.intro p{
  font-family:var(--body); font-size:1.3rem; line-height:1.66;
  color:var(--ink2); max-width:33rem; margin:0 auto .7rem;
}
.intro p:last-child{ margin-bottom:0; }
.intro p b{ color:var(--gold-deep); font-weight:700; }

/* =========================================================================
   SPOTLIGHT GRID
   ========================================================================= */
/* ---- the section header, on a DARK ground -----------------------------
   Second half of the dark/light weave (the hem is the first). The grid's
   header was a hairline kicker on parchment; it is now a teal plate wearing
   the house double rule and corner dots — so the page reads
   dark → hem → light → DARK → cards → dark CTA → light footer instead of
   splitting into one dark half and one light half.

   It reuses .deco.deco--dark, which is the same frame the cards wear. No new
   frame vocabulary was invented for it, and the word inside is the word that
   was already there. */
.grid-head{
  position:relative; overflow:hidden;
  margin:2.6rem 0 1.6rem;
  background:var(--teal-dk);
  padding:1.5rem 1.2rem 1.75rem;
  text-align:center;
}
.grid-head .sunground{ opacity:.6; }
.grid-head .sec-title{
  position:relative; z-index:4;
  font-family:var(--deco); font-weight:400;
  font-size:clamp(1.5rem,7vw,2.2rem); line-height:1.2;
  letter-spacing:.05em; color:#f9efd9;
}
.grid-head .sec-title::after{
  content:""; display:block; width:78px; height:1px; margin:.85rem auto 0;
  background:var(--gold-lt); opacity:.9;
}

/* grid-auto-rows:1fr is what makes "all six the SAME size" literally true.
   Grid already equalises cards WITHIN a row; without this the second row was
   100px taller than the first at 1512, because ARCHiiE carries a title and a
   read-CTA and U-RECKEN carries neither. 1fr equalises the ROWS too, and the
   card body centres itself in whatever height it is handed. */
.grid{ display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; gap:1.15rem; }

.card{
  position:relative; background:var(--paper2); overflow:hidden;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  /* the artist name is sized off the CARD, not the viewport -- vw-based
     sizing overflowed NOSTRADAMUZ (11 letterspaced caps) in both the 2-col
     and 3-col grids, and .ltr is nowrap so it cannot break to escape. */
  container-type:inline-size;
  /* lift AND grow are driven by custom properties so they compose with the
     scroll-reveal transform instead of fighting it for specificity (see the
     MOTION block) */
  transform:translateY(var(--lift,0px)) scale(var(--grow,1));
  transition:transform .38s var(--ease), box-shadow .38s var(--ease),
             border-color .38s var(--ease);
}
.card--quiet{ --frame-color:rgba(169,127,30,.5); background:var(--paper2); }
.card--quiet .card-name{ color:var(--ink2); opacity:.9; }

/* ---- THE GROW ---------------------------------------------------------
   Owner ruling 2026-08-02: the ARCHiiE full-row feature is retired (six
   equal cards), and the interaction carries the hierarchy instead — "make
   the grow the star."

   Two tiers, because the old rule was right about one thing: a card that
   behaves exactly like a link but is not one promises a click that does not
   exist. So a LINKED card takes the full 1.05 and the deep shadow; a
   dormant card takes a 1.02 acknowledgement and a brightened frame. The
   grid stays alive under the cursor, and only the live cards read as doors.

   z-index on hover is load-bearing: without it a growing card is overlapped
   by whichever grid sibling comes after it in DOM order. */
a.card:hover,
a.card:focus-visible{
  --grow:1.05; --lift:-3px; z-index:3;
  box-shadow:0 24px 46px -18px rgba(35,23,8,.55);
}
a.card:active{ --grow:1.02; --lift:-1px; }
.card--quiet:hover,
.card--next:hover{
  --grow:1.02; z-index:2;
  --frame-color:var(--gold);
  box-shadow:0 16px 32px -18px rgba(35,23,8,.4);
}
a.card .card-plate img{ transition:transform .7s var(--ease); }
a.card:hover .card-plate img{ transform:scale(1.04); }

/* ---- THE PLATE — one standard for all six ------------------------------
   Owner ruling: every card carries an artist image, given the same
   treatment, "so mixed-quality sources unify." The sources genuinely are
   mixed — a pro press frame, a phone frame off a hillside, a WhatsApp live
   shot and a rendered album cover — and dropped in raw they would read as
   four different websites.

   So the plate is a DUOTONE, finished in two places:
     · at build time the file ships GREYSCALE (see assets/img) — that kills
       every source's own colour cast in one move, and greyscale webp is
       roughly a quarter the weight of colour at the same quality
     · here, two blend layers put the house palette back: teal in the
       shadows (multiply) and gold in the light (screen)

   isolation:isolate is required — without it the multiply layer blends
   against the parchment page behind the card, not against the photograph.

   Z-ORDER inside the plate, and it matters:
     0 img · 1 duotone-teal · 2 duotone-gold · 3 sunground ·
     4 ornaments · 5 half-sun · 6 veil
   Ornaments and the half-sun sit ABOVE the blend layers on purpose: they
   are house marks in house gold and must not be tinted by a treatment
   meant for photographs. */
.card-plate{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:16/9; background:var(--teal-dk);
}
.card-plate .sunground{ opacity:.72; z-index:3; }
.card-plate img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:0; }
.card-plate::before,
.card-plate::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.card-plate::before{
  z-index:1; mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(36,104,120,.30) 0%, rgba(11,46,58,.68) 100%);
}
.card-plate::after{
  z-index:2; mix-blend-mode:screen;
  background:radial-gradient(ellipse 98% 82% at 50% 34%,
    rgba(228,186,96,.42), rgba(228,186,96,0) 74%);
}
/* The veil is much lighter than it was, on purpose. It used to carry the
   card TITLE — the live card's body slid 1.6rem up under the plate — so it
   had to reach full teal-dk. With six equal cards nothing overlaps the plate
   any more, so all it still owes is a soft seam into the card body: it is a
   hairline of teal at the very bottom edge, not a curtain over the picture. */
.card-plate .veil{
  position:absolute; inset:0; z-index:6;
  background:linear-gradient(180deg, rgba(9,38,48,.14) 0%, rgba(9,38,48,0) 42%,
    rgba(9,38,48,.30) 88%, rgb(9,38,48) 100%);
}

/* The two artists we hold no usable photograph of keep an ornament plate —
   same box, same aspect, same teal ground, so the row still reads as one
   set. See the sourcing table in the handover: RAW and U-RECKEN are owner
   asks, not build gaps. */
.plate--deco{
  display:grid; place-items:center; background:var(--teal);
  border-bottom:1px solid rgba(217,174,74,.32);   /* plate / body seam */
}
.plate--deco .sunmark{ position:relative; z-index:5; transform:translateY(18%); opacity:.92; }

/* ---- DORMANT-PLATE ORNAMENTS -------------------------------------------
   Four dormant cards, four different plates. One motif printed four times
   read as a placeholder; four variants of the same geometry read as a set.

   Vocabulary is strictly THIS event's: the half-sun, its rays, the poster's
   stepped sky, the poster's corner fans, and the article motif's lozenge.
   Nothing imported from another event's ornament sheet.

   All of it is gradients on pseudo-elements — no files, no requests, and
   nothing that can 404. z-index 4 puts every ornament above the sunburst
   ground (3) and below the half-sun itself (5), so the sun always reads
   first and the ornament stays support. (Both numbers moved up two when the
   duotone blend layers took 1 and 2 — see the plate note above.)

   Opacities are low on purpose. These are watermarks under a name, not
   illustrations: at a glance the row should read as one family, and only
   on a second look as four different plates. */

/* 1 · U-RECKEN — halo. An open arc springing from the half-sun's own base:
      the engineer's clean, wide field. */
.orn--halo .sunmark::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:132px; height:66px; transform:translateX(-50%);
  border:1px solid var(--gold-lt); border-bottom:0;
  border-radius:66px 66px 0 0; opacity:.45;
}

/* 2 · NOSTRADAMUZ — stepped sky. The poster's ziggurat cloud, descending
      inward from the TOP corners (the fans below own the bottom ones). */
.orn--steps::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:.52;
  background:
    linear-gradient(var(--gold-lt) 0 0) 0    0    /38px 4px no-repeat,
    linear-gradient(var(--gold-lt) 0 0) 0    11px /25px 4px no-repeat,
    linear-gradient(var(--gold-lt) 0 0) 0    22px /13px 4px no-repeat,
    linear-gradient(var(--gold-lt) 0 0) 100% 0    /38px 4px no-repeat,
    linear-gradient(var(--gold-lt) 0 0) 100% 11px /25px 4px no-repeat,
    linear-gradient(var(--gold-lt) 0 0) 100% 22px /13px 4px no-repeat;
}

/* 3 · RECHARGE — corner fans, lifted straight off the poster frame's
      bottom corners. He builds the rig the sound comes out of. */
.orn--fans::before,
.orn--fans::after{
  content:""; position:absolute; bottom:0; z-index:4; pointer-events:none;
  width:58px; height:58px; opacity:.52;
}
.orn--fans::before{
  left:0;
  background:repeating-conic-gradient(from -90deg at 0% 100%,
    var(--gold-lt) 0 2.4deg, transparent 2.4deg 10deg);
  -webkit-mask-image:radial-gradient(circle at 0% 100%, #000 58%, transparent 80%);
          mask-image:radial-gradient(circle at 0% 100%, #000 58%, transparent 80%);
}
.orn--fans::after{
  right:0;
  background:repeating-conic-gradient(from 0deg at 100% 100%,
    var(--gold-lt) 0 2.4deg, transparent 2.4deg 10deg);
  -webkit-mask-image:radial-gradient(circle at 100% 100%, #000 58%, transparent 80%);
          mask-image:radial-gradient(circle at 100% 100%, #000 58%, transparent 80%);
}

/* 4 · RAW — double lozenge. The article motif's diamond, closed around the
      sun: first time on the decks, framed. The sun rides higher here so it
      sits inside the lozenge instead of dropping through its lower point. */
.orn--lozenge::before,
.orn--lozenge::after{
  content:""; position:absolute; left:50%; top:50%; z-index:4;
  pointer-events:none; border:1px solid var(--gold-lt);
}
.orn--lozenge::before{
  width:74px; height:74px; transform:translate(-50%,-50%) rotate(45deg); opacity:.45;
}
.orn--lozenge::after{
  width:52px; height:52px; transform:translate(-50%,-50%) rotate(45deg); opacity:.28;
}
.orn--lozenge .sunmark{ transform:translateY(8%); }

.card-body{
  position:relative; z-index:7; padding:1.25rem 1.15rem 1.45rem; text-align:center;
  flex:1; display:flex; flex-direction:column; justify-content:center;
}
/* the body is a flex column now, so the children's own margins are what set
   the rhythm — kill the stray auto-margin collapse by pinning the ends */
.card-body > :first-child{ margin-top:0; }
.card-body > :last-child{ margin-bottom:0; }

.status{
  display:inline-block; font-size:.66rem; letter-spacing:.1em; font-weight:700;
  padding:.34rem .74rem; margin-bottom:.9rem;
}
.status--soon{ color:var(--gold-deep); border:1px solid rgba(169,127,30,.55); }
.status--next{ color:var(--teal); border:1px solid var(--teal); background:rgba(14,58,70,.07); }
.status--live{ color:#f7e9c8; background:var(--gold-deep); border:1px solid var(--gold-lt); }

/* Still sized off the CARD (cqw), never the viewport — NOSTRADAMUZ is eleven
   letterspaced caps inside a nowrap .ltr run and cannot break to escape an
   overflow. The scale is up ~19% on the owner's type pass; the cq ceiling
   went up with it and was re-measured at 320/390/768/1280/1512. */
.card-name{
  font-family:var(--deco); font-weight:400;
  font-size:clamp(1.05rem,7.4cqw,1.74rem);
  letter-spacing:.09em; text-indent:.09em;  /* indent cancels the trailing
                                               tracking so centring is true */
  color:var(--teal); line-height:1.16;
}
.card-title{
  font-family:var(--deco); font-weight:400;
  font-size:1.4rem; line-height:1.32;
  color:var(--gold-deep); margin-top:.6rem;
}
.card-tease{
  font-family:var(--body);
  font-size:1.02rem; line-height:1.62; color:var(--ink2);
  margin-top:.65rem; max-width:26rem; margin-inline:auto;
}
.card-cta{
  display:inline-block; position:relative; margin-top:1.1rem; padding-bottom:.28rem;
  font-size:.86rem; letter-spacing:.08em; font-weight:700; color:var(--gold-deep);
}
.card-cta::before,
.card-cta::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:currentColor;
}
.card-cta::before{ opacity:.5; }
.card-cta::after{
  height:2px; transform:scaleX(0); transform-origin:right center;
  transition:transform .42s var(--ease);
}
a.card:hover .card-cta::after,
a.card:focus-visible .card-cta::after{ transform:scaleX(1); }

/* --- ARCHiiE: the live card. Inverted teal ground = the one thing on the
       page that behaves like the print cover.
       The full-row feature (grid-column:1/-1 + a taller plate + its own type
       scale) is RETIRED — owner ruling: "hierarchy dies as more articles go
       live." The card keeps its dark ground and its gold frame, which is
       enough to read as live without taking a whole row. --- */
.card--live{ background:var(--teal-dk); --frame-color:var(--gold-lt); }
.card--live .card-name{ color:#f9efd9; }
.card--live .card-title{ color:var(--gold-lt); }
.card--live .card-tease{ color:#e2d5b8; }
.card--live .card-cta{ color:var(--gold-lt); }
a.card--live:hover,
a.card--live:focus-visible{ box-shadow:0 24px 46px -18px rgba(6,26,34,.75); }

/* --- SHALYO: next-up. Parchment, but doubled gold rule + teal accent so it
       reads as a different state from the four dormant cards. --- */
.card--next{ background:var(--paper); }
.card--next .plate--deco{ background:var(--teal-dk); }
.card--next .card-title{ color:var(--teal); }

/* =========================================================================
   DECO BUTTONS — the theatre ticket, not a neon banner.

   Owner ruling: the quiet "כרטיסים" text link was too quiet to be a call to
   action. It is now a printed gold ticket — outer rule, inner hairline
   (::before, the house double rule at button scale), letterspaced deco face
   and the half-sun struck at the leading edge.

   Two variants, one skeleton:
     .btn-deco            gold fill on teal  — TICKETS, the primary act
     .btn-deco--ghost     gold rule on teal  — GOLDIE, the secondary act
   The glyph paints in currentColor, so it inverts with the variant and
   there is exactly one sun to maintain.

   Hit area: min-height 54px and ~2rem of side padding — comfortably past
   the 44px touch bar at every width, which the old text link never was.
   ========================================================================= */
.btn-deco{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.7rem; min-height:54px; padding:.9rem 2rem;
  font-family:var(--deco); font-weight:400;
  font-size:1.06rem; letter-spacing:.12em; text-decoration:none; text-align:center;
  color:var(--teal-dk);
  background:linear-gradient(180deg,#f0cf7c 0%,var(--gold-lt) 46%,var(--gold) 100%);
  border:2px solid var(--gold-lt);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease);
}
.btn-deco::before{
  content:""; position:absolute; inset:4px; pointer-events:none;
  border:1px solid rgba(9,38,48,.42);
}
.btn-deco:hover,
.btn-deco:focus-visible{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.6);
}
.btn-deco:active{ transform:translateY(0) scale(1); }

.btn-deco--ghost{
  color:var(--gold-lt);
  background:transparent; background-color:rgba(217,174,74,0);
  border-color:var(--gold-lt);
}
.btn-deco--ghost::before{ border-color:rgba(217,174,74,.5); }
.btn-deco--ghost:hover,
.btn-deco--ghost:focus-visible{ background-color:rgba(217,174,74,.12); color:#f4dfa4; }

/* on the parchment leaf (article colophon) the ghost inverts to ink gold */
.btn-deco--onpaper{ color:var(--gold-deep); border-color:var(--gold); }
.btn-deco--onpaper::before{ border-color:rgba(169,127,30,.45); }
.btn-deco--onpaper:hover,
.btn-deco--onpaper:focus-visible{ background-color:rgba(169,127,30,.1); color:var(--gold-deep); }

/* the half-sun, at button scale, in currentColor */
.btn-glyph{ position:relative; flex:0 0 auto; width:22px; height:11px; }
.btn-glyph::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 100%, currentColor 0 4.4px, transparent 4.8px),
    repeating-conic-gradient(from -90deg at 50% 100%,
      currentColor 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 100%, #000 58%, transparent 78%);
          mask-image:radial-gradient(ellipse 100% 100% at 50% 100%, #000 58%, transparent 78%);
}

/* hero ticket: sits under the series line, inside the teal masthead foot */
.mast-cta{ margin-top:1.9rem; position:relative; z-index:7; }

/* ---- CTA BAND — the third dark beat, and the page's closing act ---------
   Tickets and Goldie together on a teal plate above the closing ribbon, so
   the reader leaves on the same ground they arrived on. Wears .deco.deco--dark
   like the section header and the live card. */
.cta-band{
  position:relative; overflow:hidden;
  margin:3rem 0 0; padding:2.4rem 1.2rem 2.6rem;
  background:var(--teal-dk); text-align:center;
}
.cta-band .inner{ position:relative; z-index:7; }
.cta-band .sunmark{ margin-bottom:1.1rem; opacity:.9; }
.cta-band .cta-line{
  font-family:var(--deco); font-weight:400;
  font-size:clamp(1.16rem,5.4vw,1.5rem); line-height:1.4;
  color:#f9efd9; margin-bottom:1.6rem;
}
.cta-row{
  display:flex; flex-wrap:wrap; gap:.95rem;
  align-items:center; justify-content:center;
}
/* the buttons take the full column on a phone and sit side by side once
   there is room for both without either one wrapping its label */
.cta-row .btn-deco{ flex:1 1 15rem; max-width:23rem; }

/* the article colophon's own Goldie line — same button, parchment variant,
   sitting between the signed closer and the colophon foot */
.colophon-cta{ margin:2.2rem 0 .4rem; text-align:center; }
.colophon-cta .btn-deco{ min-width:min(100%,17rem); }

.site-foot{
  margin-top:2.4rem; padding:2.1rem 0 2.8rem;
  border-top:2px solid var(--gold); position:relative;
  text-align:center;
}
.site-foot::before{
  content:""; position:absolute; top:4px; left:0; right:0; height:1px;
  background:var(--gold); opacity:.65;
}
.site-foot .ig{
  font-family:var(--deco); font-weight:400;
  font-size:.92rem; letter-spacing:.11em; color:var(--gold-deep);
}
.site-foot .ig:hover,.site-foot .ig:focus-visible{ color:var(--gold); }
/* lineup = a wrapping list of individually-isolated Latin runs.
   isolate (not embed) so the RTL parent cannot reorder the names. */
.site-foot .lineup{
  margin-top:1.2rem; font-family:var(--deco); font-weight:400;
  font-size:.6rem; letter-spacing:.13em; color:var(--ink2); line-height:2.1;
  unicode-bidi:isolate;
}
.site-foot .credit{
  margin-top:1.15rem; font-size:.74rem; color:#8d7c58;
}

/* =========================================================================
   ARTICLE
   ========================================================================= */
.topbar{
  position:relative; z-index:20; background:var(--teal-dk);
  border-bottom:1px solid rgba(217,174,74,.4);
  padding:.72rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.topbar a{
  font-size:.74rem; letter-spacing:.06em;
  color:var(--gold-lt); font-weight:700;
}
.topbar .home{
  font-family:var(--deco); font-weight:400;
  letter-spacing:.2em; font-size:.66rem; opacity:.85;
  transition:opacity .3s var(--ease);
}
.topbar .home:hover,.topbar .home:focus-visible{ opacity:1; }

/* --- cover: the print cover page, un-fixed --- */
.cover{
  position:relative; overflow:hidden; background:var(--teal-dk);
  min-height:82vh; display:flex; flex-direction:column;
  padding:2.1rem 1.15rem 2.4rem;
}
/* At phone widths the cover box is NARROWER than the source is tall, so
   object-fit:cover crops horizontally only and the full frame height shows --
   which dragged the photographer's burnt-in watermark into the top-left
   corner, half-cut. The scale forces a vertical crop that clears it; the
   origin biases the remaining crop away from the subject on the right. */
.cover .hero{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 22%;
  transform:scale(1.12); transform-origin:64% 70%;
  filter:saturate(1.02) contrast(1.06); z-index:0;
}
.cover .veil{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(9,38,48,.86) 0%, rgba(9,38,48,.30) 26%,
    rgba(9,38,48,.62) 58%, rgba(6,26,34,.98) 100%);
}
.cover .deco-plate{
  position:absolute; inset:11px; z-index:5; pointer-events:none;
  border:2px solid var(--gold-lt);
}
.cover .deco-plate::before{
  content:""; position:absolute; inset:5px; border:1px solid var(--gold-lt); opacity:.7;
}
.cover .inner{
  position:relative; z-index:7; display:flex; flex-direction:column; flex:1;
  text-align:center;
  /* clears the .deco-plate double rule — without it the dek's longest line
     runs right up against the gold frame at phone widths */
  padding-inline:.6rem;
}
.cover .covermark{ width:min(190px,52%); margin:1.2rem auto 0; }
/* SHALYO's mark is a wide, short wordmark (600x104) where ARCHiiE's is a
   compact badge (600x224) — sizing them the same width would leave the
   wordmark tiny. Aspect-driven, not one-size-fits-all. */
.cover .covermark--wide{ width:min(215px,58%); margin-top:1.5rem; }
.cover .grow{ flex:1; min-height:2.4rem; }
.cover .eyebrow-he{
  font-size:.76rem; letter-spacing:.12em; font-weight:700; color:var(--gold-lt);
}
.cover h1{
  font-family:var(--deco); font-weight:400;
  font-size:clamp(2.7rem,12.6vw,4.6rem); line-height:1.04;
  color:#f9efd9; margin:.55rem 0 .8rem;
}
.cover .dek{
  font-family:var(--body);
  font-size:1.08rem; line-height:1.66; color:#efe2c6;
  max-width:30rem; margin:0 auto;
}

/* --- body --- */
.article{ padding:2.6rem 0 0; }
.sec{ padding:0 var(--gutter); }
.sec + .sec{ margin-top:var(--sec-gap); }

.kicker{
  display:flex; align-items:center; gap:.7rem;
  font-size:.66rem; letter-spacing:.12em; font-weight:700; color:var(--gold-deep);
  margin-bottom:.55rem;
}
.kicker::after{ content:""; flex:1; height:1px; background:var(--gold); opacity:.5; }

.article h2{
  font-family:var(--deco); font-weight:400;
  font-size:clamp(1.78rem,6.8vw,2.45rem); line-height:1.22;
  color:var(--teal); margin:0 0 .8rem;
}
.article p{ margin-bottom:1rem; }
.article p.lead,.article p.drop{ font-size:1.08rem; color:var(--ink2); }
.article p.drop b{ color:var(--gold-deep); font-weight:700; }
.article p.sign{
  text-align:center; font-style:italic; color:var(--gold-deep);
  font-size:1.08rem; margin-top:1.4rem;
}

blockquote{
  margin:1.6rem 0; padding:.95rem 1.35rem .95rem 1rem;
  border-right:4px solid var(--gold);
  background:linear-gradient(90deg, rgba(169,127,30,.11), rgba(169,127,30,.02));
}
blockquote p{
  font-size:1.13rem; line-height:1.6; color:var(--teal); font-weight:600; margin:0 !important;
}

/* teal cartouche pull quote (article-v7 .pull) */
.pull{
  background:var(--teal); color:#f7e9c8; padding:2.1rem 1.5rem;
  margin:2rem auto; position:relative; text-align:center; max-width:var(--measure);
}
.pull::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(217,174,74,.65); }
.pull::after{
  content:""; position:absolute; top:-6px; left:50%; width:34px; height:12px;
  transform:translateX(-50%); background:var(--paper);
  border:1px solid var(--gold); border-radius:0 0 8px 8px;
}
.pull p{
  font-family:var(--deco); font-weight:400;
  font-size:1.24rem; line-height:1.5; margin:0 !important; color:#f9edd0;
  position:relative; z-index:2;
}

/* =========================================================================
   ARTICLE PHOTOGRAPHS — the print rule, restored 2026-08-02 (s207b)

   Owner verdict at 1920: the closing plate ("ואז אני פשוט לוחץ play")
   rendered as a full-viewport extreme close-up — his forehead filling the
   screen — and the Danielle frame was cropped far tighter than it should be.

   Cause, and it was the same one twice: every article photo was forced into
   a FIXED LANDSCAPE BOX and then object-fit:cover'd into it.

       .plate img       aspect-ratio 4/5 -> 3/2 -> 16/9 at >=900
       figure img.port  aspect-ratio 4/5 -> 3/2 at >=900

   Both closing photographs are tall portraits (1100x1955 and 800x1422). A
   1100x1955 frame poured into a 1920x1080 window at cover scales to 3412px
   tall and shows 32% of itself, dead centre. That is not a crop, that is a
   detail.

   THE RULE NOW, and it is the print edition's rule: an article photograph is
   printed WHOLE. Natural aspect, gold deco border, capped so a portrait
   cannot run away with the page, centred on the ground, caption underneath.
   object-fit:cover is banned on article photography — there is no width at
   which a frame gets cropped to fit furniture. Where a photo wants
   atmosphere behind it, the house .sunground carries it; the readable
   photograph itself stays whole.
   ========================================================================= */

/* inline photo */
figure{ margin:1.8rem 0; text-align:center; }
figure img{
  display:block; margin-inline:auto;
  width:auto; height:auto;
  max-width:100%; max-height:72vh;
  aspect-ratio:auto; object-fit:contain;
  border:1px solid var(--gold); outline:3px solid var(--gold); outline-offset:4px;
}
/* portraits get a narrower ceiling as well as a height cap, so a tall frame
   cannot balloon into a column of face on a wide screen */
figure img.port{ max-width:min(100%,460px); object-position:center center; }
figcaption{
  margin-top:1.15rem; font-size:.7rem; letter-spacing:.09em;
  color:var(--gold-deep); text-align:center;
}

/* the big photo plate — a mounted frame on the house ground, not a window */
.plate{
  position:relative; overflow:hidden; background:var(--teal-dk);
  margin:2.6rem 0; padding:2.4rem 1.1rem 2.6rem;
  display:flex; flex-direction:column; align-items:center;
}
.plate img{
  position:relative; z-index:3;
  display:block; width:auto; height:auto;
  max-width:min(100%,760px); max-height:74vh;
  aspect-ratio:auto; object-fit:contain;
  border:1px solid var(--gold); outline:3px solid var(--gold); outline-offset:4px;
}
/* the darkening veil existed only to make white type legible ON TOP of the
   photo. The caption sits below the frame now, so the veil would only mute
   the ground — retired, not deleted, in case a caption ever goes back over. */
.plate .veil2{ display:none; }
.plate .cap{
  position:static; z-index:6; text-align:center;
  margin-top:1.7rem; max-width:38rem;
}
.plate .cap p{
  font-family:var(--deco); font-weight:400;
  font-size:1.22rem; line-height:1.48;
  color:#fbf0d4; margin:0 !important;
}
.plate .cap .who{
  margin-top:.75rem; font-size:.66rem; letter-spacing:.1em; color:var(--gold-lt); line-height:1.7;
}

/* --- reserved ornament plate (SHALYO) -----------------------------------
   Owner-ruled 2026-08-02: the leaf renders and the space stays reserved for a
   possible additional photograph. In the reader edition it carries no caption
   and reads as pure ornament — so on screen it is a deco motif on the teal
   ground, no placeholder chrome, nothing that reads as a missing image. */
.ornament-plate{ display:grid; place-items:center; min-height:34vh; padding:3rem 1.2rem; }
.motif{ position:relative; z-index:4; width:min(180px,44vw); aspect-ratio:1; }
.motif i{
  position:absolute; inset:0; border:1px solid var(--gold-lt); opacity:.85;
  transform:rotate(45deg);
}
.motif i.in{ inset:14%; border-width:2px; }
.motif b{
  position:absolute; left:50%; top:50%; width:56%; height:28%;
  transform:translate(-50%,-42%);
}
.motif b::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 100%, var(--gold-lt) 0 28%, transparent 29%),
    repeating-conic-gradient(from -90deg at 50% 100%,
      var(--gold-lt) 0deg 3.2deg, transparent 3.2deg 11deg);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 100%, #000 58%, transparent 76%);
          mask-image:radial-gradient(ellipse 100% 100% at 50% 100%, #000 58%, transparent 76%);
}
.motif s{
  position:absolute; left:50%; bottom:12%; width:8px; height:8px;
  background:var(--gold-lt); transform:translateX(-50%) rotate(45deg);
}

/* nowrap helper for Hebrew phrases that must not break (״שאליו!״, יניב בן־ארי) */
.nb{ white-space:nowrap; }

/* --- colophon leaf --- */
.colophon{ margin-top:3rem; padding:2.4rem var(--gutter) 3rem; background:var(--paper2); text-align:center; }
.colophon .mark{
  font-family:var(--deco); font-weight:400;
  font-size:.7rem; letter-spacing:.22em; color:var(--gold-deep);
}

/* signed Goldie closer — series signature, per HOUSE-STYLE-NOTES.md:
   label + doubled 1.4pt/0.5pt rules + teal italic serif + right-aligned sig.
   NO direction/unicode-bidi override on .sig — plain RTL flow already puts
   the em dash rightmost. */
.closer{ max-width:34rem; margin:1.5rem auto 0; }
.closer .label{
  font-size:.63rem; letter-spacing:.14em; color:var(--gold-deep);
  font-weight:700; margin-bottom:1.15rem;
}
.closer .band{
  position:relative; border-top:3px solid var(--gold); border-bottom:3px solid var(--gold);
  padding:1.8rem 1.2rem 1.35rem;
}
.closer .band::before,.closer .band::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--gold); opacity:.75;
}
.closer .band::before{ top:4px; }
.closer .band::after{ bottom:4px; }
/* The closer quote is the ONE display slot that stays on the BODY face:
   the house rule asks for italic serif, and Suez One has no italic — Chrome
   would shear the display face into a fake oblique. Frank Ruhl Libre is the
   series' serif, so it carries the italic here. */
.closer .q{
  font-family:var(--body); font-style:italic; font-weight:500;
  font-size:1.12rem; line-height:1.68;
  color:var(--teal); margin:0 !important;
}
.closer .sig{
  margin-top:1.35rem; text-align:right; font-size:.92rem; letter-spacing:.08em;
  color:var(--gold-deep); font-weight:700;
}
/* gold heart: inline SVG in the house gold — never an emoji-font glyph
   (HOUSE-STYLE-NOTES.md: emoji fonts ship a colour bitmap that ignores the
   palette and is not colour-stable across renderers) */
svg.heart{
  width:.92em; height:.92em; fill:var(--gold);
  vertical-align:-.13em; margin:0 .26em 0 .06em;
}

.foot{
  margin-top:2.4rem; border-top:3px solid var(--gold); padding-top:1.3rem;
  font-size:.86rem; color:var(--ink2); line-height:1.75; text-align:right;
  max-width:34rem; margin-inline:auto; position:relative;
}
.foot::before{
  content:""; position:absolute; top:4px; left:0; right:0; height:1px;
  background:var(--gold); opacity:.65;
}
.foot .lineup{
  font-family:var(--deco); font-weight:400;
  font-size:.62rem; letter-spacing:.12em; line-height:2.1;
  unicode-bidi:isolate;
}
.foot b{ color:var(--gold-deep); font-weight:700; }
.foot .credit{ margin-top:.85rem; font-size:.74rem; color:#8d7c58; font-style:italic; }
/* colophon event band (SHALYO): the one place the compact numeric date form
   is house-legal — and only inside isolated .ltr runs. */
.foot .event-band{ display:block; margin-bottom:.5rem; }

.backrow{ text-align:center; padding:2.2rem var(--gutter) 3.2rem; }
.backrow a{
  font-size:.8rem; letter-spacing:.09em; font-weight:700;
  color:var(--gold-deep);
}
.backrow a:hover,.backrow a:focus-visible{ color:var(--gold); }

/* =========================================================================
   BREAKPOINTS — mobile-first; everything above is the phone layout.
   ========================================================================= */
@media (min-width:560px){
  html{ font-size:18px; }
  :root{ --gutter:1.6rem; --sec-gap:2.4rem; }
  .grid{ grid-template-columns:1fr 1fr; gap:1.4rem; }
  /* the plate needs no breakpoint of its own — one image, one scale, every
     width (see THE CAP / NO CROP in the masthead block). Only the teal foot
     under it opens up. */
  .mast-foot{ padding:2.3rem 1.6rem 2.7rem; }
  .cover{ min-height:76vh; }
  .colophon{ padding:2.8rem var(--gutter) 3.2rem; }
  .cta-band{ padding:2.8rem 1.6rem 3rem; }
}

@media (min-width:900px){
  html{ font-size:19px; }
  :root{ --gutter:2rem; --measure:38rem; --sec-gap:3rem; --rise:18px; }
  .grid{ grid-template-columns:repeat(3,1fr); gap:1.6rem; }
  .mast-foot{ padding:2.8rem 2rem 3.2rem; }
  .wordmark{ margin:2.1rem 0 1.5rem; }
  .intro{ padding:3.8rem 0 2rem; }
  .grid-head{ margin:3rem 0 1.7rem; padding:1.9rem 1.4rem 2.1rem; }
  .article{ padding:3.2rem 0 0; }
  /* no aspect-ratio override here any more — the frame keeps its own shape at
     every width. Only the furniture around it grows. */
  .plate{ margin:3.2rem 0; padding:3rem 2rem 3.2rem; }
  .plate .cap{ margin-top:2rem; }
  .plate .cap p{ font-size:1.62rem; }
  .pull{ margin:2.6rem auto; padding:2.5rem 2rem; }
  .pull p{ font-size:1.46rem; }
  .cover{ min-height:74vh; padding:3rem 2rem 3.4rem; }
  .cover .dek{ font-size:1.12rem; }
  figure img.port{ max-width:min(100%,520px); }
  .colophon{ margin-top:3.6rem; padding:3.2rem var(--gutter) 3.6rem; }
  .cta-band{ margin-top:3.6rem; padding:3.2rem 2rem 3.4rem; }
}

@media (min-width:1200px){
  :root{ --gutter:2.2rem; }
  .mast-foot{ padding:3.2rem 2rem 3.6rem; }
  .masthead .deco-plate{ inset:14px; }
}

/* =========================================================================
   LANGUAGE TOGGLE — EN / עב, top corner of every page

   ONE component, two hosts:
     · article pages   it rides the existing .topbar, grouped with the home
                       wordmark inside .topbar-end so the pair lands in the
                       corner together
     · index pages     a slim .toprail above the masthead. Same teal ground as
                       the masthead and NO bottom rule, so it reads as a little
                       extra top mat above the framed poster plate, not as a
                       second bar stacked on the first.

   direction:ltr on the control itself is deliberate and load-bearing: this is
   a language CHOOSER, not prose. Left to inherit, the two tokens would swap
   sides between the Hebrew build and the English one and the control would
   move under the reader. EN always sits left of עב, on every page, both
   directions.

   The `a` rules restate font-family / size / tracking / weight because
   `.topbar a` (same specificity, earlier in this sheet) otherwise reaches in
   and re-sizes the tokens on the article pages only.
   ========================================================================= */
.toprail{
  background:var(--teal-dk);
  padding:.5rem var(--gutter) 0;
  display:flex; align-items:center; justify-content:flex-end;
}
.topbar-end{ display:flex; align-items:center; gap:.9rem; }

.langsw{
  direction:ltr; unicode-bidi:isolate;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--deco); font-weight:400;
  font-size:.6rem; letter-spacing:.22em; line-height:1;
  white-space:nowrap;
}
.langsw a,
.langsw .cur{
  /* the side padding is a HIT AREA, not a look: at .6rem the two tokens are
     ~24px wide and the pair would sit right on the 24x24 target floor. The
     vertical padding is deliberately left where it is so the control does not
     grow the article topbar or the index rail. */
  display:inline-block; padding:.42rem .34rem; text-decoration:none;
  font-family:inherit; font-size:inherit; font-weight:inherit;
  letter-spacing:inherit;
}
.langsw a{
  color:var(--gold-lt);
  transition:color .3s var(--ease), opacity .3s var(--ease);
}
.langsw a:hover,.langsw a:focus-visible{ color:#f4dfa4; }
/* the page you are already on: present, but stood down */
.langsw .cur{ color:var(--gold-lt); opacity:.42; }
.langsw .sep{ width:1px; height:.78rem; background:var(--gold-lt); opacity:.42; }
/* Suez One's Hebrew cut is a heavy display face and blocks up at .6rem, so the
   Hebrew token sets on the body face instead */
.langsw .he{ font-family:var(--body); font-weight:700; letter-spacing:.1em; font-size:.68rem; }

/* =========================================================================
   [dir="ltr"] — THE ENGLISH MIRROR

   The sheet is NOT forked. Everything above serves both builds; this block
   flips only the properties that are genuinely direction-dependent, scoped to
   the <html dir="ltr"> of the English pages. Every rule here has one job, and
   the list is deliberately short.

     body direction        rtl -> ltr (body{direction:rtl} would otherwise beat
                           the dir attribute)
     LEADING               1.78 -> 1.62. 1.78 is a Hebrew setting: Hebrew
                           letterforms are dense and carry no ascender or
                           descender rhythm, so they want that much air. The
                           same value under Latin text reads as a gappy,
                           unbound column. The print English edition made this
                           exact call (1.78 -> 1.5 at 10.2pt); 1.62 is the
                           screen equivalent.
     --measure             37/38rem -> 33/34rem. Same reason, other end: Latin
                           glyphs are narrower, so the Hebrew measure runs
                           ~78 characters in English. 34rem holds ~70.
     underline wipe        transform-origin right -> left (reading-start edge)
     blockquote            gold rule, padding and tint gradient all move to the
                           left edge; the gradient angle is the exact mirror
     .foot                 text-align right -> left (reading-start edge)
     svg.heart             side margins swapped, so the wide gap precedes the
                           heart in reading order

   DELIBERATELY NOT MIRRORED — .closer .sig stays text-align:right. In the
   Hebrew build that puts the Goldie signature at the reading-start edge; in
   English, flush right is the standing convention for a quote attribution, so
   the same declared value is correct for a different reason. This is the same
   ruling the print English editions carry.
   ========================================================================= */
[dir="ltr"] body{ direction:ltr; line-height:1.62; }

[dir="ltr"]{ --measure:33rem; }
@media (min-width:900px){ [dir="ltr"]{ --measure:34rem; } }

[dir="ltr"] .ulink::after,
[dir="ltr"] .card-cta::after{ transform-origin:left center; }

[dir="ltr"] blockquote{
  padding:.95rem 1rem .95rem 1.35rem;
  border-right:0; border-left:4px solid var(--gold);
  background:linear-gradient(270deg, rgba(169,127,30,.11), rgba(169,127,30,.02));
}

[dir="ltr"] .foot{ text-align:left; }

[dir="ltr"] svg.heart{ margin:0 .06em 0 .26em; }

/* the cover's small gold line is Latin caps in this build, not Hebrew, and
   caps want more tracking to stop reading as a solid bar */
[dir="ltr"] .cover .eyebrow-he{ letter-spacing:.2em; }

/* =========================================================================
   REDUCED MOTION — the whole motion system switches off in one place.
   Reveal targets are forced fully visible so nothing can be stranded hidden.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal,
  .js .reveal.is-in{ opacity:1 !important; transform:none !important; }
  .card,
  a.card,
  a.card:hover,a.card:focus-visible,a.card:active,
  .card--quiet:hover,.card--next:hover{ --lift:0px; --grow:1; transform:none; }
  a.card:hover .card-plate img{ transform:none; }
  .btn-deco:hover,.btn-deco:focus-visible{ transform:none; }
  .ulink::after,.card-cta::after{ transition:none; }
}