/* == projects/lorraine/src/css/tokens.css == */
/* Lorraine — tokens. Paper ground so the photographs carry the colour; Gambetta says, Switzer reads; one teal on the action. */
@font-face { font-family: "Gambetta"; src: url("../assets/fonts/gambetta.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gambetta"; src: url("../assets/fonts/gambetta-italic.woff2") format("woff2-variations"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  --bg: #f7f5f1;            /* paper */
  --panel: #ebe8e2;         /* one step down: rows, fields, the questions' field */
  --ink: #151412;
  --muted: #5d5a54;
  --line: rgb(21 20 18 / 0.08);
  --accent: #256f82;        /* the one tint: the action, focus, the golden-hour band */
  --accent-strong: #1b5868;
  --accent-ink: #ffffff;
  --accent-soft: #d9e7eb;
  --dark: #151412;          /* the dark chapter: the wedding sequence, the ending */
  --dark-ink: #f3f1ec;
  --dark-muted: #b4b0a8;
  --scrim: rgb(0 0 0 / 0.3);
  --scrim-deep: rgb(0 0 0 / 0.55);
  --picture-ground: #8a7f72;

  --font: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Gambetta", "Iowan Old Style", Georgia, serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);     /* 13–14 */
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);         /* 17–18 */
  --step-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);        /* 20–26 */
  --step-head: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);              /* 32–56 */
  --step-display: clamp(3.5rem, 1.5rem + 9.5vw, 11rem);          /* the name on the seam: 56–176 */

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --gap: clamp(0.75rem, 1.2vw, 1.25rem);
  --max: 1440px;
  --section: clamp(4.5rem, 3rem + 6vw, 10rem);
  --inside: clamp(1.5rem, 1rem + 2vw, 3rem);
  --bar-h: 4rem;

  --r-img: 6px; --r-card: 16px; --r-pill: 999px;
  --shadow: 0 12px 36px rgb(21 20 18 / 0.14), 0 1px 2px rgb(21 20 18 / 0.08);
  --shadow-bar: 0 1px 0 rgb(21 20 18 / 0.06), 0 6px 20px rgb(21 20 18 / 0.06);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms; --t-reveal: 700ms; --t-open: 1100ms;
  --stagger: 60ms;
}


/* == projects/lorraine/src/css/base.css == */
/* Base: reset, type roles, controls, and the browser's own surfaces. */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #b9b5ac var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body) / 1.5 var(--font); font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; accent-color: var(--accent); caret-color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #b9b5ac; border: 3px solid var(--bg); border-radius: 8px; }

img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, figcaption, address, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: currentColor; } }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.8em; }
time, .num { font-variant-numeric: tabular-nums; }
[data-section], #end { scroll-margin-top: var(--bar-h); }

/* type roles: five sizes, two faces with jobs that never swap */
.display { font-family: var(--font-display); font-size: var(--step-display); font-weight: 400; line-height: 0.92; letter-spacing: -0.03em; text-wrap: balance; hyphens: none; }
.head { font-family: var(--font-display); font-size: var(--step-head); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; hyphens: none; max-width: 18ch; }
.lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.012em; max-width: 36ch; text-wrap: pretty; font-weight: 400; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
.name { font-family: var(--font-display); font-size: var(--step-lead); font-weight: 400; letter-spacing: -0.012em; line-height: 1.15; }
.caption { font-family: var(--font-display); font-style: italic; font-size: var(--step-body); letter-spacing: 0; }

