/* concept-site/practice.css
   Author: DrBee.cloud | Date: 2026-08-10 (chrome extracted 2026-08-12)
   "The Practice" concept - editorial identity for drbee.cloud.
   Navy / gold / paper, Fraunces display, Literata text, Space Grotesk wayfinding.

   DEPENDENCY: this file depends on /chrome.css being loaded BEFORE it. The
   @font-face faces, :root custom-property tokens, header (.hd), footer (.ft)
   and brand marks (.mg/.wm) — the site CHROME — were extracted to chrome.css
   on 2026-08-12 so all 17 pages share one styling source for chrome. This file
   keeps ONLY the Practice theme body: global resets, cover/chap heroes,
   sections, cards, forms, reveals. It is loaded by the 13 Practice pages only.

   EXCEPTION — Literata stays HERE, not in chrome.css (2026-08-12). Literata is
   the body text face (--text), used by `body` below and by nothing in the
   chrome. src/fonts.css already declares 'Literata' at font-weight 400 600 for
   the 4 old-theme pages; putting this 200 900 declaration in chrome.css would
   load both on those pages, so an article heading asking for weight 700 would
   render true 700 instead of clamping to 600 — a silent change to article body
   text. Declaring it here keeps it on the 13 pages that actually need it. */

@font-face{font-family:'Literata';src:url('/fonts/literata-latin-var.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--gold);color:var(--navy);}

/* ---------- cover ---------- */
.cover{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--paper);isolation:isolate;background:var(--navy);}
.cover img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.cover::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,17,32,.42) 0%,rgba(8,17,32,.18) 38%,rgba(8,17,32,.62) 72%,rgba(8,17,32,.94) 100%);}
.cover .inner{width:var(--w);margin:0 auto;padding:0 0 clamp(3.5rem,8vh,6rem);}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);}
.kicker::after{content:'';display:inline-block;width:3.2rem;height:1px;background:var(--gold);margin-left:1rem;vertical-align:middle;opacity:.7;}
.cover h1{margin-top:1.1rem;line-height:.98;}
.cover h1 .small{display:block;font-family:var(--disp);font-style:italic;font-weight:420;font-size:clamp(1.5rem,3.6vw,2.8rem);color:var(--gold-pale);}
.cover h1 .big{display:block;font-family:var(--disp);font-weight:680;font-size:clamp(2.7rem,7.6vw,6.2rem);letter-spacing:-.015em;}
.cover .stand{max-width:34em;margin-top:1.4rem;font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.65;color:rgba(250,244,233,.92);}
.cover .cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;}
.scrollcue{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.3em;color:rgba(250,244,233,.55);animation:cue 2.6s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,7px);}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--ui);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding:.95rem 1.7rem;transition:transform .2s,box-shadow .2s,background .2s,color .2s;}
.btn.gold{background:var(--gold);color:var(--navy);font-weight:600;}
.btn.gold:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(212,162,78,.35);}
.btn.ghost{border:1px solid var(--gold);color:var(--paper);}
.btn.ghost:hover{background:rgba(212,162,78,.14);}
.btn.ghost.dark{color:var(--navy);border-color:var(--gold-deep);}
.btn.ghost.dark:hover{background:rgba(212,162,78,.12);}

/* 404 cover (2026-08-12, artwork swapped to the engraved chart 2026-08-12).
   The engraving is 16:9 and the bee spans roughly 34-65% of the width. At
   desktop ratios the default centre crop keeps it upper-centre with its dotted
   trail running down into the headline. On a portrait phone `cover` scales the
   image to fill the height, leaving a crop window only ~26% of the image wide
   — narrower than the bee itself, so ANY focal point slices it. Measured, not
   guessed. Narrow viewports therefore letterbox the complete engraving across
   the top on the cover's own navy, and the copy sits below it on flat colour.
   The artwork stays whole and the type never sits on linework. */
