/* ATELIER MARLOWE — tailoring ledger
   Midnight-navy cloth, chalk lines, brass fittings. No photographs. */

:root{
  --navy:#101822;
  --navy-2:#141d29;
  --navy-3:#1a2532;
  --chalk:#f4f1ea;
  --chalk-72:rgba(244,241,234,.74);
  --chalk-50:rgba(244,241,234,.62);
  --chalk-16:rgba(244,241,234,.16);
  --brass:#c9b48a;
  --brass-dim:#9c8c6a;
  --brass-40:rgba(201,180,138,.4);
  --brass-16:rgba(201,180,138,.16);
  --thread:#eae4d6;
  --serif:"Cormorant",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease-tailor:cubic-bezier(.62,.02,.23,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--navy);
  color:var(--chalk-72);
  font-family:var(--serif);
  font-weight:400;
  font-size:1.16rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--brass);color:var(--navy)}

h1,h2,h3{color:var(--chalk);font-weight:400}
a{color:var(--brass)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:2px;
}

.skip{
  position:fixed;left:1rem;top:-4rem;z-index:200;
  background:var(--brass);color:var(--navy);text-decoration:none;
  font-family:var(--mono);font-size:.8rem;padding:.6rem 1rem;
  transition:top .2s;
}
.skip:focus{top:1rem}

/* ---------- stitch rules ---------- */
.stitch{
  height:1px;
  background-image:repeating-linear-gradient(90deg,var(--brass-40) 0 9px,transparent 9px 15px);
}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem clamp(1.2rem,4vw,3.4rem);
  transition:background .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(16,24,34,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--brass-16);
}
.nav-mark{
  display:flex;align-items:center;gap:.65rem;
  color:var(--chalk);text-decoration:none;
  font-size:1.28rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.nav-mono{color:var(--brass);flex:none}
.nav nav{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.4rem)}
.nav nav a{
  color:var(--chalk-72);text-decoration:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.3rem 0;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;
}
.nav nav a:hover{color:var(--chalk);border-bottom-color:var(--brass)}
.nav-cta{
  border:1px solid var(--brass-40);padding:.55rem 1.1rem !important;
  color:var(--brass) !important;
}
.nav-cta:hover{background:var(--brass);color:var(--navy) !important;border-bottom-color:transparent !important}
@media (max-width:820px){
  .nav nav a:not(.nav-cta){display:none}
  .nav-mark span{font-size:1.05rem}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:7rem clamp(1.2rem,5vw,4rem) 5rem;
  background:
    radial-gradient(120% 90% at 78% 30%,var(--navy-2) 0%,var(--navy) 62%),
    var(--navy);
  overflow:hidden;
}
/* faint cloth weave */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(244,241,234,.022) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(244,241,234,.016) 0 1px,transparent 1px 7px);
}
/* chalk-stripe suiting, whisper-quiet */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(244,241,234,.035) 0 1px,transparent 1px 86px);
  mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
}
.hero-draft{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.92;
}
@media (max-width:820px){
  .hero-draft{opacity:.42}
}
@media (max-width:720px){
  .br-d{display:none}
}
.hero-draft .lbl{opacity:0}
.hero-copy{position:relative;z-index:2;max-width:38rem}
.hero-est{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);margin-bottom:2.2rem;
}
.hero-title{
  font-size:clamp(3.1rem,8.6vw,7.6rem);
  line-height:.98;letter-spacing:.01em;font-weight:300;
}
.hero-title em{font-style:italic;color:var(--brass)}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line span{display:block;transform:translateY(110%)}
.hero-sub{
  margin-top:2.2rem;max-width:32rem;font-size:1.18rem;font-style:italic;color:var(--chalk-72);
}
.hero-cta{
  display:inline-block;margin-top:2.6rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk);text-decoration:none;
  border:1px solid var(--brass-40);padding:.9rem 1.6rem;
  transition:background .35s var(--ease-tailor),color .35s;
  background:rgba(16,24,34,.5);
}
.hero-cta:hover{background:var(--brass);color:var(--navy)}
.hero-scroll{
  position:absolute;bottom:2.2rem;left:clamp(1.2rem,5vw,4rem);z-index:2;
  display:flex;align-items:center;gap:1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--chalk-50);
}
.hero-scroll-line{
  width:72px;height:1px;
  background-image:repeating-linear-gradient(90deg,var(--brass-40) 0 7px,transparent 7px 12px);
  animation:scrollhint 2.6s var(--ease-tailor) infinite;
  transform-origin:left;
}
@keyframes scrollhint{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* tape-measure cursor readout */
.tape-cursor{
  position:absolute;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--brass);
  background:rgba(16,24,34,.72);border:1px solid var(--brass-16);
  padding:.28rem .55rem;border-radius:2px;
  transform:translate(14px,18px);
  opacity:0;transition:opacity .3s;
  white-space:nowrap;
}
.tape-cursor.on{opacity:1}
.tc-sep{margin:0 .45em;color:var(--chalk-50)}
@media (hover:none),(pointer:coarse){.tape-cursor{display:none}}

