/* ============================================================
   DEARWORKS — house stylesheet
   Editorial stationery language: hairline rules, paper surfaces,
   one accent (postal red), brass micro-labels, perforation motif.
   8px grid, one easing family, transform/opacity motion only.
   ============================================================ */
:root{
  /* colour — 60 paper / 30 deep surfaces / 10 postal red */
  --paper:#F2EEE6;
  --paper-dark:#E8E0CE;
  --cream:#F7F4EC;
  --ink:#1E2529;
  --ink-deep:#181F24;
  --ink-soft:#49535A;
  --postal-red:#A84335;
  --postal-red-deep:#8F382C;
  --red-bright:#D96A59;
  --ink-blue:#29435F;
  --ink-blue-2:#243C55;
  --brass:#A98C55;
  --brass-bright:#CBB07E;
  --gold-soft:#F6E9C9;
  --tint-blue:#E5EBEF;
  --tint-blush:#F1E2DA;
  --line:rgba(30,37,41,.15);
  --rule:rgba(30,37,41,.55);
  --cream-line:rgba(247,244,236,.22);
  --cream-soft:rgba(247,244,236,.75);

  --display:'Cormorant Garamond', Georgia, serif;
  --body:'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:'DM Mono', 'SF Mono', SFMono-Regular, Menlo, monospace;

  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:40px; --s8:48px; --s9:64px; --s10:80px; --s11:96px; --s12:120px;

  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --t-fast:150ms; --t-base:250ms; --t-slow:350ms;

  --shadow-soft:0 2px 6px rgba(30,37,41,.05), 0 14px 36px rgba(30,37,41,.09);
  --shadow-deep:0 8px 20px rgba(30,37,41,.08), 0 30px 70px rgba(30,37,41,.14);

  --container:1200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  opacity:.035;
  background-image:
    radial-gradient(circle at 20% 30%, #000 .5px, transparent .5px),
    radial-gradient(circle at 60% 70%, #000 .5px, transparent .5px);
  background-size:3px 3px, 5px 5px;
}
::selection{background:var(--postal-red); color:var(--cream);}

.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--s6); position:relative;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; letter-spacing:-.02em;}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--postal-red);
  outline-offset:3px;
  border-radius:2px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible,
.contact a:focus-visible, .mailclub a:focus-visible,
.meaning a:focus-visible, footer a:focus-visible,
.contact-strip a:focus-visible{
  outline-color:var(--cream);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream);
  padding:var(--s3) var(--s5); font-size:14px;
}
.skip-link:focus{left:0;}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--postal-red);
}
.kicker-row{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s5);
  margin-bottom:var(--s5);
}
.kicker-row .r{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* hairline double rule — engraved stationery signature */
.double-rule{
  height:7px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--line);
}

/* perforation row — punched holes before a tone shift */
.perf{
  height:12px;
  background-image:radial-gradient(circle 3.5px at center, var(--perf-dot, var(--ink-deep)) 3.4px, transparent 3.9px);
  background-size:16px 12px;
  background-repeat:repeat-x;
  background-position:center;
}

.margin-note{
  position:absolute; top:var(--s6); right:calc(-1 * var(--s5));
  writing-mode:vertical-rl;
  font:9px var(--mono); letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.55;
  display:none;
}
@media(min-width:1320px){ .margin-note{display:block;} }

section[id], main[id]{scroll-margin-top:92px;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--body);
  font-size:13px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  min-height:44px;
  padding:12px 24px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out-quart),
             box-shadow var(--t-fast) var(--ease-out-quart),
             background-color var(--t-base) var(--ease-out-quart),
             color var(--t-base) var(--ease-out-quart);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-soft);}
.btn:active{transform:translateY(0) scale(.98); transition-duration:100ms;}
.btn-solid{background:var(--postal-red); color:var(--cream);}
.btn-solid:hover{background:var(--postal-red-deep);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--cream);}
.btn-cream{background:var(--cream); color:var(--ink); border-color:var(--cream);}
.btn-cream-outline{border-color:rgba(247,244,236,.55); color:var(--cream);}
.btn-cream-outline:hover{background:var(--cream); color:var(--ink);}

