/* ============================================================================
   Blueprint Studio — site design system
   Drafting-paper direction · flat ink-on-paper · hairlines, drafting grid,
   registration marks · three-tier type · NO shadows. Carried over 1:1 from the
   brand guidelines. Responsive = clamp-scaling (layout holds, never reflows).
   ========================================================================== */
@import url('/css/fonts.css');

:root{
  /* palette — 6 semantic tokens */
  --paper:#F2EDE3; --paper-deep:#E8E0D2; --paper-deepest:#DED4C2;
  --ink:#1C1B18; --ink-soft:#5A564C;
  --blue:#33425E; --clay:#A89580;
  --navy:#0F1B2D; --navy-2:#16263d; --ivory:#F4F1EB;
  --gold:#C7A45A; --gold-lo:#9A7634; --gold-hi:#F3E6BE;
  --line:var(--ink); --grid-line:rgba(51,66,94,0.055);
  --bs-sep:var(--paper);            /* monogram moat colour = current surface */

  /* type stacks */
  --serif:'Cormorant SC','Cormorant Garamond',Didot,'Hoefler Text',Garamond,'Times New Roman',serif;
  --serif-text:'Cormorant Garamond',Didot,'Hoefler Text',Garamond,serif;
  --sans:'Jost','Futura','Century Gothic','Avenir Next',Avenir,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,'Roboto Mono',monospace;

  /* rhythm */
  --gutter:clamp(20px,5vw,72px); --maxw:1180px;
  --t-display:clamp(2.6rem,9vw,8.2rem);
  --t-h1:clamp(2.1rem,5.2vw,4rem);
  --t-h2:clamp(1.6rem,3.4vw,2.7rem);
  --t-lede:clamp(1.25rem,2.3vw,1.9rem);
  --t-body:clamp(1rem,1.05vw,1.12rem);
  --sp-section:clamp(64px,10vw,150px);
}

/* ---- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:var(--t-body);
  line-height:1.62; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--navy);color:var(--ivory)}

/* ---- layout primitives ---------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-section);position:relative}
.relative{position:relative}
.center{text-align:center}
.stack>*+*{margin-top:1.1em}

/* ---- type ----------------------------------------------------------------- */
.display{font-family:var(--serif);font-weight:600;line-height:.92;letter-spacing:.005em;
  font-size:var(--t-display);text-transform:uppercase}
.h1{font-family:var(--serif);font-weight:600;line-height:.98;font-size:var(--t-h1);
  text-transform:uppercase;letter-spacing:.01em}
.h2{font-family:var(--serif);font-weight:600;line-height:1.02;font-size:var(--t-h2);
  text-transform:uppercase;letter-spacing:.012em}
.lede{font-family:var(--serif-text);font-weight:400;font-size:var(--t-lede);
  line-height:1.34;color:var(--ink);letter-spacing:.004em}
.lede em,.serif-it{font-style:italic}
.body{max-width:62ch}
.body p+p{margin-top:1.05em}
.soft{color:var(--ink-soft)}
.mono{font-family:var(--mono);font-weight:400;text-transform:uppercase;
  letter-spacing:.28em;font-size:.72rem;color:var(--ink-soft)}
