/* ==========================================================================
   Avenir Hospitality · Design System tokens · v1.2 · September 2026
   Source of truth: 06 - System/Design Notes/Avenir Design System/Avenir Design System.md
   Motion:          06 - System/Design Notes/Avenir Design System/Avenir Motion System.md
   Fonts: Newsreader (display + pull quotes only) · Hanken Grotesk (everything else)
   Palette: Brand Identity Guidelines v1.0 (April 2026) + web-only grounds
   Usage:  <link rel="stylesheet" href="avenir-tokens.css">  then build with the
           semantic tokens (--bg, --fg, --accent ...) never the raw --av-* values.
   v1.2:  no frost, no blur, no chips, no boxed containers (Dan, 2026-09-07).
          Grouping is done with hairline rules and space. Buttons stay pills.
          Inputs are underlines. Icons sit bare on the ground.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. RAW PALETTE  (do not use directly in components)
   -------------------------------------------------------------------------- */
:root {
  --av-navy:        #1C2B3A;   /* Avenir Navy · the dark anchor */
  --av-pine:        #3D5240;   /* Pine Needle · secondary, positive, second dark ground */
  --av-stone:       #C9B99A;   /* Warm Stone · the signature accent (rules, bars, hairlines) */
  --av-parchment:   #F5F1EA;   /* Parchment Cream · paper ground for decks, letters, quotes */
  --av-navy-deep:   #152333;   /* Deep Navy · primary text on light */
  --av-slate:       #4A5C6E;   /* Slate · body text */
  --av-gray:        #8A9BAC;   /* Coastal Gray · muted labels, captions, axes */
  --av-blue:        #B0BEC8;   /* Soft Blue · context only */
  --av-fog:         #EEF1F1;   /* Fog · web page ground. Cool, not cream. */
  --av-harbor:      #0D141D;   /* Harbor · deepest ground, video scrims, night mode canvas */
  --av-driftwood:   #6E5F3E;   /* Driftwood · Warm Stone as TEXT on light (5.4:1 on Fog) */
  --av-stone-light: #DCCFB3;   /* Stone lifted · accent on navy grounds */
  --av-white:       #FFFFFF;
  --av-clay:        #8E4238;   /* negative deltas only. Never decoration. Never on the website. */
}

/* --------------------------------------------------------------------------
   2. SEMANTIC TOKENS · LIGHT (default)
   -------------------------------------------------------------------------- */
:root {
  --bg:            var(--av-fog);
  --bg-paper:      var(--av-parchment);
  --bg-dark:       var(--av-navy);
  --bg-deep:       var(--av-harbor);

  --fg:            var(--av-navy-deep);
  --fg-2:          var(--av-slate);
  --fg-3:          var(--av-gray);
  --fg-on-dark:    #F2EFE8;

  --accent:        var(--av-stone);      /* surfaces, rules, bars */
  --accent-fg:     var(--av-driftwood);  /* accent as text */
  --positive:      var(--av-pine);
  --negative:      var(--av-clay);

  --hairline:      rgba(21, 35, 51, .16);
  --hairline-soft: rgba(21, 35, 51, .08);
  --scrim:         linear-gradient(180deg, rgba(13,20,29,0) 0%, rgba(13,20,29,.55) 100%);
  --focus:         var(--av-pine);

  --btn-bg:        var(--av-navy);
  --btn-fg:        #F2EFE8;
  --btn-bg-hover:  var(--av-navy-deep);
  --btn-shadow:    0 14px 30px -18px rgba(21, 35, 51, .5);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:            var(--av-harbor);
  --bg-paper:      var(--av-parchment);
  --bg-dark:       var(--av-navy);
  --bg-deep:       #070C12;
  --fg:            #F2EFE8;
  --fg-2:          #C3CCD4;
  --fg-3:          #8A9BAC;
  --accent:        var(--av-stone-light);
  --accent-fg:     #E6D8B8;
  --positive:      #A9CBAF;
  --negative:      #C4756B;
  --hairline:      rgba(255,255,255,.14);
  --hairline-soft: rgba(255,255,255,.07);
  --focus:         var(--av-stone-light);
  --btn-bg:        var(--av-stone-light);
  --btn-fg:        var(--av-navy-deep);
  --btn-bg-hover:  var(--av-stone);
  --btn-shadow:    0 14px 30px -18px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--av-harbor);
    --bg-paper:      var(--av-parchment);
    --bg-dark:       var(--av-navy);
    --bg-deep:       #070C12;
    --fg:            #F2EFE8;
    --fg-2:          #C3CCD4;
    --fg-3:          #8A9BAC;
    --accent:        var(--av-stone-light);
    --accent-fg:     #E6D8B8;
    --positive:      #A9CBAF;
    --negative:      #C4756B;
    --hairline:      rgba(255,255,255,.14);
    --hairline-soft: rgba(255,255,255,.07);
    --focus:         var(--av-stone-light);
    --btn-bg:        var(--av-stone-light);
    --btn-fg:        var(--av-navy-deep);
    --btn-bg-hover:  var(--av-stone);
    --btn-shadow:    0 14px 30px -18px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