/* ---------- header ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(242,238,230,.92);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--rule);
  transition:transform var(--t-slow) var(--ease-out-quart);
}
@supports not (backdrop-filter:blur(12px)){
  header.site{background:rgba(242,238,230,.98);}
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:.02em;
}
.logo span{color:var(--postal-red);}
nav.primary-links{display:flex; gap:var(--s6);}
nav.primary-links a{
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:var(--ink-soft); position:relative; padding:12px 0;
}
nav.primary-links a:hover, nav.primary-links a[aria-current="page"]{color:var(--ink);}
nav.primary-links a::after{
  content:""; position:absolute; left:0; bottom:6px;
  width:0; height:1px; background:var(--postal-red);
  transition:width var(--t-base) var(--ease-out-quart);
}
nav.primary-links a:hover::after, nav.primary-links a[aria-current="page"]::after{width:100%;}

.header-actions{display:flex; align-items:center; gap:12px;}

.menu-toggle{
  display:none; flex-direction:column; gap:5px; justify-content:center; align-items:center;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px;
}
.menu-toggle span{width:22px; height:1.5px; background:var(--ink); transition:transform var(--t-base) var(--ease-out-quart), opacity var(--t-base);}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-panel{
  position:fixed; top:77px; left:0; right:0; bottom:0; z-index:99;
  background:var(--paper);
  display:none; flex-direction:column;
  padding:var(--s6) var(--s6) var(--s8);
  overflow-y:auto;
}
.mobile-panel.open{display:flex;}
.mobile-panel a.pl{
  font-family:var(--display); font-size:32px; font-weight:500;
  padding:var(--s3) 0; border-bottom:1px dashed var(--line);
  display:flex; align-items:baseline; justify-content:space-between;
}
.mobile-panel a.pl .idx{font:10px var(--mono); letter-spacing:.2em; color:var(--brass);}
.mobile-panel .panel-cta{
  margin-top:auto; padding-top:var(--s6);
  display:flex; flex-direction:column; gap:var(--s3);
}
html.js .mobile-panel.open a.pl{animation:panelIn .5s var(--ease-out-expo) both;}
html.js .mobile-panel.open a.pl:nth-child(2){animation-delay:40ms;}
html.js .mobile-panel.open a.pl:nth-child(3){animation-delay:80ms;}
html.js .mobile-panel.open a.pl:nth-child(4){animation-delay:120ms;}
html.js .mobile-panel.open a.pl:nth-child(5){animation-delay:160ms;}
@keyframes panelIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
@media(min-width:961px){ .mobile-panel{display:none !important;} }

/* ---------- home hero ---------- */
.hero{padding:176px 0 var(--s9); position:relative;}
.hero-grid{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:var(--s9); align-items:center;
}
.hero h1{
  font-size:clamp(48px, 6.6vw, 92px);
  line-height:.98;
  max-width:640px;
  letter-spacing:-.025em;
}
.hero h1 em{font-style:italic; color:var(--postal-red);}
.hero .intro{
  max-width:520px; font-size:18px; color:var(--ink-soft);
  margin-top:var(--s5);
}
.hero-ctas{display:flex; gap:var(--s3); margin-top:var(--s6); flex-wrap:wrap;}
.hero-ctas .btn{padding:14px 28px;}
.hero-trust{
  margin-top:var(--s7);
  display:flex; align-items:center; gap:var(--s3);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
  max-width:480px; line-height:1.8;
}
.hero-trust::before{content:""; width:40px; height:1px; background:var(--ink-soft); flex-shrink:0;}