.mono.sm{font-size:.62rem;letter-spacing:.24em}
.gold-text{background:linear-gradient(96deg,var(--gold-lo) 6%,var(--gold-hi) 48%,var(--gold-lo) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- drafting grid + circular fade --------------------------------------- */
.gridbg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:34px 34px;background-position:center;
  -webkit-mask:radial-gradient(125% 92% at 50% 42%,#000 0%,#000 34%,transparent 74%);
          mask:radial-gradient(125% 92% at 50% 42%,#000 0%,#000 34%,transparent 74%)}
.section>.wrap{position:relative;z-index:1}

/* ---- hairline rule + registration marks ---------------------------------- */
.rule{height:1px;background:var(--ink);opacity:.16;border:0;width:100%}
.rule.blue{background:var(--blue);opacity:.5}
.cropmarks{position:absolute;inset:0;pointer-events:none;z-index:2}
.cropmarks i{position:absolute;width:13px;height:13px;opacity:.55}
.cropmarks i::before,.cropmarks i::after{content:"";position:absolute;background:var(--blue)}
.cropmarks i::before{width:13px;height:1px;top:0;left:0}
.cropmarks i::after{width:1px;height:13px;top:0;left:0}
.cropmarks i.tl{top:0;left:0}
.cropmarks i.tr{top:0;right:0;transform:scaleX(-1)}
.cropmarks i.bl{bottom:0;left:0;transform:scaleY(-1)}
.cropmarks i.br{bottom:0;right:0;transform:scale(-1)}

/* ---- monogram + marks ----------------------------------------------------- */
.imono{display:inline-block;line-height:0;color:var(--gold)}
.imono svg{display:block;stroke:var(--bs-sep)}     /* moat = surface colour */
.iplus{display:inline-block;line-height:0}
.iplus svg{display:block}

/* dimensioned wordmark lockup --------------------------------------------- */
.lockup{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,26px)}
.lockup .kicker{margin-top:2px}
.rulerow{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);width:min(560px,82vw)}
.rulerow .hair{flex:1;height:1px;background:var(--blue);opacity:.55;position:relative}
.rulerow .hair::before,.rulerow .hair::after{content:"";position:absolute;width:1px;height:7px;
  background:var(--blue);opacity:.85;top:-3px}
.rulerow .hair::before{left:0}.rulerow .hair::after{right:0}
.rulerow .iplus svg{width:clamp(15px,2vw,20px);height:clamp(15px,2vw,20px)}

/* ---- buttons / links ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;
  padding:.95em 1.6em;border:1px solid var(--ink);color:var(--ink);
  background:transparent;transition:background .35s ease,color .35s ease;cursor:pointer}
.btn:hover{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.btn.gold{border-color:var(--gold-lo)}
.btn.gold:hover{background:var(--gold-lo);border-color:var(--gold-lo);color:var(--ivory)}
.arrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--ink);
  border-bottom:1px solid transparent;transition:border-color .3s,gap .3s}
.arrow .ln{width:26px;height:1px;background:currentColor;display:inline-block;transition:width .3s}
.arrow:hover{border-color:transparent}.arrow:hover .ln{width:38px}

/* ---- site header ---------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(242,237,227,.93);
  backdrop-filter:saturate(140%) blur(9px);-webkit-backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid rgba(28,27,24,.12)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;
  height:clamp(54px,7vw,72px);max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:clamp(8px,1.4vw,13px)}
.brand .imono svg{width:clamp(20px,2.6vw,26px);height:auto}
.brand .wm{font-family:var(--serif);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:clamp(.74rem,1.5vw,.96rem);line-height:1;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,34px)}
.nav a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(.6rem,1.2vw,.72rem);color:var(--ink-soft);
  padding-block:.4em;position:relative;transition:color .3s}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:var(--gold-lo)}

/* ---- hero ----------------------------------------------------------------- */
.hero{min-height:clamp(560px,92vh,940px);display:flex;align-items:center;
  position:relative;overflow:hidden;border-bottom:1px solid rgba(28,27,24,.12)}
.hero .inner{position:relative;z-index:1;width:100%;text-align:center;padding-block:clamp(40px,8vw,90px)}
.hero .tagline{margin-top:clamp(20px,3vw,34px);font-family:var(--serif-text);font-style:italic;
  font-size:var(--t-lede);color:var(--ink);letter-spacing:.01em}
.scrollcue{position:absolute;left:50%;bottom:clamp(18px,3vw,30px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.scrollcue .ln{width:1px;height:clamp(28px,4vw,46px);background:var(--ink);opacity:.4}

/* hero — navy ground (the studio's signature dark-blue treatment) */
.hero{background:var(--navy);color:var(--ivory);border-bottom:0}
.hero .gridbg{--grid-line:rgba(244,241,235,.05)}
.hero .display{color:var(--ivory)}
.hero .tagline{color:var(--ivory)}
.hero .mono{color:rgba(244,241,235,.6)}
.hero .rulerow .hair{background:var(--gold-lo);opacity:.7}
.hero .rulerow .hair::before,.hero .rulerow .hair::after{background:var(--gold-hi);opacity:.95}
.hero .cropmarks i{opacity:.6}
.hero .cropmarks i::before,.hero .cropmarks i::after{background:var(--gold-lo)}
.hero .scrollcue .ln{background:var(--ivory);opacity:.45}

/* ---- generic sections ----------------------------------------------------- */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vw,34px)}
.eyebrow .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--gold-lo)}
.eyebrow .ln{flex:1;height:1px;background:var(--ink);opacity:.16}

.statement{font-family:var(--serif-text);font-size:clamp(1.5rem,3.6vw,2.9rem);
  line-height:1.22;font-weight:400;letter-spacing:.004em;max-width:20ch}
.statement .gold-text{font-weight:500}

/* featured project block */
.feature{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,4vw,64px);align-items:center}
.feature .shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.feature .shots figure{position:relative;overflow:hidden;background:var(--paper-deep)}
.feature .shots figure.tall{grid-row:span 2;aspect-ratio:3/4.2}
.feature .shots figure.wide{aspect-ratio:4/3}
.feature .shots img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.feature .shots figure:hover img{transform:scale(1.04)}
.feature .meta .h2{margin-bottom:.5em}

