/* ============================================================
   brushfoundry — specimen-sheet aesthetic
   Ink on warm paper · Bricolage Grotesque + Instrument Sans + Space Mono
   ============================================================ */

:root{
  --paper:      #f3efe6;   /* warm paper stock            */
  --paper-2:    #ece6d8;   /* deeper panel paper          */
  --paper-3:    #e4ddcc;   /* card wash                   */
  --ink:        #1b1712;   /* warm near-black ink         */
  --ink-soft:   #4c453b;   /* body ink                    */
  --ink-faint:  #8c8272;   /* captions, rules, meta       */
  --seal:       #bf3a26;   /* cinnabar / stamp vermilion  */
  --seal-deep:  #9c2f1f;
  --rule:       rgba(27,23,18,.18);
  --rule-soft:  rgba(27,23,18,.10);

  --serif-display:'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --serif-body:   'Instrument Sans', 'Helvetica Neue', sans-serif;
  --mono:         'Space Mono', ui-monospace, 'Courier New', monospace;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:clamp(1rem,.55vw + .9rem,1.12rem);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* paper grain overlay ------------------------------------------------ */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* hairline rules ----------------------------------------------------- */
.rule--full{height:1px;background:var(--rule);width:100%}

/* shared eyebrow / labels ------------------------------------------- */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:var(--seal);
}
.section-title{
  font-family:var(--serif-display); font-weight:600;
  font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.04;
  letter-spacing:-.02em; margin:.5rem 0 0;
}
.section-lede{
  font-family:var(--serif-body); font-size:1.05rem; color:var(--ink-soft);
  max-width:46ch; margin-top:1rem;
}

/* ===================== MASTHEAD ===================== */
.masthead{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:baseline; gap:1.5rem;
  padding:1.1rem var(--pad);
}
.wordmark{
  font-family:var(--serif-display); font-size:1.4rem; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); line-height:1;
}
.wordmark span{color:var(--seal)}
.masthead__cta{
  font-family:var(--serif-body); font-size:.95rem; font-weight:600;
  margin-left:auto; border-bottom:1.5px solid var(--seal);
  padding-bottom:2px; transition:color .25s;
}
.masthead__cta:hover{color:var(--seal)}
@media(max-width:680px){
  .masthead{gap:1rem}
}

/* ===================== HERO ===================== */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(2.5rem,7vw,6rem) var(--pad) clamp(2rem,5vw,4rem);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.hero__title{
  font-family:var(--serif-display); font-weight:600;
  font-size:clamp(2.7rem,7.2vw,5.6rem); line-height:.98;
  letter-spacing:-.03em; margin:1.1rem 0 0;
}
.hero__title span{display:block}
.hero__title-em{font-style:normal; color:var(--seal)}
.hero__sub{
  font-size:1.18rem; color:var(--ink-soft); max-width:40ch;
  margin-top:1.5rem; line-height:1.55;
}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem}

/* hero plate + seal */
.hero__plate{position:relative}
.plate{
  position:relative; background:var(--paper); padding:.6rem;
  border:1px solid var(--rule);
  box-shadow:0 1px 0 var(--paper-3), 0 22px 45px -30px rgba(27,23,18,.5);
}
.plate img{border:1px solid var(--rule-soft)}
.hero__plate figcaption{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-top:.8rem; text-align:center;
}
.hero__plate figcaption em{color:var(--ink); font-style:normal; font-weight:600; font-family:var(--serif-body); text-transform:none; letter-spacing:0; font-size:.86rem}

/* the stamp seal */
.seal{
  position:absolute; top:-34px; right:-30px; width:120px; height:120px;
  color:var(--seal); display:grid; place-items:center;
  transform:rotate(-9deg);
  animation:seal-press 1s cubic-bezier(.2,1.35,.35,1) .75s both;
}
@keyframes seal-press{
  from{opacity:0; transform:rotate(-30deg) scale(1.7)}
  60%{opacity:1}
  to{opacity:1; transform:rotate(-9deg) scale(1)}
}
.seal::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--seal); opacity:.9;
  box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 5.5px var(--seal);
}
.seal svg{position:absolute; inset:0; width:100%; height:100%; animation:seal-spin 40s linear infinite}
.seal text{fill:var(--seal); font-family:var(--mono); font-size:8.6px; letter-spacing:.02em; font-weight:700}
.seal__core{
  font-family:var(--serif-display); font-weight:700; font-size:1.9rem; color:var(--seal);
  line-height:1; transform:translateY(2px);
}
@keyframes seal-spin{to{transform:rotate(360deg)}}

