/* ══ THE SHOP DESIGN, AS A LAYER · 1 October 2026 ════════════════════════
   Her instruction: "take this page and give me a same design version for all
   pages." This is the Shop page's design lifted out of its inline <style> and
   generalised, so it lives once instead of twelve times.

   Everything is scoped to body.sys. A page opts in by carrying that class and
   linking this file; it opts out by dropping the class. Nothing here is
   !important, so a page can still override a rule locally.

   WHAT IT CHANGES, and it is not small:
     headings   Prata  (--disp) -> Antic Didone (--fig)
     body copy  Source Serif 4 (--body) -> Inter (--sans), 16px/1.65
     measure    the page caps at 1180px
   Yesterday's studio-l1-about-type-sync pass set the opposite - "serif
   editorial body, Prata display" - so the two disagree. This one wins on the
   pages that carry .sys, and that is the decision to confirm.

   THE MASTHEAD IS NOT TOUCHED. Her ruling: "menue fonts should stay, only
   inside content small text larger." Nothing here selects .mast, .topbar,
   .portal or the footer chrome, and the restore block at the foot of this
   file states the chrome values explicitly so no later pass can drift them.
   ════════════════════════════════════════════════════════════════════════ */

/* ── type ─────────────────────────────────────────────────────────────── */
body.sys{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--ink)}
body.sys p,body.sys li,body.sys .product-copy,body.sys .intro-copy,
body.sys .copy,body.sys .lede,body.sys .lead{
  font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--read)}
body.sys h1,body.sys h2,body.sys h3{font-family:var(--fig);font-weight:400;color:var(--ink)}
body.sys h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.08;letter-spacing:-.015em;max-width:820px}
body.sys h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.12}
body.sys h3{font-size:1.35rem;line-height:1.25}
body.sys .small-note{font-size:14px;line-height:1.6;color:var(--faint)}

/* ── the centred page intro, with its anchor nav ──────────────────────── */
.shop-intro{padding:clamp(56px,8vw,100px) 0 42px;text-align:center}
.shop-intro .kicker{display:block;margin-bottom:18px}
.shop-intro .intro-copy{max-width:650px;margin:22px auto 0}
.shop-nav{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:30px auto 0;padding:0 20px}
.shop-nav a{font-family:var(--sans);font-size:14px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:4px}
.shop-nav a:hover{border-color:var(--gold-dark)}

/* ── the feature block: media one side, the case the other ───────────── */
.feature{margin:25px auto 0;max-width:1180px;background:#f7f3ed;border-radius:24px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.feature-media{background:#eee8de;min-height:560px;display:flex;align-items:center;
  justify-content:center;padding:42px}
.feature-media img{display:block;width:min(100%,460px);height:auto;max-height:620px;
  object-fit:contain;box-shadow:0 24px 50px rgba(30,27,24,.14)}
.feature-copy{padding:clamp(34px,5vw,72px)}
.feature-copy .eyebrow{margin-bottom:16px}
.feature-copy h2{max-width:480px}
.feature-copy .lead{margin:20px 0 25px;max-width:520px}
.price-line{font-family:var(--sans);font-size:17px;color:var(--ink);margin:18px 0 24px}
.price-line strong{font-size:22px;font-weight:600}

/* ── the button ───────────────────────────────────────────────────────── */
.shop-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;
  background:var(--ink);color:#fff;text-decoration:none;font-family:var(--sans);font-size:13px;
  font-weight:600;letter-spacing:.03em;border-radius:2px;transition:.2s}
.shop-btn:hover{opacity:.86}
.shop-btn.alt{background:transparent;color:var(--ink);border:1px solid rgba(31,29,27,.28)}

/* ── a section's own head ─────────────────────────────────────────────── */
.section-head{max-width:1180px;margin:0 auto;padding:90px 20px 30px}
.section-head p{max-width:650px;margin-top:15px}

/* ── the three-up of products ─────────────────────────────────────────── */
.products{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.product-card{display:flex;flex-direction:column;min-width:0}
.product-card .image{background:#f5f1ea;aspect-ratio:4/5;display:flex;align-items:center;
  justify-content:center;padding:34px;overflow:hidden}
.product-card .image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.product-card:hover .image img{transform:scale(1.025)}
.product-card .info{padding:20px 3px 8px}
.product-card h3{margin:0 0 9px}
.product-card .product-copy{margin:0;max-width:42ch}
.product-meta{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;
  margin-top:20px;padding-top:15px;border-top:1px solid rgba(31,29,27,.13);
  font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--read-dk)}