/* ---------- ledger entry / manifesto ---------- */
.entry{
  max-width:52rem;margin:0 auto;
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,5vw,3rem);
}
.entry-meta{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:var(--brass-dim);
  margin:1.4rem 0 2.2rem;
}
.entry-text{
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.5;font-weight:300;color:var(--chalk-50);
}
.entry-text em{color:var(--brass);font-style:italic}
.entry-text .w{transition:color .5s}
.entry-text .w.lit{color:var(--chalk)}
.entry-text em .w.lit{color:var(--brass)}
.entry .stitch:last-child{margin-top:2.6rem}

/* ---------- measure ---------- */
.measure{position:relative}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  .measure{height:320svh}
  .measure-sticky{position:sticky;top:0;min-height:100svh}
}
.measure-sticky{
  display:flex;flex-direction:column;justify-content:center;
  padding:6.5rem clamp(1.2rem,5vw,4rem) 3.5rem;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
}
.chapter-index{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);margin-bottom:1.1rem;
}
.chapter-title{
  font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.04;font-weight:300;
}
.chapter-sub{margin-top:1.4rem;font-style:italic;color:var(--chalk-50);max-width:34rem}
.measure-head{margin-bottom:3rem}

.tape-wrap{
  position:relative;height:96px;
  border-top:1px solid var(--brass-16);border-bottom:1px solid var(--brass-16);
  background:var(--navy-3);
  overflow:hidden;
}
#tape-canvas{display:block;width:100%;height:100%}
.tape-needle{
  position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:var(--brass);
  box-shadow:0 0 12px rgba(201,180,138,.55);
}
.tape-needle::after{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--brass);
}
.tape-read{
  margin-top:.9rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-50);
}
#tape-inches{color:var(--brass)}

.measure-grid{
  margin-top:3.2rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.8rem);
}
.m-stat{
  padding-top:1.3rem;
  border-top:1px solid transparent;
  background-image:repeating-linear-gradient(90deg,var(--chalk-16) 0 9px,transparent 9px 15px);
  background-size:100% 1px;background-repeat:no-repeat;
  opacity:.38;transition:opacity .6s var(--ease-tailor);
}
.m-stat.live{opacity:1}
.m-label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.7rem;
}
.m-value{
  font-family:var(--mono);font-weight:300;
  font-size:clamp(2rem,3.6vw,3.1rem);color:var(--chalk);
  font-variant-numeric:tabular-nums;
}
.m-unit{font-size:.5em;color:var(--chalk-50);margin-left:.35em}
.m-value-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--brass-dim);margin-top:.2rem}
.m-note{font-size:1rem;margin-top:.9rem;color:var(--chalk-50)}
.m-note em{color:var(--chalk-72)}
@media (max-width:900px){
  .measure-grid{grid-template-columns:1fr 1fr;row-gap:2rem}
  .m-note{font-size:.95rem}
}
@media (max-width:520px){
  .measure-grid{grid-template-columns:1fr 1fr;column-gap:1.2rem}
  .m-note{display:none}
  .m-stat{opacity:.55}
}