/* A navy, harbor or pine SECTION re-maps the same tokens locally. */
[data-surface="navy"], [data-surface="harbor"], [data-surface="pine"] {
  --fg:            #F2EFE8;
  --fg-2:          #C3CCD4;
  --fg-3:          #8A9BAC;
  --accent:        var(--av-stone-light);
  --accent-fg:     #E6D8B8;
  --hairline:      rgba(255,255,255,.14);
  --hairline-soft: rgba(255,255,255,.07);
  --focus:         var(--av-stone-light);
  --btn-bg:        var(--av-stone-light);
  --btn-fg:        var(--av-navy-deep);
  --btn-bg-hover:  var(--av-stone);
  --btn-shadow:    0 14px 30px -18px rgba(0, 0, 0, .6);
  color: var(--fg);
}
[data-surface="navy"]   { --bg: var(--av-navy);   background: var(--bg); }
[data-surface="harbor"] { --bg: var(--av-harbor); background: var(--bg); }
[data-surface="pine"]   { --bg: var(--av-pine);   background: var(--bg); --fg-2:#D6DDD3; --fg-3:#A5B3A6; }

/* Paper is always light, whatever the page mode: it re-maps text back to navy.
   Paper is a full-width surface, never a box inside a page. */
[data-surface="paper"] {
  --bg:            var(--av-parchment);
  --fg:            var(--av-navy-deep);
  --fg-2:          var(--av-slate);
  --fg-3:          var(--av-gray);
  --accent:        var(--av-stone);
  --accent-fg:     var(--av-driftwood);
  --positive:      var(--av-pine);
  --hairline:      rgba(21,35,51,.16);
  --hairline-soft: rgba(21,35,51,.08);
  --focus:         var(--av-pine);
  --btn-bg:        var(--av-navy);
  --btn-fg:        #F2EFE8;
  --btn-bg-hover:  var(--av-navy-deep);
  --btn-shadow:    0 14px 30px -18px rgba(21, 35, 51, .5);
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
:root {
  --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans:    'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem,  1.9rem  + 3.6vw, 5.25rem);   /* 44 → 84  */
  --fs-h1:      clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem);    /* 34 → 56  */
  --fs-h2:      clamp(1.625rem, 1.3rem  + 1.3vw, 2.375rem);  /* 26 → 38  */
  --fs-h3:      clamp(1.25rem,  1.1rem  + .6vw,  1.5rem);    /* 20 → 24  */
  --fs-lede:    clamp(1.125rem, 1rem    + .45vw, 1.3125rem); /* 18 → 21  */
  --fs-body:    1.0625rem;                                    /* 17       */
  --fs-small:   .9375rem;                                     /* 15       */
  --fs-caption: .8125rem;                                     /* 13       */
  --fs-label:   .75rem;                                       /* 12, uppercase, tracked */

  --lh-display: 1.02;
  --lh-h1:      1.08;
  --lh-h2:      1.15;
  --lh-h3:      1.25;
  --lh-lede:    1.45;
  --lh-body:    1.6;

  --track-label: .14em;
  --track-wide:  .32em;

  --measure-body: 62ch;
  --measure-lede: 42ch;
  --measure-display: 16ch;
}

/* --------------------------------------------------------------------------
   4. SPACE · GRID · SHAPE
   -------------------------------------------------------------------------- */
:root {
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --sp-section: clamp(4rem, 10vh, 8rem);
  --sp-section-tight: clamp(2.5rem, 6vh, 4.5rem);

  --max: 1240px;
  --max-prose: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --rail-w: 168px;

  /* Shape · v1.2: pills for buttons, everything else square. No boxes to round. */
  --radius:         0;
  --radius-control: 999px;
}

/* --------------------------------------------------------------------------
   5. MOTION TOKENS  (catalogue and rules: Avenir Motion System.md)
   -------------------------------------------------------------------------- */
:root {
  --ease-fog:   cubic-bezier(.33, .02, .2, 1);
  --ease-out:   cubic-bezier(.19, 1, .22, 1);
  --ease-in:    cubic-bezier(.5, 0, .75, 0);
  --ease-mask:  cubic-bezier(.77, 0, .18, 1);
  --t-micro:    180ms;
  --t-ui:       420ms;
  --t-reveal:   1100ms;
  --t-arrive:   2000ms;
  --t-drift:    9s;
  --hover-lift: -2px;
  --hover-zoom: 1.04;
}

/* --------------------------------------------------------------------------
   6. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .6s var(--ease-fog), color .6s var(--ease-fog);
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--av-stone); color: var(--av-navy-deep); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   7. TYPE ROLES
   -------------------------------------------------------------------------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-quote {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.005em; max-width: var(--measure-display); }
.t-h1      { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 20ch; }
.t-h2      { font-size: var(--fs-h2); line-height: var(--lh-h2); max-width: 24ch; }
.t-h3      { font-size: var(--fs-h3); line-height: var(--lh-h3); max-width: 30ch; }
.t-display em, .t-h1 em, .t-h2 em { font-style: italic; font-weight: 300; color: var(--fg-2); }

.t-lede    { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--fg-2); max-width: var(--measure-lede); margin: 0; }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); max-width: var(--measure-body); margin: 0; }
.t-body strong, .t-lead-in { font-weight: 600; color: var(--fg); }
.t-small   { font-size: var(--fs-small); color: var(--fg-2); }
.t-caption { font-size: var(--fs-caption); color: var(--fg-3); line-height: 1.45; }
.t-label   { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
.t-label.accent { color: var(--accent-fg); }
.t-wordmark{ font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg); }

.t-quote   { font-size: var(--fs-h3); line-height: 1.4; font-style: italic; font-weight: 300; color: var(--fg); max-width: 34ch; }
.t-figure  { font-family: var(--font-sans); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; color: var(--fg); }
.t-figure.lg { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); }
.num { font-variant-numeric: tabular-nums; }

/* Status is written, not badged. A label line with a Stone rule before it. */
.t-status { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
.t-status::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.t-status.pos { color: var(--positive); }
.t-status.neg { color: var(--negative); }

/* --------------------------------------------------------------------------
   8. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--max-prose); }
.section { padding-block: var(--sp-section); }
.section.tight { padding-block: var(--sp-section-tight); }
.grid { display: grid; gap: var(--sp-5) var(--gutter); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.split { display: grid; gap: var(--sp-6) var(--gutter); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 820px) { .split, .split.reverse { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack.tight { gap: var(--sp-2); }
.stack.loose { gap: var(--sp-6); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); align-items: center; }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.rule.accent { border-top-color: var(--accent); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Block: the only grouping device. A hairline above, space below. No box. */
.block { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: var(--sp-3); }
.block.accent { border-top-color: var(--accent); }
.blocks { display: grid; gap: var(--sp-6) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --------------------------------------------------------------------------
   9. COMPONENTS
   -------------------------------------------------------------------------- */
/* Buttons: solid pills. One primary per view. Text says what happens. No arrows. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 46px; padding: .75rem 1.6rem;
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; letter-spacing: .02em;
  border-radius: var(--radius-control); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out),
              box-shadow var(--t-micro) var(--ease-out);
}
.btn:hover { transition-duration: var(--t-ui); transform: translateY(var(--hover-lift)); }
.btn:active { transform: translateY(0); transition-duration: 90ms; }
.btn.primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn.primary:hover { background: var(--btn-bg-hover); box-shadow: var(--btn-shadow); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--fg-3); }
.btn.ghost:hover { border-color: var(--fg); }
.btn.quiet { background: transparent; color: var(--fg-2); padding-inline: .6rem; }
.btn.quiet:hover { color: var(--fg); transform: none; }

/* Links: a Stone hairline that draws to full ink from the left. Never an arrow. */
.link {
  color: var(--fg); text-decoration: none; padding-bottom: .1em;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-size: 100% 1px, 0% 1px; background-position: 0 100%, 0 100%;
  transition: background-size var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out);
}
.link:hover { background-size: 100% 1px, 100% 1px; transition-duration: var(--t-ui); }

/* Header: solid ground, a hairline appears after 40px */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: 1.1rem var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: padding var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), background-color .6s var(--ease-fog);
}
.site-head.scrolled { padding-block: .65rem; border-bottom-color: var(--hairline-soft); }
.site-head .brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.site-head .brand svg { height: 22px; width: auto; color: var(--fg); transition: transform var(--t-ui) var(--ease-out); }
.site-head .brand:hover svg { transform: translateY(-1px); }
.site-nav { display: flex; gap: var(--sp-5); }
.site-nav a {
  font-size: var(--fs-small); font-weight: 500; color: var(--fg-2); text-decoration: none; padding: .35rem 0;
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
  background-size: 0% 1px; background-position: 0 100%;
  transition: color var(--t-micro) var(--ease-out), background-size var(--t-micro) var(--ease-out);
}
.site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--fg); background-size: 100% 1px; transition-duration: var(--t-ui); }
@media (max-width: 820px) { .site-nav { display: none; } }

