/* The Practice, with Charles Boucher
   Shared stylesheet for Home, About, Work With Me and Contact.
   Palette: Brand Bible, seven values, 11 August 2026. Amber appears once per page.
   Type: Archivo only, self-hosted, per the Typography Specification (22 August 2026). */

/* ---------- Fonts ---------- */
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-Light-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-Regular-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-Medium-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Expanded";src:url("assets/fonts/Archivo-Expanded-Light-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#070B11;
  --indigo:#0E1824;
  --ocean:#154562;
  --stone:#3D454E;
  --ash:#A7ADB3;
  --paper:#F5F1EA;
  --amber:#E39C3C;
  --hair:#1C2530;
  /* Ocean lifted toward Paper so small labels stay legible on Ink */
  --ocean-lift:#6F8A98;

  --measure:34em;
  --gutter:clamp(20px,5vw,56px);
  --max:1180px;
  --header-h:88px;
  --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-size:clamp(17px,.2vw + 16px,18px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
::selection{background:var(--ocean);color:var(--paper)}
:focus-visible{outline:2px solid var(--paper);outline-offset:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--paper);color:var(--ink);padding:12px 18px;text-decoration:none;
  font-weight:500;font-size:14px;
}
.skip:focus{left:16px;top:16px}

/* Watermark: the mark sits faintly behind the page and stays put while the page scrolls over it.
   A fixed layer instead of background-attachment:fixed, which iPhones ignore. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("assets/logo/mark-paper.svg") no-repeat center/min(76vmin,720px);
  opacity:.04;transition:opacity .9s var(--ease);
}
/* Every page opens with a hero or opener (Home and About show the mark there), so the watermark
   waits until that opening section scrolls away. */
body:has(.hero, .opener)::before{opacity:0}
html.past-top body::before{opacity:.04}
/* ...and fades back out when the footer logo comes on screen. */
html.near-footer body::before{opacity:0}

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

/* ---------- Labels (Section label spec: Normal, 500, 0.16em, all caps) ---------- */
.label{
  font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.5;color:var(--ocean-lift);margin:0;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(7,11,17,.0);
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(7,11,17,.92);
  border-bottom-color:var(--hair);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.site-header .bar{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;padding:14px 0}
.brand-mark{width:58px;height:58px;flex:0 0 auto}
.brand-rule{width:1px;height:44px;background:var(--stone);flex:0 0 auto}
.brand-type{display:flex;flex-direction:column;gap:9px}
.brand-word{width:200px;height:auto}
.brand-with{
  font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:300;
  font-size:10px;line-height:1;letter-spacing:.19em;text-transform:uppercase;white-space:nowrap;
  color:var(--paper);opacity:.82;
}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 28px;flex-wrap:wrap}
.site-nav a{
  display:block;padding:10px 0;
  font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;
  background:linear-gradient(var(--paper),var(--paper)) no-repeat left calc(100% - 4px)/0 1px;
  transition:color .3s var(--ease),background-size .4s var(--ease);
}
.site-nav a:hover{color:var(--paper);background-size:100% 1px}
.site-nav a[aria-current="page"]{color:var(--paper);background-size:100% 1px}

.progress{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--ocean-lift);transform-origin:0 50%;transform:scaleX(0);
}

@media (max-width:720px){
  :root{--header-h:auto}
  /* On a phone the header takes too much of the screen to follow the page down. */
  .site-header{position:static;background:var(--ink);border-bottom-color:var(--hair)}
  .site-header .bar{justify-content:center;padding-bottom:6px}
  .brand{padding:16px 0 4px}
  .brand-mark{width:50px;height:50px}
  .brand-word{width:180px}
  .brand-with{font-size:9px}
  .site-nav{width:100%}
  .site-nav ul{justify-content:center;gap:0 22px}
}

