/* ==========================================================================
   DISCIPLINE — /savoir-faire · « La Manufacture »
   SOMMAIRE
    1. Héros (chapiteau plein dans sa niche)
    2. Les trois piliers
    3. Anatomie d'une pièce (Ludus : photo, repères, vues, coloris)
    4. Du dessin à l'envoi
    5. Les matières (onglets)
    6. L'envoi (colis animé, le mot de la maison)
    7. Le temps long
   ========================================================================== */

/* ---------- 1. HÉROS ---------- */
.s-hero {
  --hero-top: calc(var(--announce-h) + var(--header-h));
  display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 6vh, 72px);
  padding-block: calc(var(--hero-top) + clamp(24px, 6vh, 72px)) clamp(56px, 7vw, 96px);
  background-color: var(--ink);
}
.s-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
@media (min-width: 960px) { .s-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.s-hero__text { display: grid; gap: clamp(16px, 2.2vw, 28px); justify-items: start; }
.s-hero__title { font-size: clamp(2.1875rem, 3.85vw, 3.9375rem); line-height: 0.96; max-width: 18.75em; }
.s-hero__title em { color: var(--gold-light); }
.s-hero__lead { max-width: 36rem; color: rgba(243, 239, 231, 0.86); font-size: clamp(1rem, 0.78rem + 0.47vw, 1.1875rem); }
.s-hero__art { position: relative; display: grid; place-items: center; min-width: 0; }
.s-hero__art::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(86%, 500px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--decor-soft); }   /* disque plein (aplat « pierre ») derrière le chapiteau */
@media (prefers-reduced-motion: no-preference) {
  html.js .s-hero__art::before { animation: s-disc 1400ms var(--ease-in-out) 100ms backwards; }
}
@keyframes s-disc { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(72% at 50% 50%); } }
.s-hero__capital { position: relative; width: min(100%, 640px); aspect-ratio: 195 / 168.1; }   /* réserve la place du décor injecté (pas de décalage) */
.s-hero__capital svg { display: block; width: 100%; height: 100%; }
@media (max-width: 959px) { .s-hero__art::before { width: min(66%, 300px); } .s-hero__art { order: -1; } .s-hero__capital { width: min(78%, 360px); } .s-hero__grid { gap: 8px; } }

