@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=IBM+Plex+Mono:wght@400&display=swap');

:root{
  --paper:#fdfdfc;
  --ink:#24231f;
  --ink-soft:#24231f;
  --line:#eae8e2;
  --oak:#a6997f;
  --oak-soft:#f2f0eb;
  --max:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:300;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}

/* ---------- header ---------- */
/* header is fixed (out of the page flow) so that shrinking it never moves the content; body reserves the full-size height */
body{padding-top:99px;}
header{
  border-bottom:1px solid var(--line);
  position:fixed;top:0;left:0;right:0;background:rgba(250,249,246,.92);
  backdrop-filter:blur(6px);
  z-index:50;
}
.nav{
  max-width:var(--max);margin:0 auto;padding:18px 40px;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .25s ease;
}
.logo{
  display:flex;align-items:center;
}
.logo img{height:62px;width:auto;display:block;transition:height .25s ease;}
header.scrolled .nav{padding:10px 40px;}
header.scrolled .logo img{height:40px;}
.navlinks{display:flex;gap:40px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;}
.navlinks a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s;}
.navlinks a:hover, .navlinks a.active{border-color:var(--oak);}
.navtoggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);}

@media (max-width:760px){
  .navlinks{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .navlinks.open{max-height:320px;}
  .navlinks a{padding:16px 32px;border-bottom:1px solid var(--line);width:100%;}
  .navtoggle{display:block;}
}

/* ---------- hero ---------- */
.hero{padding:150px 0 90px;}

.photo-hero{
  position:relative;width:100%;
  height:clamp(260px,36vw,420px);
  overflow:hidden;margin-top:0;
}
.hero-slide{
  position:absolute;inset:0;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1);
}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block;
  filter:brightness(.9);
}
.photo-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,18,14,.15) 0%, rgba(20,18,14,.38) 100%);
  pointer-events:none;z-index:2;
}
.photo-hero .cap{
  position:absolute;left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 40px;z-index:3;
  max-width:var(--max);margin:0 auto;
}
.photo-hero .cap h1{
  font-family:'Inter', sans-serif;font-weight:500;color:#fdfdfc;
  font-size:clamp(11px,1.5vw,18px);line-height:1.6;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
  margin:0;max-width:none;text-align:center;
}
@media (max-width:700px){
  .photo-hero .cap h1{
    font-size:10px;letter-spacing:.1em;white-space:normal;max-width:80%;
  }
}
.eyebrow{
  font-family:'Inter', sans-serif;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:36px;font-weight:500;
}
h1.display{
  font-family:'Inter', sans-serif;font-weight:200;
  font-size:clamp(56px,10.5vw,158px);line-height:.94;letter-spacing:-.03em;
  max-width:none;margin:0 0 46px;
}
h1.display em{font-style:normal;color:var(--oak);font-weight:200;}
.lede{max-width:460px;color:var(--ink-soft);font-size:19px;font-weight:400;margin-bottom:44px;line-height:1.75;}
.herolinks{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--line);}
.herolinks a{
  flex:1;min-width:160px;padding:22px 0;
  font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border-right:1px solid var(--line);transition:color .2s;
}
.herolinks a:last-child{border-right:none;}
.herolinks a:hover{color:var(--ink);}
.herolinks a span{display:block;font-family:'Inter', sans-serif;font-weight:400;font-size:17px;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-top:8px;}
.btnrow{display:flex;gap:18px;flex-wrap:wrap;}
.btn{
  display:inline-block;padding:14px 30px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ink);transition:background .2s,color .2s;font-weight:300;
}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn.ghost{border-color:var(--line);color:var(--ink-soft);}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink);}

/* ---------- grids ---------- */
.section{padding:100px 0;}
.section.border-t{border-top:1px solid var(--line);}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:60px;gap:24px;flex-wrap:wrap;
}
h2.display{font-family:'Inter', sans-serif;font-weight:300;font-size:34px;margin:0;letter-spacing:-.02em;}
.section-note{font-size:14px;font-weight:300;color:var(--ink-soft);max-width:340px;line-height:1.7;}