/* ---------- cuts ---------- */
.cuts{padding:clamp(6rem,14vh,10rem) clamp(1.2rem,5vw,4rem)}
.chapter-head{max-width:46rem;margin-bottom:4rem}
.cut-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);
}
.cut-card{
  position:relative;
  padding:clamp(1.6rem,2.6vw,2.4rem);
  background:var(--navy-2);
  transition:transform .5s var(--ease-tailor),background .5s;
}
/* stitch-dash border, sewn on all four sides */
.cut-card::before{
  content:"";position:absolute;inset:10px;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,var(--brass-40) 0 9px,transparent 9px 15px),
    repeating-linear-gradient(90deg,var(--brass-40) 0 9px,transparent 9px 15px),
    repeating-linear-gradient(0deg,var(--brass-40) 0 9px,transparent 9px 15px),
    repeating-linear-gradient(0deg,var(--brass-40) 0 9px,transparent 9px 15px);
  background-position:0 0,0 100%,0 0,100% 0;
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-repeat:no-repeat;
  transition:inset .45s var(--ease-tailor);
}
.cut-card:hover{transform:translateY(-6px);background:var(--navy-3)}
.cut-card:hover::before{inset:6px}
.cut-figure{
  display:flex;justify-content:center;
  padding:1.4rem 0 1rem;
}
.cut-figure svg{width:min(200px,64%);height:auto}
.cut-card h3{
  font-size:2rem;font-weight:400;letter-spacing:.02em;margin-top:.6rem;
}
.cut-spec{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:.55rem 0 1rem;
}
.cut-copy{font-size:1.04rem;color:var(--chalk-50)}
.cut-price{
  margin-top:1.3rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;color:var(--chalk);
}
.cuts-note{
  margin-top:3rem;text-align:center;font-style:italic;color:var(--chalk-50);font-size:1.02rem;
}
@media (max-width:900px){.cut-row{grid-template-columns:1fr;max-width:30rem;margin:0 auto}}

/* ---------- ledger ---------- */
.ledger{
  padding:clamp(6rem,14vh,10rem) clamp(1.2rem,5vw,4rem);
  background:var(--navy-2);
}
.ledger-list{
  list-style:none;max-width:56rem;margin:0 auto;
  counter-reset:entry;
}
.ledger-row{
  display:grid;grid-template-columns:6.5rem 1fr 5.5rem;gap:clamp(1rem,3vw,2.6rem);
  align-items:baseline;
  padding:2.1rem 0;
  background-image:repeating-linear-gradient(90deg,var(--chalk-16) 0 9px,transparent 9px 15px);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 0;
}
.ledger-row:last-child{
  background-image:
    repeating-linear-gradient(90deg,var(--chalk-16) 0 9px,transparent 9px 15px),
    repeating-linear-gradient(90deg,var(--chalk-16) 0 9px,transparent 9px 15px);
  background-position:0 0,0 100%;
  background-size:100% 1px,100% 1px;
}
.l-week{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;color:var(--brass);
}
.l-body h3{font-size:1.7rem;margin-bottom:.45rem;font-weight:400}
.l-body p{font-size:1.05rem;color:var(--chalk-50);max-width:36rem}
.l-hours{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--chalk-50);
  text-align:right;font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .ledger-row{grid-template-columns:1fr;gap:.4rem}
  .l-hours{text-align:left;color:var(--brass-dim)}
}

