/* ==========================================================================
   coltonweeks.com, The Desk (2026-09-04)
   One stylesheet for the five public pages.
   Earle ramp, STYLE.md. Type: EB Garamond (voice) + Figtree (instrument).
   Scale: 1.25 major third off 16px: 10.24 12.8 16 20 25 31.25 39 48.8 61.
   Radius rule: interactive controls are pills; surfaces are 10px; nothing else.
   Dark mode: the whole page on abyss. Secondary type haze, hairlines steel,
   azure only as a filled button with cream type. No inverted sections.
   ========================================================================== */

/* ---------- type files, served from this site ---------- */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/EBGaramond-400.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/EBGaramond-500.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/EBGaramond-400-italic.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Figtree-500.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Figtree-600.woff2) format("woff2")}

/* ---------- tokens ---------- */
:root{
  --abyss:#0E1922; --indigo:#16233D; --deep:#14416B; --azure:#1B6699; --steel:#417093;
  --haze:#8FA9BC; --mist:#BDCEDA; --cream:#F2EFE2; --foam:#FAF8EF; --wash:#EAF0F4;
  --acid:#8DD64A; --spark:#C6402A;

  --bg:var(--cream); --plate:var(--foam); --sunk:var(--wash);
  --ink:var(--abyss); --ink-2:var(--indigo); --muted:var(--steel);
  --line:var(--mist); --link:var(--deep);
  --btn:var(--deep); --btn-ink:var(--cream); --btn-hover:var(--indigo);
  --gap:var(--azure); --filled:var(--indigo); --thumb:var(--abyss); --thumb-ring:var(--cream);
  --focus:var(--azure);
  --shadow:0 1px 2px rgba(14,25,34,.05), 0 10px 30px rgba(14,25,34,.08);

  --display:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  --ui:"Figtree","Avenir Next",Avenir,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:var(--abyss); --plate:var(--indigo); --sunk:#0B141B;
    --ink:var(--cream); --ink-2:#E4E1D3; --muted:var(--haze);
    --line:var(--steel); --link:var(--mist);
    --btn:var(--azure); --btn-ink:var(--cream); --btn-hover:var(--deep);
    --gap:var(--cream); --filled:var(--haze); --thumb:var(--cream); --thumb-ring:var(--abyss);
    --focus:var(--cream);
    --shadow:none;
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
img{max-width:100%;display:block}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px;top:8px;background:var(--plate);color:var(--ink);padding:8px 14px;
  border:1px solid var(--line);border-radius:999px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);white-space:nowrap}
.bp{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--cream);
  border:1px solid var(--mist);color:var(--abyss);font-family:var(--display);font-size:15px;line-height:1}
.brand-name{font-size:12.8px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.brand-name span{font-weight:400;color:var(--muted)}
nav.primary{display:flex;gap:26px;align-items:center}
nav.primary a.navlink{font-size:14px;color:var(--muted);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;transition:color .2s var(--ease)}
nav.primary a.navlink:hover{color:var(--ink)}
nav.primary a.navlink[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.btn{display:inline-flex;align-items:center;background:var(--btn);color:var(--btn-ink);text-decoration:none;
  padding:11px 20px;border-radius:999px;font-size:16px;font-weight:500;border:1px solid transparent;
  white-space:nowrap;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--btn-hover);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.quiet:hover{background:var(--plate);border-color:var(--ink)}
.textlink{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:border-color .2s var(--ease)}
.textlink:hover{border-bottom-color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:999px;padding:0 14px;
  height:36px;font-family:var(--ui);font-size:12.8px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);cursor:pointer}
.mobile-nav{display:none;background:var(--bg);border-bottom:1px solid var(--line)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:14px 28px;font-size:16px;color:var(--ink-2);text-decoration:none;border-top:1px solid var(--line)}
.mobile-nav a[aria-current="page"]{color:var(--ink);border-left:3px solid var(--ink);padding-left:25px}
@media(max-width:880px){
  nav.primary a.navlink{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  nav.primary{gap:10px}
  nav.primary .btn{height:36px;padding:0 16px;font-size:14px}
}
@media(max-width:600px){
  .brand-name span{display:none}
}
@media(max-width:440px){
  .brand-name{display:none} /* the Bookplate alone carries the brand */
  .hrow{gap:10px}
}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(31.25px,3.2vw,39px);line-height:1.1;letter-spacing:-.01em}
h2{font-size:clamp(25px,3vw,31.25px);line-height:1.15;letter-spacing:-.008em}
h3{font-size:20px;line-height:1.3}
.lede{font-size:20px;line-height:1.5;color:var(--ink-2);max-width:48ch;margin:0}
section{padding:96px 0}
@media(max-width:760px){section{padding:64px 0}}
.sec-head{display:grid;gap:10px;max-width:60ch;margin-bottom:40px}
.sec-head p{color:var(--ink-2);font-size:16px}
.prose{max-width:66ch;display:grid;gap:16px}
.prose p{font-size:17px;line-height:1.65;color:var(--ink-2)}
.prose .quote{font-family:var(--display);font-size:20px;line-height:1.45;color:var(--ink);max-width:44ch}
.after{margin-top:40px;font-size:15.2px;color:var(--ink-2);max-width:66ch}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding:56px 0 0;display:grid;gap:18px;max-width:66ch}
.page-hero .lede{max-width:56ch}
@media(max-width:760px){.page-hero{padding-top:36px}}

