/* WooDinh Craftsmen — Heartwood. Mobile-first; breakpoints 768 (tablet) and 1024 (desktop). */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
html:has(dialog[open]){overflow:hidden}
body{
  margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--text-body-md-size);line-height:var(--text-body-md-lh);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-wrap:break-word;
}
main{flex:1 0 auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset)}
::selection{background:var(--hw-sanding-dust);color:var(--hw-clay)}
[hidden]{display:none!important}
a,button,.btn,.chip{transition:color 140ms ease-out,background-color 140ms ease-out,border-color 140ms ease-out}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:root{--gutter:var(--space-margin-mobile)}
@media (min-width:768px){:root{--gutter:clamp(48px,9vw,var(--space-margin))}}

.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;padding:12px 16px;
  background:var(--color-primary);color:var(--text-on-primary);border-radius:var(--radius-md);
  font:500 12px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.skip-link:focus{top:8px;color:var(--text-on-primary)}

/* ---------- Header / nav ---------- */
.site-header{border-bottom:1px solid var(--border-hairline);background:var(--surface-page)}
.header-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;padding-block:24px}
.wordmark{display:inline-block;padding-block:10px;margin-block:-10px;font:600 23px/1 var(--font-display);color:var(--text-body);text-decoration:none;letter-spacing:-.02em}
.wordmark:hover{color:var(--text-body)}
.wordmark span{color:var(--color-primary)}
.site-nav ul{display:flex;flex-wrap:wrap;gap:8px 24px}
.nav-link{
  display:inline-block;padding-block:8px;color:var(--color-secondary);text-decoration:none;
  font:500 12px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--color-primary)}
.nav-link[aria-current="page"]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.nav-toggle{
  display:none;margin:-12px 0;padding:12px 0 12px 16px;min-height:var(--touch-min);
  background:none;border:0;cursor:pointer;color:var(--text-body);
  font:500 11px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
}
.nav-toggle[aria-expanded="true"]{color:var(--color-primary)}

@media (max-width:767.98px){
  .site-nav{flex-basis:100%;padding-top:16px}
  .js .nav-toggle{display:inline-block}
  .js .site-nav{display:none}
  /* Full-screen overlay: instant show/hide, no animation. */
  .js .site-header.is-open{position:fixed;inset:0;z-index:100;background:var(--surface-raised);overflow-y:auto;overscroll-behavior:contain}
  .js .site-header.is-open .site-nav{display:block;padding:40px 0 64px}
  .js .site-nav ul{flex-direction:column;gap:0}
  .js .site-nav li{border-bottom:1px solid var(--border-hairline)}
  .js .site-nav .nav-link{display:block;padding:18px 0;font-size:13px}
  .js .nav-link[aria-current="page"]{text-decoration:none}
}
@media (min-width:768px){
  .header-inner{padding-block:40px 24px}
  .wordmark{font-size:32px}
  .site-nav ul{gap:8px 32px}
}

/* ---------- Photography ---------- */
.photo{
  position:relative;width:100%;aspect-ratio:var(--ratio,4/3);overflow:hidden;
  background:var(--color-subtle);border:1px solid var(--border-photo);border-radius:var(--radius-none);
}
.photo{display:block}
.photo>img{width:100%;height:100%;object-fit:cover}
.photo--from-portrait>img{object-position:center 35%}
.photo__ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;
  font:500 11px/1.4 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-tag);
}
.photo--bleed{border-inline:0;border-top:0}
.photo-button{display:block;width:100%;padding:0;border:0;background:none;cursor:default}
.js .photo-button{cursor:zoom-in}
.photo-button:focus-visible{outline-offset:4px}
.photo-button__hint{
  display:none;position:absolute;right:12px;bottom:12px;padding:8px 10px;border-radius:var(--radius-md);
  background:var(--color-surface);color:var(--text-body);font:500 11px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Type ---------- */
.display{
  font:600 clamp(34px,2.5vw + 25px,60px)/1.05 var(--font-display);letter-spacing:-.02em;color:var(--text-heading);
}
.h-hero{font:600 clamp(30px,1.2vw + 25px,40px)/1.1 var(--font-display);letter-spacing:-.02em;color:var(--text-heading)}
.h-section{font:600 clamp(22px,.55vw + 20px,28px)/1.1 var(--font-display);letter-spacing:-.01em;color:var(--text-heading)}
.h-era{font:600 clamp(24px,1.1vw + 20px,36px)/1.1 var(--font-display);letter-spacing:-.01em;color:var(--text-heading)}
.lead{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-lh)}
.prose{max-width:var(--measure-prose)}
.prose>*+*{margin-top:1.1em}
.meta{font:400 var(--text-caption-size)/var(--text-caption-lh) var(--font-ui);color:var(--text-meta)}
.label{font:500 var(--text-label-size)/var(--text-label-lh) var(--font-ui);letter-spacing:var(--text-label-ls);text-transform:uppercase}
.text-link{
  font:500 12px/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:var(--touch-min);
}