/* ---------- 2. LES TROIS PILIERS ---------- */
.s-pillars__grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
@media (min-width: 1000px) { .s-pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s-pillar {
  position: relative; display: flex; flex-direction: column; gap: 18px; min-height: clamp(300px, 26vw, 360px); overflow: hidden; overflow: clip;
  padding: clamp(24px, 2.6vw, 40px); padding-right: clamp(104px, 9vw, 132px); background: color-mix(in srgb, var(--ink) 6%, var(--marble)); border-radius: var(--radius-sm);   /* carte en aplat de pierre, sans filet doré */
  transition: box-shadow var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.s-pillar:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
/* chaque pilier a sa colonne pleine (dorique, ionique, corinthienne) : elle s'élève depuis sa base quand la carte apparaît */
.s-pillar__col { position: absolute; top: clamp(24px, 2.6vw, 36px); bottom: 0; right: clamp(20px, 2.2vw, 32px); aspect-ratio: 195 / 982.7; pointer-events: none; }
.s-pillar__col svg { display: block; width: 100%; height: 100%; }
.s-pillar__head { display: grid; gap: 4px; }
.s-pillar__num { font: 900 2.8125rem/1 var(--font-sans); letter-spacing: var(--brut-track-l); color: var(--accent-line); font-variant-numeric: tabular-nums; }
.s-pillar__name { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: 0.2em; }
.s-pillar__tr { font: 600 1.0625rem/1.3 var(--font-sans); color: var(--accent); }
.s-pillar__pledge { font: 600 clamp(1rem, 0.86rem + 0.55vw, 1.3125rem)/1.4 var(--font-sans); text-wrap: balance; color: var(--fg); }   /* colonne étroite (≈ 160 px vers 1024) : équilibrer, sinon « saison. », « retirons. », « nobles. » restent seuls */

/* ---------- 3. ANATOMIE ---------- */
.s-anatomy { background-color: var(--ink); }
.s-anatomy__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 1000px) {
  .s-anatomy__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); }
  .s-anatomy__stage-wrap { position: sticky; top: calc(var(--header-h) + 32px); }
}
.s-anatomy__stage-wrap { --stage-w: min(100%, 680px); display: grid; gap: 18px; width: var(--stage-w); min-width: 0; }
/* Bureau : la scène collante tient avec sa légende et ses coloris dans la hauteur de l'écran (rien à faire défiler pour changer de coloris) */
@media (min-width: 1000px) { .s-anatomy__stage-wrap { justify-self: center; --stage-w: min(100%, 680px, max(360px, calc((100svh - var(--header-h) - 56px - 110px) * 0.8))); } }
.s-anatomy__stage {
  position: relative; aspect-ratio: 4 / 5; width: 100%; margin-inline: 0; overflow: hidden;
  background: var(--marble);
  box-shadow: 0 0 0 12px var(--decor-soft);   /* socle plein, plus de filet doré */
}
/* La photo (maquette 4:5 de Ludus, détourée sauf la vue de détail) occupe toute la scène : même cadre pour chaque coloris et chaque vue, aucun décalage au changement ; les repères sont des pourcentages de ce cadre. */
.s-anatomy__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.s-anatomy__stage.is-art .s-anatomy__photo { padding: 8% 6%; }   /* repli : illustration SVG de la silhouette, sans repères */
.s-anatomy__stage.is-art .s-anatomy__pins { display: none; }
.s-anatomy__pins { list-style: none; padding: 0; position: absolute; inset: 0; margin: 0; }
.s-anatomy__pins li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.s-anatomy__pins li[hidden] { display: none; }
html:not(.js) .s-anatomy__pins li:not([data-view='dos']) { display: none; }   /* sans script, la scène reste sur la vue de dos : seuls ses repères sont posés */
.s-pin {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  display: grid; place-items: center; color: var(--ink);
  font: 600 0.72rem/1 var(--font-engraved); font-variant-numeric: lining-nums;
}
/* repère plein : disque d'or, anneau de pierre pour la mise en valeur (survol, focus, repère ouvert) ; plus de pulsation en boucle */
.s-pin > span {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 0 var(--marble);
  transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), opacity var(--dur-2);
}
.s-pin:hover > span, .s-pin:focus-visible > span, .s-pin.is-hot > span { transform: scale(1.15); background: var(--gold-light); box-shadow: 0 0 0 5px var(--marble); }
.s-pin[aria-pressed='true'] > span { background: var(--gold-light); transform: scale(1.22); box-shadow: 0 0 0 6px var(--marble), 0 0 0 10px var(--ink); }
.s-pin:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 520px) { .s-pin { font-size: 0.66rem; } .s-pin > span { width: 28px; height: 28px; } }
/* séquence d'entrée : la photo se dévoile de haut en bas, puis les repères se posent un à un (état initial seulement avec JS) */
html.js [data-anatomy]:not(.is-seen) .s-anatomy__photo { clip-path: inset(0 0 100% 0); }
html.js [data-anatomy]:not(.is-seen) .s-pin > span { opacity: 0; }
html.js [data-anatomy] .s-anatomy__photo { transition: clip-path 1300ms var(--ease-in-out); clip-path: inset(0 0 -2px 0); }
html.js [data-anatomy].is-seen .s-pin > span { animation: s-pin-in 640ms var(--ease-out) calc(420ms + var(--pi, 0) * 70ms) backwards; }
@keyframes s-pin-in { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: none; } }
html.no-reveal [data-anatomy] .s-anatomy__photo { clip-path: none !important; }
html.no-reveal [data-anatomy] .s-pin > span { opacity: 1 !important; }