/* frame */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: var(--gutter); top: 0.5rem; z-index: 60; padding: 0.6em 1em; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); transform: translateY(-200%); }
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* chapters */
.chapter--dark { background: var(--dark); color: var(--dark-ink); --muted: var(--dark-muted); --panel: #24221f; --line: rgb(243 241 236 / 0.1); color-scheme: dark; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 3rem; padding: 0 1.5em; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--accent-strong); } }
.btn--quiet { background: var(--panel); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--quiet:hover { background: #e1ddd5; } }
.btn--light { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: var(--panel); } }
.btn--ghost { background: rgb(255 255 255 / 0.16); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: rgb(255 255 255 / 0.28); } }
.chip { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.25rem; padding: 0 1em 0 0.6em; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.92); color: var(--ink); font-size: var(--step-small); font-weight: 500; white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }
.arrow { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--panel); color: var(--ink); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), opacity var(--t-hover) ease; }
.arrow:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .arrow:hover { background: #e1ddd5; } }
.arrow[disabled] { opacity: 0.35; cursor: default; }
.chapter--dark .arrow { color: var(--dark-ink); }
@media (hover: hover) and (pointer: fine) { .chapter--dark .arrow:hover { background: #33302c; } }

.input { display: block; width: 100%; min-height: 3.25rem; padding: 0.75em 1em; background: var(--panel); color: var(--ink); border: 0; border-radius: 10px; appearance: none; -webkit-appearance: none; }
.input:focus-visible { outline-offset: 0; }
textarea.input { min-height: 7rem; resize: vertical; }
select.input { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d5a54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 0.9em center; padding-right: 2.6em; }
input[type="date"].input::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
.field { display: grid; gap: 0.35rem; }
.field > span { font-size: var(--step-small); font-weight: 500; }

/* the feed tile, wherever a feed appears */
.tile { position: relative; display: block; border-radius: var(--r-img); overflow: clip; background: var(--picture-ground); color: #fff; text-decoration: none; aspect-ratio: 4 / 5; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 360ms var(--ease-soft); }
.tile__meta { position: absolute; inset: auto 0 0 0; padding: 0.9rem 1rem; display: grid; gap: 0.2rem; background: var(--scrim-deep); font-size: var(--step-small); opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 300ms var(--ease-out); }
.tile__meta span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.tile__meta span:last-child { font-weight: 500; }
.tile__kind { position: absolute; top: 0.7rem; right: 0.7rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: rgb(0 0 0 / 0.35); border-radius: 50%; }
.tile__kind .icon { width: 0.9rem; height: 0.9rem; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover img { transform: scale(1.03); }
  .tile:hover .tile__meta, .tile:focus-visible .tile__meta { opacity: 1; transform: none; }
}
@media (hover: none), (prefers-reduced-motion: reduce) { .tile__meta { opacity: 1; transform: none; padding: 0.6rem 0.75rem; background: var(--scrim); } .tile__meta span:first-child { -webkit-line-clamp: 1; } .tile__meta span:last-child { display: none; } }
.tile:focus-visible { outline-offset: 3px; }
.tile:focus-visible .tile__meta { opacity: 1; transform: none; }

.tile--wait { background: var(--panel); }
.feed-off .tile--wait { display: none; }

/* the live dot beside a feed heading */
.live { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 500; text-decoration: none; }
.live::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent); }

/* the sun arc, at three sizes */
.sun { display: grid; gap: 0.4rem; }
.sun svg { width: 100%; height: auto; overflow: visible; }
.sun__horizon { stroke: currentColor; stroke-width: 1.5; opacity: 0.35; }
.sun__arc { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.35; }
.sun__band { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: butt; }
.sun__dot { fill: currentColor; transition: cx 600ms var(--ease-out), cy 600ms var(--ease-out); }
.sun__dot.is-set { fill: var(--muted); }
.sun--chip { display: inline-flex; align-items: center; gap: 0.5em; }
.sun--chip svg { width: 1.9em; height: 1.1em; }
.sun--chip .sun__band { stroke-width: 10; }


/* == projects/lorraine/src/css/bar.css == */
/* The bar: light type over the seam; once the page scrolls it turns paper and gains its shadow. */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar-h); color: #fff; background: transparent; transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.bar__inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap); }
.bar__mark { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; text-decoration: none; font-size: var(--step-lead); justify-self: start; }
.bar__links { display: flex; gap: 1.6rem; justify-self: center; }
.bar__links a { text-decoration-color: transparent; font-weight: 500; font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) { .bar__links a:hover { text-decoration-color: currentColor; } }
.bar__right { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.bar__sun { font-size: var(--step-small); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5em; }
.bar__cta { min-height: 2.5rem; padding-inline: 1.2em; font-size: var(--step-small); }
.bar:not(.is-scrolled) .bar__cta { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .bar:not(.is-scrolled) .bar__cta:hover { background: var(--panel); } }
.bar.is-scrolled { background: rgb(247 245 241 / 0.94); color: var(--ink); box-shadow: var(--shadow-bar); backdrop-filter: saturate(1.2) blur(10px); } /* taste-skill-ignore: the one fixed bar */
.bar.is-scrolled[data-over="dark"] { background: rgb(21 20 18 / 0.9); color: var(--dark-ink); }
@media (max-width: 900px) {
  .bar__inner { grid-template-columns: 1fr auto; }
  .bar__links, .bar__sun { display: none; }
}


/* == projects/lorraine/src/css/sections/hero.css == */
/* The seam: two panes, the latest portrait and the latest wedding, her name across the join. Held for two screens. */
[data-section="hero"] { position: relative; height: 100svh; color: #fff; background: var(--picture-ground); }
.seam__stage { position: relative; height: 100svh; overflow: clip; display: grid; grid-template-columns: 1fr 1fr; }
.seam__pane { position: relative; margin: 0; overflow: clip; background: var(--picture-ground); }
.seam__pane img { position: absolute; inset: -12svh 0; width: 100%; height: calc(100% + 24svh); object-fit: cover; object-position: 50% 40%; }
.seam__pane::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.seam__cap { position: absolute; left: var(--gutter); bottom: 1.5rem; z-index: 2; color: rgb(255 255 255 / 0.92); }
.seam__pane--r .seam__cap { left: auto; right: var(--gutter); }
.seam__cap .live::before { background: #fff; }

.seam__content { position: absolute; inset: 0; z-index: 3; display: grid; justify-items: center; align-content: center; text-align: center; gap: clamp(0.9rem, 2vh, 1.4rem); padding: calc(var(--bar-h) + 2vh) var(--gutter) 2vh; pointer-events: none; }
.seam__content > * { pointer-events: auto; }
.seam__sub { display: grid; justify-items: center; gap: clamp(0.9rem, 2vh, 1.4rem); }
.seam__name { position: relative; display: block; white-space: nowrap; margin-bottom: 0.4rem; }
.seam__half--l { display: block; clip-path: inset(0 50% 0 0); }
.seam__name::after { content: attr(data-name); position: absolute; inset: 0; display: block; clip-path: inset(0 0 0 50%); }
.seam__line { color: rgb(255 255 255 / 0.94); max-width: 30ch; }
.seam__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.seam__content .chip { margin-top: 0.4rem; }

/* the opposing travel as the first screen leaves: left pane and left half up, right pane and right half down, locked to the scrollbar */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-section="hero"] { view-timeline-name: --seam; }
    .seam__pane--l img { animation: paneUp linear both; animation-timeline: --seam; animation-range: exit 0% exit 100%; }
    .seam__pane--r img { animation: paneDown linear both; animation-timeline: --seam; animation-range: exit 0% exit 100%; }
    .seam__half--l { animation: halfUp linear both; animation-timeline: --seam; animation-range: exit 0% exit 100%; }
    .seam__name::after { animation: halfDown linear both; animation-timeline: --seam; animation-range: exit 0% exit 100%; }
    .seam__sub, .seam__cap { animation: fadeAway linear both; animation-timeline: --seam; animation-range: exit 0% exit 35%; }
  }
}
@keyframes paneUp { to { transform: translateY(-12svh); } }
@keyframes paneDown { to { transform: translateY(12svh); } }
@keyframes halfUp { to { transform: translateY(-28svh); } }
@keyframes halfDown { to { transform: translateY(28svh); } }
@keyframes fadeAway { from { opacity: 1; } to { opacity: 0; } }
/* the phone rests: the halves stay whole */
@media (max-width: 900px) { .seam__pane--l img, .seam__pane--r img, .seam__half--l, .seam__name::after, .seam__sub, .seam__cap { animation: none !important; } }

@media (max-width: 900px) {
  .seam__content { align-content: end; padding-bottom: 5.5rem; gap: 0.8rem; }
  .seam__name { font-size: clamp(3.25rem, 17vw, 5rem); }
  .seam__line { font-size: 1.125rem; max-width: 26ch; }
  .seam__actions { flex-direction: column; width: 100%; max-width: 22rem; }
  .seam__actions .btn { width: 100%; }
  .seam__cap { bottom: 1rem; left: 1rem; font-size: 0.8125rem; }
  .seam__pane--r .seam__cap { right: 1rem; }
  .seam__pane img { object-position: 50% 30%; }
}


/* == projects/lorraine/src/css/sections/portraits.css == */
/* Portraits: the feed as a grid, newest first; four across, two on a phone. */
[data-section="portraits"] { padding-block: var(--section) calc(var(--section) * 0.6); }
.portraits__head { display: flex; justify-content: space-between; align-items: end; gap: var(--inside); margin-bottom: var(--inside); }
.portraits__head .lead { margin-top: 0.8rem; }
.portraits__follow { flex: none; padding-bottom: 0.3rem; }
.portraits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.portraits__note { margin-top: 1rem; }
@media (max-width: 900px) {
  .portraits__head { flex-direction: column; align-items: start; gap: 1rem; }
  .portraits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
}


/* == projects/lorraine/src/css/sections/sessions.css == */
/* Sessions: three rows on the left; the day's sun on the right, drawn large. */
[data-section="sessions"] { padding-block: calc(var(--section) * 0.6) var(--section); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--section) var(--inside); align-items: start; }
.sessions__list { margin-block: var(--inside); }
.session { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; gap: 1.5rem; padding-block: 1.1rem; align-items: baseline; }
.session + .session { margin-top: 0.9rem; }
.session p { max-width: 48ch; }
.session__price { font-family: var(--font-display); font-size: var(--step-lead); text-align: right; white-space: nowrap; }
.sessions__cta { margin-top: 1.25rem; }
.sessions__sun { position: sticky; top: calc(var(--bar-h) + 2rem); background: var(--panel); border-radius: var(--r-card); padding: var(--inside); display: grid; gap: 0.6rem; }
.sessions__sun .sun { margin-block: 0.5rem; }
.sessions__today { font-size: clamp(3.5rem, 2rem + 6vw, 7rem); line-height: 1; }
.sessions__sun .lead { max-width: 24ch; }
@media (max-width: 900px) {
  [data-section="sessions"] { grid-template-columns: 1fr; gap: var(--inside); }
  .session { grid-template-columns: 1fr auto; }
  .session p:not(.session__price) { grid-column: 1 / -1; }
  .sessions__sun { position: static; }
}