/* ---------- Layout bands ---------- */
.section{padding-top:48px}
.section--tight{padding-top:clamp(32px,5vw,64px)}
.section--end{padding-bottom:64px}
.about-intro{padding-top:32px}
.page-title{padding-top:32px}
.rule{border-bottom:1px solid var(--border-hairline)}
@media (min-width:768px){
  .section{padding-top:80px}
  .section--end{padding-bottom:96px}
  .page-title{padding-top:72px}
}

.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;padding-bottom:16px;border-bottom:1px solid var(--border-hairline)}
.section-head .text-link{min-height:0}
.only-mobile{display:block}
.only-desktop{display:none}
@media (min-width:768px){
  .section-head{padding-bottom:20px}
  .only-mobile{display:none}
  .only-desktop{display:inline-block}
}

/* ---------- Home ---------- */
.hero-photo{--ratio:16/9;max-height:80vh}
@media (min-width:768px){.hero-photo{--ratio:16/7}}
.hero-copy{display:grid;gap:24px;padding-top:32px}
.hero-copy__col{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero-copy .prose{max-width:52ch}
@media (min-width:1024px){
  .hero-copy{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;padding-top:64px}
  .hero-copy__col--right{padding-top:6px}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);padding:14px 24px;
  border:0;border-radius:var(--radius-md);cursor:pointer;text-align:center;text-decoration:none;
  font:500 12px/1.2 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
}
.btn--primary{background:var(--color-primary);color:var(--text-on-primary)}
.btn--primary:hover{background:var(--color-primary-hover);color:var(--text-on-primary)}
.btn[disabled]{opacity:.6;cursor:progress}
@media (max-width:767.98px){.btn{width:100%}}

/* ---------- Cards ---------- */
.grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding-top:24px}
@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding-top:32px}}

.card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:20px;background:var(--surface-raised);border-radius:var(--radius-sm);
}
.card>.photo{margin-bottom:2px}
.card__title{font:500 20px/1.2 var(--font-display);letter-spacing:0}
.card__title a{color:var(--text-body);text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0}
.card:hover .card__title a,.card__title a:focus-visible{color:var(--color-primary)}
.card__title a:focus-visible{outline:none}
.card__title a:focus-visible::after{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-block;padding:6px 12px;border-radius:var(--radius-full);background:var(--surface-tag);color:var(--text-on-tag);
  font:500 11px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
}
@media (min-width:768px){
  .card{padding:32px;gap:16px}
  .card__title{font-size:22px}
}
/* Home teaser: one featured card on mobile, the rest at tablet+. */
@media (min-width:768px){.card-wrap--extra{display:contents}}
@media (max-width:767.98px){.card-wrap--extra{display:none}}

/* ---------- About ---------- */
.about-photo{--ratio:4/3}
.about-portrait{--ratio:4/3}
@media (min-width:768px){
  .about-photo{--ratio:16/7}
  .about-portrait{max-width:620px}
}
.narrow{max-width:900px}
.method{display:grid;gap:24px;padding-top:24px;grid-template-columns:minmax(0,1fr)}
.step{display:flex;flex-direction:column;gap:8px}
.step__num{font:500 12px/1 var(--font-ui);letter-spacing:.1em;color:var(--color-primary)}
.step__title{font:600 17px/1.4 var(--font-display)}
.step__body{font:400 var(--text-body-sm-size)/var(--text-body-sm-lh) var(--font-ui);color:var(--text-body);max-width:34ch}
@media (min-width:768px){.method{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;padding-top:32px}}
.step__body{max-width:46ch}
.about-heading{padding-bottom:16px}
.about-body{padding-top:24px}
.principles{padding-left:1.2em;list-style:disc}
.principles>li+li{margin-top:.5em}

