/* ===== Tokens =====
   White canvas, full-bleed rounded hero imagery, pill-shaped buttons,
   generous corner radii on every card/image — inspired by meta.com's
   product-merchandising language, kept in Athanasius's own palette.
*/
:root{
  --white:#FFFFFF;
  --paper:#F5F4F1;
  --ink:#161412;
  --ink-soft:#5A544C;
  --camwood:#A6402A;
  --camwood-dark:#7E2E1E;
  --line:rgba(22,20,18,0.12);
  --disp:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --logo-font:"Major Mono Display", "IBM Plex Mono", monospace;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --max:1180px;
  --r-lg:32px;
  --r-md:24px;
  --r-sm:16px;
  --r-pill:100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--disp);
  font-weight:800;
  margin:0 0 .4em;
  letter-spacing:-0.02em;
}
p{margin:0 0 1em;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--camwood);
}

/* ===== Arch signature ===== */
.arch-divider{width:64px;height:34px;margin:28px auto;display:block;}
.arch-divider path{fill:none;stroke:var(--ink);stroke-width:2.5;opacity:.55;}
.arch-divider.left{margin:20px 0;}

/* ===== Nav ===== */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--max); margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav .logo{
  font-family:var(--disp); font-weight:800; font-size:19px;
  letter-spacing:-.01em;
  text-decoration:none; color:var(--ink);
}
.nav .logo em{font-style:normal; color:var(--camwood); font-weight:800;}
.nav ul{list-style:none; display:flex; gap:30px; margin:0; padding:0;}
.nav a{
  text-decoration:none; font-size:14px; font-weight:500; letter-spacing:.01em;
  color:var(--ink-soft);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav a:hover, .nav a.active{color:var(--camwood-dark); border-color:var(--camwood-dark);}
.nav-toggle{display:none;}

@media (max-width:760px){
  .nav{flex-wrap:wrap; padding:14px 20px;}
  .nav ul{
    width:100%; flex-wrap:nowrap; overflow-x:auto;
    -ms-overflow-style:none; scrollbar-width:none;
    justify-content:flex-start; gap:22px;
    margin-top:10px; padding-top:12px; border-top:1px solid var(--line);
  }
  .nav ul::-webkit-scrollbar{display:none;}
  .nav a{white-space:nowrap;}
}

/* ===== Hero — full-bleed rounded card, dominant on the page ===== */
.hero-frame{
  margin:14px;
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
  height:88vh;
  min-height:560px;
  background:var(--ink);
}
.hero-slides{position:absolute; inset:0;}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease;}
.hero-slide.active{opacity:1;}
.hero-slide img{width:100%; height:100%; object-fit:cover;}
.hero-slide picture{display:block; width:100%; height:100%;}
.hero-frame::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(10,8,6,.72) 0%, rgba(10,8,6,0) 42%);
}
.hero-copy{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:56px 56px 48px;
  color:#fff;
}
.hero-copy .eyebrow{color:#F0C9A8; display:block; margin-bottom:14px;}
.hero-copy h1{
  font-size:clamp(34px, 5.2vw, 64px);
  line-height:1.02;
  margin:0 0 18px;
  max-width:16ch;
  color:#fff;
}
.hero-copy p{max-width:46ch; font-size:17px; color:#EDE7DE; margin-bottom:26px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}

@media (max-width:760px){
  .hero-frame{ margin:8px; border-radius:var(--r-md); height:82vh; min-height:480px; }
  .hero-copy{ padding:32px 24px 30px; }
}

/* ===== Sections ===== */
section{padding:88px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);}
.section-head p{color:var(--ink-soft); font-size:17px;}

/* ===== Grid / cards ===== */
.grid{display:grid; gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){ .grid-3, .grid-2{grid-template-columns:1fr;} }

.piece-card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--paper);
  border-radius:var(--r-md);
  overflow:hidden;
}
.piece-card .thumb{aspect-ratio:4/5; overflow:hidden;}
.piece-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.piece-card:hover .thumb img{transform:scale(1.045);}
.piece-card .info{padding:22px 24px 26px;}
.piece-card .info .eyebrow{margin-bottom:6px; display:block;}
.piece-card h3{font-size:21px; margin-bottom:6px;}
.piece-card p{color:var(--ink-soft); font-size:14.5px; margin:0;}