/* == projects/lorraine/src/css/sections/weddings.css == */
/* Weddings: the dark chapter. Three full-screen pictures turn like pages, then the feed as a row. */
[data-section="weddings"] { padding-top: var(--section); }
.weddings__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--inside); align-items: end; padding-bottom: var(--inside); }

.pages { position: relative; }
.page { position: sticky; top: 0; height: 100svh; margin: 0; overflow: clip; background: var(--picture-ground); }
.page a { display: block; height: 100%; }
.page img { width: 100%; height: 100%; object-fit: cover; }
.pages:empty + .weddings__feed { padding-top: 0; }
.weddings__feed:has(.row.feed-off) .weddings__arrows { display: none; }
.page__cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.5rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: #fff; }
.page__cap::before { content: ""; position: absolute; inset: -7rem calc(-1 * var(--gutter)) -1.5rem; background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0)); z-index: -1; } /* taste-skill-ignore: the neutral scrim under a caption on a photograph */
.page__cap .caption { font-size: var(--step-body); max-width: 44ch; }

.weddings__feed { padding-block: var(--section); }
.weddings__row-head { display: grid; grid-template-columns: auto auto 1fr auto; gap: 1.5rem; align-items: center; margin-bottom: var(--gap); }
.weddings__row-head .live { padding-top: 0.2rem; }
.weddings__arrows { grid-column: 4; }
.weddings__arrows { display: flex; gap: 0.5rem; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.25rem; }
.row::-webkit-scrollbar { display: none; }
.row > li { scroll-snap-align: start; }
.weddings__cta { margin-top: var(--inside); }
@media (max-width: 900px) {
  .weddings__head { grid-template-columns: 1fr; }
  .page { height: 88svh; }
  .page__cap { flex-direction: column; gap: 0.3rem; bottom: 1.1rem; }
  .page__cap .caption { font-size: var(--step-body); }
  .weddings__row-head { grid-template-columns: 1fr; gap: 0.5rem; }
  .weddings__arrows { display: none; }
  .row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 0.5rem; overflow: visible; scroll-snap-type: none; }
}
@media (prefers-reduced-motion: reduce) { .page { position: relative; } }


