/* D'Hanis Clay Products — production stylesheet
   Built from the D'Hanis Clay Design System tokens. Fonts self-hosted. */

/* ---------- Fonts ---------- */
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/caslon-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/archivo-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/archivo-500.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --bone-0:#FBF9F4;--bone-1:#F5F1E8;--bone-2:#EDE7DA;--limestone:#E3DCCB;
  --charcoal-1:#26231F;--charcoal-2:#4A453D;--charcoal-3:#6E675C;
  --terracotta:#A4462A;--terracotta-deep:#7E3520;--flashed-umber:#5C3A28;--kiln-rose:#C07A5B;
  --heritage-green:#2F4B3A;
  --surface-page:var(--bone-1);--surface-raised:var(--bone-0);--surface-recessed:var(--bone-2);
  --text-body:var(--charcoal-1);--text-secondary:var(--charcoal-2);--text-caption:var(--charcoal-3);
  --border-hairline:rgba(38,35,31,.18);--border-rule:rgba(38,35,31,.35);
  --link:var(--charcoal-1);--link-hover:var(--terracotta-deep);
  --font-serif-display:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --font-sans:"Archivo",Helvetica,Arial,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:40px;--space-6:64px;--space-7:96px;--space-8:144px;
  --page-max:1200px;--page-pad:clamp(24px,5vw,72px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--link-hover)}
img{display:block;max-width:100%;height:auto}
.serif{font-family:var(--font-serif-display);font-weight:400}
.caps{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:10;background:var(--surface-page);border-bottom:1px solid transparent;transition:border-color .2s ease}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;transition:height .2s ease}
.nav.compact{border-bottom-color:var(--border-hairline)}
.nav.compact .wrap{height:60px}
.mast{font-size:18px;letter-spacing:.14em;color:var(--text-body);white-space:nowrap;transition:font-size .2s ease,color .2s ease}
.nav.compact .mast{font-size:15px}
.nav ul{display:flex;gap:40px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--text-body);white-space:nowrap}.nav ul a:hover{color:var(--link-hover)}

/* ---------- Hero ---------- */
.hero{position:relative;height:min(78vh,760px);min-height:460px;overflow:hidden;background:var(--flashed-umber)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,rgba(38,35,31,.62) 0%,rgba(38,35,31,.3) 45%,rgba(38,35,31,.08) 100%)}
.hero-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;padding:0 var(--page-pad) clamp(48px,7vw,88px);color:var(--bone-0);max-width:var(--page-max);margin:0 auto}
.hero h1{margin:0;font-size:clamp(52px,8vw,112px);line-height:1.05;letter-spacing:-.025em;text-wrap:balance;max-width:11ch}
.hero p{margin:24px 0 36px;font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:40ch;text-wrap:pretty}
.btn{display:inline-block;padding:16px 32px;border:1px solid var(--bone-0);color:var(--bone-0);transition:background-color .2s ease,color .2s ease}
.btn:hover{background:var(--bone-0);color:var(--charcoal-1)}

/* ---------- Sections ---------- */
section{padding:var(--space-7) 0}
.label{display:block;margin:0 0 var(--space-5);color:var(--text-caption);text-align:left;font-weight:400}
.story .wrap{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);gap:var(--space-5);align-items:start}
.story p{margin:0;max-width:30ch;text-align:left;font-size:clamp(24px,2.6vw,34px);line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.story .label{margin:0;padding-top:.6em}
.story .press{grid-column:2;margin:calc(var(--space-4) - var(--space-5)) 0 0;max-width:none;font-family:var(--font-sans);font-size:12px;line-height:2;letter-spacing:.16em;text-wrap:balance}
.story .press a{color:var(--text-caption);text-decoration:underline;text-decoration-color:var(--border-rule);text-decoration-thickness:1px;text-underline-offset:5px;transition:color .2s ease,text-decoration-color .2s ease}
.story .press a:hover{color:var(--terracotta-deep);text-decoration-color:var(--terracotta-deep)}
.products{padding-top:0}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6) var(--space-5)}
.prod{border-top:1px solid var(--border-rule);padding-top:var(--space-4);display:flex;flex-direction:column;gap:16px}
.prod h3{margin:0;font-size:26px;line-height:1.1}
.prod p{margin:0;font-size:16px;line-height:1.65;color:var(--text-secondary);text-wrap:pretty;flex:1}
.inq-one{display:flex;justify-content:flex-start;margin-top:var(--space-6)}
.inq{display:inline-block;font-family:var(--font-sans);font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-body);border-bottom:1px solid var(--border-rule);padding-bottom:3px;transition:color .2s ease,border-color .2s ease}
.inq:hover{color:var(--terracotta-deep);border-bottom-color:var(--terracotta-deep)}