/* Vues (dos, manche, face, détail) : quatre pastilles dans le coin de la scène, lisibles sur le fond clair comme sur la vue de détail (tissu sombre) */
.s-anatomy__views { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; gap: 6px; --fg: var(--ink); --bg: var(--marble); --field-border: #857E73; }
.s-anatomy__views .chip { min-height: 40px; padding: 0 14px; background: rgba(243, 239, 231, 0.9); }
.s-anatomy__views .chip:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 380px) { .s-anatomy__views { top: 8px; right: 8px; gap: 4px; } .s-anatomy__views .chip { padding: 0 10px; letter-spacing: 0.04em; } }   /* les quatre pastilles tiennent dans la scène à 320 px */
.s-anatomy__stage.is-art .s-anatomy__views { display: none; }
/* Légende, coloris, encre : hauteurs fixes (aucun décalage quand le texte ou la photo change) */
.s-anatomy__tools { display: grid; gap: 8px; width: 100%; }
.s-anatomy__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font: 600 0.875rem/1.3 var(--font-sans); color: var(--muted-dark); }
.s-anatomy__caption .engraved { color: var(--marble); }
.s-anatomy__ink { min-height: 1.3em; font: 400 0.9375rem/1.3 var(--font-sans); color: rgba(243, 239, 231, 0.84); }
@media (max-width: 380px) { .s-anatomy__ink { min-height: 2.6em; } }
.s-anatomy .swatch--sm { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.s-anatomy .swatch--sm::before { width: 24px; height: 24px; box-shadow: inset 0 0 0 1px rgba(243, 239, 231, 0.35); }
.s-anatomy .swatch--sm::after { inset: 6px; }
.s-anatomy .swatch--sm[hidden] { display: none; }

.s-details { list-style: none; padding: 0; border-bottom: 1px solid var(--rule); }
.s-detail { border-top: 1px solid var(--rule); }
.s-detail__title { font: inherit; letter-spacing: 0; text-transform: none; }
.s-detail__btn { display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 0; text-align: left; font: 700 clamp(1rem, 0.86rem + 0.4vw, 1.1875rem)/1.25 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--fg); transition: color var(--dur-2); }
.s-detail__btn::after { content: ''; flex: none; margin-left: 4px; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; transition: transform var(--dur-2) var(--ease); }
.s-detail__btn[aria-expanded='true']::after { transform: rotate(135deg); }
.s-detail__btn:hover, .s-detail__btn[aria-expanded='true'], .s-detail.is-hot .s-detail__btn { color: var(--gold-light); }
.s-detail.is-hot .s-detail__n { background: var(--gold); color: var(--ink); }
.s-detail__label { transition: translate var(--dur-3) var(--ease-out); }
.s-detail.is-open .s-detail__label { translate: 6px 0; }
.s-detail__tag { margin-left: auto; font: 600 0.6875rem/1 var(--font-caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); }   /* vue où se trouve le repère : Dos, Manche, Face ou Détail */
.s-detail__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--decor-soft); color: var(--gold-light); font: 600 0.68rem/1 var(--font-engraved); transition: background-color var(--dur-2), color var(--dur-2); }
.s-detail__btn[aria-expanded='true'] .s-detail__n { background: var(--gold); color: var(--ink); }
.s-detail__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-3) var(--ease); }
.s-detail__inner { min-height: 0; overflow: hidden; padding-left: 48px; }
.s-detail__inner > p { padding-bottom: 20px; transition: opacity var(--dur-3) var(--ease), translate var(--dur-3) var(--ease-out); color: rgba(243, 239, 231, 0.84); max-width: 32rem; }
.s-details.is-enhanced .s-detail__body { grid-template-rows: 0fr; }
.s-details.is-enhanced .s-detail:not(.is-open) .s-detail__inner > p { opacity: 0; translate: 0 8px; }
.s-details.is-enhanced .s-detail.is-open .s-detail__body { grid-template-rows: 1fr; }
.s-details.is-enhanced .s-detail__body { visibility: hidden; transition: grid-template-rows var(--dur-3) var(--ease), visibility 0s linear var(--dur-3); }
.s-details.is-enhanced .s-detail.is-open .s-detail__body { visibility: visible; transition: grid-template-rows var(--dur-3) var(--ease), visibility 0s; }