/* == projects/lorraine/src/css/sections/day.css == */
/* The day: a timetable at one size, times in the display face, organised by column starts and leading alone. */
[data-section="day"] { padding-block: var(--section); }
[data-section="day"] .lead { margin-top: 0.8rem; margin-bottom: var(--inside); }
.day__table { display: grid; gap: 0; }
.day__row { display: grid; grid-template-columns: minmax(0, 14%) minmax(0, 36%) minmax(0, 1fr); gap: 1.5rem; padding-block: 1.1rem; align-items: baseline; font-size: var(--step-lead); line-height: 1.3; }
.day__row time { font-family: var(--font-display); }
.day__row span:last-child { font-size: var(--step-body); line-height: 1.45; max-width: 52ch; }
.day__row + .day__row { margin-top: 0.35rem; }
@media (max-width: 900px) {
  .day__row { grid-template-columns: 4.5rem 1fr; gap: 0.3rem 1rem; font-size: var(--step-body); }
  .day__row span:last-child { grid-column: 2; font-size: var(--step-small); }
}


/* == projects/lorraine/src/css/sections/collections.css == */
/* Collections: the prices as giant figures in the display face; the text beneath each; no boxes. */
[data-section="collections"] { padding-block: 0 var(--section); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--inside); align-items: start; }
.collections__text { position: sticky; top: calc(var(--bar-h) + 2rem); display: grid; gap: 1rem; justify-items: start; }
.collections__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--inside); }
.collection { display: grid; gap: 0.6rem; align-content: start; padding-top: 1rem; border-top: 3px solid var(--ink); }
.collections__cta--after { display: none; }
.collection__price { font-size: clamp(2.75rem, 1.5rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.03em; }
.collection p:last-child { font-size: var(--step-body); }
@media (max-width: 900px) {
  [data-section="collections"] { grid-template-columns: 1fr; }
  .collections__text { position: static; }
  .collections__text .collections__cta { display: none; }
  .collections__cta--after { display: inline-flex; justify-self: start; }
  .collections__list { grid-template-columns: 1fr; gap: 1.5rem; }
  .collection { grid-template-columns: auto 1fr; column-gap: 1.25rem; }
  .collection__price { grid-row: span 2; font-size: 2.5rem; }
}


/* == projects/lorraine/src/css/sections/about.css == */
/* About: her words on the left; three real pictures of York on the right at three heights. */
[data-section="about"] { padding-block: var(--section); background: var(--panel); }
.about__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--section) var(--inside); align-items: start; }
.about__text { display: grid; gap: 1rem; position: sticky; top: calc(var(--bar-h) + 2rem); }
.about__text .lead { max-width: 30ch; }
.about__links { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.about__pictures { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--gap); align-items: start; }
.about__pic { display: grid; gap: 0.5rem; }
.about__pic img { width: 100%; height: auto; border-radius: var(--r-img); background: var(--picture-ground); }
.about__pic--tall { grid-column: 1 / 8; grid-row: 1 / 3; }
.about__pic--window { grid-column: 8 / 13; grid-row: 1; margin-top: 18%; }
.about__pic--map { grid-column: 9 / 13; grid-row: 2; }
.about__pic--map img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 900px) {
  .about__inner { grid-template-columns: 1fr; gap: var(--inside); }
  .about__text { position: static; }
  .about__pic--tall { grid-column: 1 / -1; grid-row: auto; }
  .about__pic--window { grid-column: 1 / 8; grid-row: auto; margin-top: 0; }
  .about__pic--map { grid-column: 8 / -1; grid-row: auto; align-self: end; }
}