/* ---------- Past Works ---------- */
.era{padding-top:40px}
.era:first-of-type{padding-top:32px}
.era__head{padding-bottom:16px;border-bottom:1px solid var(--border-hairline)}
@media (min-width:768px){
  .era{padding-top:72px}
  .era:first-of-type{padding-top:56px}
  .era__head{padding-bottom:18px}
}

/* ---------- Project detail ---------- */
.back-link{display:inline-flex;align-items:center;min-height:var(--touch-min);font:500 12px/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase}
.detail-top{padding-top:16px}
.detail-lead{--ratio:16/9;margin-top:24px}
.detail-lead--portrait{--ratio:3/4;max-width:520px}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-top:32px}
.specs{display:flex;flex-direction:column}
.specs__row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--border-hairline)}
.specs dt{font:500 12px/1.4 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-meta);flex:none}
.specs dd{font:400 15px/1.4 var(--font-ui);text-align:right}
.specs+.chips{padding-top:20px}
.detail-photos{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-top:24px}
@media (min-width:768px){
  .detail-top{padding-top:40px}
  .detail-lead{margin-top:40px}
  .detail-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding-top:64px}
}
@media (min-width:1024px){
  .detail-grid{grid-template-columns:minmax(0,1fr) 380px;gap:80px;padding-top:64px}
}

/* Lightbox — the one place content floats above the page. */
.js .photo-button__hint{display:block}
.lightbox{
  width:min(1200px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);
  padding:0;border:0;border-radius:var(--radius-sm);background:var(--surface-page);color:var(--text-body);
  box-shadow:var(--shadow-lightbox);overflow:auto;
}
.lightbox::backdrop{background:var(--scrim-lightbox)}
.lightbox__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 8px 8px 16px}
.lightbox__title{font:500 12px/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-meta)}
.lightbox__close{
  min-height:var(--touch-min);padding:0 16px;border:0;background:none;cursor:pointer;color:var(--text-body);
  font:500 11px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
}
.lightbox__close:hover{color:var(--color-primary)}
.lightbox__body{padding:0 16px 16px}
.lightbox__body .photo{max-height:calc(100dvh - 120px)}
/* Enlarging an upright photo should show all of it, not a taller crop. */
.lightbox__body .photo--from-portrait{background:var(--surface-page);border-color:transparent}
.lightbox__body .photo--from-portrait>img{object-fit:contain;object-position:center}

/* ---------- Journal ---------- */
.post-list{display:flex;flex-direction:column;padding-top:32px}
.post-item{position:relative;display:grid;gap:16px;padding-block:28px;border-top:1px solid var(--border-hairline)}
.post-item:last-child{border-bottom:1px solid var(--border-hairline)}
.post-item__body{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.post-item__title{font:600 clamp(22px,.55vw + 20px,28px)/1.15 var(--font-display);letter-spacing:-.01em;color:var(--text-heading)}
.post-item__title a{color:var(--text-heading);text-decoration:none}
.post-item__title a::after{content:"";position:absolute;inset:0}
.post-item:hover .post-item__title a,.post-item__title a:focus-visible{color:var(--color-primary)}
.post-item__title a:focus-visible{outline:none}
.post-item__title a:focus-visible::after{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}
.post-item__standfirst{max-width:62ch}
.journal-empty{padding-block:32px 64px;color:var(--text-meta)}
@media (min-width:768px){
  .post-list{padding-top:40px}
  .post-item{grid-template-columns:260px minmax(0,1fr);gap:32px;padding-block:36px;align-items:start}
}

.post-head__date{padding-top:8px}
.post-head .display{padding-top:4px}
.post-head__standfirst{padding-top:16px}
.post-photo{--ratio:16/9}
.post-photo--portrait{--ratio:3/4;max-width:520px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-block:32px 64px}
.contact-panel{
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;align-self:start;
  padding:28px 24px;background:var(--surface-raised);border-radius:var(--radius-sm);
}
.badge{
  display:inline-block;padding:7px 14px;border:1px solid transparent;border-radius:var(--radius-full);
  background:var(--color-surface);color:var(--color-tertiary);
  font:500 11px/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
}
.badge--open{color:var(--color-tertiary);border-color:var(--color-tertiary)}
.badge--closed{color:var(--text-meta);border-color:var(--border-hairline)}
.panel-item{display:flex;flex-direction:column;gap:6px}
.panel-item dt{font:500 12px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-meta)}
.panel-item dd{font:400 var(--text-body-md-size)/1.5 var(--font-ui)}
.panel-links{width:100%;padding-top:8px;border-top:1px solid var(--border-hairline)}
@media (min-width:768px){
  .contact-grid{padding-block:48px 80px}
  .contact-panel{padding:32px}
}
@media (min-width:1024px){
  .contact-grid{grid-template-columns:minmax(0,1fr) 420px;gap:80px}
}