/* Section header */
.sec-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.sec-head .t-label::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: .75rem; }

/* Quote: on the ground, a Stone rule above. Real attributions only. */
.quote { padding-top: var(--sp-4); border-top: 1px solid var(--accent); }
.quote .t-quote { margin: 0; }
.quote cite { display: block; margin-top: var(--sp-4); font-style: normal; font-size: var(--fs-caption); color: var(--fg-3); }

/* Figures: rationed. A number is the point of the block or it is not shown. */
.figure { display: flex; flex-direction: column; gap: var(--sp-2); }
.figure .t-label { order: 2; }

/* Media: shape by content. Portrait 4:5, landscape 3:2, wide 21:9. Arch at most once per page. */
.media { position: relative; overflow: hidden; background: var(--av-navy); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-fog); }
.media.portrait { aspect-ratio: 4 / 5; }
.media.landscape { aspect-ratio: 3 / 2; }
.media.wide { aspect-ratio: 21 / 9; }
.media.arch { border-radius: 999px 999px 0 0; }
.media.scrim::after { content: ""; position: absolute; inset: 0; background: var(--scrim); pointer-events: none; }
.media.breathe img, .media.breathe video { animation: av-breathe var(--t-drift) ease-in-out infinite alternate; }
.media.hover:hover img, .media.hover:hover video, a:hover > .media img, .pcard:hover .media img { transform: scale(var(--hover-zoom)); }