/* ---------- home hero ---------- */
.hero{padding:40px 0 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;
  padding-left:max(28px,calc((100% - 1180px)/2 + 28px))}
.hero-copy{display:grid;gap:26px;padding-top:12px}
.hero-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.plate{position:relative;margin:0;width:100%;aspect-ratio:4/5;max-height:min(640px,calc(100vh - 180px));
  border-radius:10px 0 0 10px;overflow:hidden;background:var(--plate);border:1px solid var(--line);border-right:0}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (prefers-reduced-motion: no-preference){
  .plate{opacity:0;transform:scale(1.02);animation:settle .9s var(--ease) .1s forwards}
  @keyframes settle{to{opacity:1;transform:none}}
}
@media(max-width:860px){
  .hero{padding:20px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:28px;padding:0 28px}
  .plate{order:-1;aspect-ratio:4/3;max-height:40vh;border-radius:10px;border-right:1px solid var(--line)}
  .hero-copy{padding-top:0;gap:20px}
}

/* ---------- disciplines (home) ---------- */
.disciplines{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;list-style:none;margin:0;padding:0}
.disciplines li{padding:24px 0 26px;border-top:1px solid var(--line);display:grid;gap:8px;align-content:start}
.disciplines p{font-size:15.2px;line-height:1.55;color:var(--ink-2);max-width:44ch}
@media(max-width:760px){.disciplines{grid-template-columns:1fr}}

/* ---------- why (home) ---------- */
.why{max-width:66ch}
.byline{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.byline .head{width:64px;height:64px;flex:none;border-radius:10px;overflow:hidden;background:var(--plate);
  border:1px solid var(--line)}
.byline .head img{width:100%;height:100%;object-fit:cover}
.byline b{display:block;font-family:var(--display);font-size:20px;font-weight:400;line-height:1.2}
.byline span{font-size:13.6px;color:var(--muted)}
.why p{font-size:17px;line-height:1.65;color:var(--ink-2)}
.why p + p{margin-top:16px}
.why .close{font-family:var(--display);font-size:25px;color:var(--ink);margin-top:22px}
.proof{margin-top:48px;background:var(--plate);border:1px solid var(--line);border-radius:10px;
  display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow)}
.proof div{padding:28px 30px}
.proof div:nth-child(odd){border-right:1px solid var(--line)}
.proof div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.proof b{display:block;font-family:var(--display);font-size:25px;line-height:1.15;font-weight:400;margin-bottom:6px}
.proof span{font-size:14.4px;color:var(--muted);line-height:1.5}
@media(max-width:620px){
  .proof{grid-template-columns:1fr}
  .proof div:nth-child(odd){border-right:0}
  .proof div:not(:last-child){border-bottom:1px solid var(--line)}
}