/* postal collage — engraved stationery, no stripes */
.hero-collage{position:relative; min-height:500px;}
.paper-sheet{
  position:absolute;
  background:var(--paper-dark);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.paper-sheet.back{width:64%; height:62%; right:4%; top:2%; transform:rotate(5deg);}
.hero-envelope{
  position:absolute; left:0; bottom:8%;
  width:78%; aspect-ratio:1.52;
  background:var(--cream);
  border:1px solid var(--rule);
  box-shadow:var(--shadow-deep);
  transform:rotate(-4deg);
  padding:34px;
  z-index:4;
}
.hero-envelope::before{
  content:""; position:absolute; inset:6px;
  border:1px solid var(--line);
  pointer-events:none;
}
.hero-envelope .env-line{
  font-family:var(--mono); text-transform:uppercase;
  font-size:9px; letter-spacing:.16em; color:var(--ink-soft);
}
.hero-envelope .env-title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(22px,2.2vw,30px); line-height:1.02;
  margin-top:26px; max-width:250px; letter-spacing:-.01em;
  position:relative; z-index:2;
}
.hero-envelope .to{margin-top:16px; font-family:var(--display); font-style:italic; font-size:20px; color:var(--ink-blue);}
.hero-stamp{
  position:absolute; right:20px; top:18px;
  width:70px; height:86px;
  border:1px solid var(--postal-red);
  background:var(--paper-dark);
  color:var(--postal-red);
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  padding:8px; text-align:center;
  transform:rotate(5deg);
}
.hero-stamp b{font:500 9px/1 var(--mono); letter-spacing:.12em;}
.hero-stamp span{font:600 24px/1 var(--display);}
.hero-postmark{
  position:absolute; right:6%; top:6%;
  width:118px; height:118px;
  border:1.4px solid var(--ink-blue); border-radius:50%;
  color:var(--ink-blue);
  display:grid; place-items:center; text-align:center;
  font:9px/1.5 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  transform:rotate(-12deg);
  background:rgba(242,238,230,.6);
  z-index:6;
}
.hero-postmark::before{
  content:""; position:absolute; inset:7px;
  border:1px solid currentColor; border-radius:50%; opacity:.5;
}
.hero-note{
  position:absolute; left:2%; top:0;
  width:150px;
  font:italic 19px/1.2 var(--display);
  color:var(--postal-red);
  transform:rotate(-8deg);
  z-index:7;
}

html.js .hero-collage .paper-sheet,
html.js .hero-collage .hero-envelope,
html.js .hero-collage .hero-note{
  opacity:0;
  animation:landOn .8s var(--ease-out-expo) both;
}
html.js .hero-collage .paper-sheet{animation-delay:.15s; animation-name:landOnBack;}
html.js .hero-collage .hero-envelope{animation-delay:.3s; animation-name:landOnEnv;}
html.js .hero-collage .hero-note{animation-delay:.55s; animation-name:landOnNote;}
html.js .hero-postmark{
  opacity:0;
  animation:stampIn .6s var(--ease-out-expo) .8s both;
}
@keyframes landOn{from{opacity:0; transform:translateY(26px);} to{opacity:1;}}
@keyframes stampIn{
  0%{opacity:0; transform:rotate(-12deg) scale(1.7);}
  55%{opacity:1; transform:rotate(-12deg) scale(.92);}
  100%{opacity:1; transform:rotate(-12deg) scale(1);}
}
@keyframes landOnBack{from{opacity:0; transform:translateY(26px) rotate(5deg);} to{opacity:1; transform:rotate(5deg);}}
@keyframes landOnEnv{from{opacity:0; transform:translateY(26px) rotate(-4deg);} to{opacity:1; transform:rotate(-4deg);}}
@keyframes landOnNote{from{opacity:0; transform:translateY(18px) rotate(-8deg);} to{opacity:1; transform:rotate(-8deg);}}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding:180px 0 var(--s9); position:relative;}
.page-hero .double-rule{margin-bottom:var(--s6);}
.page-hero h1{
  font-size:clamp(44px,6vw,84px);
  line-height:.98; letter-spacing:-.025em;
  max-width:840px;
}
.page-hero h1 em{font-style:italic; color:var(--postal-red);}
.page-hero .lead{max-width:560px; font-size:17.5px; color:var(--ink-soft); margin-top:var(--s5);}