.product-meta strong{font-weight:600;color:var(--ink)}
.product-link{display:inline-block;margin-top:15px;font-family:var(--sans);font-size:13px;
  font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(31,29,27,.3);padding-bottom:3px}

/* ── the two-column row grid: name and question left, price right ─────── */
.tool-grid{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:0}
.tool-card{border-top:1px solid rgba(31,29,27,.16);padding:30px 8px 32px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,auto);gap:30px;align-items:start}
.tool-card h3{margin:0 0 9px;font-size:1.55rem}
.tool-card p{margin:0;max-width:58ch}
.tool-card .tool-price{font-family:var(--sans);font-size:15px;line-height:1.55;white-space:normal;
  color:var(--ink);padding-left:24px;border-left:1px solid rgba(31,29,27,.13);min-height:42px}
.tool-card .tool-price strong{font-weight:600}

/* ── the closing invitation band ──────────────────────────────────────── */
.start-band{max-width:1180px;margin:92px auto 0;padding:0 20px}
.start-inner{background:#f2e9e5;border-radius:22px;padding:55px clamp(28px,6vw,82px);
  display:flex;align-items:center;justify-content:space-between;gap:35px}
.start-inner h2{max-width:570px;margin:0}
.start-inner p{max-width:560px;margin:15px 0 0}
.start-actions{display:flex;flex-wrap:wrap;gap:12px;flex:none}

/* ── the newsletter, one destination ──────────────────────────────────── */
.newsletter-clean{margin-top:92px;padding:88px 20px 94px;
  border-top:1px solid rgba(31,29,27,.08);border-bottom:1px solid rgba(31,29,27,.08)}