.cover--404 img.bg{object-position:50% 45%;}
@media(max-width:820px){
  /* y=22% drops the letterbox clear of the 79px fixed header and closes the
     dead navy between artwork and headline (measured at 390x844). */
  .cover--404 img.bg{object-fit:contain;object-position:50% 22%;}
  /* the cover gradient is tuned for a full-bleed photo; over a letterboxed
     image it would band the empty navy, so fade it to the flat ground. */
  .cover--404::after{background:linear-gradient(180deg,rgba(8,17,32,.25) 0%,rgba(8,17,32,.55) 34%,var(--navy) 52%);}
  .cover--404 .inner{padding-bottom:clamp(2.5rem,6vh,4rem);}
}

/* ---------- sections ---------- */
.sec{position:relative;width:var(--w);margin:0 auto;padding:clamp(4.5rem,10vh,7.5rem) 0 clamp(3.5rem,8vh,6rem);}
.sec .gn{position:absolute;top:1.2rem;right:-.5rem;font-family:var(--disp);font-weight:700;
  font-size:clamp(6rem,16vw,13rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line);pointer-events:none;user-select:none;}
.lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);}
.sec h2{font-family:var(--disp);font-weight:640;font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.08;letter-spacing:-.01em;
  margin:.9rem 0 1.4rem;max-width:16em;}
.sec .body{max-width:38em;font-size:1.06rem;line-height:1.75;color:var(--ink);}
.sec .body p+p{margin-top:1.1em;}
.sec .body .accent{color:var(--gold-deep);font-weight:600;}
.rule{width:var(--w);margin:0 auto;border:0;border-top:1px solid var(--line);}

/* dropcap */
.dc::first-letter{font-family:var(--disp);font-weight:680;font-size:3.4em;line-height:.82;float:left;
  padding:.06em .12em 0 0;color:var(--gold-deep);}

/* ---------- dark bands ---------- */
.band{background:var(--navy);color:var(--paper);padding:clamp(4rem,9vh,6.5rem) 0;position:relative;overflow:hidden;}
.band .inner{width:var(--wn);margin:0 auto;text-align:center;}
.band .pull{font-family:var(--disp);font-style:italic;font-weight:460;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.3;}
.band .pull em{color:var(--gold);font-style:inherit;}
.band .kick{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:1.6rem;}
.band::before,.band::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:min(200px,40vw);height:1px;background:var(--line-gold);}
.band::before{top:2rem;}.band::after{bottom:2rem;}

/* ---------- timeline (home: the decision moved) ---------- */
.eras{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem;}
.era{background:var(--paper);padding:2rem 1.6rem 2.2rem;}
.era .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;color:var(--gold-deep);}
.era h3{font-family:var(--disp);font-weight:640;font-size:1.45rem;margin:.7rem 0 .6rem;}
.era p{font-size:.98rem;line-height:1.65;color:var(--ink-soft);}
.era.now{background:var(--navy);color:var(--paper);}
.era.now p{color:rgba(250,244,233,.8);}
.era.now h3{color:var(--gold);}
@media(max-width:820px){.eras{grid-template-columns:1fr;}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:2.5rem;}
.card{background:var(--paper-2);border:1px solid var(--gold);padding:1.7rem 1.5rem 1.8rem;position:relative;}
.card .tier{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);}
.card h3{font-family:var(--disp);font-weight:640;font-size:1.3rem;margin:.75rem 0 .55rem;line-height:1.2;}
.card p{font-size:.95rem;line-height:1.6;color:var(--ink-soft);}
.card .cn{position:absolute;top:1.2rem;right:1.3rem;font-family:var(--mono);font-size:.7rem;color:var(--gold-deep);opacity:.75;}

/* case-file cards (assessment findings) */
.files{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-top:2.5rem;}
.file{background:var(--paper-2);border:1px solid var(--gold);padding:0;}
.file .tab{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-gold);
  padding:.85rem 1.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);}
.file h3{font-family:var(--disp);font-weight:640;font-size:1.28rem;line-height:1.25;padding:1.15rem 1.4rem .4rem;}
.file p{font-size:.95rem;line-height:1.65;color:var(--ink-soft);padding:0 1.4rem 1.5rem;}
.file .cost{font-family:var(--ui);font-size:.8rem;font-weight:600;color:var(--gold-deep);padding:0 1.4rem 1.3rem;letter-spacing:.04em;}

