/* Saraf · round 15, the home page language on every page: content pages: workshops, custom, about, contact, terms. */
/* Loaded after sys-pages.css (desktop and phone); the phone pass (mob-pages.css) loads after this file on phones.
   Everything here is scoped to the inner pages (body:not(.sf-home)) so the home stays exactly as approved. */

/* ---------- 1. photo heroes: a real photograph, the home hero's veil, the bold Karantina title, copy at the bottom start ---------- */
html body:not(.sf-home) .phero--img { min-height: min(88vh, 860px); padding-bottom: clamp(56px, 9vh, 104px); }
html body:not(.sf-home) .phero--img > .chapter__bg { background: #2A1C15 !important; }
html body:not(.sf-home) .phero--img .phero__media { inset: 0 !important; }
html body:not(.sf-home) .phero--img .phero__media picture { position: absolute; inset: 0; display: block; }
html body:not(.sf-home) .phero--img .phero__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: 50% 55%; }
html body:not(.sf-home) .phero--img .phero__veil { background:
	linear-gradient(to left, rgba(28,18,14,.62) 0%, rgba(28,18,14,.35) 45%, rgba(28,18,14,0) 75%),
	linear-gradient(to top, rgba(28,18,14,.7) 0%, rgba(28,18,14,0) 45%),
	linear-gradient(to bottom, rgba(28,18,14,.38) 0%, rgba(28,18,14,0) 20%); }
html body:not(.sf-home) .phero--img .phero__in > * { max-width: 780px; }
html body:not(.sf-home) .phero--img .phero__title { color: #FAF7F2 !important; text-shadow: 0 2px 40px rgba(20,12,9,.35); }
html body:not(.sf-home) .phero--img .phero__title em { color: var(--sf-gold-soft) !important; }
html body:not(.sf-home) .phero--img .phero__lead { color: rgba(250,247,242,.9) !important; max-width: 52ch; }
html body:not(.sf-home) .phero--img .eyebrow { color: var(--sf-gold-soft) !important; }

/* ---------- 2. light paper heroes (contact, terms): paper-2, ink title, the bordeaux accent word, a gold hairline to close ---------- */
html body:not(.sf-home) .phero:not(.phero--img) { min-height: 50vh; }
html body:not(.sf-home) .phero:not(.phero--img) .phero__in { position: relative; }
html body:not(.sf-home) .phero:not(.phero--img)::after { content: ""; position: absolute; inset-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); bottom: 0; height: 1px; background: var(--sf-gold); opacity: .55; }
html body:not(.sf-home) .phero:not(.phero--img) .phero__lead { max-width: 52ch; }

/* ---------- 3. section heads: one alignment for every page, at the start (right), like the home ---------- */
/* the Instagram and compare heads stay centred, as on the home */
html body:not(.sf-home) .chapter:not(.ig):not(.compare) .chead--center { align-items: flex-start; text-align: start; }
html body:not(.sf-home) .chapter:not(.ig):not(.compare) .chead--center .h2 { max-width: none; }
html body:not(.sf-home) .chead--row { align-items: flex-end; }
html body:not(.sf-home) .chead--row > .lead { max-width: 40ch; color: var(--sf-ink-soft); }
html body:not(.sf-home) .chapter .chead { margin-bottom: clamp(28px, 4vw, 44px); }

/* ---------- 4. workshops: the landing hero stays light, with Shai's illustration; square chips, ink figures over a gold hairline ---------- */
html body:not(.sf-home) .lp__chips { align-items: center; }
html body:not(.sf-home) .lp__chips li { border-radius: 2px !important; font-weight: 500 !important; display: inline-flex; align-items: center; white-space: nowrap; line-height: 1.2; }
html body:not(.sf-home) .lp__facts { border-top: 1px solid rgba(144,120,78,.55) !important; }
html body:not(.sf-home) .lp__facts b { color: var(--sf-ink) !important; }
html body:not(.sf-home) .lp__facts span { color: var(--sf-ink-soft) !important; }
/* Shai's drawing is a transparent image (its ground is alpha 2/255): full opacity with the multiply from sys-pages, no fading that would read as a box */
html body:not(.sf-home) .lp__portrait-img { opacity: 1 !important; }

/* the fixed booking bar (moved to <body> by the hero so it paints above every chapter) carries its own WhatsApp button:
   while it is up, the round WhatsApp float steps aside, so only one floating element of ours shows at a time */