/* == projects/lorraine/src/css/sections/questions.css == */
/* Questions beside a tall photograph: facts first, then the questions with space between, a square picture overlapping the tall one. */
[data-section="questions"] { padding-block: var(--section) 0; overflow: clip; }
.questions__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--inside); align-items: start; }
.questions__facts { display: grid; gap: 0.8rem; margin: var(--inside) 0; max-width: 32ch; }
.questions__list { display: grid; gap: 0.25rem; margin-bottom: var(--inside); }
.q summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 0; font-size: var(--step-lead); line-height: 1.3; cursor: pointer; list-style: none; letter-spacing: -0.01em; }
.q summary::-webkit-details-marker { display: none; }
.q summary .icon { transition: transform var(--t-ui) var(--ease-out); }
.q[open] summary .icon { transform: rotate(180deg); }
.q p { padding-bottom: 1rem; max-width: 48ch; }
.questions__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-bottom: var(--section); }
.questions__pictures { position: relative; align-self: stretch; margin-top: calc(-1 * var(--section)); padding-bottom: 5rem; }
.questions__tall { width: 100%; height: 100%; min-height: 60svh; object-fit: cover; border-radius: 0 0 var(--r-img) var(--r-img); background: var(--picture-ground); }
.questions__square { position: absolute; left: -2.5rem; bottom: 1rem; width: 34%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-img); background: var(--picture-ground); }
@media (max-width: 900px) {
  .questions__inner { grid-template-columns: 1fr; }
  .questions__pictures { order: -1; margin-top: calc(-1 * var(--section)); margin-inline: calc(-1 * var(--gutter)); padding-bottom: 0; }
  .questions__tall { aspect-ratio: 4 / 5; min-height: 0; border-radius: 0; }
  .questions__square { left: auto; right: var(--gutter); bottom: -2rem; width: 38%; }
  .questions__text { padding-top: 3rem; }
  .questions__facts { font-size: var(--step-body); }
  .q summary { font-size: var(--step-body); min-height: 44px; }
  .questions__actions { padding-bottom: var(--inside); }
}


