/* IVORY SEASON — the house look, as one drop-in stylesheet.
   Haute Lumière, October 2026. Codified from the colour art-editions index (the page he named "ivory season" on 14 Oct 2026:
   "I LOVE the shadows, I love the ivory") and from ops.hautelumiere.life, whose stylesheet that index was derived from.
   Use: <link rel="stylesheet" href="ivory-season.css"> and put the fonts/ folder beside it. No build, no dependency.
   Fonts: Cormorant Garamond and Manrope, SIL Open Font License 1.1, self-hosted (latin subset).
   The rules: ivory never white; gold a mark, never a fill; radius zero; hairline rules; shadow only as distance
   (the plate off the sheet); one curve, three durations; nothing moves that the reader did not move. */

@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/CormorantGaramond-400i.woff") format("woff")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/CormorantGaramond-300.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/CormorantGaramond-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/CormorantGaramond-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Manrope-600.woff2") format("woff2")}

/* ---- the tokens ---- */
:root{
  /* the ground: ivory, and the plate's own ivory a shade deeper */
  --paper:#FAF8F3; --paper-2:#F3EFE6;
  /* the ink: pine-black, never black */
  --ink:#0C1E16; --ink-soft:#334A3F; --text-body:#334A3F; --text-muted:#5C7065;
  /* the mark: gold, for rules, underlines, kickers; never a fill */
  --gold:#C5A059; --gold-d:#9A7A3A;
  --rule:#E1E7E2;
  /* the veil: the colour the shadow is made of (pine, as r,g,b), so the shadow is warm, never grey */
  --veil:12, 30, 22;
  --font-serif:"Cormorant Garamond", Georgia, serif;
  --font-sans:"Manrope", system-ui, sans-serif;
  --ease:cubic-bezier(.165,.84,.44,1); --dur-fast:200ms; --dur-base:400ms; --dur-slow:700ms;
  --space-xs:8px; --space-sm:14px; --space-md:22px; --space-lg:34px; --space-xl:52px; --space-2xl:74px;
  --page-pad:clamp(16px, 5cqi, 56px);
  --measure:40rem; --sheet:1180px;
  /* THE shadow: long, low and soft. The plate lifts off the sheet; nothing else casts. */
  --shadow-plate:0 40px 90px -40px rgba(var(--veil), .45);
  --radius:0;
}
/* Ivory after dark: the same room by lamplight (warm umber, never black) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--paper:#3A2E22;--paper-2:#463829;--ink:#F2E3C8;--ink-soft:#DCC9A6;--text-body:#DCC9A6;--text-muted:#C0AB8A;--gold:#D9AE6A;--gold-d:#C79753;--rule:#55432F;--veil:36, 28, 20}
}
:root[data-theme="dark"]{--paper:#3A2E22;--paper-2:#463829;--ink:#F2E3C8;--ink-soft:#DCC9A6;--text-body:#DCC9A6;--text-muted:#C0AB8A;--gold:#D9AE6A;--gold-d:#C79753;--rule:#55432F;--veil:36, 28, 20}

/* ---- the sheet ---- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{container-type:inline-size;margin:0;background:var(--paper);color:var(--text-body);font-family:var(--font-serif);font-size:1.25rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px;text-decoration-color:var(--gold)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{color:var(--ink);text-wrap:balance}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;padding:var(--space-sm) var(--space-md);background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:.8rem}
.skip:focus{left:0}

/* the trellis: the furniture the reader ignores, in Manrope caps */
.wordmark,.eyebrow,.label,.button,.foot,.hnav a,.price{font-family:var(--font-sans);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;line-height:1.5}
.bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-xs) var(--space-md);padding:var(--space-md) var(--page-pad) var(--space-sm);border-bottom:1px solid var(--rule)}
.wordmark{color:var(--ink);margin:0;text-decoration:none}
.hnav{display:flex;flex-wrap:wrap;gap:0 var(--space-md)}
.hnav a{line-height:44px;color:var(--text-muted);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
.hnav a:hover,.hnav a[aria-current="page"]{color:var(--ink)}
.hnav a[aria-current="page"]{border-bottom:1px solid var(--gold)}
.sheet{container-type:inline-size;max-width:var(--sheet);margin:0 auto;padding:0 var(--page-pad) var(--space-2xl)}

/* the words */
.eyebrow{color:var(--gold-d);margin:0}
.display{font-weight:300;font-size:clamp(2.4rem, 9cqi, 4.6rem);line-height:1.04;margin:var(--space-xs) 0 0}
.lede{font-size:1.3rem;max-width:34em;margin-top:var(--space-md)}
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:1em}
.prose h2{font-weight:300;font-size:clamp(1.8rem, 5cqi, 2.6rem);line-height:1.12;margin-top:2em;padding-top:var(--space-md);border-top:1px solid var(--rule)}
.prose h3{font-weight:500;font-size:1.45rem;line-height:1.2}
blockquote,.quote{margin:0;padding-left:var(--space-md);border-left:1px solid var(--gold);font-style:italic;color:var(--ink-soft)}
.care{font-style:italic;color:var(--text-muted)}
.price{color:var(--text-muted);margin-top:var(--space-sm)}

