/* Bluehill — bluehill.com
   Direction B "Navy Field". No JS, no external requests. */

@font-face{font-family:"Newsreader";font-weight:200 800;font-style:normal;font-display:swap;src:url("/fonts/newsreader-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:200 800;font-style:italic;font-display:swap;src:url("/fonts/newsreader-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/inter-regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/inter-medium.woff2") format("woff2")}

:root{
  --cream:#F4F2EC;
  --navy:#14233A;
  --navy-2:#1B2F4B;
  --ink:#1E1E1E;
  --stone:#6E6A62;
  --mist:#AAB4C4;
  --rule:#D9D5CB;
  --rule-dark:#2A3D58;

  /* page roles (light) */
  --bg:var(--cream);
  --fg:var(--ink);
  --fg-2:var(--stone);
  --accent:var(--navy-2);
  --line:var(--rule);
  --link:var(--navy-2);
  --focus:var(--navy-2);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --max:1280px;
  --gutter:20px;
  --sec:72px;
}
@media (min-width:48em){:root{--gutter:40px;--sec:96px}}
@media (min-width:64em){:root{--gutter:56px;--sec:112px}}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#18283F;
    --fg:#E8E4DA;
    --fg-2:var(--mist);
    --accent:#F4F2EC;
    --line:var(--rule-dark);
    --link:#E8E4DA;
    --focus:#E8E4DA;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--navy);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
a:focus-visible,.skip:focus{outline:2px solid var(--focus);outline-offset:4px;border-radius:2px}
img,svg{display:block}

.skip{position:absolute;left:1rem;top:-3rem;background:var(--cream);color:var(--ink);padding:.5rem .75rem;z-index:10}
.skip:focus{top:1rem}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* Labels */
.lab{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 32px}

/* ---------- Field (navy opening, home) and masthead (inner) ---------- */
.field{position:relative;background:var(--navy);color:var(--cream);overflow:hidden}
.field::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96 0 0 0 0 .95 0 0 0 0 .92 0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size:240px 240px}
.field .wrap{position:relative;z-index:1}

.top{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
@media (min-width:48em){.top{padding:40px 0}}
.top .word{font-family:var(--serif);font-size:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);font-weight:400}
.top .word img{width:132px;height:auto}
.top nav{display:none;gap:24px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@media (min-width:30em){.top nav{display:flex}}
@media (min-width:48em){.top nav{gap:40px;font-size:13px}}
.top nav a{color:var(--mist)}
.top nav a:hover{color:var(--cream);text-decoration:none}

.hero{padding:56px 0 72px;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media (min-width:48em){.hero{padding:96px 0 112px;grid-template-columns:1fr 1fr;gap:64px}}
@media (min-width:64em){.hero{padding:120px 0 128px;gap:80px;min-height:calc(100vh - 121px)}}
.hero .seal{width:min(260px,70vw);height:auto;margin:0 auto}
@media (min-width:48em){.hero .seal{width:min(440px,100%)}}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,64px);line-height:1.08;letter-spacing:-.005em;margin:0 0 24px;color:var(--cream);text-wrap:balance}
.hero p{margin:0;font-size:17px;line-height:1.7;color:var(--mist);max-width:440px}
@media (max-width:47.99em){.hero > div{text-align:center}.hero p{margin:0 auto}}

/* Inner-page masthead: same navy band, shorter */
.masthead{padding-bottom:56px}
@media (min-width:48em){.masthead{padding-bottom:88px}}
.masthead h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,64px);line-height:1.08;margin:24px 0 0;color:var(--cream)}
.masthead .meta{margin:16px 0 0;color:var(--mist);font-size:15px}

/* ---------- Content ---------- */
.content{background:var(--bg);flex:1 0 auto}
.sec{padding:var(--sec) 0;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}

.about{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:48em){.about{grid-template-columns:1fr 1fr;gap:80px}}
.about .big{margin:0;font-family:var(--serif);font-size:clamp(28px,3.2vw,38px);line-height:1.28;font-weight:300;color:var(--accent);text-wrap:balance}
.about .small{margin:0;font-size:17px;line-height:1.7;color:var(--fg-2);max-width:480px;align-self:end}

.three{display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:48em){.three{grid-template-columns:repeat(3,1fr);gap:40px}}
@media (min-width:64em){.three{gap:56px}}
.three .num{font-family:var(--serif);font-size:clamp(72px,9vw,120px);line-height:.9;font-weight:300;color:var(--accent);margin:0 0 20px;letter-spacing:-.03em}
@media (min-width:48em){.three .num{margin-bottom:28px}}
.three h3{font-family:var(--serif);font-size:30px;font-weight:400;margin:0 0 10px;color:var(--accent);line-height:1.1}
.three p{margin:0;line-height:1.65;max-width:320px;color:var(--fg)}

.contact .lab{margin-bottom:20px}
.contact p{margin:0 0 12px;color:var(--fg-2)}
.contact .mail{font-family:var(--serif);font-size:clamp(28px,4.5vw,48px);font-weight:300;line-height:1.15;overflow-wrap:anywhere}
.contact .mail a{color:var(--accent)}

/* Inner page prose */
.page{max-width:720px}
.page h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:48px 0 12px;color:var(--accent);line-height:1.2}
.page h2:first-child{margin-top:0}
.page p{margin:0 0 16px;max-width:640px}
.page p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.foot{background:var(--navy);color:var(--mist);padding:48px 0}
@media (min-width:48em){.foot{padding:64px 0}}
.foot .wrap{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:48em){.foot .wrap{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.foot .mark{width:140px;height:auto;margin-bottom:16px}
.foot p{margin:0;font-size:13px;line-height:1.65;max-width:520px}
.foot .legal{display:flex;gap:28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:20px}
.foot .legal a{color:var(--cream)}

/* ---------- Reveal on load (CSS only) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .reveal.d1{animation-delay:.08s}
  .reveal.d2{animation-delay:.2s}
  .reveal.d3{animation-delay:.32s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}