/* Carolina Stone Craftsman — design system
   Base: Atelier Deux-Ce, with the four deviations recorded in DESIGN-SPEC.md 4.5 */

@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --ink:#000000;
  --canvas:#ffffff;
  --linen:#eee5da;
  --sage:#d8ddc6;
  --drift:#d8d0c5;
  --olive:#afb371;
  --taupe:#9c978a;
  --pebble:#aaaaa4;

  --font-serif:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --font-sans:'Helvetica','Helvetica Neue',Arial,sans-serif;

  --text-display:clamp(2.75rem,6vw,5.25rem);
  --text-heading:24px;
  --text-sub:20px;
  --text-body:17px;
  --text-caption:16px;

  --track-body:0.02em;
  --track-ui:0.04em;

  --section-gap:96px;
  --element-gap:24px;
  --maxw:1440px;
  --reading-col:560px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.5;
  letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased;
}

img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;width:100%}
.reading{max-width:var(--reading-col)}

.display{font-family:var(--font-serif);font-weight:400;font-size:var(--text-display);
  line-height:1.05;letter-spacing:0.01em}
h1,h2,h3{font-family:var(--font-serif);font-weight:400;font-size:var(--text-heading);
  line-height:1.2;letter-spacing:var(--track-ui)}
.label{font-family:var(--font-sans);font-weight:600;font-size:var(--text-caption);
  line-height:1.2;letter-spacing:var(--track-ui);text-transform:uppercase}
.caption{font-size:var(--text-caption);line-height:1.2;letter-spacing:var(--track-ui)}
.editorial{font-family:var(--font-serif);font-size:var(--text-body);line-height:1.5;
  letter-spacing:var(--track-body)}

.link{font-family:var(--font-sans);font-weight:600;font-size:var(--text-caption);
  letter-spacing:var(--track-ui);text-transform:uppercase;
  border-bottom:1px solid transparent;padding-bottom:2px}
.link:hover{border-bottom-color:var(--ink)}

section{padding:var(--section-gap) 0}
.band-canvas{background:var(--canvas)}
.band-linen{background:var(--linen)}
.band-sage{background:var(--sage)}
.band-drift{background:var(--drift)}
.band-olive{background:var(--olive)}

@media (max-width:900px){
  :root{--section-gap:64px}
  .wrap{padding:0 24px}
}

/* ---- nav ---- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:28px 40px;gap:32px}
.nav-mark{font-family:var(--font-sans);font-weight:600;font-size:var(--text-sub);
  letter-spacing:var(--track-ui);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-link,.nav-tel,.nav-child{font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--track-ui);border-bottom:1px solid transparent;padding-bottom:2px}
.nav-link:hover,.nav-tel:hover,.nav-child:hover{border-bottom-color:currentColor}
.nav-group{position:relative}
.nav-sub{position:absolute;top:100%;left:0;padding-top:14px;display:none;
  flex-direction:column;gap:10px;background:var(--canvas);min-width:220px}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{display:flex}
.nav-toggle{display:none;background:none;border:0;width:28px;height:20px;
  flex-direction:column;justify-content:space-between;cursor:pointer;padding:0;color:inherit}
.nav-toggle span{display:block;height:1px;width:100%;background:currentColor}
body.nav-over-photo .nav,body.nav-over-photo .nav a{color:var(--canvas)}

/* ---- footer ---- */
.footer{background:var(--ink);color:var(--canvas);padding:48px 0}
.footer a{color:var(--canvas);border-bottom:1px solid transparent;padding-bottom:2px}
.footer a:hover{border-bottom-color:var(--canvas)}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-brand p+p{margin-top:8px}
.footer-links{display:flex;flex-direction:column;gap:12px;text-align:right}

/* ---- motion ---- */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:translateY(0)}
.frame{overflow:hidden;position:relative}
.frame>img{transform:scale(1.06);transition:transform 1.4s var(--ease);
  width:100%;height:100%;object-fit:cover}
.frame>img.is-settled{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-reveal].is-in{opacity:1;transform:none;transition:none}
  .frame>img,.frame>img.is-settled{transform:none;transition:none}
}