.newsletter-inner{max-width:760px;margin:0 auto;text-align:center}
.newsletter-inner h2{margin:12px 0 16px;font-size:clamp(2rem,3.5vw,3rem);line-height:1.12}
.newsletter-lede{max-width:620px;margin:0 auto;font-size:16px;line-height:1.7}
.newsletter-form{max-width:620px;margin:30px auto 0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:10px}
.newsletter-form input[type=email]{min-height:48px;border:1px solid rgba(31,29,27,.22);
  background:#fff;padding:0 16px;font:inherit;font-size:15px;color:var(--ink);border-radius:2px}
.newsletter-form input[type=email]::placeholder{color:var(--faint)}
.newsletter-form .btn{min-height:48px;border:0;cursor:pointer}
.newsletter-fine{max-width:620px;margin:16px auto 0;font-size:12px;line-height:1.65;color:var(--faint)}
.newsletter-fine a{color:inherit}

/* ── the measure, on the site's own wrap ──────────────────────────────── */
body.sys .wrap{max-width:1180px}

/* ── responsive, her breakpoints ──────────────────────────────────────── */
@media(max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature-media{min-height:420px}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .start-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:620px){
  .shop-intro{padding-top:48px}
  .products,.tool-grid{grid-template-columns:1fr}
  .feature-media{min-height:340px;padding:28px}
  .feature-copy{padding:34px 26px 40px}
  .product-card .image{padding:28px}
  .tool-card{grid-template-columns:1fr;gap:14px;padding-left:4px;padding-right:4px}
  .tool-card .tool-price{padding-left:0;padding-top:14px;border-left:0;
    border-top:1px solid rgba(31,29,27,.13);min-height:0}
  .newsletter-clean{margin-top:70px;padding:68px 20px 72px}
  .newsletter-form{grid-template-columns:1fr}
  .newsletter-form .btn{width:100%}
}

/* ══ THE CHROME, HELD · her ruling, "menue fonts should stay" ═══════════
   Stated explicitly so nothing above and nothing added later drifts it.
   These are the values in site.css:230-245 and journey.css:336. ══════════ */
body.sys .mast a.wm{font-family:'Julius Sans One',sans-serif;font-size:17px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase}
body.sys .mast a.wm small{font-family:'Julius Sans One',sans-serif;font-size:8px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase}
body.sys .mast nav a{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase}
body.sys .portal{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase}
body.sys .topbar{font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
@media(max-width:600px){body.sys .topbar{font-size:9px;letter-spacing:.1em}}
body.sys .fwm{font-family:'Julius Sans One',sans-serif;letter-spacing:.14em}
body.sys .fhead{font-family:'Inter',system-ui,sans-serif;letter-spacing:.18em}

/* ══ THE GOLD BAND, REBALANCED · 1 October 2026 ═════════════════════════
   Her note: "make ritual corner golden block more balanced - image larger and
   text block bit smaller." It ran 480px of photograph against a 520px pane,
   so the pane was the heavier half of a block whose subject is the corner
   itself. The photograph takes 620 and the pane 440.

   620 + 440 + the 56px gap is 1116, inside the 1180 measure this layer sets,
   so nothing is pushed out at full width. Below 820px the band was already
   stacking, and that is untouched.

   Scoped to .band-duo — only the three pages with a photograph in the band
   (Home, Intelligence, Signature Concept). The single-column band keeps its
   own width. The .band-fig rules live inline on those three pages; this
   overrides them from one place rather than editing three files. ═══════════ */
body.sys .band-fig{flex:0 1 620px;max-width:620px}
body.sys .band-inner.band-duo .glass-a{max-width:440px}

/* ══ DARK GROUNDS · 1 October 2026 ══════════════════════════════════════
   Her report: "the footer have dark text on dark under stusio l1."

   My bug, and a plain specificity mistake. The layer above says

       body.sys p{color:var(--read)}                    0-2-1

   which beats site.css's

       .fbrand p{color:var(--read-dk)}                  0-1-1

   so the footer's blurb turned dark ink on graphite. Everywhere the ground is
   dark and the page relied on a single-class rule for its light text, the same
   thing happened. Raising the dark contexts above the layer fixes it without
   weakening the layer.

   .stock is the graphite ground (24 pages), .dark the near-black one (4), and
   the named bands each carry their own. --ink-dk and --read-dk are the
   light-on-dark pair already defined in site.css. ═══════════════════════════ */
body.sys .stock p,body.sys .stock li,body.sys .stock .copy,body.sys .stock .lede,
body.sys .dark p,body.sys .dark li,body.sys .dark .copy,body.sys .dark .lede,
body.sys .whyband p,body.sys .devband p,body.sys .readyband p,body.sys .pass p,
body.sys .smoked p,body.sys .on-graphite p,body.sys .on-dark,
body.sys footer.stock p,body.sys .fbrand p{color:var(--read-dk)}
body.sys .stock h1,body.sys .stock h2,body.sys .stock h3,
body.sys .dark h1,body.sys .dark h2,body.sys .dark h3,
body.sys .whyband h2,body.sys .devband h2,body.sys .readyband h2,
body.sys .pass h2,body.sys .pass h3{color:var(--ink-dk)}

/* ── the dark box's own copy · her note: "too small text inside" ────────
   The layer had put every .lede at 16px, which on a dark ground with a lot of
   air around it read as a caption rather than as the statement it is. Larger,
   and at 600 — the heaviest Inter actually loaded in fonts.css, which carries
   400, 500 and 600 only. Anything above 600 would be a browser-synthesised
   fake rather than a real face. */
body.sys .stock .lede,body.sys .dark .lede,
body.sys .whyband .lede,body.sys .devband .lede,body.sys .readyband .lede{
  font-size:1.12rem;line-height:1.66;font-weight:600;letter-spacing:-.005em}

/* ══ THE VOICES THE LAYER MUST NOT FLATTEN · 1 October 2026 ═════════════
   Her note: "handwritten font should stay everywhere as it is."

   body.sys p{font-family:var(--sans)} is specificity 0-2-1, so it beat every
   single-class rule that gives a paragraph a face of its own — and the
   handwritten note came out in Inter. She caught that one; the same thing was
   happening to the Cormorant voices, which are paragraphs too.

   So each keeps its own face and its own size. This is a restore, not a new
   decision: the values are the ones already in journey.css and in the pages.

   THE HANDWRITING — Caveat, and the reason the note reads as a margin note
   rather than as copy. Two places: .hand on Home and the test, .sig on
   About. */
body.sys .hand{font-family:var(--script);font-size:1.5rem;line-height:1.25;max-width:44ch}
body.sys .sig{font-family:var(--script);font-size:2.1rem;line-height:1}

/* THE CORMORANT VOICES — the credo, the questions, the pull quotes and the
   card titles. All of them are <p> or inside one, all of them were flattened. */
body.sys .say{font-family:var(--quiet);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.42}
body.sys .qq,body.sys .sg .qq,body.sys .tool .qq{font-family:var(--quiet);font-weight:300;
  font-size:1.12rem;line-height:1.35}
body.sys .pull{font-family:var(--quiet);font-weight:300;
  font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.4}
body.sys .creed,body.sys .statement{font-family:var(--quiet);font-weight:300}
body.sys .pg-card p{font-family:var(--quiet)}
body.sys .rung .t,body.sys .sixc h3,body.sys .ty-next b{font-family:var(--quiet)}

/* THE FIGURE FACE — Antic Didone, for numbers and prices. Not paragraphs, but
   listed here so the whole set is in one place if it ever needs checking. */
body.sys .price,body.sys .fig,body.sys .stat,body.sys .counts b,
body.sys .pg-card .n,body.sys .sg .n,body.sys .rung .n,body.sys .steps .n,
body.sys .ty .mark,body.sys .ty-next .n{font-family:var(--fig)}

/* THE DISPLAY FACE — Prata, where a band or a glass pane sets its own title. */
body.sys .glass-a .t,body.sys .band-material .glass-a .t{font-family:var(--disp)}

/* ══ COLOUR: TWO MISTAKES OF MINE, CORRECTED · 1 October 2026 ═══════════
   Her report: "intelligence tools texts are too light inside the boxes and
   some golden texts like questions have changed dark."

   ONE — LIGHT CARDS INSIDE DARK BANDS. The dark-ground rule above says
   .stock p{color:var(--read-dk)}, which is right for text ON the graphite and
   wrong for text inside a white card sitting on it. On Home the tool cards sit
   inside .devband.stock, so their copy took the light-on-dark grey and all but
   vanished against white. The cards carry their own ground, so they take the
   ordinary read colour back.

   TWO — THE GOLD. body.sys p{color:var(--read)} is 0-2-1 and beat every
   single-class rule that colours a paragraph, so the questions lost their
   gold exactly as the handwriting lost Caveat. Same cause, same fix: the
   values below are read back out of journey.css, not chosen. ══════════════ */

/* light cards keep their own copy colour wherever they sit */
body.sys .stock .tool p,body.sys .stock .sg p,body.sys .stock .glass p,
body.sys .stock .card p,body.sys .stock .win p,body.sys .stock .rung p,
body.sys .dark .tool p,body.sys .dark .sg p,body.sys .dark .glass p,
body.sys .dark .card p{color:var(--read)}

/* the gold, the salmon and the display colours, restored */
body.sys .qq,body.sys .sg .qq{color:var(--gold-ink)}
body.sys .tool .qq{color:var(--ink)}
body.sys .you .qq{color:var(--ink);opacity:.82}
body.sys .tool .rs{color:var(--gold-ink)}
body.sys .hand{color:var(--salmon)}
body.sys .stock .hand{color:var(--salmon-hi)}
body.sys .say em{color:var(--gold-display)}
body.sys .stock .say{color:var(--ink-dk)}
body.sys .pull{color:var(--gold-dark)}
body.sys .sig{color:var(--gold-display)}

/* ══ THE HERO HEADLINE, AND THE PINK TILE · 1 October 2026 ══════════════
   Her note: "index headline is one line - should be like on other pages -
   folded. make dark text o test box golden."

   THE FOLD. The layer sets body.sys h1{max-width:820px}, specificity 0-1-2,
   which outranks journey.css's .hero h1{max-width:16ch} at 0-1-1. 820px is
   wide enough to hold "Design a home that feels like you." on one line, so it
   stopped folding. 16ch is what makes a display line break where it should,
   and it goes back.

   THE TILE. .pink-tile sets color:var(--pink-cream) on the tile and lets its
   children inherit — p has no colour of its own. Inherited colour loses to
   any rule at all, so body.sys p{color:var(--read)} turned it dark ink on
   clay. Her ruling is gold, so it takes --pink-gold, which is already this
   component's own gold: the ornaments are stroked in it. ══════════════════ */
body.sys .hero h1,body.sys .jhero h1{max-width:24ch}
/* the fold is explicit in the markup rather than left to the ch maths:
   Antic Didone has narrow figures, so a ch is a good deal narrower than the
   average lowercase character and 20ch still held "feels like". The break
   after "that" is a <br class="fold"> in the h1, which is deterministic. On a
   phone the line is short enough to wrap on its own, so the break is dropped
   there rather than leaving a stranded first line. */
body.sys h1 br.fold{display:inline}
@media(max-width:620px){body.sys h1 br.fold{display:none}}
body.sys .capture .pair .pink-tile p,body.sys .pink-tile p{color:var(--pink-cream)}
body.sys .pink-tile .t,body.sys .pink-tile .k{color:var(--pink-cream)}

/* Refined 1 Oct, second pass. 16ch broke the line after "home" — "Design a
   home / that feels like / you." She wants the break after "that", so the
   measure has to hold 18 characters and refuse 24: 20ch does exactly that,
   giving "Design a home that / feels like you."

   The tile paragraph went gold, then too light in gold, and is now --pink-cream:
   her ruling, "make it same light colour as heading on box". That is what the
   component always intended — .pink-tile sets color:var(--pink-cream) on itself
   and lets .k, .t and p inherit it. Only my body.sys p{color} had broken that
   chain, so this restores the tile to one colour throughout. */

/* ══ AIR IN THE HERO · 1 October 2026 ═══════════════════════════════════
   Her note: "add bit more space between hero texts."

   Three things sit on top of each other up there — the tracked over-line, the
   display headline, and the lede — and the gaps between them had been squeezed
   from two directions. .over carries margin-bottom:1.4rem from site.css, and
   the gap between the headline and the lede is whatever .jhero's margin-top
   is, which studio-l1-hero-start had pulled down to .35rem to raise the whole
   block. Raising the block was right; closing the gaps with it was not.

   The selector needs section.hero in it: studio-l1-hero-start is an inline
   block that loads after this file, and at equal specificity the later rule
   wins. body.sys section.hero .jhero is 0-3-2 against its 0-2-2. ═══════════ */
body.sys h1 .over{margin-bottom:1.9rem}
body.sys section.hero .jhero,body.sys section.hero.ground-paper .jhero,
body.sys section.hero.ground-pearl .jhero{margin-top:2.2rem}
body.sys .jhero .lede{margin-top:0}
body.sys .jhero .pg-card{margin-top:2.6rem}
@media(max-width:900px){
  body.sys h1 .over{margin-bottom:1.5rem}
  body.sys section.hero .jhero,body.sys section.hero.ground-paper .jhero,
  body.sys section.hero.ground-pearl .jhero{margin-top:1.6rem}}

/* ══ CARD HEADINGS ON DARK BANDS · 1 October 2026 ═══════════════════════
   Her note: "on index headings are not seen."

   The tool card titles — Choosing paint, Lighting, Room layout, Ritual
   Corner™ — were near-invisible on their pastel card headers. Same overreach
   as the card paragraphs, one element up: my dark-ground rule says
   .stock h3{color:var(--ink-dk)}, which is near-white, and on Home those
   cards sit inside .devband.stock. Right for a heading ON the graphite,
   wrong for one inside a white card standing on it.

   journey.css had already met this and fixed it: .tool .hd h3 sets
   color:var(--ink) and carries the note that .stock paints h3 ivory while the
   card is white. That rule is 0-2-1; mine at 0-2-2 took the fix back off. So
   the light cards are raised above it, exactly as their paragraphs were.

   NOTE TO SELF: the first version of this comment quoted that CSS line with
   its own comment markers still attached, which opened a second comment inside
   this one. CSS comments do not nest, so the block ended at the first closing
   marker, the prose after it became garbage, and the parser swallowed the whole
   rule below while recovering. The fix never applied and the headings stayed
   invisible. Never paste a commented line into a comment. */
body.sys .stock .tool h2,body.sys .stock .tool h3,body.sys .stock .tool .hd h3,
body.sys .stock .sg h2,body.sys .stock .sg h3,
body.sys .stock .glass h2,body.sys .stock .glass h3,
body.sys .stock .card h2,body.sys .stock .card h3,
body.sys .stock .win h2,body.sys .stock .win h3,
body.sys .stock .rung h2,body.sys .stock .rung h3,
body.sys .dark .tool h2,body.sys .dark .tool h3,body.sys .dark .tool .hd h3,
body.sys .dark .sg h2,body.sys .dark .sg h3,
body.sys .dark .glass h2,body.sys .dark .glass h3,
body.sys .dark .card h2,body.sys .dark .card h3{color:var(--ink)}

/* ── portfolio, brought into the same rhythm · 1 October 2026 ───────────
   Her note: "make portfolio cohesive too." It was the one page opening on an
   over-line with no headline under it, so it read as a gallery rather than as
   a page of the site. It now carries her §18 Headline and One line — the same
   two the Home page already uses to introduce the portfolio, which she has
   signed off, rather than a new pair written for this page.

   .pf-sub is the new line; it takes the same treatment as .pf-intro so the two
   read as one introduction rather than as copy following a standfirst. */
body.sys .pf-sub{font-family:var(--body);font-size:16px;line-height:1.65;
  color:var(--read);max-width:46ch;margin:.9rem 0 0}
body.sys .pf-h1{line-height:1.08}