/* ============================================================
   TOKENS · LIGHT
   Warm White  #FBFAF7  page ground
   Ink         #0F0E0B  dark marks, redaction bars
   Surface     #F1EEE8  lifted surfaces and frames
   Bone        #16150F  primary text
   Faded       #767065  secondary text
   Blue Pencil #5468AC  editor's ink: edit marks, fig numbers, links
   Paper       #FFFFFF  document recreations inside frames
   ============================================================ */
:root{
  --bg:#FBFAF7;          /* warm white page */
  --ink:#0F0E0B;         /* dark ink: redaction bars, dark marks */
  --char:#F1EEE8;        /* tinted surface: figure frames, cards */
  --bone:#16150F;        /* primary text, near black */
  --faded:#767065;       /* secondary text, warm grey */
  --pencil:#5468AC;      /* the editor's blue, soothing but legible on white */
  --paper:#FFFFFF;       /* document recreations lift off the tinted frame */
  --paper-ink:#15140F;
  --paper-mut:#8A857A;
  --paper-line:#DAD5C9;
  --hairline:rgba(20,19,15,.12);
  --serif:'DM Serif Text',Georgia,serif;
  --sans:'Geist Mono',ui-monospace,monospace;
  --mono:'Geist Mono',ui-monospace,monospace;
  --doc:'Archivo',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--bone);font-family:var(--sans);font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
::selection{background:var(--pencil);color:var(--bg)}
a{color:var(--bone);text-decoration:none}
a:focus-visible{outline:1.5px solid var(--pencil);outline-offset:3px}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

.label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faded)}
.label .tick{color:var(--pencil)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.nav-in{max-width:1060px;margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:baseline}
.nav-name{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:lowercase}
.nav-links{display:flex;gap:24px;flex-wrap:wrap}
.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faded);border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.nav-links a:hover{color:var(--bone);border-color:var(--pencil)}

/* ---------- hero ---------- */
.hero{padding:120px 0 88px}
.hero .label{margin-bottom:40px}
.struck{font-family:var(--serif);font-size:clamp(1.35rem,3.4vw,2.1rem);color:var(--faded);max-width:21ch;margin-bottom:18px}
.struck span{background:linear-gradient(var(--pencil),var(--pencil)) no-repeat 0 56%/0% 1.5px;animation:strike .8s ease .5s forwards}
@keyframes strike{to{background-size:100% 1.5px}}
.rewrite{font-family:var(--serif);font-size:clamp(2.5rem,6.6vw,4.6rem);line-height:1.08;letter-spacing:-.01em;max-width:16ch;opacity:0;transform:translateY(10px);animation:rise .7s ease 1.25s forwards}
.rewrite em{font-style:italic;color:var(--pencil)}
.caret{font-family:var(--mono);font-size:13px;color:var(--pencil);display:block;margin:14px 0 6px;opacity:0;animation:rise .5s ease 1.15s forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.hero-sub{margin-top:36px;color:var(--faded);max-width:52ch;font-size:17px}
@media (prefers-reduced-motion:reduce){
  .struck span{background-size:100% 1.5px;animation:none}
  .rewrite,.caret{opacity:1;transform:none;animation:none}
}

/* ---------- proof strip ---------- */
.proof{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:26px 0}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.proof-item .n{font-family:var(--serif);font-size:1.5rem}
.proof-item .d{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faded);margin-top:4px}

/* ---------- sections ---------- */
section{padding:104px 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:56px;gap:18px;flex-wrap:wrap}
.sec-title{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.01em}

/* ---------- index rows (work + notes) ---------- */
.index{border-top:1px solid var(--hairline)}
.row{display:grid;grid-template-columns:54px 1.35fr 1fr auto;gap:20px;align-items:baseline;padding:30px 8px;border-bottom:1px solid var(--hairline);transition:background .25s;cursor:pointer}
.row:hover{background:var(--char)}
.row:hover .r-client{color:var(--pencil)}
.r-num{font-family:var(--mono);font-size:12px;color:var(--faded)}
.r-client{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.7rem);transition:color .2s}
.r-desc{color:var(--faded);font-size:14.5px}
.r-stat{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faded);text-align:right;white-space:nowrap}
.nda,.tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;padding:3px 7px;margin-left:12px;vertical-align:middle;position:relative;top:-3px}
.nda{color:var(--pencil);border:1px solid var(--pencil)}
.tag{color:var(--faded);border:1px solid rgba(141,136,124,.5)}