/* == projects/lorraine/src/css/sections/enquire.css == */
/* Enquire: the dark field; the words on the left, the paper card on the right. */
[data-section="enquire"] { padding-block: var(--section); }
.enquire__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--section) var(--inside); align-items: start; }
.enquire__text { display: grid; gap: 1.25rem; position: sticky; top: calc(var(--bar-h) + 2rem); }
.enquire__text .lead { max-width: 30ch; }
.enquire__facts { display: grid; gap: 0.6rem; max-width: 44ch; font-size: var(--step-body); }
.enquire__facts li { padding-left: 1.1em; position: relative; }
.enquire__facts li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--accent); }
.card { display: grid; gap: 0.9rem; padding: 1.75rem; border-radius: var(--r-card); background: var(--bg); color: var(--ink); --panel: #ebe8e2; --muted: #5d5a54; color-scheme: light; }
.card__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.card__send { width: 100%; min-height: 3.25rem; margin-top: 0.25rem; }
.card__note { text-align: center; }
@media (max-width: 900px) {
  .enquire__inner { grid-template-columns: 1fr; gap: var(--inside); }
  .enquire__text { position: static; }
  .card { padding: 1.25rem; }
  .card__two { grid-template-columns: 1fr; }
}


/* == projects/lorraine/src/css/foot.css == */
/* The ending: the invitation, the links, the name larger than the screen and cut by its edge. */
.end { position: relative; overflow: clip; padding-top: var(--section); }
.end__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--inside); align-items: start; }
.end__invite { display: grid; gap: 1.5rem; justify-items: start; }
.end__line { font-size: clamp(2.5rem, 1.5rem + 5vw, 6rem); max-width: 12ch; }
.end__links { display: grid; gap: 0.6rem; justify-self: end; font-size: var(--step-body); }
.end__links a { text-decoration-color: transparent; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .end__links a:hover { text-decoration-color: currentColor; } }
.end__legal { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; margin-top: var(--inside); }
.end__legal p { max-width: 68ch; }
.end__mark { font-family: var(--font-display); font-size: 29vw; line-height: 0.8; letter-spacing: -0.04em; white-space: nowrap; margin-top: 0.5rem; margin-left: calc(-0.03em); transform: translateY(26%); color: var(--dark-ink); }
@media (max-width: 900px) {
  .end__top { grid-template-columns: 1fr; }
  .end__links { justify-self: start; }
  .end__legal { flex-direction: column; align-items: start; gap: 1rem; margin-top: var(--inside); }
  .end__mark { font-size: 36vw; }
}