/* ---------- Photo sections ---------- */
.photo{padding:0}
.photo img{width:100%;object-fit:cover}
.photo .stadium{aspect-ratio:2/1;object-position:50% 72%}
.work{padding-top:0}
.work .under{padding-left:0;padding-right:0;text-align:left}
.pit-crop{overflow:hidden;aspect-ratio:3/2}
.photo .pit{width:100%;height:100%;object-fit:cover;transform:scale(1.17);transform-origin:0 15%}
.under{padding:var(--space-3) var(--page-pad) 0;text-align:center}
.work-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-6)}
.work-pair figure{margin:0}
.work-pair img{aspect-ratio:2/1;display:block}
.work-pair figcaption{padding-top:var(--space-3);text-align:left}
.credit{color:var(--text-caption);margin:0}
.legacy{padding-top:var(--space-7)}
.legacy-line{margin:var(--space-4) auto 0;font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.01em;max-width:40ch;text-align:center;text-wrap:balance}

/* ---------- Contact ---------- */
.contact{text-align:left;padding:var(--space-7) 0 var(--space-8)}
.contact h2{margin:0;font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.015em;text-wrap:balance;max-width:16ch}
.contact .lines{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:var(--space-5) 0 var(--space-4)}
.contact .lines a{font-size:clamp(20px,2vw,26px);color:var(--text-body);border-bottom:1px solid var(--border-hairline);padding-bottom:4px;transition:color .2s ease,border-color .2s ease}
.contact .lines a:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
.contact p{margin:0;color:var(--text-caption);font-size:16px}

/* ---------- Footer ---------- */
footer{background:var(--heritage-green);color:var(--bone-1)}
footer .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-5);padding-top:var(--space-6);padding-bottom:var(--space-6)}
footer a{color:var(--bone-1)}footer a:hover{color:var(--bone-0);opacity:.75}
.sig{display:flex;align-items:center;gap:24px}
.sig svg{width:40px;height:40px;flex:none}
.sig .t{display:flex;flex-direction:column;align-items:center;gap:12px}
.sig .t span:first-child{font-size:17px;line-height:1.3;white-space:nowrap}
.sig .est{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.24em;line-height:1;white-space:nowrap}
.sig .est::before,.sig .est::after{content:"";width:24px;height:1px;background:var(--bone-1);opacity:.7}
.addr{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:14px;font-style:normal;line-height:1.6}
.addr .dot{opacity:.6}
.flinks{display:flex;justify-content:flex-end;gap:28px;list-style:none;margin:0;padding:0}
.flinks a{white-space:nowrap}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  .flinks{justify-content:center}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .nav ul{gap:20px}.mast{font-size:14px}.nav.compact .mast{font-size:13px}.nav .caps{font-size:11px}
  .photo .stadium{aspect-ratio:4/3}
  .hero img{object-position:50% 35%}
  .work-pair{grid-template-columns:1fr;gap:var(--space-6)}
  .work-pair img{aspect-ratio:3/2}
  section{padding:var(--space-6) 0}
  .story .wrap{grid-template-columns:1fr}.story .label{padding-top:0}.story .press{grid-column:auto}
  .addr .dot{display:none}.addr{flex-direction:column;align-items:center}
}
@media (max-width:480px){
  .nav .wrap{flex-direction:column;justify-content:center;gap:10px;height:96px}
  .nav.compact .wrap{height:76px}
}