html body:not(.sf-home) .sf-wa { transition: opacity .35s ease, transform .35s ease; }
@media (min-width: 768px) { html body:not(.sf-home):has(> .lp__bar.is-on) .sf-wa { opacity: 0; transform: translateY(16px); pointer-events: none; } }

/* workshops: the home's three video cards open the page; their footer holds only the WhatsApp button here */
html body:not(.sf-home) .ws--cards .wsv__ctas:empty { display: none; }
/* the clips carry burned-in captions at the bottom of the frame: a deeper veil under the name, meta and price keeps the card's own lines clear */
@media (min-width: 768px) { html body:not(.sf-home) .wsv__veil { background: linear-gradient(to top, rgba(22,14,11,.95) 0%, rgba(22,14,11,.86) 26%, rgba(22,14,11,.42) 48%, rgba(22,14,11,0) 66%), linear-gradient(to bottom, rgba(102,12,12,.3), rgba(102,12,12,0) 26%); } }

/* how it works: four numbered columns on hairlines, no boxes */
html body:not(.sf-home) .steps4__grid { gap: 0 clamp(20px, 3vw, 48px); }
html body:not(.sf-home) .steps4__card { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(144,120,78,.55) !important; border-radius: 0 !important; padding: 22px 0 0 !important; gap: 10px; }
html body:not(.sf-home) .steps4__n { font-family: var(--f-display) !important; font-weight: 700 !important; font-size: 2rem !important; line-height: 1; letter-spacing: 0 !important; color: var(--sf-gold) !important; }
html body:not(.sf-home) .steps4__t { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + .9vw, 2.2rem); line-height: 1; }
html body:not(.sf-home) .steps4__p { font-size: 1rem; line-height: 1.6; max-width: 30ch; }

/* prices and details: each workshop on its own hairline, copy at the start beside a calm upright photograph */
html body:not(.sf-home) .wsd__list { gap: 0; }
html body:not(.sf-home) .wsd__item, html body:not(.sf-home) .wsd__item:nth-child(even) { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 96px); align-items: start; padding: clamp(36px, 4vw, 56px) 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--sf-line) !important; border-radius: 0 !important; scroll-margin-top: calc(var(--hdr-h, 80px) + 24px); }
html body:not(.sf-home) .wsd__item:last-child { border-bottom: 1px solid var(--sf-line) !important; }
html body:not(.sf-home) .wsd__item .wsd__media, html body:not(.sf-home) .wsd__item:nth-child(even) .wsd__media { order: 2; }
html body:not(.sf-home) .wsd__media .slab { aspect-ratio: 4 / 5; max-width: 400px; margin-inline-start: auto; border-radius: 2px !important; box-shadow: none !important; }
html body:not(.sf-home) .wsd__body { gap: 12px; }
html body:not(.sf-home) .wsd__no { font-family: var(--f-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--sf-gold); }
html body:not(.sf-home) .wsd__name { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4rem); line-height: .95; }
html body:not(.sf-home) .wsd__who { color: var(--sf-ink-soft); font-weight: 500; }
html body:not(.sf-home) .wsd__rows { margin-top: 6px; }
html body:not(.sf-home) .wsd__rows li { padding: 14px 0; }
html body:not(.sf-home) .wsd__rows b { font-size: 1.08rem; }
html body:not(.sf-home) .wsd__note { max-width: 62ch; }
html body:not(.sf-home) .wsd__body .btn { margin-top: 8px; }

/* questions: quiet hairlines, the sign in gold */
html body:not(.sf-home) .faq__item:last-child { border-bottom: 1px solid var(--sf-line); }
html body:not(.sf-home) .faq__plus { border-color: rgba(144,120,78,.55); }
html body:not(.sf-home) .faq__plus::before, html body:not(.sf-home) .faq__plus::after { background: var(--sf-gold); }