/* Veil: text over an image. One side of the IMAGE softens into a blur and darkens a
   little; the text sits on the softened side. The blur is progressive (two masked
   layers), never a hard edge, never a panel. Default veils the left 55%; .bottom
   and .right move it. Text goes in .media > .over. (Dan, 2026-09-07) */
.media.veil::before, .media.veil::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.media.veil::before {          /* wide, gentle */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  background: linear-gradient(90deg, rgba(13,20,29,.42) 0%, rgba(13,20,29,.18) 40%, rgba(13,20,29,0) 62%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 62%);
          mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 62%);
}
.media.veil::after {           /* narrow, deep */
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 46%);
          mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 46%);
}
.media.veil.right::before { background: linear-gradient(270deg, rgba(13,20,29,.42) 0%, rgba(13,20,29,.18) 40%, rgba(13,20,29,0) 62%); -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 38%, transparent 62%); mask-image: linear-gradient(270deg, #000 0%, #000 38%, transparent 62%); }
.media.veil.right::after  { -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 22%, transparent 46%); mask-image: linear-gradient(270deg, #000 0%, #000 22%, transparent 46%); }
.media.veil.bottom::before { background: linear-gradient(0deg, rgba(13,20,29,.48) 0%, rgba(13,20,29,.2) 40%, rgba(13,20,29,0) 62%); -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 38%, transparent 62%); mask-image: linear-gradient(0deg, #000 0%, #000 38%, transparent 62%); }
.media.veil.bottom::after  { -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 22%, transparent 46%); mask-image: linear-gradient(0deg, #000 0%, #000 22%, transparent 46%); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .media.veil::after { display: none; }
  .media.veil::before { background: linear-gradient(90deg, rgba(13,20,29,.62) 0%, rgba(13,20,29,.3) 40%, rgba(13,20,29,0) 62%); }
}
/* Fade variant: the softened side dissolves into the SECTION GROUND instead of darkening,
   so the photograph seems to emerge from the page and the text keeps the page's own ink.
   Use on light pages where a dark veil would feel heavy. */
.media.veil.fade { --page-bg: var(--bg); --page-fg: var(--fg); --page-fg-2: var(--fg-2); --page-fg-3: var(--fg-3); --page-accent-fg: var(--accent-fg); --page-btn-bg: var(--btn-bg); --page-btn-fg: var(--btn-fg); --page-btn-hover: var(--btn-bg-hover); background: var(--bg); }
.media.veil.fade::before { background: linear-gradient(90deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 72%, transparent) 34%, transparent 62%); }
.media.veil.fade.right::before { background: linear-gradient(270deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 72%, transparent) 34%, transparent 62%); }
.media.veil.fade.bottom::before { background: linear-gradient(0deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 72%, transparent) 34%, transparent 62%); }
.media.veil.fade > .over { --fg: var(--page-fg); --fg-2: var(--page-fg-2); --fg-3: var(--page-fg-3); --accent-fg: var(--page-accent-fg); --btn-bg: var(--page-btn-bg); --btn-fg: var(--page-btn-fg); --btn-bg-hover: var(--page-btn-hover); }
@media (max-width: 700px) { .media.veil.fade::before, .media.veil.fade.right::before { background: linear-gradient(0deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 72%, transparent) 40%, transparent 70%); } }

