/* ============================================================================
   Chesterton Hills - Blueprint
   base.css : tokens, type, chrome, the drafting vocabulary
   The whole site is a drawing set. Ink on paper, one brass accent.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  /* paper */
  --paper:   #f7f4ec;   /* also the 3D scene background AND fog, byte identical */
  --paper-2: #f2ede1;
  --paper-3: #ebe4d4;
  --card:    #fbf9f3;

  /* ink. --ink-3 is the muted tone for annotations and labels. It is set
     dark enough to clear AA on the darkest paper tint (#ebe4d4, 4.7:1), not
     just on the base paper, because the annotations sit on every band. */
  --ink:   #0b2245;
  --ink-2: #33456a;
  --ink-3: #55637d;
  --rule:  rgba(11, 34, 69, .16);
  --rule-2: rgba(11, 34, 69, .28);

  /* brass. --brass is for marks, rules and fills only. Anything a reader has
     to READ uses --brass-text, which clears AA on every paper tint (4.9:1).
     Inside .navy this flips back to --brass, which clears AA there (4.9:1). */
  --brass:   #b08a3e;
  --brass-d: #8d6c28;
  --brass-text: #7a5c1e;

  --ink-on-navy: var(--paper);

  /* type */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Chivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* metrics */
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sect: clamp(64px, 9vh, 118px);
  --nav-h: 74px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Inside navy, the ink tokens flip to paper alphas so no muted grey ever
   sits on navy (#6a7791 on #0b2245 fails AA and must never appear there). */
.navy {
  --ink:   var(--paper);
  --ink-2: rgba(247, 244, 236, .82);
  --ink-3: rgba(247, 244, 236, .70);
  --rule:  rgba(247, 244, 236, .22);
  --rule-2: rgba(247, 244, 236, .38);
  --brass-text: var(--brass);
  background: var(--ink-navy, #0b2245);
  color: var(--ink);
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(15.5px, 1.02vw, 17px);
  line-height: 1.68;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: rgba(176, 138, 62, .28); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

/* -------------------------------------------------------------------- type */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -.018em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1, .h-0 { font-size: clamp(38px, 5.1vw, 74px); }
h2, .h-1 { font-size: clamp(30px, 3.7vw, 53px); }
h3, .h-2 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.18; }
h4, .h-3 { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.3; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(17px, 1.36vw, 21px);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

/* the mono voice: every annotation, sheet number, eyebrow, button */
.eyebrow, .annot, .sheetno, .btn, .wcopy__tag, .foot__lab, .mobile__lab {
  font-family: var(--mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
}

.eyebrow {
  display: inline-block;
  color: var(--brass-text);
  margin-bottom: 18px;
  position: relative;
  padding-left: 26px;
}
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 16px; height: 1px; background: var(--brass);
}
.eyebrow--brass { color: var(--brass-text); }
.eyebrow--ink { color: var(--ink-3); }
.eyebrow--ink::before { background: var(--rule-2); }
/* Paper on navy. Where two navy blocks sit one after the other, the second
   takes this so the eyebrows alternate instead of repeating in brass. The
   leading tick stays brass, so the accent is still there once. */
.eyebrow--paper { color: var(--ink); }

.annot {
  color: var(--ink-3);
  letter-spacing: .18em;
  font-size: 10px;
  line-height: 1.5;
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; height: 0; }

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* z-index 1 keeps every opaque sheet above the fixed drafting canvas */
.hsection { padding-block: var(--sect); position: relative; z-index: 1; }


.band { background: var(--paper); }
.band--tint { background: var(--paper-2); }
.band--tint2 { background: var(--paper-3); }

.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.4vw, 72px);
  align-items: center;
}
@media (max-width: 860px) { .twocol { grid-template-columns: 1fr; } }

/* the sheet: a slim margin column of annotations beside the content */
.sheet {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
}
.sheet__margin {
  position: sticky; top: calc(var(--nav-h) + 26px);
  border-left: 1px solid var(--rule);
  padding-left: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.sheet__margin .annot { writing-mode: horizontal-tb; }
.tickline {
  height: 64px; width: 100%;
  background-image: repeating-linear-gradient(
    to bottom, var(--rule) 0 1px, transparent 1px 9px);
  margin-block: 4px;
}
@media (max-width: 900px) {
  .sheet { grid-template-columns: 1fr; }
  .sheet__margin {
    position: static; flex-direction: row; align-items: center; gap: 16px;
    border-left: 0; border-top: 1px solid var(--rule);
    padding-left: 0; padding-top: 10px; margin-bottom: 22px;
  }
  .tickline {
    height: 1px; width: 60px; flex: 0 0 60px;
    background-image: repeating-linear-gradient(
      to right, var(--rule) 0 1px, transparent 1px 9px);
  }
}

/* corner registration ticks on important blocks */
.corner-marks { position: absolute; inset: 18px; pointer-events: none; }
.corner-marks span {
  position: absolute; width: 16px; height: 16px;
  border: 0 solid currentColor; opacity: .5; color: var(--ink);
}
.corner-marks .tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.corner-marks .tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.corner-marks .bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corner-marks .br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn--solid {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn--solid:hover { background: var(--brass-d); border-color: var(--brass-d); color: var(--paper); }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--rule-2);
}
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-text); }