/* == projects/lorraine/src/css/motion.css == */
/* Motion (see MOTION.md): the load sequence on the seam, the block reveals, the accordion. Every hidden
   starting state lives inside html.js and no-preference, so a failed script never leaves a blank band. */

/* 1. Load sequence: the panes open from the seam outward; the name, the line, the actions and the chip rise. */
@media (prefers-reduced-motion: no-preference) {
  .js .seam__pane--l { clip-path: inset(0 0 0 100%); animation: openLeft var(--t-open) var(--ease-expo) forwards; }
  .js .seam__pane--r { clip-path: inset(0 100% 0 0); animation: openRight var(--t-open) var(--ease-expo) forwards; }
  .js [data-section="hero"] [data-load] { opacity: 0; transform: translateY(18px); animation: rise 640ms var(--ease-out) forwards; animation-delay: var(--d, 300ms); }
  .js [data-section="hero"] .seam__name[data-load] { transform: translateY(26px); animation-duration: 800ms; animation-timing-function: var(--ease-expo); }
}
@keyframes openLeft { to { clip-path: inset(0 0 0 0); } }
@keyframes openRight { to { clip-path: inset(0 0 0 0); } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* 2. Entrances, locked to the scrollbar and never hidden: the tiles, rows and figures rise 14px as they enter,
   staggered by index; the York pictures open from a 6% mask. Nothing starts at zero opacity, so a capture, a slow
   scroll, a browser without scroll timelines and a reduced-motion visitor all see the full page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { animation: settle linear both; animation-timeline: view(); animation-range: entry calc(0% + min(var(--i, 0), 8) * 3%) entry calc(60% + min(var(--i, 0), 8) * 3%); }
    .about__pic[data-reveal] { animation-name: open; }
  }
}
@keyframes settle { from { transform: translateY(14px); } to { transform: none; } }
@keyframes open { from { clip-path: inset(6%); } to { clip-path: inset(0); } }

/* 3. Accordion */
details.q { interpolate-size: allow-keywords; }
details.q::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-ui) var(--ease-out), content-visibility var(--t-ui) allow-discrete; }
details.q[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { details.q::details-content { transition: none; } }