:root { --paper:#fafaf8; --paper-2:#eef0e9; --paper-3:#d9ddd3; --ink:#20211f; --ink-mute:#585b55; --ink-dim:#62665d; --accent:#b72d4b; --sect:#b72d4b; --pink:#f3dce4; --green:#e6ebd4; --pad-x:40px; --max-w:1440px; }
*,*::before,*::after { letter-spacing:0!important; }
html { scroll-padding-top:90px; }
body { background:var(--paper); -webkit-font-smoothing:antialiased; }
a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.bg-auras,.grain,.bg-grid,.bg-grid-hot,.bg-grid-core,.ambient-dot,.click-stamp,.cursor-tag { display:none!important; }
.nav,.nav.scrolled { top:0; left:0; right:0; width:100%; border-radius:0; background:var(--paper)!important; backdrop-filter:none!important; border:0!important; border-bottom:1px solid #20211f20!important; box-shadow:none!important; }
.nav-inner { padding-block:20px!important; }
.nav-mark,.nav-back,.nav-links a { font-family:var(--sans)!important; }
.home-page .nav-inner { display:flex; justify-content:space-between; align-items:center; gap:32px; }
.home-page .nav-mark.wordmark { font-size:34px; text-transform:none; font-weight:600; overflow:visible; }
.wordmark span { color:var(--accent); }
.home-page .nav-mid { display:block; margin-right:auto; font-family:var(--sans); font-size:12px; text-transform:none; color:var(--ink-mute); }
.home-page .nav-links { display:flex; gap:30px; }
.home-page .nav-links a { font-size:13px; text-transform:none; }
.home-page .nav-toggle { display:none; }
.home-page main { padding-top:80px; }
.home-page #hero { position:relative; background:#f2eee8; padding:24px 40px 0; overflow:hidden; min-height:0; display:block; max-width:none; }
.hero-topline,.hero-bottom { display:flex; justify-content:space-between; align-items:center; font-size:12px; gap:20px; max-width:var(--max-w); margin-inline:auto; }
.hero-topline { color:#734b59; }
.hero-heading { position:relative; z-index:2; text-align:center; padding-top:36px; }
.hero-heading h1 { font-size:100px; line-height:1.06; font-weight:500; }
.hero-heading em { font-family:var(--serif); font-weight:400; }
.hero-heading h1 em { color:var(--accent); }
.hero-heading p { font-size:20px; line-height:1.4; margin-top:18px; }
.hero-heading p em { font-size:25px; }
.hero-composition { position:relative; height:380px; max-width:1440px; margin:14px auto 0; }
.hero-piece { position:absolute; width:30%; top:32px; text-decoration:none; box-shadow:0 10px 24px #4023311a; transition:transform .4s ease; background:white; color:var(--ink); }
.hero-piece img { width:100%; aspect-ratio:1.55; height:auto; object-fit:cover; display:block; }
.hero-piece>span { display:flex; justify-content:space-between; padding:10px 14px; font-size:11px; background:var(--paper); }
.piece-product { left:3%; transform:rotate(-8deg); }
.piece-avail { left:35%; top:15px; transform:rotate(4deg); z-index:1; }
.piece-art { right:2%; transform:rotate(9deg); }
.hero-piece:hover,.hero-piece:focus-visible { transform:rotate(0) translateY(-12px); z-index:4; }
.hero-bottom { position:relative; padding:20px 0; border-top:1px solid #734b5930; }
.hero-bottom a { text-decoration:none; font-weight:500; color:var(--ink); }
.hero-bottom a span { display:inline-block; margin-left:12px; }
.eyebrow { font-family:var(--sans); font-size:12px; color:var(--ink-mute); text-transform:none; }
.eyebrow::before { display:none; }
.home-page #work { padding:64px 56px 100px; }
.sec-head2 { align-items:flex-end; margin-bottom:44px; gap:32px; }
.work-title { font-size:54px; font-weight:400; line-height:1.07; margin-top:18px; }
.work-title em { font-family:var(--serif); color:var(--accent); }
.work-filters { display:flex; flex-wrap:wrap; gap:20px; padding-bottom:5px; }
.work-filters button { border:0; background:none; color:#62665d; padding:12px 0; cursor:pointer; border-bottom:2px solid transparent; font-family:var(--sans); font-size:12px; min-height:44px; }
.work-filters button[aria-pressed=true] { border-color:var(--accent); color:var(--ink); }
.work-filters sup { font-size:9px; }
.work-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:72px 36px; align-items:start; }
.work-grid .proj { min-width:0; }
.work-grid .proj[hidden] { display:none; }
.work-grid .proj:nth-child(2) { margin-top:100px; }
.work-grid .proj:nth-child(4) { margin-top:80px; }
.work-grid.filtered .proj { margin-top:0; }
.proj-media { border-radius:0; border:0; aspect-ratio:1.32; background:#eef0f3; }
.proj-media img { object-fit:contain; transition:transform .6s ease; }
.proj:nth-child(2) .proj-media { aspect-ratio:1.04; }
.proj:nth-child(4) .proj-media { aspect-ratio:1.18; background:#242424; }
.proj:nth-child(5) { grid-column:1/-1; }
.proj:nth-child(5) .proj-media { aspect-ratio:1.95; background:#b9b9b3; }
.work-grid.filtered .proj { grid-column:auto; }
.proj-media::after { content:'↗'; inset:auto 18px 18px auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; opacity:1; mix-blend-mode:normal; background:var(--paper); color:var(--ink); font-size:24px; }
.proj:hover .proj-media::after { opacity:1; background:var(--accent); color:white; }
.proj:hover .proj-media img { transform:scale(1.025); }
.proj-cap { gap:16px; margin-top:20px; }
.proj-idx { display:none; }
.proj-name { font-size:32px; line-height:1.12; font-weight:500; }
.proj-name em { color:var(--ink); }
.proj-meta { font-family:var(--sans); font-size:11px; text-transform:none; }
.project-description { font-size:14px; line-height:1.5; color:var(--ink-mute); margin-top:9px; max-width:46ch; }
.home-page #about { background:var(--green); padding:72px 0 64px; border:0; }
.home-page #about .wrap { padding-inline:56px; }
.about-grid { grid-template-columns:1.12fr 1fr; gap:60px; margin-top:24px; }
.about-lead { font-size:46px; line-height:1.12; font-weight:400; }
.about-lead em { color:var(--ink); }
.about-body { font-size:16px; line-height:1.7; }
.about-cv { padding-top:12px; }
.about-cv-label,.cv2-yr,.cv2-role { font-family:var(--sans); text-transform:none; }
.cv2-row { grid-template-columns:80px 1fr auto; gap:16px; padding:20px 0; }
.cv2-yr { color:#555b4d; }
.reading-note { margin-top:28px; font-size:15px; line-height:1.65; color:#505747; }
.reading-note em { font-family:var(--serif); font-size:21px; }
.home-page #contact { background:#272b25; padding:0; }
.home-page #contact .wrap { padding:70px 56px 28px; }
.home-page #contact .eyebrow { color:#cad1c1; }
.ct2-statement { font-size:76px; line-height:1.06; font-weight:400; max-width:none; }
.ct2-statement em { color:#e6ebbd; }
.ct2-actions { justify-content:space-between; margin-top:36px; }
.btn-on-dark { background:none; border-radius:0; padding:12px 0; border-bottom:1px solid #a5ad9b; color:#fafaf8; font-size:20px; }
.btn-on-dark:hover { background:none; color:#e6ebbd; }
.ct2-links a,.ct2-foot { font-family:var(--sans); text-transform:none; }
.ct2-foot { margin-top:56px; }
/* Companion pages share the same type and material palette. */
body:not(.home-page) { --sect:#b72d4b; --accent:#b72d4b; }
body:not(.home-page) .nav-inner { grid-template-columns:1fr auto; }
body:not(.home-page) .nav-mid { display:none; }
.page-hero,.case-hero { padding-top:128px; }
.ph-top,.ch-top { border-bottom:0; }
.ch-top .mid,.ch-top .end,.ph-top-r,.sec-fig { display:none; }
.ch-top { display:block; }
.ph-title,.ch-title { font-size:88px; line-height:1.06; font-weight:500; }
.ch-main { grid-template-columns:1.1fr 1fr; align-items:end; }
.ch-lead,.ph-sub { font-size:19px; line-height:1.6; }
.ch-image { border:0; border-radius:0; }
.ch-image img { width:100%; height:auto; max-height:660px; object-fit:contain; }
.fig-tag { display:none; }
.ch-meta { padding-block:22px; border-color:#20211f25; }
.ch-meta-key,.cb-label,.sec-no,.princ-no,.cv-no,.bio-side-key,.quote-attr,.op-tag,.cf-label { font-family:var(--sans); }
.content-block { grid-template-columns:1fr 3fr; gap:48px; }
.cb-body { min-width:0; }
.cb-heading { font-size:38px; line-height:1.18; font-weight:400; }
.cb-text,.proc-desc { font-size:16px; line-height:1.7; }
.quote-break { background:var(--pink); color:var(--ink); }
.qb-text { color:var(--ink); font-size:44px; }
.qb-attr { color:#62535b; }
.project-gallery { columns:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.project-gallery .sec-image { margin:0; width:100%; border:0; border-radius:0; background:#eef0eb; }
.project-gallery .sec-image img { cursor:zoom-in; width:100%; height:auto; }
.project-gallery .sec-image:hover img { transform:none; }
/* Case studies alternate context and evidence; the extended gallery is optional. */
#caseRoot .case-hero { padding-bottom:0; }
#caseRoot .ch-main { padding-top:28px; gap:48px; }
#caseRoot .ch-title { max-width:none; padding-bottom:8px; overflow-wrap:anywhere; }
#caseRoot .ch-lead { max-width:44ch; padding-bottom:0; }
#caseRoot .ch-meta { margin-top:36px; }
.case-jump { display:flex; flex-wrap:wrap; gap:28px; padding:8px 0 18px; }
.case-jump a { padding:12px 0; color:var(--ink-mute); text-decoration:none; font-size:13px; }
.case-jump a:hover { color:var(--accent); }
.case-eyebrow { display:block; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink-mute); line-height:1.5; }
.case-overview { background:#edf0e8; }
.overview-inner { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:64px; padding-block:48px; }
.overview-copy h2,.chapter-copy h2 { font-size:42px; line-height:1.16; font-weight:400; margin:18px 0 24px; }
.overview-copy h2 em,.chapter-copy h2 em,.gallery-summary-title em { font-family:var(--serif); font-weight:400; }
.overview-copy>p,.chapter-step p { font-size:16px; line-height:1.7; color:var(--ink-mute); max-width:58ch; }
.overview-copy strong { font-weight:500; color:var(--ink); }
.case-scope { margin-top:28px; padding-top:20px; border-top:1px solid #20211f25; }
.case-scope p { font-size:13px; line-height:1.6; margin-top:8px; }
.case-figure { margin:0; min-width:0; }
.case-figure .gallery-trigger { background:#eceeea; overflow:hidden; }
.case-figure img { display:block; width:100%; height:auto; max-height:560px; object-fit:contain; }
.case-figure figcaption { display:flex; align-items:start; justify-content:space-between; gap:20px; padding-top:12px; color:var(--ink-mute); font-size:12px; line-height:1.5; }
.case-figure figcaption>span:last-child { font-size:18px; }
.case-chapter { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:80px; padding:80px 0; }
.case-chapter+.case-chapter { border-top:1px solid #20211f25; }
.case-chapter:nth-child(even) { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.case-chapter:nth-child(even) .chapter-copy { grid-column:2; grid-row:1; }
.case-chapter:nth-child(even) .case-figure { grid-column:1; grid-row:1; }
.chapter-step { margin-top:24px; }
.chapter-step h3 { font-size:15px; line-height:1.5; font-weight:600; margin-bottom:8px; }
.chapter-step p { font-size:15px; }
.case-story.craft-story { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px; }
.craft-story .text-chapter { display:block; border:0; }
.case-takeaway { background:var(--pink); }
.takeaway-inner { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:80px; padding-block:56px; }
.takeaway-inner blockquote { margin:0; }
.takeaway-inner blockquote p { font-family:var(--serif); font-size:38px; line-height:1.25; }
.takeaway-inner cite { display:block; font-size:12px; font-style:normal; margin-top:20px; color:var(--ink-mute); }
.case-focus { list-style:none; padding:0; margin:16px 0 0; }
.case-focus li { display:flex; gap:18px; padding:14px 0; border-top:1px solid #20211f25; font-size:15px; line-height:1.5; }
.case-focus li span { font-size:12px; color:var(--ink-mute); padding-top:2px; }
.case-extras { padding-block:56px; }
.case-gallery-details summary { display:flex; align-items:center; justify-content:space-between; gap:24px; cursor:pointer; list-style:none; padding:12px 0; }
.case-gallery-details summary::-webkit-details-marker { display:none; }
.case-gallery-details summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.gallery-summary-title { display:block; font-size:36px; line-height:1.2; margin-top:12px; }
.gallery-summary-count { display:flex; align-items:center; gap:24px; font-size:13px; white-space:nowrap; }
.details-icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid #20211f40; border-radius:50%; font-size:26px; }
.case-gallery-details[open] .details-icon { transform:rotate(45deg); }
.case-extras .project-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:36px; padding-top:36px; }
.case-extras .case-figure img { height:400px; max-height:none; object-fit:contain; }
.ph-title em { color:var(--accent); }
.gallery-trigger { display:block; width:100%; border:0; padding:0; background:none; cursor:zoom-in; }
.contact-foot { background:#272b25; }
.cf-statement { font-size:60px; }
.cf-statement em { color:#e6ebbd; }
.op-card { border-radius:0; box-shadow:none; }
.image-viewer { border:0; background:#fafaf8; color:#20211f; padding:64px 20px 20px; max-width:96vw; max-height:96dvh; width:fit-content; margin:auto; }
.image-viewer::backdrop { background:#151815db; }
.image-viewer img { max-width:90vw; max-height:78dvh; width:auto; height:auto; object-fit:contain; }
.viewer-close { position:absolute; right:14px; top:10px; width:44px; height:44px; background:none; border:1px solid #20211f40; font-size:30px; cursor:pointer; }
.viewer-original { display:block; margin-top:12px; text-align:center; font-size:13px; }
@media(min-width:1600px) { .hero-heading h1 { font-size:116px; } .hero-composition { height:400px; } }
@media(max-width:1100px) {
  .overview-inner,.case-chapter,.takeaway-inner { gap:40px; }
  .overview-copy h2,.chapter-copy h2 { font-size:36px; }
  .hero-heading h1 { font-size:80px; } .hero-composition { height:265px; }
  .home-page #work,.home-page #about .wrap { padding-inline:32px; }
  .sec-head2 { align-items:start; flex-direction:column; }
  .proj-cap { align-items:start; flex-direction:column; gap:6px; } .proj-meta { text-align:left; }
  .about-lead { font-size:40px; } .about-grid { gap:36px; } .ph-title,.ch-title { font-size:68px; }
}
@media(max-width:760px) {
  :root { --pad-x:22px; }
  .home-page .nav-inner { padding:18px 22px!important; gap:18px; } .home-page .nav-mark.wordmark { font-size:30px; }
  .home-page .nav-mid { display:none; } .home-page .nav-links { gap:20px; } .home-page .nav-links a { font-size:12px; }
  .home-page main { padding-top:72px; }
  .home-page #hero { padding:22px 22px 0; } .hero-topline { font-size:11px; } .hero-topline>span:last-child { display:none; }
  .hero-topline { gap:10px; }
  .hero-heading { padding-top:32px; } .hero-heading h1 { font-size:64px; } .hero-heading h1 em { display:block; }
  .hero-heading p { font-size:17px; margin-top:16px; } .hero-heading p em { font-size:22px; }
  .hero-composition { height:auto; margin:22px 0 0; padding:0 0 24px; display:grid; grid-template-columns:1fr; gap:16px; }
  .hero-piece,.piece-product,.piece-avail,.piece-art { position:relative; inset:auto; width:100%; top:auto; left:auto; right:auto; transform:none; }
  .hero-piece>span { font-size:12px; padding:10px 12px; }
  .hero-piece>span>span { display:inline; }
  .hero-piece:hover,.hero-piece:focus-visible { transform:translateY(-4px); }
  .hero-bottom { font-size:11px; padding:18px 0; } .hero-bottom>span:last-child { display:none; }
  .home-page #work { padding:44px 22px 60px; } .sec-head2 { gap:20px; margin-bottom:28px; }
  .work-title { font-size:40px; } .work-filters { gap:20px; } .work-filters button { font-size:11px; }
  .work-grid { grid-template-columns:minmax(0,1fr); gap:38px; } .work-grid .proj:nth-child(n) { margin-top:0; grid-column:auto; }
  .proj:nth-child(n) .proj-media { aspect-ratio:1.3; } .proj-name { font-size:30px; } .proj-cap { margin-top:16px; }
  .home-page #about { padding:46px 0 36px; } .home-page #about .wrap { padding-inline:22px; }
  .about-grid { grid-template-columns:minmax(0,1fr); gap:28px; } .about-lead { font-size:37px; }
  .cv2-row { grid-template-columns:68px 1fr auto; gap:10px; } .cv2-role { font-size:10px; }
  .home-page #contact .wrap { padding:44px 22px 24px; } .ct2-statement { font-size:48px; }
  .ct2-actions { gap:20px; align-items:start; flex-direction:column; } .btn-on-dark { font-size:17px; }
  .ct2-links { gap:24px; } .ct2-foot { gap:18px; margin-top:36px; }
  .page-hero,.case-hero { padding-top:100px; } .ph-title,.ch-title { font-size:52px; overflow-wrap:anywhere; }
  .ch-main,.content-block { grid-template-columns:minmax(0,1fr); gap:24px; }
  .cb-heading { font-size:30px; } .qb-text { font-size:34px; } .cf-statement { font-size:42px; }
  #caseRoot .ch-main { gap:20px; padding-top:16px; }
  #caseRoot .ch-title { font-size:48px; }
  #caseRoot .ch-lead { font-size:17px; }
  #caseRoot .ch-meta { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
  .case-jump { gap:22px; padding-bottom:12px; }
  .case-jump a { font-size:12px; }
  .overview-inner,.case-chapter,.case-chapter:nth-child(even),.case-story.craft-story,.takeaway-inner { grid-template-columns:minmax(0,1fr); gap:28px; }
  .overview-inner { padding-block:36px; }
  .overview-copy h2,.chapter-copy h2 { font-size:32px; margin:14px 0 20px; }
  .case-chapter { padding:44px 0; }
  .case-chapter:nth-child(even) .chapter-copy,.case-chapter:nth-child(even) .case-figure { grid-column:auto; grid-row:auto; }
  .case-figure img { max-height:460px; }
  .case-story.craft-story { gap:0; }
  .craft-story .text-chapter+.text-chapter { border-top:1px solid #20211f25; }
  .takeaway-inner { padding-block:36px; gap:32px; }
  .takeaway-inner blockquote p { font-size:32px; }
  .case-extras { padding-block:32px; }
  .gallery-summary-title { font-size:28px; }
  .case-gallery-details summary { align-items:start; gap:16px; }
  .gallery-summary-count { flex-direction:column-reverse; gap:8px; font-size:11px; }
  .case-extras .project-gallery { grid-template-columns:minmax(0,1fr); gap:28px; }
  .case-extras .case-figure img { height:auto; max-height:500px; }
  /* Preserve readable UI type inside wide product screenshots. */
  .case-figure-wide { min-width:0; max-width:100%; overflow:hidden; }
  .case-figure-wide .gallery-trigger { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
  .case-figure-wide .gallery-trigger::-webkit-scrollbar { height:5px; }
  .case-figure-wide .gallery-trigger::-webkit-scrollbar-thumb { background:#20211f55; }
  .case-figure-wide .gallery-trigger img { width:560px; max-width:none; }
  .case-figure-wide figcaption { min-width:560px; }
  body:not(.home-page) .nav-mark { white-space:normal!important; font-size:11px!important; }
  .nav-back { font-size:12px!important; min-height:44px; align-items:center; }
}
@media(max-width:370px) { .hero-heading h1 { font-size:52px; } .home-page .nav-links { gap:12px; } .work-title { font-size:34px; } .ct2-statement { font-size:40px; } .work-filters { gap:14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } .reveal { opacity:1!important; transform:none!important; } }