.form{display:flex;flex-direction:column;gap:22px;max-width:620px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font:500 11px/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--color-secondary)}
.input{
  width:100%;min-height:48px;padding:12px 14px;background:var(--color-surface);color:var(--text-body);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:var(--text-body-md-size);line-height:1.4;
}
textarea.input{min-height:160px;resize:vertical}
.input:focus{border-color:var(--border-focus);outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset)}
.input[aria-invalid="true"]{border-color:var(--color-error)}
.field__hint{font:400 var(--text-caption-size)/var(--text-caption-lh) var(--font-ui);color:var(--text-meta)}
.field__error{font:400 var(--text-caption-size)/var(--text-caption-lh) var(--font-ui);color:var(--text-error)}
.form__status{font:400 var(--text-body-sm-size)/var(--text-body-sm-lh) var(--font-ui);color:var(--text-error)}
.form-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-success{max-width:620px;display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding-block:32px 64px}
.form-success p{font-size:var(--text-body-md-size);line-height:1.6;border-top:1px solid var(--border-hairline);padding-top:24px;width:100%}
.form-success:focus{outline:none}

/* ---------- CTA band + footer ---------- */
.cta-band{margin-top:64px;padding-block:32px;background:var(--surface-raised)}
.cta-band__inner{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.cta-band__text{font:400 20px/1.3 var(--font-display);color:var(--text-body)}
@media (min-width:768px){
  .cta-band{margin-top:80px;padding-block:48px}
  .cta-band__inner{flex-direction:row;justify-content:space-between;align-items:center;gap:32px}
  .cta-band__text{font-size:24px;line-height:1.2}
}

.site-footer{margin-top:0;border-top:1px solid var(--border-hairline);background:var(--surface-raised);color:var(--color-secondary)}
.footer-inner{display:flex;flex-direction:column;gap:16px;padding-block:32px}
.footer-brand{display:flex;flex-direction:column;gap:10px}
.footer-brand .wordmark{font-size:15px}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:0 24px}
.footer-nav a{
  display:inline-flex;align-items:center;min-height:var(--touch-min);color:var(--color-secondary);text-decoration:none;
  font:500 11px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
}
.footer-nav a:hover{color:var(--color-primary)}
@media (min-width:768px){
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:flex-end;padding-block:48px}
  .footer-brand .wordmark{font-size:17px}
  .footer-nav a{min-height:0;padding-block:8px}
}

/* ---------- Motion (colour-only hovers above; bands stage in on scroll) ---------- */
@keyframes rvIn{from{opacity:0;transform:translateY(var(--rv-travel,10px))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(var(--rv-travel,10px))}
  .rv-in{animation:rvIn 420ms cubic-bezier(.22,.61,.36,1) both}
  .rv.rv-in{opacity:1;transform:none}
}
@media print{
  .rv{opacity:1!important;transform:none!important}
  .site-nav,.nav-toggle,.skip-link
}