/* ---------- two practices (home) ---------- */
.two-practices{padding:0 0 var(--s10);}
.two-answers{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.answer{
  min-height:360px; padding:var(--s7) var(--s7) var(--s8);
  position:relative; display:flex; flex-direction:column;
  overflow:hidden;
  transition:background-color var(--t-slow) var(--ease-out-quart);
}
.answer + .answer{border-left:1px solid var(--rule);}
.answer.brand{background:var(--tint-blue);}
.answer.brand:hover{background:#DDE5EB;}
.answer.mail{background:var(--tint-blush);}
.answer.mail:hover{background:#EDDACF;}
.answer .ghost{
  position:absolute; right:16px; top:-14px;
  font:600 clamp(120px,11vw,170px)/1 var(--display);
  color:transparent;
  -webkit-text-stroke:1px rgba(30,37,41,.22);
  pointer-events:none; user-select:none;
  transition:transform var(--t-slow) var(--ease-out-quart);
}
.answer:hover .ghost{transform:translateY(6px);}
.answer .num{font:10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);}
.answer h2{font-size:clamp(30px,3vw,42px); line-height:1; margin:var(--s8) 0 var(--s3); max-width:400px; position:relative;}
.answer p{max-width:420px; color:var(--ink-soft); font-size:14.5px; flex-grow:1; position:relative;}
.answer .go{
  margin-top:var(--s2);
  padding:12px 0; min-height:44px;
  font:12px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; color:var(--ink);
  align-self:flex-start;
}
.answer .go::after{content:"↗"; font-size:16px; transition:transform var(--t-base) var(--ease-out-quart); display:inline-block;}
.answer:hover .go::after{transform:translate(3px,-3px);}

.tiny-rule{
  display:flex; align-items:center; gap:var(--s3); margin-top:var(--s8);
  font:10px var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.tiny-rule::before{content:""; width:40px; height:1px; background:currentColor; flex-shrink:0;}

/* ---------- philosophy band ---------- */
.philosophy{
  padding:var(--s11) 0;
  background:var(--paper-dark);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.philosophy-grid{display:grid; grid-template-columns:.38fr 1.62fr; gap:var(--s8);}
.philosophy-side{font:10px/1.8 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);}
.philosophy-main{font:italic clamp(34px,4.6vw,64px)/1.08 var(--display); max-width:960px;}
.philosophy-main em{color:var(--postal-red);}
html.js .philosophy-main .w{
  opacity:.14;
  transition:opacity .5s var(--ease-out-quart);
  transition-delay:var(--wd, 0ms);
}
html.js .philosophy-main.lit .w{opacity:1;}

/* ---------- problems (brand page) ---------- */
.problem-intro{display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s9); align-items:end;}
.problem-intro h2{font-size:clamp(34px,4.4vw,58px); line-height:1.04;}
.problem-intro p{max-width:540px; color:var(--ink-soft);}
.problem-list{margin-top:var(--s8); border-top:1px solid var(--rule);}
.problem-item{
  display:grid; grid-template-columns:96px 1.05fr 1.2fr; gap:var(--s5);
  padding:var(--s6) 0; border-bottom:1px solid var(--line);
  transition:transform var(--t-slow) var(--ease-out-quart), background-color var(--t-slow) var(--ease-out-quart);
}
.problem-item:hover{transform:translateX(var(--s3)); background:rgba(168,67,53,.03);}
.problem-item .n{
  font:600 64px/1 var(--display);
  color:transparent;
  -webkit-text-stroke:1px var(--ink-blue);
  opacity:.45;
  transition:opacity var(--t-slow) var(--ease-out-quart);
}
.problem-item:hover .n{opacity:.9; -webkit-text-stroke:1px var(--postal-red);}
.problem-item h3{font-size:clamp(24px,2.4vw,30px); line-height:1.08;}
.problem-item p{font-size:14.5px; color:var(--ink-soft); max-width:560px;}
.problem-item strong{color:var(--ink); font-weight:700;}

/* outcomes as a ledger, not a card grid */
.ledger{margin-top:var(--s9); max-width:820px;}
.ledger .ledger-head{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-blue);
  padding-bottom:var(--s3); border-bottom:1px solid var(--rule);
}
.ledger .row{
  display:grid; grid-template-columns:56px 1fr 1.4fr; gap:var(--s5);
  padding:var(--s5) 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.ledger .row .n{font:10px var(--mono); letter-spacing:.14em; color:var(--brass);}
.ledger .row h3{font-size:26px; line-height:1.05;}
.ledger .row p{font-size:14px; color:var(--ink-soft);}

/* ---------- meaning band ---------- */
.meaning{padding:var(--s12) 0; background:var(--ink-deep); color:var(--cream);}
.meaning-grid{display:grid; grid-template-columns:.4fr 1.6fr; gap:var(--s8);}
.meaning-mark{font:10px/1.7 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--brass-bright);}
.meaning-main{font:italic clamp(36px,4.8vw,68px)/1.02 var(--display); max-width:960px;}
.meaning-main span{color:var(--red-bright);}
.meaning-copy{max-width:680px; color:var(--cream-soft); font-size:14.5px; margin-top:var(--s5);}

/* ---------- field notes ---------- */
.field-section{padding:var(--s11) 0; background:var(--paper-dark); position:relative;}
.field-grid{display:grid; grid-template-columns:.72fr 1.28fr; gap:var(--s9);}
.field-grid h2{font-size:clamp(36px,4.6vw,62px); line-height:1.02; margin-top:var(--s4);}
.field-grid .lead{color:var(--ink-soft); max-width:420px; margin-top:var(--s4);}
.field-list{border-top:1px solid var(--rule);}
.field-list article{padding:var(--s6) 0; border-bottom:1px solid var(--line);}
.field-list .meta{font:10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--postal-red);}
.field-list h3{font:italic clamp(24px,2.6vw,30px)/1.08 var(--display); max-width:740px; margin:var(--s3) 0 var(--s2);}
.field-list p{font-size:13.5px; color:var(--ink-soft); max-width:640px;}