/* ---------- the question (home) ---------- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--sunk)}
.q-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
@media(max-width:860px){.q-grid{grid-template-columns:1fr;gap:36px}}
.q-copy{display:grid;gap:18px}
.q-copy .quote{font-family:var(--display);font-size:20px;line-height:1.45;color:var(--ink);max-width:40ch}
.q-copy .note{font-size:15.2px;color:var(--ink-2);max-width:44ch}
.rule{display:grid;gap:14px;padding-top:10px}
.rule label{font-size:12.8px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.track{position:relative;height:44px}
.track input{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--p:55.5%}
.track input::-webkit-slider-runnable-track{height:2px;border-radius:1px;
  background:linear-gradient(to right,var(--filled) 0 var(--p),var(--gap) var(--p) 100%)}
.track input::-moz-range-track{height:2px;border-radius:1px;
  background:linear-gradient(to right,var(--filled) 0 var(--p),var(--gap) var(--p) 100%)}
.track input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:999px;
  background:var(--thumb);border:3px solid var(--thumb-ring);box-shadow:0 0 0 1px var(--line);margin-top:-10px;
  transition:transform .2s var(--ease)}
.track input::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:var(--thumb);
  border:3px solid var(--thumb-ring);box-shadow:0 0 0 1px var(--line)}
.track input:hover::-webkit-slider-thumb{transform:scale(1.08)}
.track input:focus-visible{outline:none}
.track input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--focus);outline-offset:3px}
.track input:focus-visible::-moz-range-thumb{outline:2px solid var(--focus);outline-offset:3px}
.ticks{display:flex;justify-content:space-between;padding:0 8px;font-variant-numeric:tabular-nums;
  font-size:13.6px;color:var(--muted);margin-top:-6px}
.ticks span{width:1ch;text-align:center}
.answer{font-family:var(--display);font-size:25px;line-height:1.3;color:var(--ink);min-height:2.6em;max-width:30ch}
.answer b{font-weight:400;font-variant-numeric:tabular-nums}
.rule .cue{font-size:14.4px;color:var(--muted)}

/* ---------- case studies ---------- */
.cases{display:grid}
.case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding:48px 0;border-top:1px solid var(--line)}
.case-lead{display:grid;gap:12px;align-content:start;position:sticky;top:88px}
.case-lead .kind{font-size:12.8px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.case-lead h3{font-size:25px;line-height:1.2}
.case-lead .sum{font-size:16px;color:var(--ink-2);max-width:40ch}
.case-lead .see{font-size:14.4px;color:var(--muted);margin-top:6px}
.case-body{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;align-content:start}
.case-body > div{display:grid;gap:8px;align-content:start}
.case-body h4{font-family:var(--ui);font-size:12.8px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0}
.case-body p{font-size:15.2px;line-height:1.6;color:var(--ink-2)}
.case-body ul{margin:0;padding-left:18px;font-size:15.2px;line-height:1.6;color:var(--ink-2);display:grid;gap:6px}
.case-body .turn{border-left:2px solid var(--spark);padding-left:16px} /* the wrong turn: the one mark on the page */
.case-body .turn h4{color:var(--ink)}
@media(max-width:860px){
  .case{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .case-lead{position:static}
}
@media(max-width:560px){.case-body{grid-template-columns:1fr}}

/* ---------- how it starts ---------- */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;margin-top:8px}
.step4{border-top:1px solid var(--line);padding:22px 0 8px;display:grid;gap:10px;align-content:start}
.step4.first{border-top:2px solid var(--ink)}
.step4 h2{font-size:22px;line-height:1.3}
.step4 p{font-size:15.2px;line-height:1.55;color:var(--ink-2)}
.step4 .meta{font-size:13.6px;color:var(--muted)}
@media(max-width:900px){.steps4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps4{grid-template-columns:1fr}}
.callout{border-left:2px solid var(--ink);padding:6px 0 6px 24px;margin-top:56px;max-width:44ch}
.callout p{font-family:var(--display);font-size:25px;line-height:1.4;color:var(--ink)}

/* ---------- how I work ---------- */
.phases{border-top:1px solid var(--line)}
.phase{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--line)}
.ph-name{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.2;margin:0}
.ph-note{font-size:13.6px;color:var(--muted);margin-top:8px;max-width:24ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step h4{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.3;margin:0 0 6px}
.step p{font-size:14.4px;line-height:1.55;color:var(--ink-2)}
@media(max-width:860px){.phase{grid-template-columns:1fr;gap:18px}}
@media(max-width:600px){.steps{grid-template-columns:1fr;gap:20px}}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.c-col{padding:28px 30px;border-radius:10px;border:1px solid var(--line)}
.c-after{background:var(--plate);box-shadow:var(--shadow)}
.c-col .mark{display:block;width:28px;height:2px;margin-bottom:18px}
.c-before .mark{background:var(--spark)}
.c-after .mark{background:var(--ink)}
.c-col h3{font-size:20px;margin-bottom:4px}
.c-col .sub{font-size:13.6px;color:var(--muted);margin-bottom:18px}
.c-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.c-col li{font-size:15.2px;line-height:1.5;color:var(--ink-2)}
.c-after li{color:var(--ink)}
@media(max-width:760px){.contrast{grid-template-columns:1fr}}
.pmap{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.pm-h{font-family:var(--display);font-size:20px;margin:0 0 10px}
.pmap ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pmap li{font-size:15.2px;color:var(--ink-2)}
@media(max-width:880px){.pmap{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pmap{grid-template-columns:1fr}}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.about-copy{display:grid;gap:16px}
.about-copy p{font-size:17px;line-height:1.65;color:var(--ink-2)}
.stat30{display:flex;gap:18px;align-items:baseline;margin-bottom:8px}
.stat30 .big{font-family:var(--display);font-size:61px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat30 p{font-size:13.6px;line-height:1.5;color:var(--muted);max-width:24ch}
.portrait{margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--plate)}
.portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
.portrait figcaption{padding:12px 16px 14px;border-top:1px solid var(--line)}
.portrait .pc-name{font-family:var(--display);font-size:20px;color:var(--ink)}
.portrait .pc-role{font-size:13.6px;color:var(--muted);margin-top:2px}
.creds{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.creds li{font-size:15.2px;line-height:1.5;color:var(--ink-2)}
.creds li b{color:var(--ink);font-weight:600}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:36px}}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.prin{border-top:1px solid var(--line);padding:22px 0 26px;display:grid;gap:8px;align-content:start}
.prin p{font-size:15.2px;line-height:1.55;color:var(--ink-2)}
@media(max-width:760px){.principles{grid-template-columns:1fr}}
.pull{border-top:1px solid var(--line);padding-top:40px;max-width:44ch;display:grid;gap:14px}
.pull .big{font-family:var(--display);font-size:31.25px;line-height:1.3;color:var(--ink)}
.pull .big b{font-weight:400;color:var(--link)}
.pull .src{font-size:14.4px;color:var(--muted)}

/* ---------- closing ---------- */
.closing .in{max-width:62ch;border-top:1px solid var(--line);padding-top:40px;display:grid;gap:18px}
.closing p{font-size:17px;color:var(--ink-2);max-width:52ch}
.closing .fine{font-size:13.6px;color:var(--muted)}
.closing .ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);background:var(--plate)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:38px;padding:44px 0 34px}
@media(max-width:700px){.f-grid{grid-template-columns:1fr;gap:26px}}
.f-brand{display:flex;align-items:center;gap:12px}
.f-tag{font-family:var(--display);font-size:20px;color:var(--ink);margin-top:18px}
.f-h{font-size:12.8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 12px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.f-col a{font-size:15.2px;color:var(--ink-2);text-decoration:none}
.f-col a:hover{color:var(--ink);text-decoration:underline}
.f-base{border-top:1px solid var(--line);padding:18px 0 28px;display:flex;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-size:13.6px;color:var(--muted)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn,.textlink,.track input::-webkit-slider-thumb{transition:none}
}

/* ---------- booking modal ---------- */
.bk-veil{position:fixed;inset:0;background:rgba(14,25,34,.62);display:flex;align-items:center;justify-content:center;padding:24px;z-index:900}
.bk-veil[hidden]{display:none}
.bk-panel{background:var(--plate);border:1px solid var(--line);border-radius:10px;width:min(760px,100%);max-height:88vh;
  overflow:auto;position:relative;box-shadow:0 20px 60px rgba(14,25,34,.34)}
.bk-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:25px;line-height:1;color:var(--muted);
  cursor:pointer;padding:6px 10px;border-radius:999px}
.bk-x:hover{background:var(--sunk);color:var(--ink)}
.bk-head{padding:30px 34px 18px;border-bottom:1px solid var(--line)}
.bk-head h3{font-size:31.25px;letter-spacing:-.008em;margin:0 0 8px;color:var(--ink)}
.bk-head p{font-size:16px;color:var(--ink-2);max-width:56ch}
.bk-body iframe{width:100%;height:640px;border:0;display:block}