@media(max-width:860px){
  .hero{grid-template-columns:1fr; gap:2.5rem}
  .hero__plate{max-width:420px; margin:0 auto; width:100%}
  .seal{width:96px; height:96px; top:-26px; right:-14px}
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--serif-body); font-size:.98rem; font-weight:600;
  padding:.85em 1.5em; border:1.5px solid var(--ink);
  transition:transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn--ink{background:var(--ink); color:var(--paper)}
.btn--ink:hover{background:var(--seal); border-color:var(--seal); box-shadow:0 10px 24px -14px var(--seal)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn--block{width:100%; justify-content:center; margin-top:1.4rem}

/* ===================== MARQUEE ===================== */
.marquee{overflow:hidden; padding:.7rem 0; background:var(--paper-2)}
.marquee__track{
  display:flex; width:max-content; white-space:nowrap;
  animation:marq 42s linear infinite;
}
.marquee__track span{
  font-family:var(--serif-display); font-weight:500; font-size:1.02rem; color:var(--ink-soft);
  letter-spacing:.01em; padding-right:.5rem;
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===================== SPECIMENS ===================== */
.specimens{max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vw,6rem) var(--pad)}
.section-head{margin-bottom:clamp(2rem,4vw,3.5rem)}
.plates{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2.2rem);
}
.card{
  display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:var(--paper); border:1px solid var(--rule); padding:.7rem;
  font:inherit; color:inherit;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.card:hover{transform:translateY(-7px); box-shadow:0 26px 50px -34px rgba(27,23,18,.7); border-color:var(--ink)}
.card__plate{position:relative; overflow:hidden; background:#fff; border:1px solid var(--rule-soft)}
.card__plate img{width:100%; aspect-ratio:5/4; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__plate img{transform:scale(1.03)}
.card__view{
  position:absolute; left:.5rem; bottom:.5rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:.4em .7em;
  opacity:0; transform:translateY(6px); transition:opacity .28s, transform .28s;
}
.card:hover .card__view{opacity:1; transform:none}
.card__meta{padding:.9rem .3rem .4rem; display:flex; flex-direction:column; gap:.28rem}
.card__name{font-family:var(--serif-display); font-weight:600; font-size:1.28rem; line-height:1.05; letter-spacing:-.01em}
.card__count{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
@media(max-width:820px){.plates{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.plates{grid-template-columns:1fr; max-width:420px; margin:0 auto}}

/* ===================== THE PRESS ===================== */
.press{max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,6vw,5.5rem) var(--pad)}
.steps{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); margin-top:clamp(2rem,4vw,3rem)}
.step{border-top:1.5px solid var(--ink); padding-top:1.1rem}
.step h3{font-family:var(--serif-display); font-weight:600; font-size:1.45rem; margin:0 0 .5rem; line-height:1.08; letter-spacing:-.01em}
.step p{color:var(--ink-soft); font-size:1.02rem}
.step code{font-family:var(--mono); font-size:.85em; background:var(--paper-2); padding:.05em .35em; border:1px solid var(--rule-soft)}
@media(max-width:760px){.steps{grid-template-columns:1fr; gap:1.6rem}}

/* ===================== COLOPHON ===================== */
.colophon{
  max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,6vw,5.5rem) var(--pad);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.spec{display:grid; grid-template-columns:1fr 1fr; gap:0}
.spec>div{padding:1.1rem 0; border-top:1px solid var(--rule)}
.spec>div:nth-child(odd){padding-right:1.2rem}
.spec dt{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--seal); margin-bottom:.35rem}
.spec dd{font-family:var(--serif-body); font-size:1.05rem; color:var(--ink)}
@media(max-width:820px){.colophon{grid-template-columns:1fr; gap:2rem}}
@media(max-width:460px){.spec{grid-template-columns:1fr}.spec>div:nth-child(odd){padding-right:0}}

/* ===================== OWNERSHIP ===================== */
.own{
  max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,5vw,4.5rem) var(--pad);
  text-align:center;
}
.own__title{
  font-family:var(--serif-display); font-weight:700;
  font-size:clamp(2.4rem,6.5vw,4.6rem); line-height:.95; letter-spacing:-.03em;
}
.own__title span{color:var(--seal)}
.own__text{
  font-family:var(--serif-body); font-size:1.08rem; color:var(--ink-soft);
  max-width:56ch; margin:1.1rem auto 0;
}

/* ===================== REQUEST ===================== */
.request{
  max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vw,6rem) var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
.request__contact{margin-top:2rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--ink-faint)}
.request__contact a{color:var(--seal); border-bottom:1px solid var(--seal)}