/* ---------- mail club ---------- */
.mailclub{padding:var(--s11) 0; background:var(--ink-blue); color:var(--cream); position:relative;}
.mailclub .eyebrow{color:var(--brass-bright);}
.mail-purpose{display:grid; grid-template-columns:.95fr 1.05fr; gap:var(--s9); align-items:end;}
.mail-purpose h2{font-size:clamp(38px,4.8vw,64px); line-height:1.02; margin-top:var(--s4);}
.mail-purpose > p{max-width:500px; color:var(--cream-soft); font-size:16px;}
.mail-dual{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--cream-line); border:1px solid var(--cream-line);
  margin-top:var(--s8);
}
.mail-dual article{padding:var(--s6); background:var(--ink-blue);}
.mail-dual article:nth-child(2){background:var(--ink-blue-2);}
.mail-dual .label{font:10px var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--brass-bright);}
.mail-dual h3{font-size:30px; margin:var(--s3) 0 var(--s2);}
.mail-dual p{font-size:14px; color:var(--cream-soft);}

.stamp-sheet{
  margin-top:var(--s6);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
}
.stamp-format{
  background:var(--cream); color:var(--ink);
  padding:10px;
  box-shadow:var(--shadow-soft);
  transition:transform var(--t-base) var(--ease-out-quart), box-shadow var(--t-base) var(--ease-out-quart);
}
.stamp-format:nth-child(odd){transform:rotate(-.8deg);}
.stamp-format:nth-child(even){transform:rotate(.8deg);}
.stamp-format:hover{transform:rotate(0) translateY(-4px); box-shadow:var(--shadow-deep);}
.stamp-format .inner{
  border:1px solid var(--postal-red);
  height:100%; min-height:176px;
  padding:var(--s4);
  display:flex; flex-direction:column;
  position:relative;
}
.stamp-format .denom{
  position:absolute; right:10px; top:8px;
  font:600 22px/1 var(--display); color:var(--postal-red);
}
.stamp-format .label{font:9px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--brass);}
.stamp-format h3{font-size:24px; margin:var(--s3) 0 var(--s2); line-height:1;}
.stamp-format p{font-size:12.5px; color:var(--ink-soft); flex-grow:1;}
.stamp-format .foot{
  margin-top:var(--s3); padding-top:var(--s2);
  border-top:1px dashed var(--line);
  font:8.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}

.tell-us{margin-top:var(--s8); max-width:600px;}
.tell-us p{margin-top:var(--s3); color:var(--cream-soft);}
.tell-us .btn{margin-top:var(--s5);}