.navy .btn--solid {
  background: var(--paper); color: #0b2245; border-color: var(--paper);
}
.navy .btn--solid:hover { background: var(--brass); border-color: var(--brass); color: #0b2245; }
.navy .btn--ghost { color: var(--paper); border-color: rgba(247,244,236,.4); }
.navy .btn--ghost:hover { border-color: var(--brass); color: var(--brass); }

.arw { transition: transform .2s var(--ease); display: inline-block; }
.btn:hover .arw, .tlink:hover .arw { transform: translateX(4px); }

/* text link with a hairline that grows */
.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .15em;
  text-decoration: none; color: var(--ink);
  padding-bottom: 5px; position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px;
  width: 100%; background: var(--rule-2);
  transition: background .2s var(--ease);
}
.tlink:hover { color: var(--brass-text); }
.tlink:hover::after { background: var(--brass); }

/* --------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(247, 244, 236, .88);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--rule);
}
.nav__in {
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut);
  height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 46px);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand__mark { flex: 0 0 26px; }
.brand__name {
  display: block; font-family: var(--display); font-size: 18px;
  letter-spacing: -.01em; line-height: 1.1; color: var(--ink);
}
.brand__sub {
  display: block; font-family: var(--mono); font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 3px;
}

.menu { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); }
.menu__item { position: relative; }
.menu__link {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  background: none; border: 0; padding: 8px 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .18s var(--ease);
  font-weight: 400;
}
.menu__link:hover, .menu__link[aria-current="page"] { color: var(--ink); }
.menu__link[aria-current="page"] { position: relative; }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--brass);
}
.menu__caret { width: 8px; height: 8px; opacity: .6; transition: transform .18s var(--ease); }
.menu__item.open .menu__caret { transform: rotate(180deg); }

.drop {
  position: absolute; top: calc(100% + 12px); left: -18px;
  min-width: 268px;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  box-shadow: 0 18px 46px -28px rgba(11, 34, 69, .45);
}
.menu__item.open .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 11px 14px; text-decoration: none; transition: background .16s var(--ease); }
.drop a:hover { background: var(--paper-2); }
.d-name { display: block; font-size: 14.5px; color: var(--ink); }
.d-note {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px;
}

.nav__cta { padding: 11px 18px; font-size: 10px; }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 34px; height: 30px; padding: 6px 4px;
  flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 1px; width: 100%; background: var(--ink); transition: transform .22s var(--ease), opacity .22s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.mobile {
  display: none;
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 89;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 26px var(--gut) 34px;
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.mobile.open { display: block; }
.mobile__grp { padding-block: 14px; border-top: 1px solid var(--rule); }
.mobile__grp:first-child { border-top: 0; padding-top: 0; }
.mobile__lab { color: var(--ink-3); margin-bottom: 10px; display: block; }
.m-link {
  display: block; padding: 9px 0; text-decoration: none;
  font-family: var(--display); font-size: 22px; color: var(--ink);
}
.mobile .btn { margin-top: 14px; width: 100%; justify-content: center; }

@media (max-width: 1020px) {
  .menu, .nav__cta { display: none; }
  .burger { display: flex; }
}

/* ------------------------------------------------------------------ footer */
.foot { padding-block: clamp(52px, 6vw, 78px) 30px; position: relative; z-index: 1; }
.foot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--brass); opacity: .55;
}
.foot__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
}
.foot__wordmark { font-family: var(--display); font-size: clamp(24px, 2.3vw, 31px); letter-spacing: -.015em; }
.foot__line { color: var(--ink-2); font-size: 14.5px; margin: 14px 0 0; max-width: 34ch; }
.foot__lab { color: var(--ink-3); display: block; margin-bottom: 16px; }
.foot__cell a {
  display: block; text-decoration: none; color: var(--ink-2);
  font-size: 14.5px; padding: 5px 0;
  transition: color .16s var(--ease);
}
.foot__cell a:hover { color: var(--brass); }
.foot__cell a.tlink { color: var(--ink); display: inline-flex; }
.foot__legal {
  padding-block: 26px; border-bottom: 1px solid var(--rule);
}
.foot__legal p { color: var(--ink-3); font-size: 12.5px; line-height: 1.75; max-width: 92ch; margin: 0; }
.foot__base {
  padding-top: 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.foot__base a { text-decoration: none; transition: color .16s var(--ease); }
.foot__base a:hover { color: var(--brass); }
.foot__base .sheetno { margin-left: auto; color: var(--brass); }
@media (max-width: 900px) {
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__base .sheetno { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) { .foot__top { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- the navy strip */
/* one per interior page: the firm's standing statement, true blueprint */
.strip { position: relative; padding-block: clamp(40px, 5vw, 64px); }
.strip__in { max-width: 74ch; }
.strip .eyebrow { color: var(--brass); }
.strip p {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(21px, 2.5vw, 34px); line-height: 1.28;
  letter-spacing: -.014em; margin: 0; color: var(--paper);
}
.strip p em { font-style: italic; }

/* ------------------------------------------------------------- end cta band */
.endcta { position: relative; }
.endcta__in {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: end;
}
.endcta__acts { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (max-width: 860px) { .endcta__in { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ scroll reveal */
.rv {
  opacity: 0; transform: translateY(16px);
  transition: opacity .74s var(--ease), transform .74s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .09s; }
.rv-d2 { transition-delay: .18s; }
.rv-d3 { transition-delay: .27s; }
html:not(.js) .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* -------------------------------------------------- self drawing vignettes */
.vignette { width: 100%; height: auto; overflow: visible; }
.vignette .g { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.vignette .s { fill: none; stroke: var(--ink); stroke-width: 1.15; }
.vignette .a { fill: none; stroke: var(--brass); stroke-width: 1.3; }
.navy .vignette .g { stroke: rgba(247,244,236,.3); }
.navy .vignette .s { stroke: rgba(247,244,236,.9); }

.vignette.draft .g, .vignette.draft .s, .vignette.draft .a {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.vignette.draft.in .g { animation: draw .9s var(--ease) forwards; }
.vignette.draft.in .s { animation: draw 1.25s var(--ease) .28s forwards; }
.vignette.draft.in .a { animation: draw .55s var(--ease) 1.3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .vignette.draft .g, .vignette.draft .s, .vignette.draft .a { stroke-dashoffset: 0; }
}
html:not(.js) .vignette.draft .g,
html:not(.js) .vignette.draft .s,
html:not(.js) .vignette.draft .a { stroke-dashoffset: 0; }