/* ---------- consult ---------- */
.consult{
  padding:clamp(6rem,16vh,11rem) clamp(1.2rem,5vw,4rem);
  text-align:center;
  background:
    radial-gradient(90% 70% at 50% 110%,var(--navy-3) 0%,var(--navy) 70%),
    var(--navy);
}
.consult-inner{max-width:44rem;margin:0 auto}
.consult-title{
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.06;font-weight:300;margin-top:.4rem;
}
.consult-count{color:var(--brass);font-style:italic;white-space:nowrap}
.consult-sub{margin:1.8rem auto 3rem;max-width:36rem;color:var(--chalk-50);font-style:italic}
.consult-form{
  max-width:30rem;margin:0 auto;text-align:left;
  display:flex;flex-direction:column;gap:1.4rem;
}
.cf-row{display:flex;flex-direction:column;gap:.45rem}
.cf-row label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
}
.consult-form input,.consult-form select{
  background:transparent;border:none;
  border-bottom:1px solid var(--brass-40);
  color:var(--chalk);font-family:var(--serif);font-size:1.15rem;
  padding:.55rem .1rem;border-radius:0;
  transition:border-color .3s;
  appearance:none;-webkit-appearance:none;
}
.consult-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9b48a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center;
  cursor:pointer;
}
.consult-form select option{background:var(--navy-2);color:var(--chalk)}
.consult-form input::placeholder{color:var(--chalk-50);font-style:italic}
.consult-form input:focus,.consult-form select:focus{border-bottom-color:var(--brass);outline:none}
.consult-form button{
  margin-top:1rem;align-self:flex-start;
  background:var(--brass);color:var(--navy);border:1px solid var(--brass);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1rem 2rem;cursor:pointer;
  transition:background .35s var(--ease-tailor),color .35s;
}
.consult-form button:hover{background:transparent;color:var(--brass)}
.consult-confirm{
  margin-top:2rem;font-style:italic;color:var(--brass);min-height:1.5em;
}

/* ---------- footer ---------- */
.footer{
  padding:3rem clamp(1.2rem,5vw,4rem) 3.4rem;
  text-align:center;
  border-top:1px solid transparent;
  background-image:repeating-linear-gradient(90deg,var(--brass-40) 0 9px,transparent 9px 15px);
  background-size:100% 1px;background-repeat:no-repeat;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chalk-50);
  display:flex;flex-direction:column;gap:.9rem;
}
.footer a{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--brass-16)}
.footer a:hover{border-bottom-color:var(--brass)}
.footer-fine{font-size:.62rem;letter-spacing:.12em;color:rgba(244,241,234,.56);text-transform:none}

/* ---------- reveals ---------- */
.reveal-soft{opacity:0}
@media (prefers-reduced-motion:reduce){
  .reveal-soft{opacity:1}
  .hero-title .line span{transform:none}
  .hero-scroll-line{animation:none;transform:scaleX(1)}
  .m-stat{opacity:1}
  .entry-text .w{color:inherit}
}

/* ---------- 404 ---------- */
.err-page{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:2rem;gap:1.2rem;
}
.err-page svg{width:min(300px,70vw);height:auto;margin-bottom:1rem}
.err-code{font-family:var(--mono);font-size:.78rem;letter-spacing:.3em;color:var(--brass)}
.err-page h1{font-size:clamp(2.2rem,6vw,3.8rem);font-weight:300;max-width:24ch}
.err-page p{font-style:italic;color:var(--chalk-50);max-width:38ch}
.err-page .hero-cta{margin-top:1.4rem}

/* ---------- guide ---------- */
.guide-body{
  max-width:46rem;margin:0 auto;
  padding:6rem clamp(1.2rem,5vw,3rem) 5rem;
}
.guide-body .back{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;
}
.guide-body h1{
  font-size:clamp(2.6rem,6vw,4rem);font-weight:300;margin:1.6rem 0 1.2rem;
}
.guide-body h2{
  font-size:1.85rem;font-weight:400;margin:3rem 0 .9rem;
  padding-top:1.6rem;
  background-image:repeating-linear-gradient(90deg,var(--brass-40) 0 9px,transparent 9px 15px);
  background-size:100% 1px;background-repeat:no-repeat;
}
.guide-body p,.guide-body li{color:var(--chalk-72);font-size:1.08rem}
.guide-body ul,.guide-body ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem;margin:.6rem 0}
.guide-body code{
  font-family:var(--mono);font-size:.85em;color:var(--brass);
  background:var(--navy-3);padding:.1em .35em;border-radius:3px;
}
.guide-body strong{color:var(--chalk);font-weight:500}