/* ---------- 4. DU DESSIN À L'ÉCRIN ---------- */
.s-steps__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 1000px) {
  .s-steps__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
  .s-steps__aside-in { position: sticky; top: calc(var(--header-h) + 48px); }
}
.s-steps__list { list-style: none; padding: 0; position: relative; --p: 0; }
.s-steps__list::before, .s-steps__list::after { content: ''; position: absolute; left: 25px; top: 28px; bottom: 28px; width: 6px; border-radius: 3px; }
.s-steps__list::before { background: var(--decor-soft); }
/* poutre pleine qui se remplit avec le défilement (transform seulement) */
.s-steps__list::after { background: var(--decor); transform: scaleY(var(--p)); transform-origin: top center; }
.s-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: clamp(20px, 3vw, 40px); padding-block: 20px; }
.s-step__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--rule-strong); font: 900 1.0625rem/1 var(--font-sans); letter-spacing: 0.02em; color: var(--fg-muted); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-3) var(--ease), color var(--dur-3), border-color var(--dur-3), transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.s-step__body { padding-top: 6px; transition: color var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.s-step__title { color: var(--fg-muted); transition: color var(--dur-3) var(--ease); }
.s-step__title { margin-bottom: 12px; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.8rem); letter-spacing: 0.14em; }
.s-step__body p { max-width: 32rem; color: var(--fg-muted); font-size: 1.0625rem; }
.s-step.is-active .s-step__num, .s-step.is-done .s-step__num { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.s-step.is-active .s-step__num { transform: scale(1.12); box-shadow: 0 0 0 6px var(--decor-soft); }
.s-step.is-active .s-step__title { color: var(--fg); }
.s-step.is-active .s-step__body p { color: var(--fg); }
.s-step.is-active .s-step__body { transform: translateX(6px); }
.s-steps:not(.is-enhanced) .s-step__title { color: var(--fg); }

/* ---------- 5. MATIÈRES ---------- */
.s-materials { background-color: var(--ink); }
.s-mat .tabs__list { gap: clamp(22px, 4vw, 56px); }
.s-mat .tabs [role='tab'], .s-mat [role='tab'] { font-size: 0.85rem; }
.s-mat__panel { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) { .s-mat__panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.s-mat__media { justify-self: center; width: min(100%, 250px); padding: 12px; }
@media (min-width: 960px) { .s-mat__media { width: min(100%, 340px); } }
@media (min-width: 960px) { .s-mat__media { justify-self: start; } }
.s-mat__arch { background: var(--marble-2); }
.s-mat__arch > img { object-fit: contain; padding: 14% 8% 6%; }
.s-mat__arch > img.s-mat__photo { padding: 6% 0 0; }   /* photo détourée (Printful) : le détourage a déjà ses marges */
.s-mat__arch.is-failed > img { display: none; }
.s-mat__arch.is-failed::before { content: ''; position: absolute; inset: 22% 18%; background: var(--decor-soft); -webkit-mask: url(/assets/brand/laurel-wreath.svg) center / contain no-repeat; mask: url(/assets/brand/laurel-wreath.svg) center / contain no-repeat; }
.s-mat__title { font: 900 clamp(1.625rem, 0.87rem + 1.86vw, 2.5rem)/1 var(--font-sans); letter-spacing: var(--brut-track-l); text-transform: uppercase; }
.s-mat__title em { color: var(--gold-light); }
.s-mat__list { list-style: none; padding: 0; margin-top: clamp(24px, 3vw, 40px); display: grid; border-top: 1px solid var(--rule); }
.s-mat__list li { position: relative; padding: clamp(16px, 2vw, 24px) 0 clamp(16px, 2vw, 24px) 28px; border-bottom: 1px solid var(--rule); font: 600 clamp(1rem, 0.78rem + 0.47vw, 1.1875rem)/1.4 var(--font-sans); text-wrap: pretty; color: rgba(243, 239, 231, 0.86); }
/* losange centré sur la hauteur d'x de la première ligne (padding du li + 0,76em pour Source Sans à l'interligne 1,4) */
.s-mat__list li::before { content: ''; position: absolute; left: 2px; top: calc(clamp(16px, 2vw, 24px) + 0.76em - 3.5px); width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.s-mat__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(24px, 3vw, 40px); }

/* ---------- 6. L'ÉCRIN ---------- */
/* Le couvercle qui s'ouvre dépasse du colis : contenu ici, sans dépendre du overflow-x de html/body */
.s-ecrin { overflow-x: clip; }
.s-ecrin__grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 1000px) {
  .s-ecrin__text .lead { max-width: 28rem; }
  .s-ecrin__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 112px); }
}
.s-ecrin__visual { display: grid; gap: 32px; justify-items: center; }
.s-box { position: relative; width: min(100%, 540px); aspect-ratio: 1.12 / 1; perspective: 1700px; --box-ease: cubic-bezier(0.3, 0.7, 0.1, 1); }
/* L'envoi en aplats : socle de pierre, colis basalte, fond clair, carte ivoire de la maison (le bordereau et son mot ; aucun filet, aucun dégradé).
   Pas de papier de soie ni de couvercle marqué : Printful expédie dans son emballage d'expédition (docs/PRIX.md, « L'écrin »). */