/* ---------- 5. text chapters (custom, about, terms) ---------- */
html body:not(.sf-home) .textc__media .slab { box-shadow: none !important; overflow: clip; }
/* the soft parallax moves the photo by 6% each way: the photo is 116% of its frame, so the frame never shows an empty band */
html body:not(.sf-home) .textc__media .slab > img, html body:not(.sf-home) .textc__media .slab > picture { position: absolute; inset-inline: 0; top: -8%; width: 100% !important; height: 116% !important; max-width: none !important; display: block; }
html body:not(.sf-home) .textc__media .slab > picture img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
html body:not(.sf-home) .textc__media .slab > img { object-fit: cover; }
html body:not(.sf-home) .textc__copy .chead { margin-bottom: 14px; }
html body:not(.sf-home) .prose li::before { width: 7px; height: 1px; top: .85em; border-radius: 0; background: var(--sf-gold); }
/* the terms: one column at the start, under the title, with the chapter titles in Karantina */
html body:not(.sf-home) .textc--narrow .textc__copy { max-width: 780px; margin-inline: 0; }
html body:not(.sf-home) .textc--narrow .prose { font-size: 1.02rem; line-height: 1.8; color: var(--sf-ink-soft); }
html body:not(.sf-home) .textc--narrow .prose h2 { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.8rem); color: var(--sf-ink); margin: 1.8em 0 .55em; padding-top: .9em; border-top: 1px solid var(--sf-line); }
html body:not(.sf-home) .textc--narrow .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- 6. how it is made (custom, about): a calm grid of six, like the works grid ---------- */
html body:not(.sf-home) .process:not(.process--pin) .process__pin { padding-bottom: 0; } /* the chapter already closes with --sp-ch */
html body:not(.sf-home) .process:not(.process--pin) .process__track { width: auto; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4.5vw, 64px) clamp(16px, 2vw, 28px); transform: none !important; }
html body:not(.sf-home) .process:not(.process--pin) .process__line { display: none; }
html body:not(.sf-home) .process:not(.process--pin) .step { width: auto; padding-top: 0; display: flex; flex-direction: column; gap: 8px; }
html body:not(.sf-home) .process:not(.process--pin) .step__frame { order: -1; margin-bottom: 10px; aspect-ratio: 4 / 3; border-radius: 2px !important; box-shadow: none; }
html body:not(.sf-home) .process:not(.process--pin) .step__n { position: static; padding: 0; background: none !important; font-family: var(--f-display) !important; font-weight: 700 !important; font-size: 1.5rem !important; line-height: 1; letter-spacing: 0 !important; color: var(--sf-gold) !important; }
html body:not(.sf-home) .process:not(.process--pin) .step__title { font-size: clamp(1.8rem, 1.3rem + 1vw, 2.3rem); }
html body:not(.sf-home) .process:not(.process--pin) .step__text { max-width: 34ch; }
@media (max-width: 900px) { html body:not(.sf-home) .process:not(.process--pin) .process__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 7. the photographs between chapters (sf-athome) and the works grid on the inner pages ---------- */
html body:not(.sf-home) .athome { min-height: 74vh; }
html body:not(.sf-home) .athome__eyebrow::before { background: rgba(250,247,242,.7); }
html body:not(.sf-home) .strip__grid .strip__track--grid { padding: 0; }

/* ---------- 8. the contact chapter on the inner pages ---------- */
html body:not(.sf-home) .contact .chead { margin-bottom: 0; }

/* ---------- 9. phones and tablets (the phone pass in mob-pages.css refines phones after this) ---------- */
@media (max-width: 900px) {
	html body:not(.sf-home) .wsd__item, html body:not(.sf-home) .wsd__item:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
	html body:not(.sf-home) .wsd__item .wsd__media, html body:not(.sf-home) .wsd__item:nth-child(even) .wsd__media { order: -1; }
	html body:not(.sf-home) .wsd__media .slab { max-width: none; aspect-ratio: 4 / 3; margin: 0; }
	html body:not(.sf-home) .steps4__grid { gap: 28px 20px; }
}
@media (max-width: 767px) {
	html body:not(.sf-home) .phero--img { min-height: 76svh; }
	html body:not(.sf-home) .phero--img .phero__veil { background: linear-gradient(to top, rgba(28,18,14,.82) 0%, rgba(28,18,14,.35) 55%, rgba(28,18,14,.3) 100%); }
	html body:not(.sf-home) .phero--img .phero__title { text-shadow: none; }
	html body:not(.sf-home) .chead--row { flex-direction: column; align-items: flex-start; }
	html body:not(.sf-home) .athome { min-height: 0; }
	/* the photo's label sits on the small bordeaux tag at the top of the photo, as on the home (pages only, not the product page) */
	html body.page:not(.sf-home) .athome__in { position: static; padding-block: 0 var(--sp-ch); }
	html body.page:not(.sf-home) .chapter.athome:not(.hero) { padding-block: 0; }
	html body.page:not(.sf-home) .athome__eyebrow { position: absolute; z-index: 2; top: 20px; inset-inline-start: var(--gutter); margin: 0; padding: 6px 12px; border-radius: 2px; background: rgba(102,12,12,.88); color: #FAF7F2 !important; }
	html body.page:not(.sf-home) .athome__card { position: relative; z-index: 1; padding: 20px 20px 18px; }
}