/* Extracted verbatim from index.html — shared shell for standalone pages.
   Source ranges: 11-32 tokens, 74-145 nav, 242 nav.scrolled, 396-412 deco-frame,
   431-441 deco-eyebrow, 666-685 bracket-plate CTA, 1420-1424 sr-only, 1426-1560 footer.
   Do not edit here; edit index.html and re-extract. */

  @font-face { font-family: "Fraunces"; src: url("assets/fraunces-300.ttf") format("truetype"); font-weight: 300; font-display: swap; }
  @font-face { font-family: "Fraunces"; src: url("assets/fraunces-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }

  :root {
    /* The page base. Warmed from #1b1b1b to #1d1b19 on 2026-10-08: DESIGN.md
       recorded the untinted value as a known defect that "should drift warm to
       match the warm branch", and the Tinted Black Rule forbids a neutral with
       no measurable tint toward its branch temperature. Same gray to the eye,
       now in the same family as the sand and driftwood photography. */
    --bg: #1d1b19;
    --ink: #f2efe9;
    --soft: rgba(242, 239, 233, 0.78);
    --action: #86d1cd;          /* Tiffany: action color */
    --depth: #050b18;           /* button hover fill */
    --accent: #c9905f;          /* copper from the design. Swap to #d4c5a9 (sand) if brass/copper isn't approved */
    --accent-line: rgba(201, 144, 95, 0.75);
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--bg); color: var(--ink); }
  body { font-family: var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  /* ---------- Nav ---------- */
  .nav {
    position: fixed;
    transition: background .5s var(--ease), backdrop-filter .5s var(--ease); top: 1.8vh; left: 1.4vw; right: 1.4vw;
    height: 78px;
    display: flex; align-items: center;
    padding: 0 20px 0 32px;
    border: 1px solid var(--accent-line);
    z-index: 5;
  }
  .nav::before, .nav::after { /* notched corners */
    content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent);
  }
  .nav::before { left: -5px; bottom: -5px; border-top: 0; border-right: 0; }
  .nav::after  { right: -5px; top: -5px; border-bottom: 0; border-left: 0; }

  .brand { display: flex; align-items: center; height: 100%; flex: 0 0 auto; }
  /* flex: none + object-fit stop a narrow nav from squeezing the logo out of its true proportions */
  .brand img { height: 42px; width: auto; flex: 0 0 auto; object-fit: contain; margin-left: calc(42px * -0.15); }


  .nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
  .nav-links li { display: flex; align-items: center; gap: 34px; }
  .nav-links li + li::before {
    content: ""; width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); margin-right: 0;
  }
  .nav-links a {
    position: relative; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 0;
    transition: color .3s;
  }
  .nav-links a:hover { color: var(--action); }
  .nav-links a[aria-current="page"]::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: -8px; height: 4px; background: var(--action);
  }

  .nav-end { margin-left: auto; display: flex; align-items: center; height: 100%; }
  .nav-end::before { content: ""; width: 1px; height: 46px; background: var(--accent-line); margin-right: 34px; }

  /* Brand pill button with depth-fill hover */
  .btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 16px;
    padding: 14px 34px;
    border: 1.5px solid var(--action);
    border-radius: 9999px;
    color: var(--ink);
    font: 500 15px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    transition: border-radius .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
    isolation: isolate;
  }
  .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--depth);
    transform: scaleX(0); transition: transform .6s var(--ease);
  }
  .btn:hover { border-radius: 12px; }
  .btn:hover::before { transform: scaleX(1); }
  .btn svg { width: 16px; height: 10px; }

  /* The nav wears the bracket plate too, sized down to sit inside the 78px bar.
     Tiffany rule and brackets, same as the other primary actions. */
  .nav .bp-cta {
    margin-top: 0; flex: 0 0 auto;
    padding: 13px 28px; gap: 14px;
    font-size: 15px; letter-spacing: .14em; color: var(--ink);
    border-color: var(--action);
  }
  .nav .bp-cta::before, .nav .bp-cta::after,
  .nav .bp-cta i::before, .nav .bp-cta i::after { border-color: var(--action); width: 9px; height: 9px; }
  .nav .bp-cta svg { width: 24px; color: var(--action); }
  .nav .bp-cta:hover { background: rgba(134, 209, 205, .12); }

  /* The nav's ground, always on (2026-10-09). It used to arrive only once the
     page had scrolled 40px, via the .scrolled class the inline script toggles,
     which left the bar sitting on bare photography at the top of every page.
     --nav-ground is the tint: cold by default, since most pages open on water
     or night sky; the warm-branch pages override it to match their own
     photography, per the Tide Rule (never a cold surface under warm imagery). */
  .nav {
    --nav-ground: 8, 20, 22;
    background: rgba(var(--nav-ground), .55);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  /* Scrolled, the same ground thickens a little: by then it is covering body
     copy rather than a hero, and needs to read as a bar rather than a veil. */
  .nav.scrolled { background: rgba(var(--nav-ground), .72); }
  /* Deco frame: one rule, corner brackets, edge diamonds.
     Inner rule and bottom pin retired 2026-10-04 — see DESIGN.md. */
  .deco-frame { position: absolute; inset: 1.2vw; pointer-events: none; border: 1px solid var(--accent-line); }
  .deco-frame i { position: absolute; width: 13px; height: 13px; border: 1px solid var(--accent); background: #242423;
    transform: rotate(45deg); }
  .deco-frame i::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }
  .deco-frame i.t { top: -7px; left: 50%; margin-left: -6px; }
  .deco-frame i.l { left: -7px; top: 50%; margin-top: -6px; }
  .deco-frame i.r { right: -7px; top: 50%; margin-top: -6px; }
  .deco-frame u { /* corner brackets sitting between the two rules */
    position: absolute; width: 3.2vw; height: 3.2vw; text-decoration: none;
    border: 1px solid rgba(204, 163, 95, .45);
  }
  .deco-frame u.tl { top: .55vw; left: .55vw; border-right: 0; border-bottom: 0; }
  .deco-frame u.tr { top: .55vw; right: .55vw; border-left: 0; border-bottom: 0; }
  .deco-frame u.bl { bottom: .55vw; left: .55vw; border-right: 0; border-top: 0; }
  .deco-frame u.br { bottom: .55vw; right: .55vw; border-left: 0; border-top: 0; }
  /* Eyebrow: diamond · label · long rule ending in a tick */
  .deco-eyebrow {
    display: flex; align-items: center; gap: 22px;
    color: var(--accent); font-size: clamp(12px, 1.12vw, 22px); letter-spacing: .34em; text-transform: uppercase;
    margin-bottom: clamp(26px, 3.6vh, 52px);
  }
  .deco-eyebrow i { position: relative; flex: 0 0 auto; width: 13px; height: 13px; border: 1px solid var(--accent); transform: rotate(45deg); }
  .deco-eyebrow i::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }
  .deco-eyebrow i::before { content: ""; position: absolute; top: 50%; left: -20px; width: 18px; height: 1px; background: var(--accent-line); transform: rotate(-45deg); transform-origin: right center; }
  .deco-eyebrow em { flex: 1 1 auto; height: 1px; background: var(--accent-line); max-width: 520px; position: relative; }
  .deco-eyebrow em::after { content: ""; position: absolute; right: 0; top: -3px; width: 1px; height: 7px; background: var(--accent-line); }
  /* CTA: rectangular gold plate with bracketed corners */
  .bp-cta {
    position: relative; display: inline-flex; align-items: center; gap: clamp(14px, 1.4vw, 26px);
    margin-top: clamp(22px, 3.4vh, 46px);
    padding: clamp(16px, 1.9vh, 26px) clamp(26px, 2.6vw, 48px);
    border: 1.5px solid var(--accent);
    font: 500 clamp(14px, 1.28vw, 24px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
    transition: background .45s var(--ease), color .45s var(--ease);
  }
  .bp-cta::before, .bp-cta::after { /* corner brackets, inside the plate */
    content: ""; position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--accent);
  }
  .bp-cta::before { left: 5px; top: 5px; border-right: 0; border-bottom: 0; }
  .bp-cta::after { right: 5px; bottom: 5px; border-left: 0; border-top: 0; }
  .bp-cta i { position: absolute; inset: 0; pointer-events: none; }   /* carries the other two corners */
  .bp-cta i::before, .bp-cta i::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--accent); }
  .bp-cta i::before { right: 5px; top: 5px; border-left: 0; border-bottom: 0; }
  .bp-cta i::after { left: 5px; bottom: 5px; border-right: 0; border-top: 0; }
  .bp-cta svg { width: clamp(22px, 2vw, 34px); height: 12px; color: var(--action); flex: 0 0 auto; }
  .bp-cta:hover { background: rgba(204, 163, 95, .12); }
  /* visually hidden, still read by screen readers */
  .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* ---------- Site footer ---------- */
  .site-foot {
    --accent: #c9a063;
    --accent-line: rgba(201, 160, 99, .5);
    --cream: #efe6d8;
    position: relative; isolation: isolate; overflow: hidden;
    background: #07171b;   /* cold branch: the imagery here is night sky */
    padding: clamp(40px, 6vh, 92px) clamp(26px, 3.6vw, 82px) clamp(26px, 3.6vh, 54px);
  }
  .site-foot::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: #07171b url("assets/footer/night-sky.webp") no-repeat center / cover;
  }
  .site-foot::after { /* keeps the four columns legible over the cloud bank */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(5,16,19,.72) 0%, rgba(5,16,19,.84) 55%, rgba(5,16,19,.92) 100%);
  }
  .site-foot .deco-frame i { background: #0a191d; }

  .foot-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(20px, 2.8vw, 56px);
    padding: clamp(14px, 2.4vh, 36px) clamp(10px, 1.6vw, 36px) clamp(20px, 3vh, 44px);
  }
  /* 1px rules between columns, as drawn */
  .foot-col + .foot-col { border-left: 1px solid var(--accent-line); padding-left: clamp(18px, 2.4vw, 48px); }

  /* ---- brand column ---- */
  .foot-mark { display: block; width: clamp(260px, 25vw, 460px); height: auto; margin-bottom: clamp(16px, 2.4vh, 32px); }
  .foot-rule { position: relative; height: 1px; background: var(--accent-line); margin: clamp(16px, 2.4vh, 32px) 0; }
  .foot-rule::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -6px 0 0 -6px;
    border: 1px solid var(--accent); background: #0a191d; transform: rotate(45deg);
  }
  .foot-lead {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(19px, 1.74vw, 34px); line-height: 1.24; color: #fff;
  }
  .foot-sub {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px, 1.24vw, 24px); line-height: 1.5; color: var(--cream);
    margin-top: clamp(8px, 1.2vh, 16px); max-width: 24em;
  }
  .foot-form { display: flex; align-items: stretch; gap: clamp(8px, 1vw, 18px); margin-top: clamp(16px, 2.4vh, 32px); }
  .foot-form input {
    flex: 1 1 auto; min-width: 0;
    padding: clamp(12px, 1.5vh, 18px) clamp(12px, 1.2vw, 20px);
    background: rgba(255,255,255,.03); border: 1px solid var(--accent-line); border-radius: 0;
    color: var(--ink);
    font: 400 clamp(11px, .94vw, 17px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  }
  .foot-form input::placeholder { color: rgba(239, 230, 216, .45); }
  .foot-form input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-color: var(--action); }
  .foot-join {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
    padding: clamp(12px, 1.5vh, 18px) clamp(16px, 1.6vw, 28px);
    background: none; border: 1px solid var(--accent); border-radius: 0; cursor: pointer;
    color: var(--ink);
    font: 500 clamp(11px, .94vw, 17px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
    transition: background .4s var(--ease);
  }
  .foot-join svg { width: 22px; color: var(--accent); }
  .foot-join:hover { background: rgba(201, 160, 99, .14); }
  .foot-join:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
  .foot-note {
    display: flex; align-items: flex-start; gap: 12px; margin-top: clamp(12px, 1.8vh, 22px);
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(13px, 1.06vw, 20px); line-height: 1.45; color: var(--cream);
  }
  .foot-note svg { flex: 0 0 auto; width: clamp(15px, 1.2vw, 22px); color: var(--action); margin-top: .15em; }

  /* ---- link columns ---- */
  .foot-label {
    font-size: clamp(10px, .95vw, 18px); letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
    margin-bottom: clamp(28px, 4.2vh, 52px);
  }
  .foot-links { list-style: none; display: grid; gap: clamp(12px, 1.8vh, 24px); }
  .foot-links a {
    font-size: clamp(11px, 1.04vw, 20px); letter-spacing: .13em; text-transform: uppercase; color: var(--cream);
    transition: color .3s var(--ease);
  }
  .foot-links a:hover { color: var(--action); }
  .foot-links a:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

  /* ---- contact column ---- */
  /* the system's bracket plate, sized down. Not a new shape: DESIGN.md allows
     exactly two button shapes, and a clipped octagon shreds a 1.5px border anyway */
  .site-foot .bp-cta {
    margin-top: 0; white-space: nowrap;
    padding: clamp(13px, 1.7vh, 20px) clamp(16px, 1.7vw, 30px);
    font-size: clamp(10px, .9vw, 17px); letter-spacing: .12em;
    border-color: var(--action);
  }
  .site-foot .bp-cta::before, .site-foot .bp-cta::after,
  .site-foot .bp-cta i::before, .site-foot .bp-cta i::after { border-color: var(--action); }
  .site-foot .bp-cta svg { width: clamp(22px, 2vw, 34px); color: var(--action); }
  .site-foot .bp-cta:hover { background: rgba(134, 209, 205, .12); }
  .foot-email { display: flex; align-items: center; gap: 12px; margin-top: clamp(16px, 2.4vh, 30px); }
  .foot-email svg { flex: 0 0 auto; width: clamp(18px, 1.5vw, 26px); color: var(--action); }
  /* The "Email" label is hidden from the page (2026-10-09) — the envelope icon
     already says what the address is. It is hidden rather than deleted so the
     <dl> keeps a <dt> for its <dd>, and so a screen reader still announces what
     the address is for: the icon beside it is aria-hidden, so without this the
     address would be read out bare. */
  .foot-email dt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .foot-email dd {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px, 1.22vw, 23px); color: var(--cream);
  }
  .foot-email a:hover { color: var(--action); }
  .foot-creed {
    margin-top: clamp(14px, 2.2vh, 28px); padding-top: clamp(14px, 2.2vh, 28px);
    border-top: 1px solid var(--accent-line); text-align: center;
  }
  .foot-creed i { /* the sparkle above the creed */
    display: block; width: 15px; height: 22px; margin: 0 auto clamp(8px, 1.2vh, 16px);
    background: var(--accent);
    clip-path: polygon(50% 0, 57% 42%, 100% 50%, 57% 58%, 50% 100%, 43% 58%, 0 50%, 43% 42%);
  }
  .foot-creed p {
    font-size: clamp(10px, .92vw, 17px); letter-spacing: .26em; line-height: 1.9;
    text-transform: uppercase; color: var(--accent);
  }

  /* ---- bottom bar ---- */
  .foot-base {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: clamp(14px, 1.8vw, 34px);
    padding-top: clamp(16px, 2.4vh, 30px); padding-bottom: 24px; border-top: 1px solid var(--accent-line);
    font-size: clamp(9px, .88vw, 16px); letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
  }
  .foot-base i { position: relative; flex: 1 1 auto; height: 1px; background: var(--accent-line); }
  .foot-base i::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -6px 0 0 -5px;
    border: 1px solid var(--accent); background: #0a191d; transform: rotate(45deg);
  }
  .foot-seal { flex: 0 0 auto; width: clamp(44px, 4.4vw, 76px); color: var(--accent); }
  .foot-seal svg { display: block; width: 100%; height: auto; }