/* Shared visual foundation and homepage layouts. Interior layouts live in styles.css. */
:root{--paper:#eee8dc;--cream:#f8f4eb;--ink:#292b27;--muted:#65665e;--line:#cbc5b8;--olive:#777b59;--brown:#80624b;--dark:#35382f;--max:1120px;color:var(--ink);background:var(--paper);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--olive);outline-offset:5px}
.wrap{width:min(calc(100% - 64px),var(--max));margin:auto}
.skip{position:absolute;top:-100px;left:12px;background:var(--ink);color:white;padding:12px;z-index:20}.skip:focus{top:12px}
.header{border-bottom:1px solid var(--line)}.header-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:flex;align-items:center;gap:13px;font-size:16px;font-weight:680;letter-spacing:-.03em}
.mark{display:grid;place-items:center;width:43px;height:43px;border:1.5px solid var(--ink);font-weight:760;font-size:18px;letter-spacing:-.1em;padding-right:4px}.mark-dot{color:var(--olive)}
nav{display:flex;align-items:center;gap:33px;font-size:13px;color:var(--muted)}nav a{padding:10px 0}nav a:hover,nav a.active{color:var(--ink)}nav a.active{border-bottom:1px solid var(--ink)}
.small-label{display:block;color:var(--olive);font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:center;min-height:590px;padding-top:88px;padding-bottom:95px}
.intro h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.055em;line-height:1.03;font-size:clamp(56px,6.3vw,91px);margin:22px 0 27px}
.period{color:var(--olive)}
.lead{max-width:590px;font-size:clamp(19px,2vw,23px);line-height:1.55;letter-spacing:-.02em;margin:0 0 20px}
.intro-details{font-size:15px;line-height:1.85;color:var(--muted);max-width:540px;margin:0}
.inline-links{display:flex;gap:32px;flex-wrap:wrap;margin-top:33px;font-size:13px;font-weight:700}.inline-links a{border-bottom:1px solid var(--olive);padding-bottom:8px}.inline-links a:hover{color:var(--brown)}
.desk-illustration{height:360px;position:relative;background:radial-gradient(ellipse at center,#ded6c7 0%,transparent 70%);isolation:isolate}
.paper{position:absolute;display:block;background:var(--cream);border:1px solid #c8c1b3;box-shadow:0 16px 40px #423b2d18}
.paper-back{width:65%;height:74%;right:1%;top:5%;transform:rotate(10deg);padding:23px;background:#d3d4c4}
.paper-kicker,.paper-bottom{font-size:10px;letter-spacing:.13em;color:#696b58}.paper-bottom{position:absolute;bottom:20px}
.sketch-lines{margin-top:25px;display:grid;gap:15px}.sketch-lines span{height:1px;background:#a1a18d;width:85%}.sketch-lines span:nth-child(2){width:66%}
.paper-front{width:78%;height:84%;left:4%;top:9%;transform:rotate(-5deg);padding:22px}
.sheet-top,.plan-caption{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.07em;color:#77786d}.sheet-top{padding-bottom:15px;border-bottom:1px solid #d6d0c3}
.plan{height:190px;margin-top:17px;display:grid;grid-template-columns:1fr .75fr;grid-template-rows:1fr 1fr;gap:4px;border:3px solid #666e5a;background:#737964;outline:1px solid #c4c9b7;outline-offset:4px}
.plan div{display:grid;place-items:center;background:#e6e6d8;color:#6a735f;font-size:10px;font-weight:750;letter-spacing:.08em}.plan-a{grid-row:span 2;background:#dadfce!important}.plan-d{background:#f2eada!important}
.plan-caption{margin-top:20px;letter-spacing:0}.plan-caption span:first-child{font-weight:700;color:#414b3c}
.pencil{position:absolute;width:8px;height:200px;border-radius:4px;background:linear-gradient(to right,#5d6248 0 25%,#898e6b 30% 75%,#5d6248 80%);right:4%;bottom:3%;transform:rotate(29deg);box-shadow:3px 5px 11px #4847342a}.pencil:after{content:"";position:absolute;bottom:-22px;left:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:24px solid #ab8f6c}
.work-section{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:79px 0 85px}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.section-top h2{font-size:clamp(36px,4vw,51px);font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em;margin:14px 0 0}
.subtle-link{font-weight:650;font-size:13px;padding-bottom:5px;border-bottom:1px solid var(--olive);white-space:nowrap}
.project-item{display:grid;grid-template-columns:210px 1fr 25px;gap:30px;align-items:center;border-top:1px solid var(--line);padding:23px 2px;transition:background .2s}.project-item:last-child{border-bottom:1px solid var(--line)}.project-item:hover .project-info h3{color:var(--brown)}.project-item:hover .item-arrow{transform:translate(2px,-2px)}
.project-thumb{height:132px;position:relative;overflow:hidden;display:grid;place-items:center}
.thumb-plan{background:#dadbd0}.thumb-workshop{background:#e4d9ca}.thumb-rc{background:#d6d0bd;color:#515847}
.mini-rule{position:absolute;bottom:8px;left:11px;color:#636756;font-size:9px;letter-spacing:.1em}
.mini-grid{height:92px;width:122px;border:2px solid #7c826d;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:5px;padding:6px;transform:rotate(-5deg)}
.mini-grid i{border:1px solid #919883}.mini-grid i:first-child{grid-row:span 2}.mini-grid i:last-child{display:none}
.mini-board{display:flex;width:130px;height:85px;gap:7px;transform:rotate(5deg)}.mini-board i{flex:1;background:#f5efe5;border:1px solid #ccbaa3;padding:8px 5px;display:grid;align-content:start;gap:7px}.mini-board b{height:10px;background:#c8c6ab}
.thumb-rc svg{width:170px;height:115px}
.project-meta{color:var(--olive);font-size:11px;font-weight:700;letter-spacing:.03em}.status{color:#736d62;margin-left:16px;font-weight:500}.project-info h3{font-family:Georgia,serif;font-size:28px;letter-spacing:-.025em;font-weight:400;margin:10px 0}.project-info p{font-size:14px;line-height:1.75;color:var(--muted);max-width:630px;margin:0}.item-arrow{align-self:center;font-size:20px;transition:transform .2s}
.about-strip{padding-top:98px;padding-bottom:110px;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.about-strip h2{font-size:clamp(29px,3.2vw,41px);font-family:Georgia,serif;line-height:1.25;font-weight:400;letter-spacing:-.032em;margin:17px 0 0}.about-strip p{font-size:16px;color:var(--muted);line-height:1.9;margin:7px 0 25px}
.footer{border-top:1px solid var(--line)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:93px;color:var(--muted);font-size:12px}.footer-inner>div{display:flex;gap:27px}.footer a:hover{color:var(--brown)}
@media(max-width:850px){.intro{grid-template-columns:1fr;gap:25px;padding-top:65px;padding-bottom:65px}.desk-illustration{max-width:580px;width:100%;margin:auto}.about-strip{gap:45px}.project-item{grid-template-columns:175px 1fr 20px;gap:20px}}
@media(max-width:600px){.wrap{width:min(calc(100% - 36px),var(--max))}.header-inner{min-height:74px;flex-wrap:wrap;padding:12px 0;gap:12px}.wordmark{font-size:14px}.mark{height:33px;width:33px;font-size:15px}nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.intro{padding-top:57px}.intro h1{font-size:56px}.lead{font-size:19px}.desk-illustration{height:280px}.paper-front{padding:13px}.paper-back{padding:16px}.sheet-top{font-size:8px}.plan{height:146px;margin-top:13px}.plan-caption{margin-top:12px;font-size:8px}.pencil{height:130px}.work-section{padding:63px 0}.project-item{grid-template-columns:100px 1fr;gap:15px;align-items:start}.project-thumb{height:105px}.project-info h3{font-size:23px}.project-info p{font-size:13px}.project-meta{font-size:10px}.status{display:block;margin:6px 0 0}.item-arrow{display:none}.about-strip{grid-template-columns:1fr;gap:24px;padding-top:70px;padding-bottom:75px}.footer-inner{align-items:start;flex-direction:column;justify-content:center;padding:22px 0;gap:15px}.footer-inner>div{gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Selected Huff mountain and antler badge in the header. */
.site-logo{width:58px;height:58px;display:block;flex:0 0 58px;object-fit:contain}
@media(max-width:600px){.site-logo{width:46px;height:46px;flex-basis:46px}}
@media(max-width:380px){.pencil{right:8%}}

.intro-details a, .inline-note {
  color: #4e593e;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.illustrated-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.illustrated-thumb .mini-rule { background: #f4efdf; padding: 1px 4px; }
.idea-shelf { background: #e2e4d6; border-bottom: 1px solid #c2c8b5; }
.idea-shelf-inner {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(30px, 7vw, 90px);
  padding-block: clamp(44px, 6vw, 76px);
}
.idea-shelf h2 { margin: 12px 0 0; font: 400 clamp(2.25rem, 4vw, 3.2rem)/1.1 Georgia, serif; letter-spacing: -.045em; }
.idea-shelf p { margin: 0 0 18px; max-width: 52ch; line-height: 1.7; color: #505548; }
.idea-shelf .small-label { color: #535f40; }
@media (max-width: 600px) {
  .idea-shelf-inner { grid-template-columns: 1fr; gap: 17px; }
}