/* the plate: the picture, lifted off the sheet by the one shadow */
.plate{margin:0;box-shadow:var(--shadow-plate);background:var(--paper-2);border-radius:var(--radius)}
.plate img{width:100%;aspect-ratio:4 / 5;object-fit:cover;object-position:50% 0%}   /* bleed from the top: never the top of a head */
.plate.uncut img{aspect-ratio:auto;object-fit:contain}
.plate figcaption{padding:var(--space-sm);font-style:italic;font-size:1rem;color:var(--text-muted);background:var(--paper)}

/* the head: a lead plate beside the title */
.head{display:grid;gap:var(--space-lg);padding:var(--space-xl) 0 var(--space-2xl);border-bottom:1px solid var(--rule)}

/* the band: plate and text side by side, alternating sides down the page (.band, .band.flip, .band, ...).
   One column on a phone, plate first; side by side from 760px of sheet; the plate rests (sticky) while the text reads. */
.band{display:grid;gap:var(--space-lg);padding:var(--space-xl) 0;border-bottom:1px solid var(--rule)}
.band h2{font-weight:300;font-size:clamp(2rem, 6.5cqi, 3.2rem);line-height:1.08;margin:var(--space-xs) 0 var(--space-md)}
.band .plate{max-width:22rem}
.band.wide{grid-template-columns:1fr}
.body{min-width:0}
.body p{margin:0 0 var(--space-sm)}
.body h3{font-weight:400;font-size:1.45rem;line-height:1.2;margin:var(--space-lg) 0 var(--space-xs)}

/* lists of things to take */
.formats{list-style:none;padding:0;margin:var(--space-md) 0;border-top:1px solid var(--rule)}
.formats li{padding:var(--space-sm) 0;border-bottom:1px solid var(--rule)}
.formats b{font-weight:500;color:var(--ink)}
.files a{display:inline-block;min-height:44px;line-height:44px;margin-right:var(--space-md)}

/* the one button: a hairline, never a gold fill */
.actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--space-lg);color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;text-decoration:none;transition:opacity var(--dur-fast) var(--ease)}
.button:hover{opacity:.72}

/* a ruled table */
.ruled{border-collapse:collapse;width:100%;font-size:1rem;line-height:1.4;border-top:1px solid var(--ink)}
.ruled th{font-family:var(--font-sans);font-weight:600;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:var(--space-xs) var(--space-sm) var(--space-xs) 0;border-bottom:1px solid var(--rule)}
.ruled td{padding:var(--space-xs) var(--space-sm) var(--space-xs) 0;border-bottom:1px solid var(--rule);vertical-align:top}

/* the dot, not the badge */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold);vertical-align:middle}

.foot{color:var(--text-muted);padding:var(--space-xl) var(--page-pad);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);justify-content:space-between}
.foot a{color:var(--text-muted)}

@container (min-width: 760px){
  .head{grid-template-columns:5fr 7fr;align-items:end;gap:var(--space-xl)}
  .band{grid-template-columns:5fr 6fr;gap:var(--space-xl);align-items:start}
  .band.flip{grid-template-columns:6fr 5fr}
  .band.flip .plate{order:2}
  .band .plate{position:sticky;top:var(--space-lg)}
  .band.wide{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}
@media print{.plate{box-shadow:none}.band .plate{position:static}.bar .hnav,.skip{display:none}}