.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px;
}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid{grid-template-columns:1fr;}}
.piece.wide{grid-column:span 2;}
@media (max-width:560px){.piece.wide{grid-column:span 1;}}

.piece{cursor:pointer;}
.piece figure{margin:0;background:var(--oak-soft);overflow:hidden;}
.piece img{width:100%;display:block;transition:transform .6s ease;}
.piece:hover img{transform:scale(1.02);}
.piece .cap{padding-top:18px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.piece .title{font-family:'Inter', sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;}
.piece .meta{font-family:'IBM Plex Mono', monospace;font-size:10px;color:var(--ink-soft);letter-spacing:.06em;white-space:nowrap;}
.piece .sub{font-size:13px;font-weight:300;color:var(--ink-soft);margin-top:4px;letter-spacing:.02em;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0;margin-top:60px;}
.footrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:11px;letter-spacing:.05em;font-weight:300;color:var(--ink-soft);}
.footrow a:hover{color:var(--ink);}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(250,249,246,.97);
  z-index:200;display:none;align-items:center;justify-content:center;
}
.lightbox.open{display:flex;}
.lightbox-inner{
  max-width:min(1100px,90vw);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.lightbox-img-wrap{
  max-width:100%;max-height:70vh;overflow:auto;
  display:flex;align-items:center;justify-content:center;
}
.lightbox img{
  max-width:100%;max-height:70vh;object-fit:contain;display:block;
  background:var(--oak-soft);cursor:zoom-in;transition:max-width .2s, max-height .2s;
}
.lightbox img.zoomed{
  max-width:none;max-height:none;width:auto;height:180vh;cursor:zoom-out;
}
.lightbox-img-wrap.zoomed{
  max-width:92vw;cursor:grab;
  align-items:flex-start;justify-content:flex-start;
}
.lightbox-cap{color:var(--ink);text-align:center;}
.lightbox-cap .title{font-family:'Inter', sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;}
.lightbox-cap .sub{font-size:13px;font-weight:300;color:var(--ink-soft);margin-top:4px;}
.lightbox-cap a{
  display:inline-block;margin-top:14px;font-family:'IBM Plex Mono', monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:2px;
}
.lightbox-close{
  position:absolute;top:26px;right:34px;color:var(--ink);font-size:28px;font-weight:300;
  background:none;border:none;cursor:pointer;line-height:1;
}
.lightbox-zoom{
  position:absolute;top:26px;right:84px;color:var(--ink);
  background:none;border:none;cursor:pointer;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-zoom svg{width:22px;height:22px;}
@media (max-width:640px){
  .lightbox-zoom{top:16px;right:58px;}
}
.lightbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--ink);font-size:34px;font-weight:300;
  cursor:pointer;padding:20px;line-height:1;opacity:.7;transition:opacity .2s;
}
.lightbox-arrow:hover{opacity:1;}
.lightbox-arrow.prev{left:10px;}
.lightbox-arrow.next{right:10px;}
@media (max-width:640px){
  .lightbox-arrow{padding:10px;font-size:26px;}
  .lightbox-close{top:16px;right:18px;}
}
/* ---------- filters (portfolio) ---------- */
.filters{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:64px;}
.filter{position:relative;}
.filter label{
  display:block;font-family:'IBM Plex Mono', monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;
}
.filter select{
  appearance:none;background:var(--paper);border:1px solid var(--line);
  padding:12px 40px 12px 16px;font-family:'Inter';font-weight:300;font-size:13px;letter-spacing:.02em;color:var(--ink);
  min-width:210px;cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%238a877e" fill="none" stroke-width="1.2"/></svg>');
  background-repeat:no-repeat;background-position:right 16px center;
}
.filter select:focus{outline:1px solid var(--oak);outline-offset:2px;}
.resultcount{font-size:11px;letter-spacing:.05em;color:var(--ink-soft);align-self:flex-end;margin-left:auto;}