/* ---------- provenance / stat strip ---------- */
.prov{background:var(--navy-2);color:var(--paper);}
.prov .grid{width:var(--w);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:3.2rem 0;}
.prov .n{font-family:var(--disp);font-weight:680;font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--gold);line-height:1;}
.prov .c{font-family:var(--ui);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,244,233,.75);margin-top:.55rem;line-height:1.5;}
@media(max-width:720px){.prov .grid{grid-template-columns:1fr;gap:1.6rem;text-align:center;}}

/* ---------- columns (assessment: what we examine) ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.4rem;margin-top:2.4rem;}
.col h3{font-family:var(--disp);font-weight:640;font-size:1.35rem;border-top:2px solid var(--gold);padding-top:1rem;}
.col ul{list-style:none;margin-top:.9rem;}
.col li{font-size:.96rem;line-height:1.6;color:var(--ink-soft);padding:.45rem 0 .45rem 1.3rem;position:relative;}
.col li::before{content:'⬡';position:absolute;left:0;top:.5rem;font-size:.7rem;color:var(--gold);}

/* checklist */
.list{list-style:none;margin-top:1.6rem;max-width:38em;}
.list li{font-size:1.02rem;line-height:1.65;padding:.6rem 0 .6rem 1.7rem;position:relative;border-bottom:1px solid var(--line);}
.list li::before{content:'';position:absolute;left:.15rem;top:1.15rem;width:.55rem;height:.55rem;background:var(--gold);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);}

/* ---------- process (web design steps) ---------- */
.steps{margin-top:2.6rem;border-top:1px solid var(--line);}
.step{display:grid;grid-template-columns:5rem 1fr;gap:1.4rem;padding:1.6rem 0;border-bottom:1px solid var(--line);}
.step .n{font-family:var(--disp);font-weight:680;font-size:1.9rem;color:transparent;-webkit-text-stroke:1.2px var(--gold-deep);}
.step h3{font-family:var(--disp);font-weight:640;font-size:1.3rem;margin-bottom:.4rem;}
.step p{font-size:.98rem;line-height:1.65;color:var(--ink-soft);max-width:42em;}
@media(max-width:600px){.step{grid-template-columns:3rem 1fr;gap:1rem;}}

/* ---------- form ---------- */
.form{max-width:34em;margin-top:2.2rem;}
.form label{display:block;font-family:var(--ui);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin:1.4rem 0 .45rem;}
.form input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--gold-deep);padding:.55rem .1rem;
  font-family:var(--text);font-size:1.05rem;color:var(--ink);outline:none;transition:border-color .2s;}
.form input:focus{border-bottom:2px solid var(--gold);}
.form .note{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-soft);margin-top:1.6rem;}
.form button{margin-top:1.8rem;border:0;cursor:pointer;}
.form select,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--gold-deep);
  padding:.55rem .1rem;font-family:var(--text);font-size:1.05rem;color:var(--ink);outline:none;transition:border-color .2s;}