.media > .over {
  position: absolute; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-3);
  left: var(--sp-6); bottom: var(--sp-6); max-width: min(46%, 420px);
  --fg: #F2EFE8; --fg-2: #D9DEE3; --fg-3: #DCCFB3; --accent: #DCCFB3; --accent-fg: #E6D8B8;
  --btn-bg: #DCCFB3; --btn-fg: #152333; --btn-bg-hover: #C9B99A; color: var(--fg);
}
.media.veil.right > .over { left: auto; right: var(--sp-6); }
.media.veil.bottom > .over { max-width: min(70%, 560px); }
.media > .over .t-display, .media > .over .t-h1, .media > .over .t-h2, .media > .over .t-h3 { color: var(--fg); margin: 0; }
@media (max-width: 700px) { .media > .over, .media.veil.right > .over { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); max-width: none; } .media.veil::before, .media.veil.right::before { background: linear-gradient(0deg, rgba(13,20,29,.55) 0%, rgba(13,20,29,.25) 45%, rgba(13,20,29,0) 70%); -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 72%); mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 72%); } .media.veil::after, .media.veil.right::after { -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 28%, transparent 55%); mask-image: linear-gradient(0deg, #000 0%, #000 28%, transparent 55%); } }

/* Icon marks: the etch set or an inline line icon, bare on the ground. No disc. */
.icon-mark {
  position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px;
  color: var(--fg-2);
  transition: color var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out);
}
.icon-mark img, .icon-mark svg { width: 100%; height: 100%; object-fit: contain; }
.icon-mark img { mix-blend-mode: multiply; }
[data-surface="navy"] .icon-mark img, [data-surface="harbor"] .icon-mark img, [data-surface="pine"] .icon-mark img,
:root[data-theme="dark"] .icon-mark img { mix-blend-mode: normal; filter: invert(1) brightness(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-mark img { mix-blend-mode: normal; filter: invert(1) brightness(.92); } }
[data-surface="paper"] .icon-mark img { mix-blend-mode: multiply; filter: none; }
.icon-mark:hover, a:hover > .icon-mark, .pillar:hover .icon-mark { transition-duration: var(--t-ui); color: var(--fg); transform: translateY(var(--hover-lift)); }
.icon-mark svg path, .icon-mark svg circle, .icon-mark svg line, .icon-mark svg polyline { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-mark.draw-hover svg * { stroke-dasharray: 120; stroke-dashoffset: 0; }
.icon-mark.draw-hover:hover svg *, .pillar:hover .icon-mark.draw-hover svg * { animation: av-redraw 1.1s var(--ease-mask) both; }

/* Pillar (thesis): icon + heading + copy; hover lifts the icon and draws a Stone rule across the top */
.pillar { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hairline-soft); background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 0; transition: background-size var(--t-ui) var(--ease-mask); }
.pillar:hover { background-size: 100% 1px; }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th { text-align: left; font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); padding: .6rem .75rem .5rem 0; border-bottom: 1px solid var(--hairline); }
.table td { padding: .7rem .75rem .7rem 0; border-bottom: 1px solid var(--hairline-soft); color: var(--fg-2); vertical-align: top; transition: color var(--t-micro); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td:first-child { color: var(--fg); }
.table tbody tr:hover td { color: var(--fg); }

/* Key-value list (contact, facts): hairline rows, label left, value right */
.kv { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); }
.kv dt, .kv dd { margin: 0; padding: .7rem 0; border-top: 1px solid var(--hairline-soft); }
.kv dt { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); font-weight: 500; align-self: center; }
.kv dd { font-size: var(--fs-small); color: var(--fg); }