/* ---------- about ---------- */
.about{padding:var(--s11) 0; position:relative;}
.about-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--s9); align-items:center;}
.about-frame{
  aspect-ratio:4/5;
  background:var(--paper-dark);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.about-frame .postmark{
  position:absolute; top:20px; right:20px;
  width:78px; height:78px;
  border:1.4px solid var(--ink-blue); border-radius:50%;
  color:var(--ink-blue);
  display:grid; place-items:center; text-align:center;
  font:8px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  transform:rotate(-8deg);
}
.about-frame .postmark::before{content:""; position:absolute; inset:6px; border:1px solid currentColor; border-radius:50%; opacity:.5;}
.about-frame .initials{font-family:var(--display); font-size:120px; color:var(--brass); opacity:.5;}
.about-copy h2{font-size:clamp(30px,3.4vw,44px); margin:var(--s4) 0 var(--s5);}
.about-copy p{color:var(--ink-soft); max-width:520px; margin-bottom:var(--s4);}
.about-copy p strong{color:var(--ink); font-weight:700;}
.about-signature{
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:1px solid var(--line);
  font:10px/1.7 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- work: the filing cabinet ---------- */
.archive{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s9);}
.archive-card{
  min-height:280px;
  border:1px solid var(--line);
  background:var(--cream);
  position:relative;
  margin-top:26px;
  transition:transform var(--t-base) var(--ease-out-quart), box-shadow var(--t-base) var(--ease-out-quart);
}
.archive-card::before{
  content:attr(data-tab);
  position:absolute; top:-27px; left:14px;
  background:inherit;
  border:1px solid var(--line); border-bottom:none;
  padding:5px 16px 2px;
  font:9px var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
  border-radius:6px 6px 0 0;
}
.archive-card:hover{transform:translateY(-6px) rotate(-.5deg); box-shadow:var(--shadow-deep);}
.archive-card:nth-child(2){background:var(--tint-blue);}
.archive-card:nth-child(3){background:var(--tint-blush);}
.archive-card .line{position:absolute; width:55%; height:1px; background:var(--ink); left:22px; top:52%;}
.archive-card .title{position:absolute; left:22px; bottom:20px; right:22px; font:clamp(24px,2.2vw,30px)/1.05 var(--display);}
.archive-card .status{
  position:absolute; left:22px; top:20px;
  font:9px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--postal-red);
  border:1px solid currentColor; padding:4px 8px;
  transform:rotate(-2deg);
}
.section-head h2{font-size:clamp(30px,3.6vw,48px); margin-top:var(--s4); line-height:1.06;}
.section-head p{color:var(--ink-soft); margin-top:var(--s4); max-width:560px;}

/* ---------- contact (home) ---------- */
.contact{background:var(--postal-red); color:var(--cream); position:relative;}
.contact .contact-inner{padding:var(--s11) 0;}
.contact .eyebrow{color:rgba(247,244,236,.95);}
.contact h2{font-size:clamp(44px,6.4vw,92px); line-height:.96; max-width:960px; margin-top:var(--s4); letter-spacing:-.025em;}
.contact h2 em{font-style:italic;}
.contact .contact-lead{max-width:580px; color:rgba(247,244,236,.95); margin-top:var(--s5); font-size:16.5px;}
.cut-line{
  display:flex; align-items:center; gap:var(--s3);
  margin:var(--s8) 0 var(--s5);
  font:12px var(--mono); color:rgba(247,244,236,.75);
}
.cut-line::after{content:""; flex-grow:1; border-top:2px dashed rgba(247,244,236,.45);}
.contact-ctas{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);}
.cta-block{
  border:1px solid rgba(247,244,236,.6);
  padding:var(--s5);
  min-height:132px;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s3);
  transition:background-color var(--t-base) var(--ease-out-quart),
             border-color var(--t-base) var(--ease-out-quart),
             transform var(--t-fast) var(--ease-out-quart),
             box-shadow var(--t-fast) var(--ease-out-quart);
}
.cta-block:hover{background:rgba(247,244,236,.08); border-color:rgba(247,244,236,.85); transform:translateY(-2px);}
.cta-block:active{transform:translateY(0) scale(.99);}
.cta-block .k{font:10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft);}
.cta-block .t{font-family:var(--display); font-size:28px; line-height:1;}
.cta-block .d{font-size:13px; color:rgba(247,244,236,.92);}
.cta-block.primary{
  grid-column:1 / -1;
  background:var(--cream); border-color:var(--cream); color:var(--ink);
  min-height:150px;
  box-shadow:var(--shadow-deep);
}
.cta-block.primary .k{color:var(--postal-red);}
.cta-block.primary .t{font-size:clamp(30px,3.4vw,42px);}
.cta-block.primary .d{color:var(--ink-soft);}
.cta-block.primary:hover{background:#FFFDF6; transform:translateY(-3px);}

/* ---------- contact strip (subpages, pre-footer) ---------- */
.contact-strip{
  background:var(--ink-deep); color:var(--cream);
  padding:var(--s9) 0;
}
.contact-strip .strip-grid{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s6); flex-wrap:wrap;
}
.contact-strip h2{font-size:clamp(28px,3.4vw,44px); font-style:italic; line-height:1.05; max-width:520px;}
.contact-strip .strip-actions{display:flex; gap:var(--s3); flex-wrap:wrap;}