/* ===== Recognition strip ===== */
.strip{background:var(--ink); color:var(--white); padding:44px 0; border-radius:var(--r-md); margin:0 14px;}
.strip .wrap{display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; max-width:calc(var(--max) - 28px);}
.strip .item{flex:1 1 200px;}
.strip .item .num{font-family:var(--disp); font-weight:800; font-size:15px; color:#F0C9A8; margin-bottom:4px; display:block;}
.strip .item .lbl{font-size:13.5px; color:#D6CFC3;}
@media (max-width:760px){ .strip{margin:0 8px; border-radius:var(--r-sm);} }

/* ===== Footer ===== */
footer{border-top:1px solid var(--line); padding:44px 0 34px; font-size:14px; color:var(--ink-soft);}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px;}
footer a{text-decoration:none;}
footer a:hover{color:var(--camwood-dark);}

/* ===== Buttons — Meta-style pill, dual-CTA pattern ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:14.5px;
  text-decoration:none; color:#fff;
  background:var(--ink);
  padding:14px 26px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--ink);
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.btn:hover{background:var(--camwood); border-color:var(--camwood); transform:translateY(-1px);}
.btn.outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn.outline:hover{background:var(--ink); color:var(--white);}
.hero-cta .btn.outline{color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.08);}
.hero-cta .btn.outline:hover{background:#fff; color:var(--ink); border-color:#fff;}

/* ===== Project detail blocks (Work page) ===== */
.piece{
  border-top:1px solid var(--line);
  padding:80px 0;
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.piece.in-view{opacity:1; transform:translateY(0);}
.piece:first-of-type{border-top:none;}
.piece-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start;}
@media (max-width:860px){ .piece-grid{grid-template-columns:1fr;} }
.piece-media img{width:100%; display:block; border-radius:var(--r-md);}
.piece-media .cap{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:10px;}
.piece-text .eyebrow{margin-bottom:10px; display:block;}
.piece-text h2{font-size:clamp(26px,3vw,38px); margin-bottom:16px;}
.specs{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;
  margin-top:22px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);
}
.specs strong{display:block; color:var(--ink); font-family:var(--sans); font-size:13.5px; margin-bottom:2px;}

/* ===== Carousel ===== */
.carousel{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--paper); border-radius:var(--r-md);
}
.carousel-track{display:flex; height:100%; transition:transform .55s cubic-bezier(.65,0,.35,1);}
.carousel-track img{width:100%; height:100%; object-fit:contain; flex:0 0 100%; border-radius:0;}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-family:var(--mono); font-size:15px; color:var(--ink);
  z-index:3; transition:background .2s;
  user-select:none;
}
.carousel-arrow:hover{background:var(--white);}
.carousel-arrow.prev{left:14px;}
.carousel-arrow.next{right:14px;}
.carousel-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:7px; z-index:3;}
.carousel-dots button{width:6px; height:6px; border-radius:50%; border:none; background:rgba(22,20,18,.28); cursor:pointer; padding:0;}
.carousel-dots button.active{background:var(--camwood);}
.carousel-count{
  position:absolute; top:14px; right:16px; z-index:3;
  font-family:var(--mono); font-size:11px; color:#fff;
  background:rgba(22,20,18,.55); padding:3px 9px; border-radius:var(--r-pill);
}

/* ===== Timeline (About) ===== */
.timeline{border-left:1px solid var(--line); padding-left:28px; margin-left:6px;}
.tl-item{position:relative; padding-bottom:34px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-33px; top:6px;
  width:9px; height:9px; border-radius:50%; background:var(--camwood);
}
.tl-item .yr{font-family:var(--mono); font-size:12.5px; color:var(--camwood); display:block; margin-bottom:4px;}
.tl-item h4{font-size:17px; margin-bottom:4px;}
.tl-item p{color:var(--ink-soft); font-size:14.5px; margin:0;}

/* ===== Press lists ===== */
.press-list{border-top:1px solid var(--line);}
.press-row{display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line);}
.press-row .t{font-size:16px;}
.press-row .m{color:var(--ink-soft); font-size:14px;}
.press-row .y{font-family:var(--mono); font-size:13px; color:var(--ink-soft); white-space:nowrap;}

/* ===== Contact ===== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-line{display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px;}
.contact-line .k{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em;}

/* ===== Work page sub-nav ===== */
.subnav{
  position:sticky; top:66px; z-index:40;
  background:var(--white);
  border-bottom:1px solid var(--line);
  overflow-x:auto; white-space:nowrap;
  -ms-overflow-style:none; scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none;}
.subnav .wrap{display:flex; gap:26px; padding:14px 32px;}
.subnav a{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  text-decoration:none; color:var(--ink-soft);
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.subnav a:hover{color:var(--camwood-dark); border-color:var(--camwood-dark);}

/* ===== Thoughts (blog) ===== */
.thought-post{border-top:1px solid var(--line); padding:70px 0;}
.thought-post:first-of-type{border-top:none;}
.thought-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
@media (max-width:860px){ .thought-grid{grid-template-columns:1fr;} }
.thought-media img{width:100%; display:block; border-radius:var(--r-md);}
.thought-media .cap{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:10px;}
.thought-body .eyebrow{margin-bottom:10px; display:block;}
.thought-body h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:22px; line-height:1.06;}
.thought-body p{font-size:17px; line-height:1.75; color:#332B24; margin-bottom:20px;}
.thought-body p:first-of-type::first-letter{
  font-family:var(--disp); font-weight:800; font-size:56px; line-height:.7;
  float:left; padding:6px 8px 0 0; color:var(--camwood);
}
.thought-byline{margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:13px; color:var(--ink-soft);}
.thought-byline .by{color:var(--ink); font-weight:600; display:block; margin-bottom:3px; font-family:var(--sans);}

/* ===== Utility ===== */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.small{font-size:14px; color:var(--ink-soft);}