/* ---------- shop ---------- */
.shopcats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:760px){.shopcats{grid-template-columns:1fr;}}
.shopcard{
  background:var(--paper);padding:46px 36px;transition:background .2s;
}
.shopcard{display:block;}
.shopcard:hover{background:var(--oak-soft);}
.shopcard .num{font-family:'IBM Plex Mono', monospace;font-size:11px;color:var(--oak);margin-bottom:26px;letter-spacing:.05em;}
.shopcard h3{font-family:'Inter', sans-serif;font-size:21px;font-weight:500;letter-spacing:-.01em;margin:0 0 14px;}
.shopcard p{font-size:13px;font-weight:300;line-height:1.75;color:var(--ink-soft);margin:0 0 28px;}
.shopcard .price{font-family:'IBM Plex Mono', monospace;font-size:12px;color:var(--ink-soft);letter-spacing:.03em;}

.infobar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:50px 0;margin:90px 0;
}
@media (max-width:760px){.infobar{grid-template-columns:1fr;gap:30px;}}
.infobar.two{grid-template-columns:repeat(2,1fr);}
@media (max-width:760px){.infobar.two{grid-template-columns:1fr;}}
.infobar h4{font-family:'IBM Plex Mono', monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--oak);margin:0 0 14px;font-weight:400;}
.infobar p{font-size:13px;font-weight:300;line-height:1.75;color:var(--ink-soft);margin:0;}

/* ---------- about ---------- */
.about-hero{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;}
@media (max-width:800px){.about-hero{grid-template-columns:1fr;gap:40px;}}
.about-hero figure{margin:0;background:var(--oak-soft);}
.about-hero img{width:100%;display:block;}
.about-hero .txt p{color:var(--ink-soft);font-weight:300;font-size:15px;line-height:1.85;margin-bottom:22px;}

/* ---------- single work page ---------- */
.work-detail{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
@media (max-width:800px){.work-detail{grid-template-columns:1fr;gap:36px;}}
.work-detail figure{
  margin:0;background:transparent;
  display:flex;align-items:center;justify-content:center;
  max-height:60vh;overflow:hidden;
}
.work-detail img{max-width:100%;max-height:60vh;width:auto;height:auto;display:block;object-fit:contain;}
.work-detail .info .title{font-family:'Inter', sans-serif;font-weight:600;font-size:26px;letter-spacing:-.01em;margin-bottom:8px;}
.work-detail .info .sub{font-size:14px;font-weight:300;color:var(--ink-soft);margin-bottom:28px;}
.work-detail .info .desc{font-size:15px;font-weight:300;line-height:1.85;color:var(--ink-soft);margin-bottom:32px;}
.work-nav{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);}
.work-nav a{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.work-nav a:hover{color:var(--ink);}

.process-shot{margin-top:60px;}
.process-shot .eyebrow{margin-bottom:14px;}
.process-shot .row{display:flex;gap:14px;}
.process-shot .row img{width:220px;max-width:38vw;display:block;background:var(--oak-soft);border-radius:1px;cursor:zoom-in;}
.process-shot .caption{font-size:12px;color:var(--ink-soft);margin-top:10px;}

.road-figure{margin:0;}
.road-figure .frame{
  aspect-ratio:3/4;background:var(--oak-soft);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.road-figure .frame img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain;}
.road-figure .caption{
  font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.04em;
  color:var(--ink-soft);margin-top:10px;
}
.road-figure .see-work{
  display:block;margin-top:6px;background:none;border:none;padding:0;cursor:pointer;
  font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
}
.road-figure .see-work:hover{border-color:var(--ink);}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
.formfield{margin-bottom:30px;}
.formfield label{display:block;font-family:'IBM Plex Mono', monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:10px;}
.formfield select{width:100%;padding:12px 0;border:none;border-bottom:1px solid var(--line);background:transparent;font:inherit;color:var(--ink);border-radius:0;}
.formfield select:focus{outline:none;border-color:var(--oak);}
.ordersummary{font-size:15px;margin:0 0 14px;}
.ordernote{font-size:13px;color:var(--ink-soft);margin:0 0 30px;line-height:1.6;}
.shop-detail .info .howorder{font-size:12px;font-weight:300;line-height:1.7;color:var(--ink-soft);margin:0 0 26px;max-width:52ch;}
.formfield input, .formfield textarea{
  width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;
  padding:10px 2px;font-family:'Inter';font-weight:300;font-size:14px;color:var(--ink);
}
.formfield input:focus, .formfield textarea:focus{outline:none;border-color:var(--oak);}
.contact-info dt{font-family:'IBM Plex Mono', monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);margin-top:30px;font-weight:400;}
.contact-info dd{margin:8px 0 0;font-size:15px;font-weight:300;}