/* ---------- footer ---------- */
footer.site{background:var(--ink-deep); color:rgba(247,244,236,.68); padding:var(--s8) 0 var(--s6);}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s7);
  padding-bottom:var(--s6); border-bottom:1px solid rgba(247,244,236,.14);
  flex-wrap:wrap;
}
.footer-logo{font-family:var(--display); font-size:22px; color:var(--cream);}
.footer-tag{font:10px var(--mono); letter-spacing:.14em; text-transform:uppercase; margin-top:6px; color:rgba(247,244,236,.5);}
.footer-cols{display:flex; gap:var(--s10); flex-wrap:wrap;}
.footer-col .h{font:10px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--brass-bright); margin-bottom:var(--s3);}
.footer-col a{display:flex; align-items:center; min-height:40px; font-size:13.5px; color:rgba(247,244,236,.75);}
.footer-col a:hover{color:var(--cream);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:var(--s5); font-size:12.5px; flex-wrap:wrap; gap:var(--s3);}

/* ---------- reveal ---------- */
html.js [data-animate]{opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);}
html.js [data-animate].is-visible{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  html.js [data-animate]{opacity:1; transform:none; transition:none;}
  html.js .hero-collage .paper-sheet, html.js .hero-collage .hero-envelope,
  html.js .hero-collage .hero-note, html.js .hero-postmark{animation:none; opacity:1;}
  html.js .mobile-panel.open a.pl{animation:none;}
  html.js .philosophy-main .w{opacity:1; transition:none;}
  .btn, .cta-block, .answer, .problem-item, .stamp-format, .archive-card{transition:none;}
  nav.primary-links a::after, .answer .go::after, .menu-toggle span{transition:none;}
  header.site{transition:none;}
}

/* ---------- responsive ---------- */
@media(max-width:1060px){
  .hero-grid{grid-template-columns:1fr; gap:var(--s8);}
  .hero-collage{max-width:560px; min-height:440px;}
}
@media(max-width:960px){
  nav.primary-links{display:none;}
  .menu-toggle{display:flex;}
  .two-answers, .problem-intro, .mail-purpose, .philosophy-grid,
  .meaning-grid, .field-grid, .about-grid{grid-template-columns:1fr;}
  .answer + .answer{border-left:0; border-top:1px solid var(--rule);}
  .problem-intro, .mail-purpose{gap:var(--s5);}
  .stamp-sheet{grid-template-columns:1fr 1fr;}
  .archive{grid-template-columns:1fr; gap:var(--s7);}
  .contact-ctas{grid-template-columns:1fr;}
  .ledger .row{grid-template-columns:40px 1fr; }
  .ledger .row p{grid-column:2;}
  .philosophy, .meaning, .field-section, .mailclub, .about{padding-top:var(--s10); padding-bottom:var(--s10);}
  .contact .contact-inner{padding:var(--s10) 0;}
  .page-hero{padding-top:150px;}
  .about-grid{gap:var(--s6);}
  .about-frame{max-width:420px;}
}
@media(max-width:620px){
  .hero{padding-top:140px;}
  .kicker-row .r{display:none;}
  .hero-collage{min-height:340px;}
  .hero-envelope{padding:20px;}
  .hero-envelope .env-title{margin-top:16px;}
  .hero-note{font-size:15px; width:110px;}
  .hero-postmark{width:92px; height:92px; font-size:8px;}
  .stamp-sheet{grid-template-columns:1fr;}
  .answer{padding:var(--s5) var(--s5) var(--s6); min-height:0;}
  .answer h2{margin-top:var(--s6);}
  .answer .ghost{font-size:110px; right:8px;}
  .problem-item{grid-template-columns:56px 1fr; gap:var(--s4);}
  .problem-item .n{font-size:44px;}
  .problem-item p{grid-column:2;}
  .footer-top{flex-direction:column;}
  .footer-cols{gap:var(--s6);}
  .header-cta{font-size:11px; padding:10px 14px;}
}