lead — tail
`). The is promoted to a display term via CSS only — the string itself is byte-identical to the dictionary key and must never be split into two elements. ============ */ /* ── 1. THE OPENER ─────────────────────────────────────────── */ .crs-open__line{ font-family:var(--font-serif);font-weight:300; font-size:clamp(34px,4.6vw,56px);line-height:1.12; color:var(--navy);letter-spacing:.005em; text-align:center;max-width:840px;margin:0 auto 28px; } .crs-open__lead{ font-family:var(--font-sans);font-weight:300; font-size:15px;line-height:1.78;color:var(--text-light); max-width:620px;margin:0 auto 16px;text-align:center; } /* the punch — the page's ONE gold-italic-register claim (LAWS ㉔: one closing claim per page, never a tic) */ .crs-open__claim{ font-family:var(--font-serif);font-style:italic;font-weight:400; font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--navy); max-width:620px;margin:30px auto 0;text-align:center; } /* ── 2. THE STRUCTURE LEDGER ───────────────────────────────── */ .crs-led{max-width:960px;margin:48px auto 0} .crs-led__row{ display:grid;grid-template-columns:1fr auto;align-items:baseline; gap:24px;padding:26px 4px;border-top:1px solid var(--border-color); } .crs-led__row:last-child{border-bottom:1px solid var(--border-color)} .crs-led__label{ font-family:var(--font-serif);font-weight:400; font-size:clamp(21px,2.4vw,28px);line-height:1.3;color:var(--navy);margin:0; } /* the day-count is the display piece — brown, not gold (2.13:1 on cream fails every floor; brown reads 8.29:1) */ .crs-led__dur{ font-family:var(--font-serif);font-weight:300; font-size:clamp(28px,3.6vw,44px);line-height:1;color:var(--brown); letter-spacing:.01em;margin:0;white-space:nowrap; } .crs-led__note{ margin:36px auto 0;max-width:620px;text-align:center; font-size:14px;font-weight:300;line-height:1.75;color:var(--text-light); } /* ── 3. THE CURRICULUM INDEX (theory + practice pair) ──────── */ .crs-cur{max-width:860px;margin:8px auto 0} .crs-cur__item{ padding:26px 0;border-top:1px solid var(--border-color);margin:0; font-family:var(--font-sans);font-weight:300; font-size:14.5px;line-height:1.72;color:var(--text-light); } .crs-cur__item:last-child{border-bottom:1px solid var(--border-color)} /* the locked string's is the term — promoted by CSS, never split */ .crs-cur__item strong{ display:block;font-family:var(--font-serif);font-weight:500; font-size:22px;line-height:1.3;color:var(--navy); letter-spacing:.005em;margin:0 0 7px; } /* ── 4. TIGHT RULED ROWS (photo module bullets) ────────────── */ .crs-list{max-width:720px;margin:30px auto 0} .crs-list__item{ padding:15px 2px;border-top:1px solid var(--border-color);margin:0; font-family:var(--font-sans);font-weight:300; font-size:14.5px;line-height:1.65;color:var(--text); } .crs-list__item:last-child{border-bottom:1px solid var(--border-color)} /* ── 5. THE FIVE LOOKS SHOWCASE ────────────────────────────── */ .crs-looks{ display:grid;grid-template-columns:repeat(6,1fr); gap:44px 24px;margin-top:56px; } .crs-looks__item:nth-child(-n+2){grid-column:span 3} .crs-looks__item:nth-child(n+3){grid-column:span 2} .crs-looks__frame{ position:relative;border-radius:var(--radius-gallery);overflow:hidden; aspect-ratio:3/4;background:var(--cream-dark); } .crs-looks__frame img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform 900ms var(--ease-smooth); } /* hover lives on the INNER img while .reveal rides the item wrapper — the ㊵/㊸ collision is impossible by construction */ @media (hover:hover){ .crs-looks__item:hover .crs-looks__frame img{transform:scale(1.035)} } .crs-looks__num{ font-family:var(--font-sans);font-weight:600;font-size:11px;line-height:1; letter-spacing:.18em;color:var(--brown);margin:18px 0 7px; } .crs-looks__name{ font-family:var(--font-serif);font-weight:400;font-size:24px; line-height:1.25;color:var(--navy);margin:0 0 6px; } .crs-looks__desc{ font-size:13.5px;font-weight:300;line-height:1.6; color:var(--text-light);margin:0; } /* ── 6. WHAT'S INCLUDED — page additions over the shared .inc-* ── The four card bodies are LOCKED single strings ( + — tail): no .inc-card__title element exists on this page's cards, so the term register is carried by the string's own . */ .inc-card .crs-inc__body{margin:0} .crs-inc__body strong{ display:block;font-family:var(--font-serif);font-weight:500; font-size:23px;line-height:1.25;color:var(--navy);margin:0 0 10px; /* greedy wrap, NOT balance, on these titles alone: balance splits the hyphenated "One-to-one" at its own hyphen ("One-to- / one throughout", seen at 402) — the natural wrap gives "One-to-one / throughout". ㉘'s no-stub intent is served; the inherited balance is the defect here. */ text-wrap:wrap; } /* re-derived for the square .inc-* slot via the §14 formula (320×211 → box 7978 → 1.10); the .learn --obj-scale 1 does NOT carry */ .inc-card__icon--notecard{--icon-scale:1.10} /* FOUR deliverables, not six: the shared 3-col desktop template strands the fourth card alone on a row — this page runs 2×2 ≥1200. min-width-scoped so the shared ≤767 single-column keeps winning (media adds no specificity and this file loads later — an unscoped rule here would beat the phone stack). */ @media (min-width:1200px){ .inc-grid{grid-template-columns:repeat(2,1fr)} } /* ── 7. WHY LEARN FROM ME ──────────────────────────────────── */ .crs-why{ display:grid;grid-template-columns:5fr 6fr;gap:56px; align-items:center;margin-top:8px; } .crs-why__shot{ border-radius:var(--radius-gallery);overflow:hidden; aspect-ratio:4/5;background:var(--cream-dark); } .crs-why__shot img{width:100%;height:100%;object-fit:cover;display:block} .crs-why__beat{ padding:24px 0;margin:0;border-top:1px solid var(--border-color); font-family:var(--font-sans);font-weight:300; font-size:14.5px;line-height:1.78;color:var(--text); } .crs-why__beat:first-child{border-top:0;padding-top:0} .crs-why__beat:last-child{padding-bottom:0} /* ── 8. THE CERTIFICATE — quiet centred statement ────────────── Honesty constraint binds the LOOK: no seal, no badge, no border ornament, nothing that reads as a diploma. Air and type only. */ .crs-cert .text-section{max-width:680px;text-align:center} /* .crs-cert__lead exists as the class the site-wide balance list can name (the label is also a, so :first-of-type cannot isolate the lead) */ .crs-cert .text-section p{ font-family:var(--font-serif);font-weight:400; font-size:clamp(19px,2.1vw,22px);line-height:1.6;color:var(--navy); } .crs-cert .text-section p + p{ font-family:var(--font-sans);font-weight:300; font-size:14.5px;line-height:1.78;color:var(--text-light);margin-top:18px; } /* ── 9. THE PILE — .fstack / .fcard ───────────────────────────── Lifted from 04-WORKSHOP/parked/the-pile/pile-lab.html (component CSS between the banner comments, NOT the lab chrome). Mechanism + the three cannot-drift rules: that folder's README. Auto mode dropped — lab chrome. z pins 20/1 over a 10−d ladder live inside .crs-pile's own stacking context (its .reveal transform/filter isolates them from the nav's 1000 and the sticky bar). */ .crs-pile{max-width:555px;margin:56px auto 0} .fstack{ --f-offset: 18px; /* how far each card behind peeks ABOVE the front */ --f-scale: 0.045; /* how much narrower each card behind gets */ --f-dim: 0.06; /* how much darker each card behind gets (veil per depth) */ position:relative; width:100%; /* headroom for the three peeking edges — without it the pile is clipped by whatever sits above the section */ padding-top:calc(3 * var(--f-offset)); } .fstack__deck{ position:relative; list-style:none;margin:0;padding:0; width:100%; aspect-ratio:1/1; -webkit-tap-highlight-color:transparent; user-select:none; } /* The card is a plain transform shell — no overflow, no clipping — so its outer shadows (on ::before/::after) are never cut off. The photo, rim and veil live one level down in .fcard__ph. */ .fcard{ position:absolute;inset:0; margin:0; border-radius:22px; transform-origin:center top; transform: translate3d(0, calc(var(--d, 0) * -1 * var(--f-offset)), 0) scale(calc(1 - var(--d, 0) * var(--f-scale))); z-index:calc(10 - var(--d, 0)); /* transform ONLY — everything else that moves is opacity on a pseudo */ transition:transform 620ms var(--ease-fluid); touch-action:pan-y; /* a finger can still scroll the page vertically */ cursor:grab; } @media (hover:hover) and (pointer:fine){ .fcard{touch-action:none} /* mouse drags freely */ } /* FRONT depth stack (contact + mid + ambient — never collapse to one blur) and the flat single layer for cards behind. Both are STATIC shadows; only their opacity animates, so nothing repaints per frame. */ .fcard::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 16px rgba(17,24,39,.06), 0 16px 40px rgba(27,40,56,.08); opacity:clamp(0, 1 - var(--d, 0), 1); transition:opacity 620ms var(--ease-fluid); } .fcard::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:0 6px 14px rgba(27,40,56,.07); opacity:clamp(0, var(--d, 0), 1); transition:opacity 620ms var(--ease-fluid); } .fcard__ph{ position:absolute;inset:0; overflow:hidden;border-radius:inherit; background:var(--cream-dark); } .fcard__ph img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 20%; user-select:none;-webkit-user-drag:none; -webkit-touch-callout:none; /* iOS long-press save-sheet would kill a slow drag */ } /* depth dim — a navy veil whose opacity tracks depth. Replaces a brightness() filter so transform+opacity are the only animated props. */ .fcard__ph::before{ content:'';position:absolute;inset:0; background:var(--navy); opacity:calc(var(--d, 0) * var(--f-dim)); transition:opacity 620ms var(--ease-fluid); } /* the house rim, simple inset form — no mask-composite ring over a raster */ .fcard__ph::after{ content:'';position:absolute;inset:0;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(196,162,101,.34); } /* ---- the stacking flip --------------------------------------- z-index can't tween, but a keyframe can STEP it mid-flight. The transform travel itself is the normal --d transition; these animations own z-index alone, for exactly one move. Crossover at 12%: with --ease-fluid ~half the DISTANCE is covered by then — the least visible moment to swap stacking. */ @keyframes fcard-tuck{ /* Next: front → rear, over the top */ 0% {z-index:20;animation-timing-function:step-end} 12%,100% {z-index:1} } @keyframes fcard-untuck{ /* Back: rear → front, the exact mirror */ 0% {z-index:1;animation-timing-function:step-end} 12%,100% {z-index:20} } .fcard--tuck{animation:fcard-tuck 620ms linear both} .fcard--untuck{animation:fcard-untuck 620ms linear both} /* while a finger/mouse holds the card, it tracks 1:1 — no transition lag */ .fcard--grab{transition:none;cursor:grabbing} /* first paint: place the deck without animating into place */ .fdeck--frozen .fcard, .fdeck--frozen .fcard::before, .fdeck--frozen .fcard::after, .fdeck--frozen .fcard__ph::before{transition:none} /* ---- pile controls — house form (cf-arrow register) ---------- Back/Next are NEW pressable controls: §11 pair via main.js roster (PRESSABLE + HAPTIC_FOR — Mother's token). position:relative is the .haptic-tick host requirement. */ .fstack-ctl{ display:flex;gap:18px;align-items:center;justify-content:center; margin-top:30px; } .fstack-ctl__btn{ position:relative; display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:999px; border:1px solid rgba(196,162,101,.5); background:transparent;color:var(--navy);cursor:pointer; transition:background 300ms var(--ease-soft), transform 340ms var(--ease-soft), box-shadow 340ms var(--ease-soft); } @media (hover:hover){ .fstack-ctl__btn:hover{background:rgba(196,162,101,.12)} } /* press: overrides duration + state only, never the transition list */ .fstack-ctl__btn.is-pressed, .fstack-ctl__btn:active{transform:scale(.94);transition-duration:90ms} .fstack-ctl__count{ font-family:var(--font-sans);font-weight:500;font-size:12px;line-height:1; letter-spacing:.08em;color:var(--text-light); min-width:52px;text-align:center;margin:0; } /* ---- reduced motion — closes the COMPONENTS layer (pile + looks hover); MUST STAY BELOW every rule it silences (equal specificity, source order decides), and only the phone layer may follow it ---- */ @media (prefers-reduced-motion:reduce){ .fcard, .fcard::before, .fcard::after, .fcard__ph::before{transition:none} .fcard--tuck, .fcard--untuck{animation:none} .crs-looks__frame img{transition:none} } /* ── 10. PHONE LAYER (≤767) — STAYS LAST IN THIS FILE ──────── */ @media (max-width:767px){ /* 🅲 centre-anchor: page-owned components carry their own centring (the s72 layer names legacy classes only). .inc-* cards stay LEFT — Oleg's standing exception. */ .crs-led{margin-top:36px} .crs-led__row{ grid-template-columns:1fr;justify-items:center;gap:4px; padding:20px 0;text-align:center; } .crs-cur__item{text-align:center} .crs-list__item{text-align:center} .crs-why{grid-template-columns:1fr;gap:32px;margin-top:0} .crs-why__beat{text-align:center} .crs-why__beat:first-child{padding-top:2px} /* the Five Looks become a native x-snap swipe row — pattern F, no JS, next frame deliberately peeking (78vw card in a 100vw window) */ .crs-looks{ display:flex;gap:16px;margin-top:40px; overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 24px 10px; scrollbar-width:none; } .crs-looks::-webkit-scrollbar{display:none} .crs-looks__item{ flex:0 0 78vw;max-width:340px; scroll-snap-align:center;text-align:center; } /* a clipped row cannot be observed per item — offscreen cards would enter already-scrolled and fade in like a defect. Items render visible; the section's own label/title carry the entrance. (0,2,0) ties the base and wins on source order — course.css loads after styles.css. */ .crs-looks > .reveal{opacity:1;transform:none;filter:none;transition:none} /* stagger ladders die where the band stacks (D001/s49) — plain selectors only, a :not(.revealed) delay is inert (LAWS ㉙) */ .crs-led.reveal-stagger > .reveal{transition-delay:0ms} /* pile: shallower depth read at phone width (component's own retune) */ .fstack{--f-offset:12px;--f-scale:.035} .fcard{border-radius:18px} .crs-pile{margin-top:40px} }