/* ---------- shop listing + availability ---------- */
.shop-section{scroll-margin-top:110px;}
.shop-section + .shop-section{margin-top:90px;}
.shop-count{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.05em;color:var(--ink-soft);}
.work-detail .avail{margin:0 0 32px;display:flex;flex-direction:column;gap:10px;}
.work-detail .avail div{font-size:13px;font-weight:300;color:var(--ink-soft);letter-spacing:.02em;display:flex;justify-content:space-between;gap:20px;max-width:360px;border-bottom:1px solid var(--line);padding-bottom:10px;}
.work-detail .avail strong{font-family:'IBM Plex Mono', monospace;font-weight:400;font-size:12px;color:var(--ink);}

/* ---------- print detail page (shop) ---------- */
.crumbs{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:34px;}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.crumbs .sep{opacity:.45;margin:0 8px;}
.shop-detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px;align-items:start;}
@media (max-width:860px){.shop-detail{grid-template-columns:1fr;gap:34px;}}
.zoomwrap{position:relative;overflow:hidden;background:var(--oak-soft);cursor:zoom-in;line-height:0;touch-action:pan-y;}
.zoomwrap img{width:100%;height:auto;display:block;transform-origin:50% 50%;transition:transform .28s ease;will-change:transform;user-select:none;-webkit-user-drag:none;}
.zoomwrap.zoomed{cursor:zoom-out;}
.zoomwrap.zoomed img{transform:scale(var(--zoom,2.4));}
.zoomhint{font-family:'IBM Plex Mono', monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:12px;opacity:.7;}
.shop-detail .info .eyebrow{margin-bottom:14px;}
.shop-detail .info .title{font-family:'Inter', sans-serif;font-weight:600;font-size:28px;letter-spacing:-.01em;line-height:1.25;margin-bottom:10px;}
.shop-detail .info .price{font-family:'IBM Plex Mono', monospace;font-size:15px;letter-spacing:.04em;margin-bottom:34px;}
.specs{margin:0 0 34px;padding:0;}
.specs > div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;}
.specs > div:first-child{border-top:1px solid var(--line);}
.specs dt{font-family:'IBM Plex Mono', monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px;}
.specs dd{margin:0;font-weight:300;}
.shop-detail .btnrow{margin-bottom:26px;}
.textlink{font-size:13px;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:2px;}
.textlink:hover{color:var(--ink);border-color:var(--ink);}
.shop-detail .info .desc{font-size:15px;font-weight:300;line-height:1.85;color:var(--ink-soft);margin:0 0 28px;}
.shop-detail .info .alsoprint{font-size:13px;color:var(--ink-soft);margin:0 0 14px;}
.shop-detail .info .alsoprint a{border-bottom:1px solid var(--line);}
.shop-detail .info .alsoprint a:hover{border-color:var(--ink);}
.shop-detail .info .printtext{font-size:15px;font-weight:300;line-height:1.85;color:var(--ink-soft);margin:0 0 32px;}

/* ---------- terms page ---------- */
.legal{max-width:720px;}
.legal .intro{font-size:15px;line-height:1.85;color:var(--ink-soft);margin:0 0 36px;}
.legal h2{font-family:'Inter', sans-serif;font-weight:500;font-size:17px;letter-spacing:-.005em;margin:40px 0 10px;}
.legal p{font-size:15px;font-weight:300;line-height:1.85;color:var(--ink-soft);margin:0 0 14px;}
.legal a{border-bottom:1px solid var(--line);}
.legal a:hover{border-color:var(--ink);}
.legal .contactline{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);}