:root { --ink:#171914; --bone:#eee7d6; --orange:#ff5b35; --yellow:#e8bd43; --moss:#77825a; --line:rgba(238,231,214,.25); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--bone); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.shell { width:min(1400px,calc(100% - 64px)); margin-inline:auto; }
.eyebrow { margin:0; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:700; }
.nav { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.14em; }
.wordmark { display:flex; align-items:center; gap:13px; font-weight:700; }
.mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--orange); border-radius:50%; color:var(--orange); font-size:10px; letter-spacing:-.05em; transform:rotate(-8deg); }
nav { display:flex; gap:30px; }
nav a:hover { color:var(--orange); }
.hero { min-height:calc(100vh - 88px); display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; padding-block:54px; }
.hero-copy h1 { margin:30px 0; font:700 clamp(65px,8vw,122px)/.83 Arial,sans-serif; letter-spacing:-.075em; text-transform:uppercase; }
.hero-copy h1 em { color:var(--orange); font:italic 400 .88em/.9 Georgia,serif; text-transform:none; letter-spacing:-.06em; }
.hero-copy>p:not(.eyebrow) { max-width:470px; font-size:18px; line-height:1.5; color:rgba(238,231,214,.72); }
.button { margin-top:34px; display:inline-flex; align-items:center; justify-content:space-between; min-width:260px; padding:17px 18px; background:var(--yellow); color:var(--ink); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; transition:.2s; }
.button:hover { background:var(--orange); transform:rotate(-1deg); }
.hero-image { height:min(70vh,720px); margin:0; position:relative; overflow:hidden; border-radius:48% 48% 0 0; }
.hero-image img { filter:saturate(.85) contrast(1.08); }
.hero-image figcaption { position:absolute; left:20px; bottom:18px; background:var(--orange); color:var(--ink); padding:10px 13px; font:bold 11px/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.1em; transform:rotate(-2deg); }
.ticker { overflow:hidden; background:var(--orange); color:var(--ink); border-block:1px solid var(--ink); transform:rotate(-.7deg); width:101%; margin-left:-.5%; }
.ticker div { white-space:nowrap; padding:13px 0; font-size:13px; font-weight:800; letter-spacing:.12em; text-align:center; }
.work { padding:145px 0 160px; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:70px; }
.section-head h2,.commission-title h2 { margin:22px 0 0; font:400 clamp(54px,7vw,104px)/.88 Georgia,serif; letter-spacing:-.06em; }
.availability { margin:0; font:italic 15px/1.5 Georgia,serif; color:rgba(238,231,214,.6); }
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:start; }
.work-card.boards { grid-column:span 5; }
.work-card.mallet { grid-column:span 3; margin-top:130px; }
.work-card.letters { grid-column:span 4; margin-top:40px; }
.work-image { position:relative; overflow:hidden; background:#333; aspect-ratio:4/5; }
.work-card.boards .work-image { aspect-ratio:5/4; }
.work-card.letters .work-image { aspect-ratio:4/3; }
.work-card.mallet img { object-position:48% center; }
.card-meta { display:flex; justify-content:space-between; gap:14px; padding-top:14px; border-top:1px solid var(--bone); margin-top:12px; }
.card-meta h3,.card-meta p { margin:0; font-size:13px; font-weight:400; }
.card-meta p { opacity:.55; text-align:right; }
.material { background:var(--moss); color:var(--ink); padding:100px 0; }
.material-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; }
.material-image { height:620px; clip-path:polygon(0 4%,96% 0,100% 94%,4% 100%); }
.material-copy { position:relative; padding-right:40px; }
.material-copy h2 { margin:26px 0 34px; font:400 clamp(45px,5.7vw,82px)/.92 Georgia,serif; letter-spacing:-.055em; }
.material-copy>p:not(.eyebrow) { max-width:560px; font-size:17px; line-height:1.6; }
.stamp { display:inline-grid; place-items:center; width:145px; height:145px; border:2px solid var(--ink); border-radius:50%; margin-top:35px; text-align:center; font-size:14px; font-weight:800; line-height:.9; transform:rotate(9deg); }
.story { background:var(--bone); color:var(--ink); padding:140px 0; }
.story-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:start; }
.portrait { height:680px; position:relative; transform:rotate(-1.5deg); box-shadow:14px 14px 0 var(--yellow); }
.portrait span { position:absolute; bottom:18px; left:18px; background:var(--ink); color:var(--bone); padding:9px 12px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.story-copy h2 { margin:28px 0 50px; font:400 clamp(54px,7vw,102px)/.88 Georgia,serif; letter-spacing:-.06em; }
.story-copy>p:not(.eyebrow):not(.signoff) { max-width:650px; font-size:18px; line-height:1.65; margin:0 0 28px; }
.signoff { margin-top:45px; font:italic 14px Georgia,serif; opacity:.65; }
.commissions { padding:140px 0; }
.commission-title { max-width:980px; }
.caddy-photos { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:80px; align-items:end; }
.caddy-photos figure { margin:0; }
.caddy-photos img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.caddy-photos figcaption { margin-top:10px; color:var(--muted); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.commission-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; margin:55px 0 0 25%; padding-top:25px; border-top:1px solid var(--line); }
.commission-example h3 { margin:22px 0; font:400 clamp(34px,4vw,58px)/.95 Georgia,serif; letter-spacing:-.045em; }
.commission-example p,.commission-prompt>p { max-width:500px; font-size:17px; line-height:1.55; color:rgba(238,231,214,.67); }
.button-dark { background:var(--orange); }
.shelf-commission { margin-top:150px; padding-top:95px; border-top:1px solid var(--line); }
.shelf-heading { display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:45px; align-items:start; }
.shelf-heading h3 { margin:0; font:400 clamp(46px,5.6vw,82px)/.9 Georgia,serif; letter-spacing:-.055em; }
.shelf-heading>p:last-child { margin:5px 0 0; font-size:17px; line-height:1.6; color:rgba(238,231,214,.67); }
.shelf-process { display:grid; grid-template-columns:repeat(12,1fr); gap:22px; align-items:start; margin-top:75px; }
.shelf-process figure { margin:0; }
.shelf-process figure img { min-height:0; }
.shelf-process figcaption { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:rgba(238,231,214,.62); }
.process-original { grid-column:span 5; }
.process-test { grid-column:span 3; margin-top:110px!important; }
.process-pair { grid-column:span 4; margin-top:40px!important; }
.process-original img { aspect-ratio:4/3; }
.process-test img { aspect-ratio:3/4; }
.process-pair img { aspect-ratio:4/5; }
.process-close { grid-column:5/span 6; margin-top:45px!important; }
.process-close img { aspect-ratio:4/3; }
.installed-note { width:max-content; margin:40px 0 0 auto; padding:9px 12px; background:var(--yellow); color:var(--ink); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; transform:rotate(-1deg); }
.newsletter { background:var(--yellow); color:var(--ink); padding:105px 0; }
.newsletter-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:end; }
.newsletter h2 { margin:24px 0 0; font:700 clamp(55px,7vw,100px)/.83 Arial,sans-serif; text-transform:uppercase; letter-spacing:-.075em; }
.newsletter-grid>div:last-child>p { max-width:500px; font-size:17px; line-height:1.55; }
.signup { margin-top:45px; border-bottom:2px solid var(--ink); padding:17px 0; display:flex; justify-content:space-between; gap:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.signup span:last-child { opacity:.55; }
.footer { padding:48px 0 62px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; font-size:12px; line-height:1.6; }
.footer-brand { font:700 30px/.78 Arial,sans-serif; letter-spacing:-.07em; color:var(--orange); }
.footer p { margin:0; }
.copyright { text-align:right; }
@media (max-width:800px) {
  .shell { width:calc(100% - 36px); }
  .nav { height:76px; }
  .wordmark>span:last-child,nav a:nth-child(2),nav a:nth-child(3) { display:none; }
  nav { gap:18px; }
  .hero { min-height:auto; display:block; padding-block:54px 42px; }
  .hero-copy h1 { font-size:clamp(59px,18vw,90px); }
  .hero-image { height:500px; margin-top:55px; border-radius:46% 46% 0 0; }
  .work { padding:100px 0; }
  .section-head { display:block; }
  .availability { margin-top:28px; }
  .work-grid { display:block; }
  .work-card,.work-card.mallet,.work-card.letters { margin:0 0 58px; }
  .work-card.mallet { margin-left:16%; }
  .work-card.letters { margin-right:8%; }
  .material { padding:75px 0; }
  .material-grid { display:flex; flex-direction:column; gap:60px; }
  .material-image { width:100%; height:420px; }
  .material-copy { padding:0; }
  .story { padding:90px 0; }
  .story-grid { display:block; }
  .portrait { width:88%; height:520px; margin-bottom:90px; }
  .commission-grid { display:block; margin:70px 0 0; }
  .caddy-photos { grid-template-columns:1fr; gap:32px; margin-top:55px; }
  .commission-prompt { margin-top:65px; }
  .shelf-commission { margin-top:100px; padding-top:70px; }
  .shelf-heading { display:block; }
  .shelf-heading h3 { margin:28px 0 35px; }
  .shelf-process { display:block; margin-top:55px; }
  .shelf-process figure,.process-test,.process-pair,.process-close { margin:0 0 48px!important; }
  .process-test { margin-left:15%!important; }
  .process-pair { margin-right:8%!important; }
  .installed-note { margin-top:10px; }
  .newsletter-grid { display:block; }
  .newsletter-grid>div:last-child { margin-top:55px; }
  .signup { align-items:end; }
  .footer { grid-template-columns:1fr 1fr; row-gap:35px; }
  .copyright { grid-column:1/-1; text-align:left; }
}