.request__trust{margin-top:2rem; border-top:1.5px solid var(--ink); padding-top:1.1rem}
.request__trust-title{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--seal); margin-bottom:.8rem;
}
.request__trust ul{list-style:none}
.request__trust li{
  font-family:var(--serif-body); font-size:.98rem; color:var(--ink-soft);
  padding:.45rem 0 .45rem 1.4rem; position:relative;
}
.request__trust li::before{
  content:"—"; position:absolute; left:0; color:var(--seal);
}

.order{
  background:var(--paper-2); border:1px solid var(--rule);
  padding:clamp(1.5rem,3vw,2.4rem);
}
.field{margin-bottom:1.15rem}
.field label{
  display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem;
}
.field label span{color:var(--ink-faint); text-transform:none; letter-spacing:.02em}
.field input, .field textarea{
  width:100%; font-family:var(--serif-body); font-size:1.05rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1.5px solid var(--rule);
  padding:.5rem .1rem; transition:border-color .25s;
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-faint)}
.field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--seal)}
.field textarea{resize:vertical; min-height:2.4rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cf-turnstile{margin:.5rem 0 .2rem}
.order__status{font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; margin-top:1rem; min-height:1.2em}
.order__status.ok{color:var(--seal-deep)}
.order__status.err{color:var(--seal)}
.order.sent .field, .order.sent .cf-turnstile, .order.sent #orderSubmit{display:none}
@media(max-width:820px){.request{grid-template-columns:1fr; gap:2rem}}

/* ===================== FOOTER ===================== */
.foot{max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,5vw,4rem) var(--pad); text-align:center}
.foot__mark{font-family:var(--serif-display); font-weight:700; font-size:1.8rem; letter-spacing:-.02em}
.foot__mark span{color:var(--seal)}
.foot__line{color:var(--ink-soft); margin:.7rem auto 0}
.foot__colophon{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-faint); margin-top:1.4rem}
.foot__colophon a{color:var(--ink-faint); border-bottom:1px solid var(--rule)}

/* ===================== LIGHTBOX ===================== */
.lightbox{
  position:fixed; inset:0; z-index:50; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(20,17,13,.94); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox.open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox__stage{display:flex; flex-direction:column; align-items:center; gap:1rem; max-height:90vh}
.lightbox__stage img{
  max-height:74vh; max-width:100%; width:auto; background:var(--paper);
  padding:.5rem; border:1px solid rgba(243,239,230,.2);
  box-shadow:0 40px 80px -40px #000;
  transform:scale(.97); transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.lightbox.open .lightbox__stage img{transform:none}
.lightbox__stage figcaption{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); text-align:center; max-width:52ch;
}
.lightbox__stage figcaption em{display:block; font-family:var(--serif-body); text-transform:none; letter-spacing:0; color:rgba(243,239,230,.7); font-size:.82rem; margin-top:.5rem; font-style:normal}
.lightbox__close{
  position:absolute; top:1rem; right:1.2rem; z-index:2;
  background:none; border:0; color:var(--paper); font-size:1.5rem; cursor:pointer;
  width:2.4rem; height:2.4rem; line-height:1; opacity:.7; transition:opacity .2s;
}
.lightbox__close:hover{opacity:1}
.lightbox__nav{
  background:none; border:1px solid rgba(243,239,230,.3); color:var(--paper);
  width:3rem; height:3rem; font-size:1.6rem; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; transition:background .2s, border-color .2s; flex-shrink:0;
}
.lightbox__nav:hover{background:rgba(243,239,230,.12); border-color:var(--paper)}
@media(max-width:640px){
  .lightbox{grid-template-columns:1fr}
  .lightbox__nav{position:absolute; top:50%; transform:translateY(-50%)}
  .lightbox__nav--prev{left:.6rem} .lightbox__nav--next{right:.6rem}
}

/* ===================== REVEAL / MOTION ===================== */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .reveal{opacity:1; transform:none}
  .marquee__track,.seal svg{animation:none}
}

/* focus visibility */
:focus-visible{outline:2px solid var(--seal); outline-offset:3px}