/* ---------- case files ---------- */
.case{border-top:1px solid var(--hairline);padding-top:72px;margin-top:72px}
.case.first{border-top:none;padding-top:0;margin-top:0}
.case-kicker{margin-bottom:18px}
.case-title{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.5rem);max-width:24ch;margin-bottom:22px}
.scopebar{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faded);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:13px 0;margin-bottom:52px}
.scopebar b{color:var(--bone);font-weight:500}
.case-grid{display:grid;grid-template-columns:170px 1fr;gap:36px;margin-bottom:48px}
.case-grid .label{padding-top:5px}
.case-grid p{max-width:62ch;color:#38352E}
.case-grid p + p{margin-top:14px}

/* ---------- figures ---------- */
.fig{background:var(--char);border:1px solid var(--hairline);padding:clamp(24px,5vw,56px);margin:56px 0 14px}
.figcap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faded);display:flex;gap:14px}
.figcap .fignum{color:var(--pencil)}

/* document recreations: faithful pages from the actual work, typeset in Archivo */
.doc{background:var(--paper);color:var(--paper-ink);padding:34px 36px;max-width:580px;margin:0 auto;border:1px solid var(--paper-line);box-shadow:0 12px 34px rgba(20,19,15,.12);font-family:var(--doc)}
.doc .doc-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-mut);margin-bottom:10px;display:flex;justify-content:space-between}
.doc h4{font-family:var(--doc);font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:22px}
.doc .icp{display:grid;grid-template-columns:64px 1fr 1fr 1fr;gap:0;font-size:11px;border-top:1.5px solid var(--paper-ink)}
.doc .icp > div{padding:10px 8px;border-bottom:1px solid var(--paper-line)}
.doc .icp .h{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:9.5px}
.doc .icp .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mut)}
.doc .cal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;border-top:1.5px solid var(--paper-ink);padding-top:14px}
.doc .cal .day{border:1px solid var(--paper-line);min-height:44px;padding:5px;font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-mut)}
.doc .cal .day b{display:block;color:var(--paper-ink);font-weight:500;margin-top:6px;font-size:8px}
.doc .wk{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mut);margin:14px 0 6px}
.bar{display:inline-block;background:var(--ink);color:var(--ink);border-radius:0;line-height:1;user-select:none}
.doc .serifhead{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:0;margin:18px 0 26px;max-width:16ch}
.doc .stats{display:flex;gap:26px;border-top:1.5px solid var(--paper-ink);padding-top:14px;flex-wrap:wrap}
.doc .stats .s .v{font-family:var(--serif);font-size:19px}
.doc .stats .s .l{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mut);margin-top:3px}

/* fanned deck */
.fan{position:relative;height:300px;max-width:600px;margin:0 auto}
.fan .slide{position:absolute;width:62%;aspect-ratio:16/10;background:var(--paper);box-shadow:0 16px 44px rgba(20,19,15,.14);padding:7%;font-family:var(--doc)}
.fan .dline{height:8px;background:var(--paper-line);margin-bottom:9px}
.fan .dline.w60{width:60%}.fan .dline.w45{width:45%}.fan .dline.w80{width:80%}
.fan .s1{left:0;top:34px;transform:rotate(-5deg)}
.fan .s2{left:19%;top:10px;transform:rotate(1deg);z-index:2}
.fan .s3{left:38%;top:40px;transform:rotate(6deg)}
.fan .s2 .st{font-family:var(--serif);font-size:15px;color:var(--paper-ink);margin-bottom:12px}

/* edit-arc figure (Harpenin) */
.arc{max-width:560px;margin:0 auto;padding:10px 0}
.arc .old{font-family:var(--serif);font-size:clamp(1.1rem,2.6vw,1.5rem);color:var(--faded);text-decoration:line-through;text-decoration-color:var(--pencil);text-decoration-thickness:1.5px}
.arc .mark{font-family:var(--mono);font-size:12px;color:var(--pencil);margin:16px 0 8px;display:block}
.arc .new{font-family:var(--serif);font-style:italic;font-size:clamp(1.45rem,3.4vw,2.1rem);line-height:1.25}