/* Nav collapses at 1240px, not 900px. Measured across nine widths: the header
   is 86px tall at 1280 and 1440, and 116px at 1200 and below — i.e. the
   wordmark plus the seven-item link row wraps to a second row somewhere
   between 1200 and 1280, and it wrapped all the way down to the old 900px
   hamburger breakpoint. Tablet landscape sat squarely in that gap. 1240px is
   above the measured wrap point. The 900px breakpoint below still governs grid
   collapse, section padding and the footer. */
@media (max-width:1240px){
  .nav{padding:20px 24px}
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--canvas);color:var(--ink);flex-direction:column;
    align-items:flex-start;gap:18px;padding:24px}
  body.nav-open .nav-links{display:flex}
  body.nav-open .nav-links a{color:var(--ink)}
  .nav-sub{position:static;display:flex;padding:10px 0 0 16px}
}

@media (max-width:900px){
  .footer-inner{flex-direction:column}
  .footer-links{text-align:left}
}

/* ---- hero ---- */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden}
.hero .frame{position:absolute;inset:0;height:120%}
.hero-scrim{position:absolute;inset:0;background:rgba(0,0,0,.22)}
.hero-copy{position:absolute;left:0;right:0;bottom:64px;padding:0 40px;color:var(--canvas)}
.hero-copy .label,.hero-copy .caption{color:var(--canvas)}
.hero-copy .display{color:var(--canvas);margin-top:18px;max-width:16ch}
.hero-copy .caption{margin-top:24px;max-width:44ch}

/* ---- 2-up pair ---- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.pair .cell .frame{aspect-ratio:4/5}

/* ---- lede ---- */
.lede .label{margin-bottom:24px}
.lede .display{margin-bottom:24px}
.lede .editorial p+p{margin-top:18px}
.lede .link{display:inline-block;margin-top:28px}

/* ---- full bleed ---- */
.fullbleed{position:relative;padding:0}
.fullbleed .frame{aspect-ratio:21/9}
.fullbleed .fb-copy{position:absolute;left:40px;bottom:40px;right:40px;color:var(--canvas)}
.fullbleed .fb-copy h2,.fullbleed .fb-copy .caption{color:var(--canvas)}

/* ---- index list ---- */
.index-list{display:flex;flex-wrap:wrap;gap:24px}
.index-list a{font-size:var(--text-caption);letter-spacing:var(--track-ui);
  border-bottom:1px solid transparent;padding-bottom:2px}
.index-list a:hover{border-bottom-color:var(--ink)}

/* ---- project grid ---- */
.grid{display:grid;gap:48px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid .cell .frame{aspect-ratio:4/5}
.grid .cell .t{margin-top:18px;font-family:var(--font-sans);font-weight:600;
  font-size:var(--text-caption);letter-spacing:var(--track-ui)}

/* ---- form ---- */
.form{display:flex;flex-direction:column;gap:18px;max-width:520px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-family:var(--font-sans);font-weight:600;
  font-size:var(--text-caption);letter-spacing:var(--track-ui);
  text-transform:uppercase;margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;font-family:var(--font-sans);
  font-size:var(--text-body);letter-spacing:var(--track-body);color:var(--ink);
  background:var(--canvas);border:1px solid var(--ink);padding:14px 16px;
  -webkit-appearance:none;appearance:none}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:1px solid var(--ink);
  outline-offset:2px}
.form button{font-family:var(--font-sans);font-weight:600;font-size:var(--text-caption);
  letter-spacing:var(--track-ui);text-transform:uppercase;background:var(--ink);
  color:var(--canvas);border:0;padding:18px 32px;cursor:pointer;align-self:flex-start}

@media (max-width:900px){
  .pair,.grid.c2,.grid.c3,.form .row{grid-template-columns:1fr}
  .pair,.grid{gap:32px}
  .hero-copy{bottom:40px;padding:0 24px}
  .fullbleed .fb-copy{left:24px;right:24px;bottom:24px}
  .fullbleed .frame{aspect-ratio:4/3}
}