.form select:focus,.form textarea:focus{border-bottom:2px solid var(--gold);}
.form textarea{min-height:7.5rem;resize:vertical;}
.form .hp{position:absolute;left:-9999px;height:0;overflow:hidden;}
.form .fine{font-size:.82rem;line-height:1.6;color:var(--ink-soft);margin-top:1.4rem;}
.form .req{font-family:var(--mono);color:#b03a2e;margin-left:.2rem;}
.finale .form .req{color:#ff9d8f;}
.form .legend{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:#b03a2e;margin-top:1.2rem;}
.finale .form .legend{color:#ff9d8f;}
.form .ferr{font-family:var(--ui);font-size:.74rem;letter-spacing:.05em;margin-top:.45rem;color:#a33a2e;}
.finale .form .ferr{color:#ffb3a3;}
.form .invalid{border-bottom-color:#a33a2e !important;}
.finale .form label{color:var(--gold);}
.finale .form input{color:var(--paper);border-bottom-color:var(--gold);}
.finale .form .note{color:rgba(250,244,233,.55);}

/* ---------- CTA finale band ---------- */
.finale{background:var(--navy);color:var(--paper);text-align:center;padding:clamp(5rem,12vh,8rem) 1.25rem;position:relative;overflow:hidden;}
.finale .bee{width:150px;height:auto;margin:0 auto 2rem;opacity:.9;mix-blend-mode:lighten;}
.finale h2{font-family:var(--disp);font-weight:640;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:-.01em;}
.finale .sub{max-width:32em;margin:1.2rem auto 0;font-size:1.05rem;line-height:1.7;color:rgba(250,244,233,.85);}
.finale .cta-row{display:flex;justify-content:center;gap:1rem;margin-top:2.4rem;flex-wrap:wrap;}

/* ---------- typographic cover (no photo) ---------- */
.cover.plain{text-align:center;align-items:center;}
.cover.plain .inner{padding-top:7rem;}

/* chapter index strip below the services cover */
.tocbar{background:var(--navy-2);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold);}
.toc{display:grid;grid-template-columns:repeat(4,1fr);width:var(--w);margin:0 auto;}
.toc a{display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:1.6rem .5rem 1.5rem;text-decoration:none;border-left:1px solid var(--line-gold);}
.toc a:first-child{border-left:0;}
.toc .tn{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--gold);transition:color .25s;}
.toc .tl{font-family:var(--ui);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(250,244,233,.75);transition:color .25s;}
.toc a:hover .tn{color:var(--gold);}
.toc a:hover .tl{color:var(--gold);}
@media(max-width:640px){
  .toc{grid-template-columns:repeat(2,1fr);}
  .toc a:nth-child(odd){border-left:0;}
  .toc a:nth-child(n+3){border-top:1px solid var(--line-gold);}
}

/* ---------- service chapters ---------- */
.chap{position:relative;min-height:52vh;display:flex;align-items:flex-end;color:var(--paper);isolation:isolate;background:var(--navy);overflow:hidden;}
.chap img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.chap::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,17,32,.25) 0%,rgba(8,17,32,.2) 55%,rgba(8,17,32,.85) 100%);}
.chap .inner{width:var(--w);margin:0 auto;padding:0 0 2.2rem;display:flex;align-items:baseline;gap:1.4rem;}
.chap .cnum{font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--gold);}
.chap h2{font-family:var(--disp);font-weight:640;font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:-.01em;}

/* ---------- FAQ ---------- */
.faq{margin-top:2.2rem;max-width:44em;}
.faq .qa{border-top:1px solid var(--line);padding:1.5rem 0;}
.faq .qa:last-child{border-bottom:1px solid var(--line);}
.faq h3{font-family:var(--disp);font-weight:640;font-size:1.25rem;margin-bottom:.55rem;}
.faq p{font-size:1rem;line-height:1.7;color:var(--ink-soft);max-width:40em;}

/* ---------- work studies ---------- */
.studies{display:grid;gap:3.5rem;margin-top:3rem;}
.study{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:2.4rem;align-items:start;}
.study .frame{border:1px solid var(--line);background:var(--paper-2);padding:.65rem;}
.study .frame .bar{display:flex;gap:.35rem;padding:0 .2rem .55rem;}
.study .frame .bar i{width:.55rem;height:.55rem;border-radius:50%;background:var(--line);}
.study .frame img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center;display:block;}
.study .tier{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);}
.study h3{font-family:var(--disp);font-weight:640;font-size:1.6rem;margin:.7rem 0 .7rem;line-height:1.15;}
.study p{font-size:1rem;line-height:1.7;color:var(--ink-soft);}
@media(max-width:860px){.study{grid-template-columns:1fr;}}

/* ---------- insights listing ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;margin-top:2.6rem;}
.post{display:block;text-decoration:none;color:inherit;background:var(--paper-2);border:1px solid var(--gold);transition:transform .2s,box-shadow .2s;}
.post:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(32,36,46,.12);}
.post figure{aspect-ratio:16/10;overflow:hidden;}
.post img{width:100%;height:100%;object-fit:cover;}
.post .pad{padding:1.3rem 1.3rem 1.5rem;}
.post .date{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);}
.post h3{font-family:var(--disp);font-weight:640;font-size:1.35rem;margin:.6rem 0 .5rem;line-height:1.2;}
.post p{font-size:.93rem;line-height:1.6;color:var(--ink-soft);}

/* clickable discipline cards */
a.card{display:block;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;}
a.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(32,36,46,.12);}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease;}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.rv{opacity:1;transform:none;transition:none;}.scrollcue{animation:none;}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}