/* content ladder figure (Fleet) */
.ladder{max-width:560px;margin:0 auto}
.rung{display:flex;align-items:center;gap:14px;margin-bottom:9px}
.rung .rn{font-family:var(--mono);font-size:10px;color:var(--pencil);width:22px;flex:none}
.rung .rb{height:30px;background:var(--char);border:1px solid var(--hairline);display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}

/* chart */
.chartwrap{max-width:640px;margin:0 auto}
.chart-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faded);margin-top:14px}

/* ---------- testimonials ---------- */
.t-item{border-bottom:1px solid var(--hairline);padding:56px 0}
.t-item:first-of-type{padding-top:0}
.t-pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.28;max-width:26ch}
.t-pull::before{content:"^";font-family:var(--mono);font-style:normal;color:var(--pencil);display:block;font-size:14px;margin-bottom:16px}
.t-more{color:var(--faded);max-width:60ch;margin-top:20px;font-size:15px}
.t-attrib{margin-top:24px}

/* ---------- method ---------- */
.steps{border-top:1px solid var(--hairline)}
.step{display:grid;grid-template-columns:54px 200px 1fr;gap:20px;padding:28px 8px;border-bottom:1px solid var(--hairline);align-items:baseline}
.step .s-num{font-family:var(--mono);font-size:12px;color:var(--pencil)}
.step .s-name{font-family:var(--serif);font-size:1.35rem}
.step p{color:var(--faded);font-size:15px;max-width:56ch}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.portrait{background:var(--char);border:1px solid var(--hairline);aspect-ratio:4/5;display:flex;align-items:flex-end;padding:0;overflow:hidden}
.portrait-img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter 0.3s ease}
.portrait-img:hover{filter:grayscale(0%)}
.about-grid .bio p{color:#38352E;max-width:58ch}
.about-grid .bio p + p{margin-top:14px}

/* ---------- cta + footer ---------- */
.cta{padding:140px 0;border-top:1px solid var(--hairline)}
.cta h2{font-family:var(--serif);font-size:clamp(2.3rem,6vw,4.2rem);max-width:18ch;letter-spacing:-.01em;margin-bottom:34px}
.cta a.mail{font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--pencil);border-bottom:1px solid var(--pencil);padding-bottom:3px}
footer{border-top:1px solid var(--hairline);padding:30px 0 44px}
.foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faded);gap:14px;flex-wrap:wrap}

/* ============================================================
   SIDE MODAL (DRAWER)
   ============================================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(15, 14, 11, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 780px;
  height: 100%;
  background: var(--bg);
  box-shadow: -10px 0 40px rgba(15, 14, 11, 0.12);
  z-index: 101;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.modal-drawer.active {
  transform: translateX(0);
}
.modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}
.modal-close-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faded);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.2s, border-color 0.2s;
}
.modal-close-btn:hover {
  color: var(--bone);
  border-color: var(--pencil);
}
.modal-body {
  padding: 48px 32px;
  overflow-y: auto;
  flex-grow: 1;
  background: var(--bg);
}
.modal-body .case {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* ---------- media caption ---------- */
.case-media {
  margin: 32px 0 40px;
  border: 1px solid var(--hairline);
  background: var(--char);
  padding: clamp(16px, 4vw, 40px);
  text-align: center;
}
.case-media img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(20, 19, 15, 0.08);
}
.case-media-caption {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faded);
  margin-top: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.case-media-caption .tick {
  color: var(--pencil);
}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .proof-in{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .row{grid-template-columns:40px 1fr;row-gap:6px}
  .r-desc{grid-column:2}
  .r-stat{grid-column:2;text-align:left;white-space:normal}
  .case-grid{grid-template-columns:1fr;gap:10px}
  .step{grid-template-columns:40px 1fr;row-gap:4px}
  .step p{grid-column:2}
  .about-grid{grid-template-columns:1fr}
  .portrait{max-width:300px}
  section{padding:76px 0}
  .hero{padding:84px 0 64px}
  .doc{padding:24px 20px}
  .doc .icp{grid-template-columns:54px 1fr 1fr 1fr;font-size:9.5px}
  .modal-drawer {
    max-width: 100%;
  }
  .modal-header {
    padding: 16px 20px;
  }
  .modal-body {
    padding: 32px 20px;
  }
}