.s-box__base { position: absolute; inset: 0; padding: 5.5%; background: var(--basalt); border-radius: 3px; box-shadow: 0 0 0 12px var(--decor-soft); }
.s-box__inner { width: 100%; height: 100%; padding: 4%; background: #0b0a08; }
.s-box__tissue { position: relative; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; background: #E7DFCE; }
.s-box__card {
  position: relative; z-index: 1; width: 64%; padding: 7% 6% 6%; display: grid; justify-items: center; gap: 10px; text-align: center; background: #FCFAF4;
  transform: translateY(14%) rotate(-2.5deg); opacity: 0; transition: transform 1.5s var(--box-ease), opacity 700ms var(--box-ease);
}
.s-box__mono { --logo-h: 32px; }
.s-box__sign { --logo-h: 14px; color: var(--ink); }
/* Le couvercle pivote sur son arête arrière : il se soulève, bascule vers le haut puis disparaît ; arête pleine en bas (épaisseur) */
.s-box__lid {
  position: absolute; inset: -3.5%; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--basalt); border-radius: 3px;
  box-shadow: 0 12px 0 #0b0a08; transform-origin: 50% 0;
  transition: translate 700ms var(--box-ease), scale 700ms var(--box-ease), rotate 1100ms var(--box-ease), opacity 350ms linear 0ms;
}
.s-box__lid-frame { position: absolute; inset: 6%; z-index: 0; background: #1b1916; pointer-events: none; }   /* panneau en relief : un ton, pas de filet */
/* États : sans JS, le colis est montré ouvert ; avec JS, fermé tant que la section n'est pas lue */
html.js [data-box]:not(.is-open) .s-box__lid { translate: 0 0; scale: 1; rotate: 1 0 0 0deg; opacity: 1; }
[data-box].is-open .s-box__lid, html:not(.js) .s-box__lid { translate: 0 -5%; scale: 1.03; rotate: 1 0 0 86deg; opacity: 0; pointer-events: none; transition: translate 600ms var(--box-ease), scale 600ms var(--box-ease), rotate 1200ms var(--box-ease) 150ms, opacity 300ms linear 1000ms; }
[data-box].is-open .s-box__card, html:not(.js) .s-box__card { transform: rotate(-2.5deg); opacity: 1; transition-delay: 950ms, 950ms; }
.s-ecrin__toggle { min-width: 220px; }
.s-ecrin__toggle[aria-pressed='true'] { --btn-border: var(--accent-line); }

/* ---------- 7. LE TEMPS LONG ---------- */
.s-time { background-color: var(--ink); overflow: clip; }
.s-time__mono { --logo-w: clamp(280px, 38vw, 560px); position: absolute; right: clamp(16px, 4vw, 64px); top: 6%; color: var(--decor-soft); pointer-events: none; }   /* monogramme en aplat « pierre » qui dérive très lentement avec le défilement */
.s-time > .container { position: relative; z-index: 1; }
.s-time__head { display: grid; gap: var(--space-5); justify-items: start; margin-bottom: clamp(32px, 5vw, 64px); }
/* titre de section (spéc. rôle 2) gardé juste sous le h1 de la page (.s-hero__title) : hiérarchie h1 > sections */
.s-time__head .display-1 { font-size: clamp(2.125rem, 3.75vw, 3.75rem); max-width: 16.5em; }
.s-time__head .display-1 em { color: var(--gold-light); }
.s-time__head .lead { max-width: 38rem; color: rgba(243, 239, 231, 0.86); }
.s-time__beam { display: block; height: 6px; background: var(--decor-soft); }
html.js .s-time__beam[data-reveal='line'] { transition-duration: 0ms, 1600ms, 0ms; }
html.js .s-time__head .display-1 .split__inner { transition-duration: 700ms, 1500ms; }
.s-time__list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .s-time__list { grid-template-columns: repeat(2, 1fr); } }
.s-time__item { display: grid; gap: 14px; align-content: start; justify-items: start; padding: clamp(28px, 3.4vw, 48px) clamp(0px, 2.4vw, 36px) clamp(28px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) {
  .s-time__item { border-bottom: 0; }
  .s-time__item + .s-time__item { padding-left: clamp(20px, 2.6vw, 40px); border-left: 1px solid var(--rule); }
}
.s-time__n { font: 900 2.5rem/1 var(--font-sans); letter-spacing: var(--brut-track-l); color: var(--gold-light); font-variant-numeric: tabular-nums; }
.s-time__item h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); letter-spacing: 0.18em; }
.s-time__link { display: inline-flex; align-items: center; gap: 14px; transition: color var(--dur-2) var(--ease); }
@media (max-width: 900px), (pointer: coarse) { .s-time__link { min-height: 44px; } }
.s-time__link .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-2) var(--ease); }
.s-time__link:hover, .s-time__link:focus-visible { color: var(--gold-light); }
.s-time__link:hover .icon { transform: translateX(6px); }
.s-time__cta { display: grid; gap: 28px; margin-top: clamp(32px, 5vw, 64px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .s-time__cta { grid-template-columns: 1fr auto; align-items: center; } }
.s-time__cta .latin { color: var(--marble); }
@media (max-width: 560px) { .s-time__cta .cluster { flex-direction: column; align-items: stretch; } }

@media (max-width: 699px) { .s-time__mono { --logo-w: 220px; top: 2%; } }
@media (max-width: 899px) {
  .s-time__item { display: flex; align-items: center; gap: 20px; padding-block: 20px; }
  .s-time__n { font-size: 1.6875rem; min-width: 2.4rem; }
}