/* Forms: an underline, not a box */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500; color: var(--fg-3); }
.input { min-height: 44px; padding: .6rem 0; font: inherit; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; transition: border-color var(--t-micro) var(--ease-out); }
.input:focus { outline: none; border-bottom-color: var(--fg); }
textarea.input { resize: vertical; }

/* --------------------------------------------------------------------------
   10. SIGNATURE · THE RAIL  (one line, one light)
   -------------------------------------------------------------------------- */
.av-rail { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-w); z-index: 40; pointer-events: none; }
.av-rail svg { width: 100%; height: 100%; }
.av-rail .path  { fill: none; stroke: var(--hairline); stroke-width: 1; }
.av-rail .drawn { fill: none; stroke: var(--accent-fg); stroke-width: 1; }
.av-rail .station circle { fill: var(--bg); stroke: var(--fg-3); stroke-width: 1; transition: fill var(--t-ui) var(--ease-out), stroke var(--t-ui) var(--ease-out); }
.av-rail .station.lit circle { fill: var(--accent); stroke: var(--accent-fg); }
.av-rail .station text { font-family: var(--font-sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; fill: var(--fg-3); transition: fill var(--t-ui) var(--ease-out); }
.av-rail .station.lit text { fill: var(--fg); }
.av-rail .light { fill: var(--accent-fg); }
.av-rail .light-halo { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .6; animation: av-halo 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.av-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; }
.av-progress i { display: block; height: 100%; width: 100%; background: var(--accent-fg); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 1099px) { .av-rail { display: none; } }
@media (min-width: 1100px) { .av-progress { display: none; } .has-rail .site-head, .has-rail main, .has-rail footer { padding-left: var(--rail-w); } }

/* --------------------------------------------------------------------------
   11. MOTION PRIMITIVES
   -------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(10px); transition: opacity var(--t-reveal) var(--ease-fog), transform var(--t-reveal) var(--ease-fog), filter var(--t-reveal) var(--ease-fog); transition-delay: var(--d, 0s); will-change: opacity, transform, filter; }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; will-change: auto; }
@keyframes av-breathe { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes av-arrive  { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes av-draw    { to { stroke-dashoffset: 0; } }
@keyframes av-redraw  { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes av-halo    { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.35); opacity: .15; } }
.arrive { animation: av-arrive var(--t-arrive) var(--ease-fog) both; }
.draw   { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); animation: av-draw 2.2s var(--ease-mask) .3s forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .site-head { transition: none; }
  .js [data-reveal] { transform: none; filter: none; transition: opacity .5s ease; }
  .media.breathe img, .media.breathe video { animation: none; }
  .media img, .media video, .btn, .icon-mark { transition: none; transform: none !important; }
  .icon-mark.draw-hover:hover svg * { animation: none; }
  .arrive { animation: none; }
  .draw { animation: none; stroke-dashoffset: 0; }
  .av-rail .light, .av-rail .light-halo { display: none; }
}