/* PREVIEW ONLY (20 Oct 2026): www.codexofthearchitect.com in the green Codex house style.
   Tokens, fonts, seal and button rules follow the app (architect-ai-green, branch green-look-20oct):
   src/app/globals.css light tokens, src/app/codex/codex.css, src/components/brand-mark.tsx. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-italic.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/public-sans.woff2) format("woff2")}

:root{
  --green:#1D3B2C; --deep:#13271D; --ink:#17201B; --body:#3B4842; --slate:#56645C;
  --panel:#F2F4F1; --panel-soft:#F7F8F6; --rule:#D8DED9; --tint:#E7ECE8; --field:#9FAAA3;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-color:#FFFFFF;
  background-image:radial-gradient(ellipse 70% 420px at 80% 0,rgba(29,59,44,.08),rgba(29,59,44,0) 70%),url("threads.svg");
  background-repeat:no-repeat,repeat; background-size:100% 100%,1200px 600px;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--deep);text-wrap:balance;margin:0}
p{margin:0 0 20px}
a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--deep);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
img{max-width:100%;height:auto}

/* ---------- Top Codex bar (kept, restyled) ---------- */
a.codexbar,a.cx-bar{display:block;text-align:center;padding:10px 16px;font-family:var(--sans);font-size:15px;line-height:1.4;
  color:#DCE4DE;background:var(--deep);text-decoration:none;border:0;position:relative;z-index:30}
a.codexbar b,a.cx-bar b{font-weight:600;letter-spacing:.08em;color:#FFFFFF}
a.codexbar:hover,a.cx-bar:hover{color:#FFFFFF;background:#0E1E16}
a.codexbar:focus-visible,a.cx-bar:focus-visible{outline-color:#FFFFFF;outline-offset:-4px}

/* ---------- Header with the brand mark ---------- */
header.site{position:sticky;top:0;z-index:20;background:#FFFFFF;border-bottom:1px solid var(--rule)}
.bar{max-width:1160px;margin:0 auto;padding:14px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--green)}
a.mark:hover{color:var(--green)}
.mark img{width:40px;height:40px;flex:none;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-name{font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:.005em;color:var(--green);white-space:nowrap}
.brand-sub{font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-top:2px;white-space:nowrap}
nav.top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;font-family:var(--sans);font-size:15.5px;font-weight:500}
nav.top a{color:var(--ink);text-decoration:none}
nav.top a:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px}
nav.top a.btn{color:#FFFFFF;text-decoration:none}

@media (max-width:420px){
  .bar{padding:12px 16px;gap:10px 12px}
  .mark{gap:8px}
  .mark img{width:34px;height:34px}
  .brand-name{font-size:17px}
  .brand-sub{font-size:10px;letter-spacing:.14em}
  nav.top a.btn{font-size:15px;padding:10px 14px}
}

/* ---------- Buttons: solid green, white text, 4px, at least 48px ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-align:center;background:var(--green);color:#FFFFFF;
  border:1.5px solid var(--green);font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.3;letter-spacing:.01em;
  padding:13px 24px;border-radius:4px;text-decoration:none;text-transform:none}
.btn:hover{background:var(--deep);border-color:var(--deep);color:#FFFFFF;text-decoration:none}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:var(--panel);color:var(--deep);border-color:var(--deep)}

/* ---------- Shared building blocks (home, The Four Doors, Origins) ---------- */
.wrap{max-width:760px;margin:0 auto;padding:0 28px;position:relative}
.eyebrow,.film .lens{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:0 0 12px}
section{padding:72px 0;position:relative}
section.band{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.page{max-width:760px;margin:0 auto;padding:0 28px}
h2.big,.page h2,section.band h2{font-size:clamp(30px,4.2vw,42px);line-height:1.14;margin:0 0 20px}
.lede{font-size:21px;line-height:1.55;color:var(--ink)}
.quiet{color:var(--body)}
.dropcap::first-letter{all:unset}
.center{text-align:center}
.orn{display:block;width:72px;height:1px;background:var(--rule);margin:36px auto;border:0}
.orn svg{display:none}
.pull{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,4vw,38px);line-height:1.22;color:var(--deep);text-align:center;max-width:640px;margin:0 auto 30px;text-wrap:balance}

/* ---------- Home hero, with the face and the credential up front ---------- */
.hero{padding:56px 0 64px}
.hero .wrap.hero-grid{max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px 64px;align-items:start}
.hero-text{min-width:0}
.hero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.08;letter-spacing:-.012em;margin:0 0 24px}
.hero .sub{font-size:20px;line-height:1.6;color:var(--body);max-width:36em;margin:0 0 30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.fineprint{font-family:var(--sans);font-size:16px;color:var(--slate);margin-top:18px}
.person{margin:6px 0 0;background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:32px 26px 26px;text-align:center}
.person .face{display:block;width:200px;height:200px;margin:0 auto 18px;border-radius:50%;overflow:hidden;background:var(--tint)}
.person .face img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.person figcaption{font-family:var(--sans);font-size:18px;line-height:1.45;color:var(--body);max-width:15em;margin:0 auto}
.person figcaption strong{font-weight:600;color:var(--deep)}
.testi{margin:40px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--green);font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.55;color:var(--ink);max-width:36em}
.testi cite{display:block;font-family:var(--sans);font-style:normal;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-top:12px}

/* Home: figures and the three steps */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:34px 0 8px}
.fig{text-align:center;padding:24px 14px;border:1px solid var(--rule);border-radius:4px;background:#FFFFFF}
.fig .n{font-family:var(--serif);font-weight:500;font-size:44px;color:var(--deep);line-height:1;font-variant-numeric:tabular-nums}
.fig .l{font-family:var(--sans);font-size:15px;color:var(--slate);margin-top:10px;line-height:1.35}
#library .quiet a{display:inline-block;margin:4px 6px;font-family:var(--sans);font-size:16px;font-weight:600}
.pathrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0}
.step{padding:22px 20px;border:1px solid var(--rule);border-radius:4px;background:#FFFFFF;text-align:left}
.step .k{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--deep);line-height:1.2}
.step .d{font-family:var(--sans);font-size:16px;color:var(--body);margin-top:6px;line-height:1.45}

/* ---------- Footer ---------- */
footer.site{background:var(--deep);color:#C9D4CC;padding:56px 0 44px;text-align:center;font-family:var(--sans);font-size:15.5px}
footer.site .seal{display:block;width:64px;height:64px;margin:0 auto 18px}
footer.site .colophon{font-family:var(--serif);font-size:17px;line-height:1.65;color:#DCE4DE;max-width:600px;margin:0 auto 22px}
footer.site .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:0 auto 24px;max-width:760px}
footer.site a{color:#FFFFFF;text-decoration:none}
footer.site a:hover{text-decoration:underline;color:#FFFFFF}
footer.site a:focus-visible{outline-color:#FFFFFF}
footer.site .folio{font-family:var(--serif);font-size:16px;letter-spacing:.02em;color:#B9C6BD}

/* ---------- The Four Doors (films) ---------- */
.pg-doors .hero{text-align:center;padding:64px 0 64px}
.pg-doors .hero h1{max-width:15em;margin:0 auto 22px}
.pg-doors .hero .sub{margin:0 auto 30px}
.films{max-width:860px;margin:0 auto;padding:0 28px}
.film{margin:0 0 60px;text-align:center}
.film:last-child{margin-bottom:0}
.film h3{font-size:clamp(26px,3.6vw,34px);line-height:1.15;margin:4px 0 10px}
.film .desc{font-size:19px;color:var(--body);margin:0 auto 22px;max-width:600px}
.film .screen{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.film video{width:100%;height:100%;display:block;background:#000;border:0}

/* ---------- Origins ---------- */
.title{text-align:center;padding:64px 0 40px}
.title h1{font-size:clamp(44px,7vw,76px);line-height:1.02;margin:6px 0 22px}
.title .byline{font-family:var(--sans);opacity:1!important;color:var(--body)}
.title .sub{font-size:21px;font-style:italic;color:var(--body);max-width:600px;margin:0 auto}
.pg-origins section{padding:64px 0}
.dark-passage{max-width:760px;margin:0 auto}
.dark-passage .btn{margin-top:4px}
.dark-passage:has(.pull){text-align:center}
.title .byline{font-size:16px!important}

/* ---------- The Whole Path (its own lighter template) ---------- */
.pg-path main.wrap{max-width:760px;margin:0 auto;padding:40px 24px 80px}
.pg-path .kicker{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:0 0 12px}
.pg-path h1{font-size:clamp(36px,5vw,48px);line-height:1.1;margin:0 0 14px}
.pg-path .canon{font-size:21px;line-height:1.55;margin:0 0 26px;color:var(--body)}
.pg-path h2{font-size:27px;line-height:1.2;margin:0 0 6px}
.wp-steps{display:grid;gap:16px;margin:28px 0}
.wp-step{display:grid;grid-template-columns:48px 1fr;gap:16px;background:#FFFFFF;border:1px solid var(--rule);border-radius:4px;padding:24px 24px 14px}
.wp-num{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--green);line-height:1.1}
.wp-price{font-family:var(--sans);font-size:17px;color:var(--green);font-weight:600;margin:0 0 12px}
.wp-step p{margin:0 0 12px}
.wp-done{font-style:italic;text-align:center;margin:30px auto 18px;max-width:640px;color:var(--body)}
.pg-path .cta{margin:0 0 34px}
.pg-path .cta .btn{font-size:16px;padding:13px 26px}
.pg-path .cta .small{display:block;margin-top:12px;font-family:var(--sans);font-size:16px;color:var(--slate)}
.pg-path footer.mini{margin-top:48px;padding-top:22px;border-top:1px solid var(--rule);font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--body)}

/* ---------- Phones ---------- */
@media (max-width:860px){
  .hero .wrap.hero-grid{grid-template-columns:minmax(0,1fr)}
  .person{order:-1;display:flex;align-items:center;gap:16px;text-align:left;padding:14px 16px;margin:0}
  .person .face{width:76px;height:76px;flex:none;margin:0}
  .person figcaption{font-size:18px;margin:0}
}
@media (max-width:600px){
  body{font-size:19px}
  .wrap,.page,.films{padding:0 20px}
  section{padding:56px 0}
  .hero{padding:24px 0 52px}
  .hero h1{font-size:35px;line-height:1.1}
  .hero .sub,.lede{font-size:19px}
  .cta-row .btn{flex:1 1 100%}
  .figs,.pathrow{grid-template-columns:minmax(0,1fr)}
  .fig{padding:18px 14px}
  .testi{font-size:19px}
  .step .d,.fig .l{font-size:17px}
  footer.site .fnav{gap:16px 22px}
  footer.site .fnav a{padding:4px 0}
  .pg-path main.wrap{padding:28px 20px 64px}
  .wp-step{grid-template-columns:30px 1fr;padding:18px 18px 8px;gap:10px}
  .pg-path .canon{font-size:20px}
  .title{padding:44px 0 28px}
  .pg-origins section{padding:48px 0}
}
/* 20 Oct 2026 (Michael): on a phone "Enter the Atlas" must sit above the browser bar on the first screen.
   Phones: the main button comes straight after the headline (the paragraph follows it), and the header's
   duplicate button is hidden so the hero starts higher. */
@media (max-width:600px){
  .hero-text{display:flex;flex-direction:column}
  .hero-text .eyebrow{order:0}
  .hero-text h1{order:1}
  .hero-text .cta-row{order:2;margin:18px 0 4px}
  .hero-text .fineprint{order:3;margin-top:6px}
  .hero-text .sub{order:4;margin-top:22px}
  .hero-text .testi{order:5}
  header.site nav.top a.btn{display:none}
  .hero{padding-top:18px}
  .person{padding:12px 14px}
}
/* 20 Oct 2026: a jump link (What this is, About Michael) must land below the sticky header, not under it. */
html{scroll-padding-top:170px}
@media (max-width:600px){html{scroll-padding-top:150px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* 21 Oct 2026 (Michael): on phones the menu sits behind a three-line button at the right of the name. */
.navbtn{display:none}
@media (max-width:760px){
  header.site .navbtn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;margin-left:auto;background:transparent;border:1px solid rgba(29,59,44,.25);border-radius:4px;cursor:pointer}
  header.site .navbtn span{display:block;height:2px;width:100%;background:#1D3B2C;border-radius:2px;transition:transform .2s,opacity .2s}
  header.site.navopen .navbtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.site.navopen .navbtn span:nth-child(2){opacity:0}
  header.site.navopen .navbtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.site nav.top.collapse{display:none!important}
  header.site.navopen nav.top.collapse{display:flex!important;flex-direction:column;align-items:stretch;flex-basis:100%;gap:0;padding:6px 0 4px;border-top:1px solid rgba(29,59,44,.14);font-size:17px}
  header.site.navopen nav.top.collapse a{display:block!important;padding:13px 2px!important;border-bottom:1px solid rgba(29,59,44,.10)!important}
  header.site.navopen nav.top.collapse a.btn{display:flex!important;justify-content:center;margin-top:12px!important;border-bottom:0!important}
}
@media (prefers-reduced-motion:reduce){header.site .navbtn span{transition:none}}

/* 21 Oct 2026: David's Trustpilot review on the home page, under Lise's quote. */
.tp-review{margin:22px 0 0;padding:18px 20px;background:#FFFFFF;border:1px solid rgba(29,59,44,.18);border-radius:4px;max-width:640px}
.tp-review .tp-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.tp-review .tp-top img{display:block;height:auto}
.tp-review blockquote{margin:0;font-family:var(--serif,Newsreader,Georgia,serif);font-size:18px;line-height:1.55;color:#17201B}
.tp-review figcaption{margin-top:10px;font-family:var(--sans,"Public Sans",Arial,sans-serif);font-size:14px;color:#56645C}
.tp-review figcaption a{color:#1D3B2C;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.hero-text .tp-review{order:6}}