/* ---------- Hero (Home) ---------- */
.hero{
  min-height:calc(100svh - 88px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px var(--gutter) 88px;
}
.hero-mark{width:min(62vw,340px);height:auto;margin:0 auto 48px}
.hero h1{
  font-weight:300;font-size:clamp(24px,2.4vw + 8px,38px);line-height:1.14;letter-spacing:-.012em;
  max-width:17em;margin:0 auto;text-wrap:balance;
}

/* The ring draws itself counter-clockwise from the right, the wave breaks out last,
   then everything is still. Runs once. */
@property --sweep{syntax:"<angle>";inherits:false;initial-value:370deg}
.js .hero-mark{
  -webkit-mask-image:conic-gradient(from 90deg at 50% 50%,transparent calc(350deg - var(--sweep)),#000 calc(360deg - var(--sweep)));
          mask-image:conic-gradient(from 90deg at 50% 50%,transparent calc(350deg - var(--sweep)),#000 calc(360deg - var(--sweep)));
  animation:sweep 2.6s .25s var(--ease) both;
}
@keyframes sweep{from{--sweep:0deg}to{--sweep:370deg}}
.hero-sub{
  font-weight:400;font-size:clamp(16px,.5vw + 13px,19px);line-height:1.5;color:var(--ash);
  max-width:30em;margin:22px auto 0;text-wrap:balance;
}
.hero .actions{justify-content:center;margin-top:30px}
/* Shorter screens: shrink the mark a little so the line and button still fit on the first screen. */
@media (max-height:860px){
  .hero{padding-top:24px}
  .hero-mark{width:min(62vw,340px,30svh);margin-bottom:24px}
}
.js .hero h1{animation:rise 1.2s 1.9s var(--ease) both}
.js .hero-sub{animation:rise 1.2s 2.3s var(--ease) both}
.js .hero .actions{animation:rise 1.2s 2.6s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Page opener (About, Work With Me, Contact) ---------- */
.opener{padding:clamp(56px,10vw,128px) 0 clamp(40px,6vw,72px)}
.opener .label{margin-bottom:28px}
.opener h1{
  font-weight:300;font-size:clamp(28px,3.2vw + 8px,46px);line-height:1.14;letter-spacing:-.012em;
  max-width:18em;margin:0;text-wrap:balance;
}
.opener-mark{width:clamp(96px,14vw,132px);height:auto;margin-bottom:44px;opacity:.92}
.js .opener h1,.js .opener .label,.js .opener-mark{animation:rise 1.1s var(--ease) both}
.js .opener h1{animation-delay:.12s}

/* ---------- Story sections ---------- */
.chapter{padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--hair)}
.chapter:first-of-type{border-top:0}
.chapter .wrap{display:grid;gap:28px}
@media (min-width:900px){
  .chapter .wrap{grid-template-columns:minmax(180px,1fr) minmax(0,2.4fr);gap:56px}
  .chapter .rail{position:sticky;top:calc(var(--header-h) + 40px);align-self:start}
}
.rail .label{display:flex;align-items:center;gap:12px}
.rail .label::before{content:"";width:18px;height:1px;background:currentColor;flex:0 0 auto}

.story{max-width:var(--measure)}
.story > * + *{margin-top:1.05em}
.story > .gap{margin-top:2.2em}
.story h2{
  font-weight:300;font-size:clamp(22px,1.7vw + 10px,32px);line-height:1.24;letter-spacing:-.01em;
  margin:0 0 .9em;text-wrap:balance;max-width:20em;
}
.story h2 + *{margin-top:0}
.story .q{
  padding-left:22px;border-left:1px solid var(--ocean-lift);
}
/* Punch lines: thin and a step larger, with extra room around them so each one lands like a pause */
.story .beat{font-weight:300;font-size:1.15em;line-height:1.4}
.story > :not(h2) + .beat{margin-top:1.5em}
.story > .beat + :not(.gap){margin-top:1.5em}
.story strong{font-weight:500}
.story a{
  text-decoration:underline;text-decoration-color:var(--ocean-lift);
  text-decoration-thickness:1px;text-underline-offset:.22em;
  transition:text-decoration-color .3s var(--ease);
}
.story a:hover{text-decoration-color:currentColor}

/* A larger standout line inside a story */
.voice{
  margin:2.2em 0;padding:0;border:0;
  font-weight:300;font-size:clamp(19px,1.2vw + 11px,25px);line-height:1.38;letter-spacing:-.005em;
}

/* Lines brighten as the reader reaches them (enabled only with JavaScript and motion allowed) */
.reading .story > :not(h2){color:#C1C4C5;transition:color .9s var(--ease)}
.reading .story > .is-read{color:var(--paper)}

/* ---------- Split sections: text and a photo, alternating sides ---------- */
.chapter.split .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
.chapter.split .rail{margin-bottom:28px}
.media{
  margin:0;aspect-ratio:3/2;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--hair);
  background:radial-gradient(circle at 50% 45%,var(--indigo),var(--ink) 75%);
}
.media img{width:62%;height:auto;opacity:.09}
.chapter.split .media{order:-1}
@media (min-width:900px){
  .chapter.split .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(56px,7vw,112px);align-items:start}
  .chapter.split .rail{position:static}
  .chapter.split .media{order:0;aspect-ratio:4/5;position:sticky;top:calc(var(--header-h) + 40px)}
  /* Photo on the left: swap the column widths so the photo keeps the narrower column, like everywhere else */
  .chapter.split.flip .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .chapter.split.flip .col{order:2}
  .chapter.split.flip .media{order:1}
}
.chapter.light .media{border-color:rgba(7,11,17,.12);background:radial-gradient(circle at 50% 45%,#FBF8F3,#E9E3D8 80%)}

/* Photos: the frame takes the photo's own shape, so wide photos are never cropped.
   Tall portraits keep a 4:5 frame. */
.media.photo,.chapter.split .media.photo{aspect-ratio:auto;background:none}
.media.photo img{width:100%;height:auto;opacity:1}
.media.photo.tall,.chapter.split .media.photo.tall{aspect-ratio:4/5;position:relative}
/* While it follows the scroll, a tall photo shrinks if needed so it always fits between the header and the bottom of the window */
@media (min-width:900px){
  .chapter.split .media.photo.tall{
    position:sticky;justify-self:center;
    width:min(100%, calc((100svh - var(--header-h) - 80px) * .8));
  }
}
.media.photo.tall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* Text-only sections between split sections: a single centered column */
.chapter.solo .rail{margin-bottom:28px}
.chapter.solo .col{width:100%;max-width:var(--measure);margin:0 auto}
@media (min-width:900px){
  .chapter.solo .wrap{grid-template-columns:minmax(0,1fr)}
  .chapter.solo .rail{position:static}
}

/* ---------- The one light section: the turning point ---------- */
.chapter.light{background:var(--paper);color:var(--ink);border-top:0}
.chapter.light + .chapter{border-top:0}
.chapter.light .label{color:var(--ocean)}
.chapter.light .story .q{border-left-color:var(--ocean)}
.chapter.light .story a{text-decoration-color:var(--ocean)}
.chapter.light ::selection{background:var(--ink);color:var(--paper)}
.chapter.light :focus-visible{outline-color:var(--ink)}
.reading .chapter.light .story > :not(h2){color:#3F464D}
.reading .chapter.light .story > .is-read{color:var(--ink)}

/* ---------- Amber hairline (About, once) ---------- */
.amber-line{width:64px;height:1px;background:var(--amber);border:0;margin:0 0 40px}

/* ---------- Close / call to action ---------- */
.close{background:var(--indigo);padding:clamp(72px,10vw,128px) 0}
.close .inner{max-width:var(--measure)}
.close p + p{margin-top:1.05em}
.close .lead{font-weight:300;font-size:clamp(21px,1.5vw + 11px,30px);line-height:1.25;letter-spacing:-.01em}
.close p a{
  text-decoration:underline;text-decoration-color:var(--ocean-lift);
  text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .3s var(--ease);
}
.close p a:hover{text-decoration-color:currentColor}
.actions{display:flex;flex-wrap:wrap;gap:14px 16px;margin:32px 0 0}
.actions + p{margin-top:56px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 28px;border:1px solid var(--ash);
  font:inherit;font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:transparent;text-decoration:none;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.amber:hover{background:var(--paper);border-color:var(--paper)}

/* ---------- Form ---------- */
.form-block{background:var(--indigo);padding:clamp(72px,10vw,128px) 0}
.form-block .wrap{display:grid;gap:48px}
@media (min-width:900px){.form-block .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:72px}}
.form-intro p + p{margin-top:1.05em}
.form-intro .media{margin-top:44px}
.form-intro .media.photo.tall img{object-position:50% 80%}
.form-intro .lead{font-weight:300;font-size:clamp(24px,2vw + 12px,36px);line-height:1.25;letter-spacing:-.01em}

.inquiry{display:grid;gap:26px;max-width:40em}
.field{display:grid;gap:10px}
.field label{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.field input,.field textarea{
  width:100%;font:inherit;font-size:17px;color:var(--paper);
  background:transparent;border:0;border-bottom:1px solid var(--stone);border-radius:0;
  padding:10px 0 12px;
  transition:border-color .3s var(--ease);
}
.field textarea{min-height:168px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--paper)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:0 1px 0 0 var(--paper)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field input::placeholder{color:var(--stone);opacity:1}
.field-row{display:grid;gap:26px}
@media (min-width:600px){.field-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}

.field label .optional{opacity:.6;letter-spacing:.08em}

/* The three steps beside the form */
.steps{list-style:none;margin:32px 0 0;padding:0;counter-reset:step;display:grid;gap:14px}
.steps li{counter-increment:step;position:relative;padding-left:40px;color:var(--ash)}
.steps li::before{
  content:"0" counter(step);position:absolute;left:0;top:.3em;
  font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--ocean-lift);
}
.steps li span{color:var(--paper)}

.inquiry .btn{justify-self:start;margin-top:8px}
.form-status{font-size:15px;color:var(--ash);min-height:1.5em}
.form-status.ok{color:var(--paper)}
/* After sending: the form's fields give way to the thank-you, in the lead type size */
.inquiry.is-sent{align-content:start}
.inquiry.is-sent > :not(.form-status){display:none}
.inquiry.is-sent .form-status{
  font-weight:300;font-size:clamp(24px,2vw + 12px,36px);line-height:1.25;letter-spacing:-.01em;outline:none;
}

/* ---------- Questions (Contact) ---------- */
.faq{padding:clamp(72px,10vw,128px) 0}
.faq .label{margin-bottom:22px}
.faq h2{
  font-weight:300;font-size:clamp(22px,1.7vw + 10px,32px);line-height:1.24;letter-spacing:-.01em;
  margin:0 0 40px;text-wrap:balance;
}
.faq-list{max-width:46em;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;padding:24px 48px 24px 0;
  font-weight:400;font-size:clamp(17px,.6vw + 13px,20px);line-height:1.4;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--paper)}
/* Plus that turns into a minus when open */
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:1px;background:var(--ash);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(90deg) scaleX(0);opacity:0}
.faq .answer{padding:0 48px 28px 0;color:var(--ash);max-width:var(--measure)}
.faq .answer p + p{margin-top:1.05em}
.faq .answer a{
  color:var(--paper);text-decoration:underline;text-decoration-color:var(--ocean-lift);
  text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .3s var(--ease);
}
.faq .answer a:hover{text-decoration-color:currentColor}

/* ---------- Continue links (end of About) ---------- */
.next{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--hair)}
.next .actions{margin-top:0}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--hair);padding:72px 0 48px;text-align:center}
.footer-logo{width:200px;height:auto;margin:0 auto 40px}
.site-footer nav ul{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px}
.site-footer nav a{
  display:block;padding:8px 0;text-decoration:none;
  font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  transition:color .3s var(--ease);
}
.site-footer nav a:hover{color:var(--paper)}
.fine{font-size:13px;color:var(--ash);opacity:.7}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .hero-mark{-webkit-mask-image:none;mask-image:none}
}