/* approach principles */
.approach{background:var(--paper-deep)}
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(34px,5vw,60px)}
.principle{position:relative;padding-top:22px;border-top:1px solid rgba(28,27,24,.2)}
.principle .pn{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--gold-lo);position:absolute;top:-1px;left:0;
  transform:translateY(-130%)}
.principle h3{font-family:var(--serif);text-transform:uppercase;font-weight:600;font-size:1.32rem;letter-spacing:.02em;margin-bottom:.5em}
.principle p{font-size:.96rem;color:var(--ink-soft);line-height:1.55}

/* CTA band */
.cta{background:var(--navy);color:var(--ivory);text-align:center;position:relative;overflow:hidden}
.cta .gridbg{--grid-line:rgba(244,241,235,.05)}
.cta .h1{color:var(--ivory)}
.cta .mono{color:rgba(244,241,235,.6)}
.cta .imono{color:var(--gold)}.cta .imono svg{stroke:var(--navy)}
.cta .btn{border-color:var(--gold-lo);color:var(--ivory)}
.cta .btn:hover{background:var(--gold-lo);color:var(--navy);border-color:var(--gold-lo)}

/* ---- footer --------------------------------------------------------------- */
.site-foot{background:var(--navy);color:var(--ivory);padding-block:clamp(46px,6vw,72px);position:relative}
.site-foot .grid-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.site-foot .imono{color:var(--gold)}.site-foot .imono svg{stroke:var(--navy);width:38px;height:auto}
.site-foot .wm{font-family:var(--serif);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:1.05rem;margin-top:14px}
.site-foot a{color:rgba(244,241,235,.78);transition:color .3s}
.site-foot a:hover{color:var(--gold-hi)}
.site-foot .col h4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;color:rgba(244,241,235,.5);margin-bottom:14px}
.site-foot .col a,.site-foot .col p{display:block;font-size:.92rem;line-height:1.9}
.site-foot .colophon{margin-top:clamp(34px,5vw,54px);padding-top:20px;border-top:1px solid rgba(244,241,235,.16);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-foot .colophon .mono{color:rgba(244,241,235,.5)}

/* ---- gallery (work page) -------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.2vw,14px)}
.gallery figure{position:relative;overflow:hidden;background:var(--paper-deep)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.gallery figure:hover img{transform:scale(1.035)}
.gallery .cap{position:absolute;left:12px;bottom:11px;z-index:2;color:var(--ivory);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;
  text-shadow:0 1px 8px rgba(0,0,0,.55)}
.gallery .g-w2{grid-column:span 2}.gallery .g-w3{grid-column:span 3}
.gallery .g-w4{grid-column:span 4}.gallery .g-w6{grid-column:span 6}
.gallery .r-2{aspect-ratio:auto}
.gallery figure.tall{aspect-ratio:3/4}
.gallery figure.land{aspect-ratio:3/2}
.gallery figure.wideland{aspect-ratio:2/1}

/* spec list (studio/work) */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(16px,2.4vw,30px)}
.spec{border-top:1px solid rgba(28,27,24,.2);padding-top:14px}
.spec dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;color:var(--gold-lo);margin-bottom:6px}
.spec dd{font-family:var(--serif-text);font-size:1.15rem;line-height:1.35}

/* two-col text (studio) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.portrait{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--paper-deep)}
.portrait img{width:100%;height:100%;object-fit:cover}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:start}
.contact-grid .big-mail{font-family:var(--serif);text-transform:none;font-weight:500;
  font-size:clamp(1.5rem,4vw,2.6rem);letter-spacing:.005em;line-height:1.1;display:inline-block;
  border-bottom:1px solid rgba(28,27,24,.3);padding-bottom:.1em;transition:border-color .3s}
.contact-grid .big-mail:hover{border-color:var(--gold-lo)}

/* ---- motion --------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .feature .shots img,.gallery img{transition:none!important}
}

/* ============================================================================
   RESPONSIVE — clamp-scaling holds the layout; these are gentle structural
   adjustments only at true small widths (no content jump, no forced viewport).
   ========================================================================== */
@media (max-width:900px){
  .feature{grid-template-columns:1fr;gap:clamp(22px,5vw,40px)}
  .duo{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .principles{grid-template-columns:repeat(2,1fr);row-gap:clamp(30px,6vw,44px)}
  .site-foot .grid-foot{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .g-w2,.gallery .g-w3,.gallery .g-w4,.gallery .g-w6{grid-column:span 2}
  .principles{grid-template-columns:1fr}
  .site-foot .grid-foot{grid-template-columns:1fr}
  /* nav can't fit wordmark + 3 links at phone widths — keep the monogram as the
     brand mark and drop the duplicate wordmark text. Links stay reachable. */
  .brand .wm{display:none}
  .nav{gap:clamp(13px,4.4vw,20px)}
  .brand .imono svg{width:26px}
}