:root {
  --paper: #F4F4F4;
  --ink: #292925;
  --muted: #77756e;
  --line: #cbc8bd;
  --clay: #b88e78;
  --moss: #899780;
  --sky: #9caec0;
  --ochre: #b09b6b;
  --rose: #bc9a9a;
  --sans: "Satoshi", Arial, sans-serif;
  --display: "Poppins", Arial, sans-serif;
  --header-divider: 72px;
}

* { box-sizing: border-box; }
/* Portfolio image rule: preserve every uploaded asset in full by default.
   Layouts may add whitespace, but must never crop the original composition. */
img { display:block; max-width:100%; height:auto; object-fit:contain; object-position:center; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; }
button, a { color: inherit; font: inherit; }
button { border: 0; }
a { text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.skip-link { position:absolute; z-index:100; top:8px; left:8px; padding:10px 14px; background:var(--ink); color:var(--paper); transform:translateY(-150%); }.skip-link:focus { transform:translateY(0); }
@media (hover:hover) and (pointer:fine) {
  html.has-custom-cursor, html.has-custom-cursor * { cursor:none !important; }
  .site-cursor { position:fixed; z-index:2147483647; top:0; left:0; width:10.5px; height:10.5px; border:0; border-radius:50%; background:#292925; box-shadow:none; opacity:0; pointer-events:none; transform:translate(-50%, -50%); will-change:transform,opacity,background-color; }
}

.eyebrow, .section-note, dt, .sticker-instruction, .contact-footer small {
  font-size: 11px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow { margin: 0; color: var(--muted); }

.site-header {
  position: fixed; z-index: 30; inset: 0 0 auto; height: 73px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 30px; border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease;
}
.site-header::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(244,244,244,.9); opacity: 0; backdrop-filter: blur(8px); transition: opacity .25s ease; }
.site-header.is-scrolled { border-color: var(--line); }
.site-header.is-scrolled::before { opacity: 1; }
.wordmark { justify-self: start; display:flex; align-items:center; height:18px; color:var(--ink); }
.wordmark-logo { display:block; width:auto; height:12px; max-width:none; object-fit:contain; }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a, .header-contact { position: relative; color: var(--muted); font-size: 12px; }
.site-header nav a::after { content:""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .2s ease; }
.site-header nav a:hover::after, .site-header nav .active::after { right: 0; }
.site-header nav .active { color: var(--ink); }
.header-contact { justify-self: end; }

.home-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto 1fr auto; gap: 20px; padding: 116px 30px 28px; }
.hero-logo-stage { grid-column: 2 / 12; align-self: end; width: min(48vw, 590px); margin: clamp(20px, 5vh, 62px) 0 0; }
.hero-logo { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 50%; }
.hero-logo .logo-letter { fill: #231f20; }
.page-home.is-intro .site-header, .page-home.is-intro .hero-copy, .page-home.is-intro .scroll-prompt { visibility:hidden; }
.hero-copy { grid-column: 2 / 12; grid-row: 3; align-self: end; display: grid; grid-template-columns: 3fr 1fr; gap: 8.33%; align-items: end; margin-top: clamp(10px, 2.8vh, 38px); transform:translateY(clamp(-24px, -2.5vh, -16px)); }
.hero-copy h1 { grid-column: 1 / 2; }
.hero-copy h1 { max-width: none; margin: 0; white-space: nowrap; font: 400 clamp(22px, 1.9vw, 30px)/1.22 var(--display); letter-spacing: -.052em; }
.scroll-prompt { grid-column: 1 / -1; grid-row: 4; display: flex; justify-content: space-between; align-items: center; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12px; }
.scroll-prompt span { font-size: 17px; }

.page-home:has(#work:target) .site-header { border-color:var(--line); }
.work-section { min-height:auto; display:flex; flex-direction:column; justify-content:flex-start; padding:max(72px,8vh) 30px clamp(40px,6vh,72px); border-top:1px solid var(--line); scroll-margin-top:var(--header-divider); }
.section-heading { display: grid; grid-template-columns: repeat(12, 1fr); align-items:start; gap:20px; margin-bottom:clamp(32px,5vh,60px); }
.section-heading .eyebrow { grid-column: 1 / 3; }
.section-heading h2 { grid-column: 3 / 9; margin: 0; font: 400 clamp(28px, 2.65vw, 42px)/1.08 var(--display); letter-spacing: -.055em; }
.section-note { grid-column:10 / 13; justify-self:end; width:auto; margin:0; color:var(--muted); text-align:right; text-transform:none; letter-spacing:0; line-height:1.45; }
.work-page-end { margin:clamp(96px,13vh,160px) 30px 0; padding:0 0 28px; }.work-page-end p { margin:0 0 9px; color:var(--ink); font-size:12px; line-height:1.35; text-align:right; }.work-page-end > div { border-top:1px solid var(--line); }
.marketing-project-page { --project-tone:var(--moss); }.marketing-media-placeholder { display:grid; place-items:center; margin:0; background:#e3e4df; color:var(--muted); font-size:10px; letter-spacing:.08em; line-height:1.45; text-align:center; text-transform:uppercase; }.marketing-matcha-page .matcha-hero-media { min-height:clamp(390px,47vw,690px); background:#e3e4df; }.marketing-matcha-page .matcha-overview__intro h1 { color:var(--project-tone); font-weight:400; }.marketing-matcha-page .matcha-panel { min-height:clamp(380px,51vw,760px); }.marketing-pinterest-page { --project-tone:#BF847B; background:#fff; }.marketing-pinterest-page .site-header::before { background:rgba(255,255,255,.92); }.marketing-pinterest-page .marketing-project { padding-top:112px; }.marketing-pinterest-page .matcha-layout { min-height:calc(100svh - 112px); }.marketing-pinterest-page .matcha-overview { min-height:calc(100svh - 112px); }.marketing-pinterest-page .matcha-hero-media { width:82%; justify-self:end; min-height:0; background:transparent; }.marketing-pinterest-page .matcha-overview__intro { max-width:560px; padding-top:clamp(82px,13vh,188px); }.marketing-pinterest-page .marketing-pinterest-intro h1 { color:#2D2D2D; font-family:"SF Pro","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-weight:700; }.marketing-pinterest-mark { display:block; width:clamp(144px,15.4vw,222px); height:auto; margin:0 0 clamp(12px,1.6vw,18px); }.marketing-pinterest-page .marketing-pinterest-intro > p { max-width:560px; color:var(--muted); font-size:16.1px; line-height:1.58; }.marketing-pinterest-page .marketing-pinterest-intro .marketing-pinterest-skills { margin-top:18px; color:color-mix(in srgb,var(--muted) 82%,var(--ink)); font-size:16.1px; line-height:1.58; }.marketing-pinterest-page .matcha-overview__meta dd { max-width:240px; }.marketing-pinterest-placeholder-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); width:100%; }.marketing-pinterest-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:16 / 9; min-height:0; margin:0; border-radius:5px; background:#e3e4df; color:var(--muted); font-size:10px; letter-spacing:.08em; line-height:1.45; text-align:center; text-transform:uppercase; }.marketing-editorial-page .case-hero-media { background:#e3e4df; }.marketing-editorial-page .case-feature-media { background:#e8e8e4; }.marketing-editorial-page .case-introduction h1 { color:var(--project-tone); }.marketing-editorial-page .case-body-copy { color:var(--muted); }
.home-note { display: grid; grid-template-columns: 2fr 6fr 3fr; gap: 20px; padding: 15vh 30px 6vh; background: var(--ink); color: var(--paper); }
.home-note .eyebrow { color: rgba(245,243,237,.56); }.home-note-copy { max-width: 680px; margin: 0; font: 400 clamp(27px, 3.15vw, 50px)/1.08 var(--display); letter-spacing: -.06em; }.home-note a { justify-self: end; align-self: end; font-size: 12px; }.home-note a span { margin-left: 10px; }


.work-project-page { --project-tone:var(--clay); }.work-project-page.tone-moss { --project-tone:var(--moss); }.work-project-page.tone-ink { --project-tone:#575b57; }.work-project-page.tone-sky { --project-tone:var(--sky); }.work-project-page.tone-ochre { --project-tone:var(--ochre); }.work-project { padding:135px 30px 0; }.work-project-hero { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(440px,1.28fr); gap:clamp(50px,11vw,200px); align-items:start; max-width:1300px; min-height:calc(100svh - 135px); margin:0 auto; }.work-project-intro { padding-top:clamp(15px,3vh,42px); }.work-project-intro h1 { margin:20px 0 28vh; color:var(--project-tone); font:400 clamp(39px,4.4vw,68px)/.98 var(--display); letter-spacing:-.066em; }.work-project-intro > p:not(.eyebrow) { max-width:330px; color:var(--muted); line-height:1.62; }.work-project-intro dl { display:grid; gap:12px; margin:46px 0 0; }.work-project-intro dl div { display:grid; grid-template-columns:88px 1fr; padding-top:10px; border-top:1px solid var(--line); }.work-project-intro dt { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }.work-project-intro dd { margin:0; font-size:14px; }.work-project-visual { display:grid; min-height:min(65vw,740px); place-items:center; background:var(--project-tone); color:rgba(41,41,37,.68); font-size:10px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.work-project-story { display:grid; grid-template-columns:1fr 2fr; gap:clamp(44px,10vw,180px); align-items:start; max-width:1100px; margin:12vh auto 0; padding:12vh 0; border-top:1px solid var(--line); }.story-copy { max-width:610px; margin:0; font:400 clamp(22px,2.25vw,35px)/1.22 var(--display); letter-spacing:-.05em; }.visual-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; grid-column:1 / -1; margin-top:5vh; }.visual-pair > div,.single-visual,.full-visual { display:grid; min-height:32vw; place-items:center; background:#dfddd5; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.visual-pair > div:last-child { background:#d4d2c7; }.work-project-story--offset { grid-template-columns:1.15fr .85fr; }.single-visual { min-height:43vw; background:var(--project-tone); color:rgba(41,41,37,.68); }.full-visual { grid-column:1 / -1; min-height:48vw; margin-top:4vh; background:var(--project-tone); color:rgba(41,41,37,.68); }.project-next { max-width:1300px; margin:0 auto; padding:8vh 0 28px; border-top:1px solid var(--line); }.project-next a { display:flex; justify-content:space-between; font-size:12px; }.project-next span { font:400 clamp(22px,2.4vw,36px)/1 var(--display); letter-spacing:-.05em; }

/* Case-study variants: editorial masthead for narrative work, and a fixed
   information rail for process-led work. Both retain generous image priority. */
.case-after-hours { max-width:1160px; margin:0 auto; }.case-hero-media,.case-feature-media,.assembly-media { display:grid; place-items:center; color:rgba(41,41,37,.68); font-size:10px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.case-hero-media { min-height:min(52vw,590px); background:var(--project-tone); }.case-overview { display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(55px,10vw,160px); padding:clamp(70px,11vh,160px) 0; }.case-introduction h1 { max-width:620px; margin:20px 0 28px; color:var(--project-tone); font:400 clamp(39px,4.5vw,68px)/.98 var(--display); letter-spacing:-.066em; }.case-introduction > p:not(.eyebrow) { max-width:600px; margin:0; color:var(--muted); font-size:17px; line-height:1.58; }.case-introduction a { display:inline-block; margin-top:28px; color:var(--muted); font-size:12px; }.case-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px 30px; margin:0; align-self:start; }.case-meta-grid dt,.assembly-aside dt { margin-bottom:10px; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.case-meta-grid dd,.assembly-aside dd { margin:0; font-size:14px; line-height:1.45; }.case-feature-media { min-height:min(49vw,560px); background:#ddddd5; }.case-body-copy { max-width:760px; margin:clamp(70px,12vh,160px) auto; font-size:16px; line-height:1.65; }.case-body-copy p { margin:0; }.work-project--assembly { max-width:1280px; margin:0 auto; }.case-assembly { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(480px,1.28fr); gap:clamp(54px,10vw,180px); align-items:start; }.assembly-aside { position:sticky; top:125px; padding-top:clamp(12px,2vh,30px); }.assembly-aside h1 { margin:18px 0 26px; color:var(--project-tone); font:400 clamp(38px,4.2vw,64px)/.98 var(--display); letter-spacing:-.066em; }.assembly-aside > p:not(.eyebrow) { max-width:330px; margin:0; color:var(--muted); line-height:1.62; }.assembly-aside dl { display:grid; gap:20px; margin:45px 0 0; }.assembly-aside dl div { padding-top:10px; border-top:1px solid var(--line); }.assembly-stack { display:grid; gap:18px; }.assembly-media { min-height:min(48vw,600px); background:var(--project-tone); }.assembly-media--detail { min-height:min(38vw,500px); background:#deded7; }.assembly-media--detail:nth-child(3) { background:#d1d0c7; }

.archive-hero { min-height: 62svh; display: grid; grid-template-columns: repeat(12,1fr); align-items: end; gap: 20px; padding: 140px 30px 54px; }
.archive-hero > div { grid-column: 1 / 9; }.archive-hero h1, .about-hero h1 { margin: 22px 0 0; font: 400 clamp(48px, 5.8vw, 92px)/.95 var(--display); letter-spacing: -.072em; }.archive-hero > p { grid-column: 10 / 13; margin: 0 0 5px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.sticker-field { position: relative; height: min(71vw, 790px); min-height: 590px; margin: 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.sticker { position: absolute; display: grid; width: clamp(106px, 14vw, 190px); aspect-ratio: 1; place-items: center; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); transform: rotate(var(--rotation, 0deg)); cursor: pointer; }
.sticker svg { width: 55%; fill: none; stroke: currentColor; stroke-width: 2.4; }.sticker img { width:100%; height:100%; object-fit:contain; object-position:center; }.sticker-illustrations { --rotation:-7deg; left: 12%; top: 13%; background: transparent; }.sticker-furniture-one { --rotation:5deg; left: 43%; top: 8%; background: transparent; }.sticker-film { --rotation:-3deg; right: 10%; top: 27%; background: transparent; }.sticker-badges { --rotation:8deg; left: 27%; bottom: 8%; background: transparent; border-radius: 50%; }.sticker-furniture-two { --rotation:-5deg; right: 33%; bottom: 7%; background: transparent; }
.sticker span { position: absolute; opacity: 0; padding: 6px 8px; background: var(--paper); border: 1px solid var(--ink); font-size: 10px; letter-spacing: .07em; text-align: center; text-transform: uppercase; transition: opacity .18s ease; }.sticker:hover span, .sticker:focus-visible span { opacity: 1; }.sticker-instruction { position: absolute; right: 0; bottom: 18px; margin: 0; color: var(--muted); text-align: right; }
.archive-main { position:relative; height:100svh; min-height:620px; overflow:hidden; }.archive-main .sticker { z-index:1; border:0; }.archive-main .sticker-illustrations { left:13%; top:18%; }.archive-main .sticker-furniture-one { left:44%; top:13%; }.archive-main .sticker-film { right:11%; top:33%; }.archive-main .sticker-badges { left:27%; bottom:14%; }.archive-main .sticker-furniture-two { right:32%; bottom:12%; }
.archive-project { min-height:100svh; padding:146px 30px 12vh; }.archive-project-head { display:grid; grid-template-columns:2fr 1fr; gap:8vw; align-items:end; max-width:1160px; margin:0 auto 9vh; }.archive-project-head .eyebrow { grid-column:1 / -1; }.archive-project-head h1 { margin:0; font:400 clamp(43px,5vw,76px)/.97 var(--display); letter-spacing:-.07em; }.archive-project-head > p:last-child { max-width:310px; margin:0; color:var(--muted); line-height:1.55; }.archive-project .image-wall, .archive-project .contact-sheet, .archive-project .badge-grid { max-width:1160px; margin-inline:auto; }.archive-object { display:grid; grid-template-columns:minmax(240px,.75fr) minmax(420px,1.25fr); gap:11vw; align-items:start; max-width:1360px; margin:auto; }.archive-object .archive-project-head { display:block; margin:0; }.archive-object .archive-project-head .eyebrow { margin-bottom:18px; }.archive-object .archive-project-head h1 { margin-bottom:28px; }.archive-object .object-media { min-height:66vw; max-height:820px; }.archive-object--two .object-media { background:var(--clay); }
.archive-details { padding: 0 30px; }.archive-detail { scroll-margin-top: 92px; padding: 15vh 0; border-bottom: 1px solid var(--line); }.archive-detail header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8vh; }.archive-detail h2 { margin: 0; font: 400 clamp(32px, 4vw, 62px)/.97 var(--display); letter-spacing: -.065em; }
.image-wall { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.3vw; padding: 1.3vw; background: #1d1d1b; }.image-wall i { display: grid; min-height: 22vw; place-items: center; background: #656258; color: rgba(245,243,237,.7); font-size: 10px; font-style: normal; letter-spacing: .1em; }.image-wall i:nth-child(2n) { background: #9c9382; }.image-wall i:nth-child(3n) { background: #787d6d; }
.furniture-detail { display: grid; grid-template-columns: minmax(240px,.75fr) minmax(420px,1.25fr); gap: 12vw; align-items: start; }.furniture-detail--reverse .archive-detail-copy { order: 2; }.furniture-detail--reverse .object-media { order: 1; }.archive-detail-copy { position: sticky; top: 110px; }.archive-detail-copy h2 { margin: 20px 0 28px; }.archive-detail-copy > p:not(.eyebrow) { max-width: 330px; color: var(--muted); line-height: 1.6; }.object-media { display: grid; min-height: 66vw; max-height: 880px; place-items: center; background: var(--moss); color: rgba(41,41,37,.7); }.furniture-detail--reverse .object-media { background: var(--clay); }
.contact-sheet { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1000px; margin-left: auto; }.contact-sheet i { display: grid; aspect-ratio: 3/2; place-items: center; border: 10px solid #e8e6df; background: #7d837c; color: rgba(245,243,237,.8); font-size: 10px; font-style: normal; }.contact-sheet i:nth-child(2n) { background: #9c958a; }.badge-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 2vw; }.badge-grid i { display:grid; aspect-ratio:1; place-items:center; border:1px solid var(--ink); border-radius:50%; background:var(--rose); font-size:11px; font-style:normal; }.badge-grid i:nth-child(2n) { background:var(--ochre); }.badge-grid i:nth-child(3n) { background:var(--sky); }

/* Archive variants — each collection gets its own viewing rhythm. */
.archive-film-page { min-height:280vh; }.film-archive { position:relative; height:280vh; }.film-stage { position:sticky; top:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(9px,1.4vw,22px); height:100svh; padding:88px clamp(10px,1.6vw,28px) clamp(10px,1.6vw,28px); overflow:hidden; }.film-column { min-width:0; overflow:hidden; }.film-sequence { display:grid; gap:clamp(9px,1.4vw,22px); will-change:transform; }.film-card { display:grid; width:100%; min-height:0; margin:0; place-items:center; background:#dedcd4; color:var(--muted); }.film-card--portrait { aspect-ratio:3 / 4.3; }.film-card--landscape { aspect-ratio:4 / 2.8; }.film-card--square { aspect-ratio:1; }.film-card:nth-child(3n+2) { background:#d2d2c9; }.film-card:nth-child(3n) { background:#c9d0c7; }.film-card img { width:100%; max-height:48vh; object-fit:contain; }.film-card span,.illustration-card span { font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.archive-motion-note { position:fixed; z-index:31; right:30px; bottom:27px; margin:0; color:var(--muted); font-size:10px; line-height:1.45; letter-spacing:.08em; text-align:right; text-transform:uppercase; pointer-events:none; }
.archive-furniture-layout { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(480px,1.28fr); gap:clamp(54px,10vw,180px); max-width:1280px; margin:0 auto; padding:135px 30px 11vh; }.furniture-aside { position:sticky; top:125px; align-self:start; padding-top:clamp(12px,2vh,30px); }.furniture-aside h1 { margin:18px 0 26px; color:var(--moss); font:400 clamp(38px,4.2vw,64px)/.98 var(--display); letter-spacing:-.066em; }.archive-furniture-assembly--two .furniture-aside h1 { color:var(--clay); }.furniture-aside > p:not(.eyebrow) { max-width:330px; margin:0; color:var(--muted); line-height:1.62; }.furniture-aside dl { display:grid; gap:20px; margin:45px 0 0; }.furniture-aside dl div { padding-top:10px; border-top:1px solid var(--line); }.furniture-aside dt { margin-bottom:10px; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.furniture-aside dd { margin:0; font-size:14px; line-height:1.45; }.furniture-media-stack { display:grid; gap:18px; }.furniture-media { display:grid; min-height:min(38vw,500px); place-items:center; background:#d7d5cd; color:var(--muted); font-size:10px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.furniture-media--main { min-height:min(48vw,600px); background:var(--moss); color:rgba(41,41,37,.68); }.archive-furniture-assembly--two .furniture-media--main { background:var(--clay); }.furniture-media:nth-child(3) { background:#c9c5b9; }
.archive-illustration-page { overflow:hidden; }.illustration-archive { position:relative; height:100svh; }.illustration-stage { --illustration-height:365px; display:flex; align-items:center; height:100%; padding:76px 0 30px; overflow:hidden; }.illustration-track,.illustration-sequence { display:flex; align-items:flex-start; flex:none; width:max-content; }.illustration-sequence { gap:10px; padding:0 10px; }.illustration-card { display:grid; flex:none; height:var(--illustration-height); margin:0; place-items:center; background:#dedcd4; color:var(--muted); }.illustration-card--portrait { width:calc(var(--illustration-height) * .75); }.illustration-card--landscape { width:calc(var(--illustration-height) * 1.48); }.illustration-card--square { width:var(--illustration-height); }.illustration-card--tall { width:calc(var(--illustration-height) * .61); }.illustration-card--wide { width:calc(var(--illustration-height) * 1.92); }.illustration-card:has(img) { width:fit-content; background:transparent; }.illustration-card:has(img):nth-child(n) { background:transparent; }.illustration-card img { width:auto; max-width:none; height:var(--illustration-height); max-height:none; object-fit:contain; }.illustration-stage:hover .illustration-track { cursor:default; }
.archive-badges-page { min-height:100svh; background:#111; color:#f1f1ec; }.archive-badges-page .site-header::before { background:rgba(17,17,17,.92); }.archive-badges-page .site-header.is-scrolled { border-color:rgba(241,241,236,.28); }.archive-badges-page .wordmark,.archive-badges-page .site-header nav .active,.archive-badges-page .site-header nav a,.archive-badges-page .header-contact { color:#f1f1ec; }.archive-badges-page .wordmark-logo { filter:invert(1); }.archive-badges-page .site-header nav a::after { background:#f1f1ec; }.badges-showcase { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,52px); max-width:1180px; margin:0 auto; padding:150px 30px 12vh; }.badges-showcase i { display:grid; aspect-ratio:1; place-items:center; border:1px solid rgba(241,241,236,.68); border-radius:50%; color:#f1f1ec; font-size:10px; font-style:normal; letter-spacing:.08em; text-transform:uppercase; }.badges-showcase i:nth-child(2n) { border-radius:0; }.badges-showcase i:nth-child(3n) { border-width:2px; }

/* Archive asset updates: original proportions are kept; the layout adapts around them. */
.badges-showcase figure { display:grid; min-width:0; margin:0; place-items:center; transform-origin:center; }.badges-showcase figure img { width:100%; height:auto; max-height:38vh; object-fit:contain; }.furniture-aside h1 { margin-top:0; }.furniture-subtitle { margin:0 0 34px !important; color:var(--muted) !important; font-size:11px; line-height:1.35 !important; letter-spacing:.08em; text-transform:uppercase; }.furniture-media-stack--continuous { gap:0; align-self:start; overflow:hidden; }.furniture-media-stack--continuous .furniture-media { display:block; min-height:0; margin:0; background:transparent; }.furniture-media-stack--continuous .furniture-media img { width:100%; height:auto; }.furniture-media-stack--continuous .furniture-media:first-child img { border-radius:5px 5px 0 0; }.furniture-media-stack--continuous .furniture-media:last-child img { border-radius:0 0 5px 5px; }
.film-card:has(img) { display:block; min-height:0; aspect-ratio:auto; background:transparent; }.film-card:has(img) img { width:100%; height:auto; max-height:none; object-fit:contain; }

/* Archive refinements: quiet typography, stable continuous strips, and viewport-fit badges. */
.badges-showcase { height:100svh; align-content:center; gap:clamp(14px,2vw,28px); padding:92px 30px 24px; }.badges-showcase figure img { width:auto; max-width:80%; max-height:30svh; }.archive-furniture-layout { grid-template-columns:minmax(200px,.55fr) minmax(580px,1.45fr); gap:clamp(64px,11vw,210px); max-width:1450px; padding-inline:30px; }.furniture-aside h1 { font-size:clamp(34px,3.5vw,54px); }.furniture-media-stack--continuous { justify-self:end; width:100%; }.film-card:has(img) img { border-radius:3px; }

/* Targeted proportion refinements. */
.illustration-stage { --illustration-height:310px; }.archive-furniture-layout { grid-template-columns:minmax(190px,.4fr) minmax(700px,1.6fr); gap:clamp(88px,13vw,250px); max-width:1600px; }.about-intro h1 { width:min(100%,740px); max-width:740px; }.about-lede { white-space:nowrap; }

/* Furniture typography remains intentionally subordinate to its image sequence. */
.archive-furniture-assembly .furniture-aside h1 { color:#6F6F6F; font-size:clamp(27px,2.8vw,43px); }.archive-furniture-assembly--two .furniture-aside h1 { color:#675D69; }.archive-furniture-layout .furniture-subtitle { margin-bottom:27px !important; font-size:9px; line-height:1.22 !important; }.archive-furniture-layout .furniture-aside > p:not(.eyebrow) { max-width:264px; font-size:13px; line-height:1.46; }

.about-hero { --about-doll-bottom:clamp(42px, 9vh, 106px); position:relative; display: grid; grid-template-columns: repeat(12,1fr); gap: 20px; min-height:100svh; align-items: start; padding: 150px 30px 15vh; }.about-intro { grid-column: 1 / 8; }.about-intro h1 { width:min(100%,740px); max-width:740px; margin: 0; color: var(--muted); font:400 18px/1.58 var(--sans); letter-spacing:0; }.about-intro a { color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px; }.about-copy { max-width: 570px; margin: 9vh 0 0; color: var(--muted); font-size: 18px; line-height: 1.58; }.portrait-slot { grid-column: 8 / 13; align-self:start; justify-self:end; display: grid; width:64%; aspect-ratio:3 / 4; min-height:0; overflow:hidden; }.portrait-slot img { width:100%; height:125%; max-width:none; object-fit:cover; object-position:center top; transform:translateY(-16%); }.about-future-image { position:absolute; left:calc(30px + (100% - 60px) / 12); bottom:var(--about-doll-bottom); width:clamp(150px, 15vw, 230px); }.about-future-image img { width:100%; height:auto; }.contact-footer { position: relative; padding: 12vh 30px 28px; background: var(--ink); color: var(--paper); }.contact-footer > p { margin: 0 0 14px; color: rgba(245,243,237,.55); font-size: 14px; }.contact-footer__links { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; row-gap:24px; gap:clamp(24px,4vw,72px); width:100%; }.email-link { display: inline-block; flex:0 1 auto; padding-bottom: 8px; border-bottom: 1px solid currentColor; font: 400 clamp(28px,4.5vw,72px)/1 var(--display); letter-spacing: -.06em; }.social-links { display: flex; flex:0 0 auto; align-items:baseline; justify-content:flex-end; gap: 25px; margin:0; font-size: 12px; }.contact-footer small { display: block; margin-top: 55px; color: rgba(245,243,237,.5); text-transform: none; letter-spacing: 0; }
.back-to-top { position: fixed; z-index: 25; right: 22px; bottom: 22px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

@media (max-width: 760px) {
  :root { --header-divider:61px; }.site-header { height: 62px; grid-template-columns: 1fr auto; padding: 0 18px; }.site-header nav { gap: 15px; }.site-header nav a { font-size: 11px; }.header-contact { display: none; }
  .home-hero { min-height: 100svh; grid-template-rows:auto auto 1fr auto; padding: 92px 18px 20px; }.hero-logo-stage { grid-column:1 / -1; width:72vw; margin:7vh 0 0; }.hero-copy { grid-column: 1 / -1; grid-row:3; display: block; align-self:end; margin-top:18px; transform:translateY(-14px); }.hero-copy h1 { max-width:none; white-space:nowrap; font-size:12px; line-height:1.24; }.work-section { min-height:auto; padding: 11vh 18px 8vh; scroll-margin-top:var(--header-divider); }.section-heading { display: block; margin-bottom: 42px; }.section-heading h2 { margin: 25px 0; font-size: 35px; }.section-note { max-width: 260px; }.work-browser { display:block; }.project-preview { margin-top:26px; }.project-row { min-height:62px; grid-template-columns:36px 1fr auto; }.project-row strong { font-size:20px; }.project-row i { right:42px; }.home-note { display: block; padding: 11vh 18px 30px; }.home-note-copy { margin: 42px 0 60px; font-size: 30px; }.home-note a { display:block; }.case-study-bar { height: 62px; padding: 0 18px; }.case-study-body { display:block; padding: 65px 18px; }.case-study-intro h2 { margin: 16px 0 18vh; font-size: 52px; }.case-study-media { min-height: 70vw; }
  .archive-hero { display:block; min-height: auto; padding: 112px 18px 52px; }.archive-hero h1 { margin-top: 20px; font-size: 61px; }.archive-hero > p { max-width: 290px; margin-top: 37px; }.sticker-field { height: 135vw; min-height: 530px; margin:0 18px; }.sticker { width: 30vw; }.sticker-illustrations { left:4%; top:11%; }.sticker-furniture-one { left:39%; top:4%; }.sticker-film { right:3%; top:30%; }.sticker-badges { left:15%; bottom:13%; }.sticker-furniture-two { right:23%; bottom:8%; }.sticker-instruction { right:0; bottom:12px; font-size:9px; }.archive-details { padding:0 18px; }.archive-detail { padding:11vh 0; }.archive-detail header { display:block; margin-bottom:38px; }.archive-detail h2 { margin-top:18px; font-size:49px; }.image-wall { grid-template-columns: repeat(2,1fr); gap: 8px; padding:8px; }.image-wall i { min-height: 41vw; }.furniture-detail { display:block; }.archive-detail-copy { position: static; }.object-media { min-height: 115vw; margin-top:45px; }.furniture-detail--reverse .archive-detail-copy, .furniture-detail--reverse .object-media { order:initial; }.contact-sheet { grid-template-columns:repeat(2,1fr); gap:9px; }.contact-sheet i { border-width:5px; }.badge-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .about-hero { display:block; min-height:100svh; padding:112px 18px 10vh; }.about-intro h1 { max-width:34rem; font-size:16px; line-height:1.58; }.about-lede { white-space:normal; }.about-copy { margin-top:42px; font-size:16px; }.portrait-slot { min-height:0; margin-top:53px; }.about-future-image { position:static; width:min(42vw,190px); margin:clamp(62px,12vh,96px) 0 0; }.contact-footer { padding:10vh 18px 22px; }.contact-footer__links { display:block; }.email-link { font-size:30px; letter-spacing:-.055em; }.social-links { justify-content:flex-start; flex-wrap:wrap; gap:14px 22px; margin-top:37px; }.contact-footer small { margin-top:45px; }
  .archive-main { min-height:100svh; height:100svh; }.archive-main .sticker { width:30vw; }.archive-main .sticker-illustrations { left:4%; top:17%; }.archive-main .sticker-furniture-one { left:39%; top:11%; }.archive-main .sticker-film { right:3%; top:34%; }.archive-main .sticker-badges { left:15%; bottom:17%; }.archive-main .sticker-furniture-two { right:23%; bottom:12%; }.archive-project { padding:105px 18px 11vh; }.archive-project-head { display:block; margin-bottom:45px; }.archive-project-head h1 { margin:18px 0 26px; font-size:49px; }.archive-object { display:block; }.archive-object .archive-project-head { margin-bottom:45px; }.archive-object .object-media { min-height:115vw; }
  .archive-film-page,.film-archive { min-height:240vh; height:240vh; }.film-stage { grid-template-columns:repeat(2,1fr); gap:8px; padding:70px 8px 8px; }.film-sequence { gap:8px; }.film-card--portrait { aspect-ratio:3 / 4.1; }.film-card--landscape { aspect-ratio:4 / 2.8; }.archive-motion-note { right:18px; bottom:18px; font-size:9px; }.illustration-stage { --illustration-height:min(54.4vw,306px); padding:62px 0 18px; }.illustration-sequence { gap:10px; padding:0 10px; }.illustration-card--portrait { width:calc(var(--illustration-height) * .75); }.illustration-card--landscape { width:calc(var(--illustration-height) * 1.48); }.illustration-card--square { width:var(--illustration-height); }.illustration-card--tall { width:calc(var(--illustration-height) * .61); }.illustration-card--wide { width:calc(var(--illustration-height) * 1.92); }.archive-furniture-layout { display:block; padding:105px 18px 11vh; }.furniture-aside { position:static; padding:0; }.furniture-aside h1 { font-size:42px; }.furniture-media-stack { gap:10px; }.furniture-media-stack--continuous { gap:0; }.furniture-media { min-height:72vw; }.furniture-media--main { min-height:88vw; }.badges-showcase { height:auto; min-height:100svh; grid-template-columns:repeat(2,1fr); gap:14px; padding:82px 18px 24px; }.badges-showcase figure img { max-width:80%; max-height:27svh; }
  .work-project { padding:105px 18px 0; }.work-project-hero { display:block; min-height:auto; }.work-project-intro { padding:0; }.work-project-intro h1 { margin:18px 0 16vh; font-size:51px; }.work-project-visual { min-height:112vw; margin-top:54px; }.work-project-story,.work-project-story--offset { display:block; margin-top:10vh; padding:10vh 0; }.story-copy { margin-top:22px; font-size:27px; }.visual-pair { grid-template-columns:1fr; margin-top:40px; }.visual-pair > div,.single-visual,.full-visual { min-height:92vw; }.visual-pair > div + div { margin-top:12px; }.single-visual { margin-top:40px; }.project-next { padding-top:9vh; }.project-next span { font-size:25px; }
  .case-overview,.case-assembly { display:block; }.case-hero-media { min-height:68vw; }.case-overview { padding:72px 0; }.case-introduction h1,.assembly-aside h1 { font-size:48px; }.case-meta-grid { margin-top:48px; }.case-feature-media { min-height:85vw; }.case-body-copy { margin:72px 0; }.assembly-aside { position:static; padding:0; }.assembly-aside dl { margin-bottom:52px; }.assembly-stack { gap:10px; }.assembly-media { min-height:88vw; }.assembly-media--detail { min-height:72vw; }
}
@media (max-width: 760px) {
  /* Keep the quieter furniture type scale on small screens as well. */
  .archive-furniture-assembly .furniture-aside h1 { font-size:clamp(27px,8vw,34px); }
  .archive-furniture-layout .furniture-subtitle { font-size:9px; line-height:1.22 !important; }
  .archive-furniture-layout .furniture-aside > p:not(.eyebrow) { font-size:13px; line-height:1.46; }
  .work-section { padding-bottom:max(118px,18vh); }
  .project-row strong { font-size:19px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.page-home.is-intro .site-header, .page-home.is-intro .hero-copy, .page-home.is-intro .scroll-prompt { visibility:visible; }.hero-logo { transform:none !important; }.site-header nav a::after { transition:none; }.archive-illustration-page { overflow:auto; }.illustration-stage { overflow-x:auto; scrollbar-width:thin; }.illustration-track { transform:none !important; } }
/* Cyclic case-study navigation: a quiet endpoint with three stable anchors. */
.project-pagination { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; width:calc(100% + 60px); margin:clamp(96px,15vh,180px) -30px 0; padding:clamp(32px,5vw,64px) 30px 30px; border-top:1px solid var(--line); font-size:12px; line-height:1.2; letter-spacing:.01em; }.project-pagination a { display:inline-flex; align-items:center; min-height:44px; width:max-content; max-width:100%; color:var(--muted); transition:color .18s ease, transform .18s ease; }.project-pagination span { display:inline-block; }.project-pagination__previous { justify-self:start; }.project-pagination__return { justify-self:center; color:var(--ink) !important; }.project-pagination__next { justify-self:end; }.project-pagination__previous:hover,.project-pagination__previous:focus-visible { color:var(--ink); transform:translateX(-3px); }.project-pagination__next:hover,.project-pagination__next:focus-visible { color:var(--ink); transform:translateX(3px); }.project-pagination__return:hover,.project-pagination__return:focus-visible { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }.project-pagination a:focus-visible { outline:1px solid currentColor; outline-offset:5px; }
@media (max-width:760px) { .project-pagination { grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:84px; padding:28px 18px 24px; width:calc(100% + 36px); margin-left:-18px; margin-right:-18px; }.project-pagination__previous { grid-column:1; grid-row:1; }.project-pagination__next { grid-column:2; grid-row:1; }.project-pagination__return { grid-column:1 / -1; grid-row:2; justify-self:center; }.project-pagination a { min-height:46px; font-size:11px; } }
/* About refinement: one contained text measure and an uncropped original portrait. */
.about-intro h1 { width:min(100%,430px); max-width:430px; }.about-lede { white-space:normal; }.portrait-slot { display:block; width:64%; aspect-ratio:auto; overflow:visible; }.portrait-slot img { width:100%; height:auto; max-width:100%; object-fit:contain; object-position:center; transform:none; }
@media (max-width:760px) { .about-intro h1 { width:100%; max-width:27rem; }.portrait-slot { width:min(100%,360px); } }
/* Project 03 + 05 borrow the furniture studies' measured information rail and image priority. */
.work-project-page.tone-ink .case-assembly,.work-project-page.tone-ochre .case-assembly { grid-template-columns:minmax(190px,.4fr) minmax(700px,1.6fr); gap:clamp(88px,13vw,250px); max-width:1600px; }.work-project-page.tone-ink .assembly-aside,.work-project-page.tone-ochre .assembly-aside { padding-top:0; }.work-project-page.tone-ink .assembly-aside h1,.work-project-page.tone-ochre .assembly-aside h1 { margin:0 0 18px; font-size:clamp(27px,2.8vw,43px); }.work-project-page.tone-ink .assembly-aside > p:not(.eyebrow),.work-project-page.tone-ochre .assembly-aside > p:not(.eyebrow) { max-width:264px; font-size:13px; line-height:1.46; }.work-project-page.tone-ink .assembly-aside dl,.work-project-page.tone-ochre .assembly-aside dl { gap:14px; margin-top:32px; }.work-project-page.tone-ink .assembly-aside dl div,.work-project-page.tone-ochre .assembly-aside dl div { padding-top:8px; }.work-project-page.tone-ink .assembly-aside dt,.work-project-page.tone-ochre .assembly-aside dt { margin-bottom:7px; font-size:9px; }.work-project-page.tone-ink .assembly-aside dd,.work-project-page.tone-ochre .assembly-aside dd { font-size:12px; }.work-project-page.tone-ink .assembly-stack,.work-project-page.tone-ochre .assembly-stack { justify-self:end; width:100%; gap:12px; }.work-project-page.tone-ink .assembly-media,.work-project-page.tone-ochre .assembly-media { min-height:min(48vw,650px); }.work-project-page.tone-ink .assembly-media--hero,.work-project-page.tone-ochre .assembly-media--hero { min-height:min(58vw,780px); }.work-project-page.tone-ink .assembly-media--detail,.work-project-page.tone-ochre .assembly-media--detail { min-height:min(40vw,560px); }

/* Project 04 follows a soft-systems-style editorial progression: information rail,
   dominant visual field, then a quieter offset resolution below. */
.work-project-page.tone-sky .work-project-hero { grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; width:min(100%,1480px); }.work-project-page.tone-sky .work-project-intro { grid-column:1 / 5; padding-top:clamp(42px,8vh,112px); }.work-project-page.tone-sky .work-project-intro h1 { margin:18px 0 20vh; font-size:clamp(34px,3.65vw,56px); }.work-project-page.tone-sky .work-project-intro > p:not(.eyebrow) { max-width:278px; font-size:14px; line-height:1.52; }.work-project-page.tone-sky .work-project-intro dl { gap:14px; margin-top:38px; }.work-project-page.tone-sky .work-project-intro dl div { grid-template-columns:72px 1fr; padding-top:8px; }.work-project-page.tone-sky .work-project-intro dt { font-size:10px; }.work-project-page.tone-sky .work-project-intro dd { font-size:13px; }.work-project-page.tone-sky .work-project-visual { grid-column:6 / -1; min-height:min(62vw,800px); }.work-project-page.tone-sky .work-project-story--offset { grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; width:min(100%,1480px); max-width:1480px; margin-top:clamp(110px,18vh,250px); padding:0 0 clamp(92px,14vh,180px); border-top:0; }.work-project-page.tone-sky .work-project-story--offset > div:first-child { grid-column:2 / 6; padding-top:clamp(28px,5vw,72px); }.work-project-page.tone-sky .work-project-story--offset .story-copy { max-width:290px; margin-top:22px; font-size:clamp(20px,1.8vw,28px); line-height:1.25; }.work-project-page.tone-sky .work-project-story--offset .single-visual { grid-column:7 / -1; min-height:min(47vw,620px); margin:0; }

@media (max-width:760px) { .work-project-page.tone-ink .case-assembly,.work-project-page.tone-ochre .case-assembly { display:block; }.work-project-page.tone-ink .assembly-aside,.work-project-page.tone-ochre .assembly-aside { position:static; }.work-project-page.tone-ink .assembly-aside h1,.work-project-page.tone-ochre .assembly-aside h1 { font-size:clamp(29px,8vw,36px); }.work-project-page.tone-ink .assembly-stack,.work-project-page.tone-ochre .assembly-stack { margin-top:54px; }.work-project-page.tone-ink .assembly-media--hero,.work-project-page.tone-ochre .assembly-media--hero { min-height:92vw; }.work-project-page.tone-ink .assembly-media--detail,.work-project-page.tone-ochre .assembly-media--detail { min-height:75vw; }.work-project-page.tone-sky .work-project-hero { display:block; }.work-project-page.tone-sky .work-project-intro { padding-top:0; }.work-project-page.tone-sky .work-project-intro h1 { margin:18px 0 15vh; font-size:45px; }.work-project-page.tone-sky .work-project-visual { min-height:108vw; margin-top:48px; }.work-project-page.tone-sky .work-project-story--offset { display:block; margin-top:12vh; padding-bottom:10vh; }.work-project-page.tone-sky .work-project-story--offset > div:first-child { padding-top:0; }.work-project-page.tone-sky .work-project-story--offset .story-copy { max-width:300px; font-size:25px; }.work-project-page.tone-sky .work-project-story--offset .single-visual { min-height:90vw; margin-top:44px; } }
.work-project-page.tone-ink .work-project--assembly,.work-project-page.tone-ochre .work-project--assembly { max-width:1600px; }
.work-project-page.tone-rose { --project-tone:var(--rose); }

/* Project 02 — content refinement within its existing two-column case-study structure. */
.work-project--after-hours .case-introduction h1 { margin-top:0; }.work-project--after-hours .case-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; }.work-project--after-hours .case-links a { margin-top:0; }.work-project--after-hours .case-body-copy p + p { margin-top:28px; }.work-project--after-hours .case-feature-media--secondary { margin-top:0; }

/* Project 02 — supplied BCS artwork determines the media height; no artwork is cropped. */
.work-project--after-hours .case-introduction h1 { color:#7C1C19; font-family:"SF Pro",var(--display); font-weight:700; text-transform:uppercase; }.work-project--after-hours .bcs-image-frame { display:block; min-height:0; margin:0; overflow:hidden; background:transparent; border-radius:5px; }.work-project--after-hours .bcs-image-frame img,.work-project--after-hours .bcs-image-sequence img { display:block; width:100%; height:auto; max-width:none; object-fit:contain; }.work-project--after-hours .bcs-image-frame img { border-radius:5px; }.work-project--after-hours .bcs-image-sequence { width:100%; margin:0; }.work-project--after-hours .bcs-image-sequence img:nth-child(1),.work-project--after-hours .bcs-image-sequence img:nth-child(2) { margin-bottom:10px; }.work-project--after-hours .bcs-image-sequence img:nth-child(1) { border-radius:5px 5px 0 0; }.work-project--after-hours .bcs-image-sequence img:nth-child(n+2):nth-child(-n+6) { border-radius:0; }.work-project--after-hours .bcs-image-sequence img:nth-child(7) { border-radius:0 0 5px 5px; }

/* Project 03 — compact editorial information stays within the existing left column. */
.work-project-page.tone-ink .assembly-aside .illustration-graphic-title { width:100%; max-width:264px; margin:0 0 18px; font-size:0; line-height:0; }.work-project-page.tone-ink .illustration-graphic-title img { display:block; width:120%; height:auto; max-width:none; object-fit:contain; transform-origin:left center; }.work-project-page.tone-ink .illustration-intro { width:100%; max-width:264px; }.work-project-page.tone-ink .illustration-subtitle { margin:0; color:var(--muted); font-size:10px; line-height:1.45; letter-spacing:.075em; text-transform:uppercase; }.work-project-page.tone-ink .illustration-description { margin:27px 0 0; color:var(--muted); font-size:13px; line-height:1.52; }.work-project-page.tone-ink .illustration-support { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:18px; margin-top:28px; color:var(--muted); font-size:13px; line-height:1.52; }.work-project-page.tone-ink .illustration-support p { margin:0; }.work-project-page.tone-ink .illustration-tools { white-space:nowrap; }.work-project-page.tone-ink .illustration-support-media { display:block; width:100%; height:auto; max-width:none; margin-top:32px; border-radius:5px; object-fit:contain; }.work-project-page.tone-ink .illustration-image-stack { --illustration-image-gap:12px; gap:var(--illustration-image-gap); }.work-project-page.tone-ink .illustration-project-media { display:block; min-height:0; margin:0; background:transparent; }.work-project-page.tone-ink .illustration-project-media img,.work-project-page.tone-ink .illustration-image-row img { display:block; width:100%; height:auto; max-width:none; border-radius:5px; object-fit:contain; }.work-project-page.tone-ink .illustration-image-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--illustration-image-gap); width:100%; }.work-project-page.tone-ink .illustration-image-row img { min-width:0; }
@media (max-width:760px) { .work-project-page.tone-ink .illustration-intro { max-width:300px; }.work-project-page.tone-ink .illustration-support { gap:20px; }.work-project-page.tone-ink .illustration-placeholder { min-height:150px; } }

/* Project 05 inherits the exact Project 03 editorial-information values. */
.work-project-page.tone-ochre .eco-eats-title { width:clamp(252px,18vw,280px); max-width:calc(100vw - 36px); color:#4A6540; text-transform:uppercase; }.work-project-page.tone-ochre .illustration-intro { width:100%; max-width:264px; }.work-project-page.tone-ochre .illustration-subtitle { margin:0; color:var(--muted); font-size:10px; line-height:1.45; letter-spacing:.075em; text-transform:uppercase; }.work-project-page.tone-ochre .illustration-description { margin:27px 0 0; color:var(--muted); font-size:13px; line-height:1.52; }.work-project-page.tone-ochre .illustration-support { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:18px; margin-top:28px; color:var(--muted); font-size:13px; line-height:1.52; }.work-project-page.tone-ochre .illustration-support p { margin:0; }.work-project-page.tone-ochre .illustration-tools { white-space:nowrap; }.work-project-page.tone-ochre .eco-eats-support-media { display:block; width:100%; height:auto; max-width:none; margin-top:32px; border-radius:5px; object-fit:contain; }.work-project-page.tone-ochre .eco-eats-image-stack { display:grid; gap:0; }.work-project-page.tone-ochre .eco-eats-image-stack figure { display:block; min-height:0; margin:0; padding:0; background:transparent; }.work-project-page.tone-ochre .eco-eats-image-stack img { display:block; width:100%; height:auto; max-width:none; object-fit:contain; }.work-project-page.tone-ochre .eco-eats-image-stack figure:first-child img { border-radius:5px 5px 0 0; }.work-project-page.tone-ochre .eco-eats-image-stack figure:not(:first-child):not(:last-child) img { border-radius:0; }.work-project-page.tone-ochre .eco-eats-image-stack figure:last-child img { border-radius:0 0 5px 5px; }
@media (max-width:760px) { .work-project-page.tone-ochre .illustration-intro { max-width:300px; }.work-project-page.tone-ochre .illustration-support { gap:20px; }.work-project-page.tone-ochre .illustration-placeholder { min-height:150px; } }

@media (max-width:760px) { .work-project-page.tone-ochre .eco-eats-title { width:100%; max-width:none; } }

@media (max-width:760px) { .page-home .work-section { padding-bottom:64px; }.section-note { width:auto; margin-left:0; }.work-page-end { margin:80px 18px 0; padding-bottom:20px; } }

/* Keep the Project 05 placeholder at the same responsive proportion as Project 03's current left image area. */
.work-project-page.tone-ochre .illustration-placeholder { min-height:0; aspect-ratio:2815 / 2154; }

/* Project 04 — an editorial directory and content field. */
.matcha-case { padding:135px 0 0; }.matcha-layout { display:grid; grid-template-columns:clamp(172px,14vw,224px) minmax(0,1fr); min-height:calc(100svh - 135px); }.matcha-directory { position:relative; border-right:1px solid var(--line); }.matcha-directory__inner { position:sticky; top:118px; display:grid; gap:15px; padding:8px clamp(18px,2.2vw,34px); }.matcha-directory a { display:grid; grid-template-columns:minmax(0,1fr); align-items:baseline; min-height:28px; color:color-mix(in srgb,var(--muted) 74%,transparent); font-size:11px; line-height:1.2; letter-spacing:.025em; transition:color .18s ease; }.matcha-directory a:hover,.matcha-directory a:focus-visible,.matcha-directory a.is-active { color:var(--ink); }.matcha-directory a:focus-visible { outline:1px solid currentColor; outline-offset:4px; }.matcha-content { min-width:0; padding:0 clamp(30px,5vw,86px) clamp(70px,12vh,160px); }.matcha-overview { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto 1fr auto; column-gap:clamp(16px,2vw,32px); min-height:calc(100svh - 135px); padding:0 0 clamp(70px,10vh,136px); }.matcha-hero-media,.matcha-panel { display:grid; place-items:center; margin:0; background:var(--project-tone); color:rgba(41,41,37,.68); font-size:10px; letter-spacing:.08em; line-height:1.45; text-align:center; text-transform:uppercase; }.matcha-hero-media { grid-column:7 / -1; grid-row:1 / span 2; align-self:start; width:100%; min-height:0; background:transparent; }.matcha-hero-media img { display:block; width:100%; height:auto; border-radius:5px; object-fit:contain; }.matcha-overview__intro { grid-column:1 / 7; grid-row:2; align-self:end; max-width:430px; padding-top:clamp(110px,18vh,260px); }.matcha-overview__intro h1 { max-width:420px; margin:0 0 24px; color:var(--project-tone); font:400 clamp(36px,4vw,58px)/.98 var(--display); letter-spacing:-.066em; }.matcha-overview__intro > p:not(.eyebrow) { max-width:294px; margin:0; color:var(--muted); font-size:14px; line-height:1.58; }.matcha-overview__meta { grid-column:1 / 9; grid-row:3; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,4vw,58px); margin:clamp(48px,8vh,96px) 0 0; padding-top:14px; border-top:1px solid var(--line); }.matcha-overview__meta dt { margin-bottom:9px; color:var(--muted); font-size:10.35px; letter-spacing:.085em; line-height:1.3; text-transform:uppercase; }.matcha-overview__meta dd { margin:0; font-size:13.8px; line-height:1.5; }.matcha-section { scroll-margin-top:116px; padding:clamp(120px,18vh,248px) 0 0; }.matcha-section > .eyebrow { margin:0 0 clamp(28px,4vw,56px); }.matcha-section__heading { max-width:360px; margin:0 0 clamp(36px,6vw,84px); }.matcha-section__heading p { margin:0; color:var(--muted); font-size:15px; line-height:1.58; }.matcha-panel { width:100%; min-height:clamp(380px,51vw,760px); border-radius:5px; }.matcha-panel--research { background:#ddddd5; }.matcha-process-panels { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(12px,1.6vw,24px); }.matcha-process-panels .matcha-panel { min-height:clamp(320px,42vw,620px); }.matcha-panel--quiet { background:#d4d2c7; }.matcha-panel--outcome { min-height:clamp(440px,59vw,880px); }.matcha-image-stack { display:grid; gap:0; width:100%; margin:0; padding:0; }.matcha-image-stack img { display:block; width:100%; height:auto; margin:0; object-fit:contain; }.matcha-image-stack img.is-first { border-radius:5px 5px 0 0; }.matcha-image-stack img.is-last { border-radius:0 0 5px 5px; }.matcha-image-stack img.is-first.is-last { border-radius:5px; }.matcha-section--outcome { padding-bottom:0; }.matcha-case .project-next { width:100%; max-width:none; margin-top:clamp(120px,18vh,230px); }.matcha-case .project-pagination { margin-top:clamp(120px,18vh,230px); }
html:has(.matcha-page),.matcha-page { background:#F3F4EF; }.matcha-page .site-header::before { background:rgba(243,244,239,.92); }.matcha-page .matcha-case { padding-top:105px; }.matcha-page .matcha-layout { min-height:calc(100svh - 105px); }.matcha-page .matcha-directory__inner { top:96px; }.matcha-page .matcha-overview { min-height:calc(100svh - 105px); padding-bottom:0; }.matcha-page .matcha-overview__intro h1 { color:#2B472E; font-weight:700; }
@media (max-width:900px) { .matcha-case { padding:92px 0 0; }.matcha-layout { display:block; min-height:0; }.matcha-directory { position:sticky; top:61px; z-index:3; min-width:0; max-width:100%; overflow-x:auto; border-top:1px solid var(--line); border-right:0; border-bottom:1px solid var(--line); background:var(--paper); scrollbar-width:none; }.matcha-directory::-webkit-scrollbar { display:none; }.matcha-directory__inner { position:static; display:flex; gap:24px; width:max-content; padding:14px 18px; }.matcha-directory a { display:flex; flex:0 0 auto; gap:8px; min-height:30px; align-items:center; font-size:10px; }.matcha-directory a em { font-size:9px; }.matcha-content { padding:0 18px 72px; }.matcha-overview { display:flex; flex-direction:column; min-height:calc(100svh - 154px); padding:0 0 72px; }.matcha-hero-media { order:1; min-height:0; margin-left:auto; width:82%; }.matcha-overview__intro { order:2; max-width:310px; padding-top:15vh; }.matcha-overview__intro h1 { margin:16px 0 26px; font-size:42px; }.matcha-overview__meta { order:3; grid-template-columns:1fr; gap:16px; margin-top:56px; }.matcha-section { scroll-margin-top:124px; padding-top:100px; }.matcha-section__heading { margin-bottom:40px; }.matcha-process-panels { grid-template-columns:1fr; gap:12px; }.matcha-panel,.matcha-panel--outcome,.matcha-process-panels .matcha-panel { min-height:92vw; }.matcha-case .project-pagination { margin-top:100px; }.matcha-page .matcha-directory { background:#F3F4EF; }.matcha-page .matcha-case { padding-top:92px; }.matcha-page .matcha-layout { min-height:0; }.matcha-page .matcha-overview { min-height:calc(100svh - 154px); padding:0 0 72px; }.marketing-pinterest-mark { width:clamp(144px,38vw,222px); margin-bottom:14px; } }

/* Pinterest keeps the Matcha Go structure while tightening its own editorial rhythm. */
html:has(body.marketing-pinterest-page) { background:#fff; }
@media (max-width:760px) { .marketing-pinterest-page .marketing-pinterest-placeholder-row { grid-template-columns:1fr; gap:12px; }.marketing-pinterest-page .marketing-pinterest-intro { max-width:100%; }.marketing-pinterest-page .marketing-pinterest-intro > p { max-width:min(100%,560px); } }

/* Pinterest case-study image system and its page-scoped image viewer. */
.marketing-pinterest-page .marketing-pinterest-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); width:100%; }.marketing-pinterest-page .marketing-pinterest-gallery--market .marketing-pinterest-placeholder:nth-child(3),.marketing-pinterest-page .marketing-pinterest-gallery--strategy .marketing-pinterest-placeholder:first-child { grid-column:1 / -1; }.marketing-pinterest-page .marketing-pinterest-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:16 / 9; min-height:0; margin:0; padding:0; border:0; border-radius:5px; background:#e3e4df; color:var(--muted); cursor:zoom-in; font:400 10px/1.45 var(--sans); letter-spacing:.08em; text-align:center; text-transform:uppercase; transition:background-color .18s ease,transform .18s ease; }.marketing-pinterest-page .marketing-pinterest-placeholder:hover { background:#dddeda; transform:scale(.995); }.marketing-pinterest-page .marketing-pinterest-placeholder:focus-visible { outline:1px solid var(--ink); outline-offset:5px; }.marketing-pinterest-lightbox[hidden] { display:none; }.marketing-pinterest-lightbox { position:fixed; z-index:100; inset:0; }.marketing-pinterest-lightbox__backdrop { display:grid; place-items:center; width:100%; height:100%; padding:30px; background:rgba(27,27,25,.88); }.marketing-pinterest-lightbox__dialog { position:relative; display:grid; grid-template-columns:44px minmax(0,min(78vw,1120px)) 44px; grid-template-rows:minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; max-width:1240px; max-height:calc(100svh - 60px); }.marketing-pinterest-lightbox__media { grid-column:2; grid-row:1; display:grid; place-items:center; width:100%; max-height:calc(100svh - 142px); aspect-ratio:16 / 9; background:#e3e4df; color:var(--muted); font-size:10px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.marketing-pinterest-lightbox__close,.marketing-pinterest-lightbox__previous,.marketing-pinterest-lightbox__next { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; font:400 12px/1 var(--sans); }.marketing-pinterest-lightbox__close { position:absolute; z-index:1; top:-50px; right:0; width:auto; padding:0 2px; }.marketing-pinterest-lightbox__previous { grid-column:1; grid-row:1; }.marketing-pinterest-lightbox__next { grid-column:3; grid-row:1; }.marketing-pinterest-lightbox__count { grid-column:2; grid-row:2; margin:0; color:rgba(255,255,255,.68); font-size:11px; line-height:1.3; text-align:center; }.marketing-pinterest-lightbox__close:hover,.marketing-pinterest-lightbox__close:focus-visible,.marketing-pinterest-lightbox__previous:hover,.marketing-pinterest-lightbox__previous:focus-visible,.marketing-pinterest-lightbox__next:hover,.marketing-pinterest-lightbox__next:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:4px; }.marketing-pinterest-lightbox__previous:hover,.marketing-pinterest-lightbox__next:hover { transform:translateX(2px); }.marketing-pinterest-lightbox__previous:hover { transform:translateX(-2px); }.marketing-pinterest-lightbox__close:focus-visible,.marketing-pinterest-lightbox__previous:focus-visible,.marketing-pinterest-lightbox__next:focus-visible { outline:1px solid #fff; outline-offset:4px; }
.marketing-pinterest-page .marketing-pinterest-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); width:100%; }.marketing-pinterest-page .marketing-pinterest-gallery--market .marketing-pinterest-placeholder:nth-child(3),.marketing-pinterest-page .marketing-pinterest-gallery--strategy .marketing-pinterest-placeholder:first-child { grid-column:1 / -1; }.marketing-pinterest-page .marketing-pinterest-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:16 / 9; min-height:0; margin:0; padding:0; border:0; border-radius:5px; background:#e3e4df; color:var(--muted); cursor:zoom-in; font:400 10px/1.45 var(--sans); letter-spacing:.08em; text-align:center; text-transform:uppercase; transition:background-color .18s ease,transform .18s ease; }.marketing-pinterest-page .marketing-pinterest-placeholder:hover { background:#dddeda; transform:scale(.995); }.marketing-pinterest-page .marketing-pinterest-placeholder:focus-visible { outline:1px solid var(--ink); outline-offset:5px; }.marketing-pinterest-lightbox[hidden] { display:none; }.marketing-pinterest-lightbox { position:fixed; z-index:100; inset:0; }.marketing-pinterest-lightbox__backdrop { display:grid; place-items:center; width:100%; height:100%; padding:30px; background:rgba(27,27,25,.88); }.marketing-pinterest-lightbox__dialog { position:relative; display:grid; grid-template-columns:44px minmax(0,min(78vw,1120px)) 44px; grid-template-rows:minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; max-width:1240px; max-height:calc(100svh - 60px); }.marketing-pinterest-lightbox__media { grid-column:2; grid-row:1; display:grid; place-items:center; width:100%; max-height:calc(100svh - 142px); aspect-ratio:16 / 9; background:#e3e4df; color:var(--muted); font-size:10px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.marketing-pinterest-lightbox__close,.marketing-pinterest-lightbox__previous,.marketing-pinterest-lightbox__next { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; font:400 12px/1 var(--sans); }.marketing-pinterest-lightbox__close { position:absolute; z-index:1; top:-50px; right:0; width:auto; padding:0 2px; }.marketing-pinterest-lightbox__previous { grid-column:1; grid-row:1; }.marketing-pinterest-lightbox__next { grid-column:3; grid-row:1; }.marketing-pinterest-lightbox__count { grid-column:2; grid-row:2; margin:0; color:rgba(255,255,255,.68); font-size:11px; line-height:1.3; text-align:center; }.marketing-pinterest-lightbox__close:hover,.marketing-pinterest-lightbox__close:focus-visible,.marketing-pinterest-lightbox__previous:hover,.marketing-pinterest-lightbox__previous:focus-visible,.marketing-pinterest-lightbox__next:hover,.marketing-pinterest-lightbox__next:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:4px; }.marketing-pinterest-lightbox__previous:hover,.marketing-pinterest-lightbox__next:hover { transform:translateX(2px); }.marketing-pinterest-lightbox__previous:hover { transform:translateX(-2px); }.marketing-pinterest-lightbox__previous:disabled,.marketing-pinterest-lightbox__next:disabled { opacity:.28; cursor:default; text-decoration:none; transform:none; }body.pinterest-lightbox-open { overflow:hidden; }.marketing-pinterest-lightbox__close:focus-visible,.marketing-pinterest-lightbox__previous:focus-visible,.marketing-pinterest-lightbox__next:focus-visible { outline:1px solid #fff; outline-offset:4px; }
@media (max-width:760px) { .marketing-pinterest-page .marketing-pinterest-gallery { grid-template-columns:1fr; gap:12px; }.marketing-pinterest-page .marketing-pinterest-gallery--market .marketing-pinterest-placeholder:nth-child(3),.marketing-pinterest-page .marketing-pinterest-gallery--strategy .marketing-pinterest-placeholder:first-child { grid-column:auto; }.marketing-pinterest-lightbox__backdrop { padding:18px; }.marketing-pinterest-lightbox__dialog { grid-template-columns:44px minmax(0,1fr) 44px; gap:4px; max-height:calc(100svh - 36px); }.marketing-pinterest-lightbox__media { max-height:calc(100svh - 112px); }.marketing-pinterest-lightbox__close { top:-42px; }.marketing-pinterest-lightbox__count { margin-top:4px; } }

/* Both Overview paragraphs deliberately resolve from this single body-copy rule. */
.marketing-pinterest-page .pinterest-overview-body { width:100%; max-width:560px; margin:0; color:var(--muted); font-family:var(--sans); font-size:16.1px; font-style:normal; font-weight:400; line-height:1.58; letter-spacing:normal; }.marketing-pinterest-page .pinterest-overview-body + .pinterest-overview-body { margin-top:18px; }.marketing-pinterest-page .pinterest-key-skills-label { font:inherit; font-weight:700; font-size:inherit; font-style:inherit; line-height:inherit; letter-spacing:inherit; }

/* Pinterest's one-image rows deliberately occupy the left grid column. */
.marketing-pinterest-page .marketing-pinterest-gallery--market .marketing-pinterest-placeholder:nth-child(3),.marketing-pinterest-page .marketing-pinterest-gallery--strategy .marketing-pinterest-placeholder:first-child { grid-column:auto; }.marketing-pinterest-page .marketing-pinterest-footer-image { display:block; width:100%; margin:clamp(90px,14vh,180px) 0 0; }.marketing-pinterest-page .marketing-pinterest-footer-image .marketing-pinterest-placeholder { width:100%; }

/* Actual Pinterest visuals retain their complete composition while sharing one quiet image treatment. */
.marketing-pinterest-page .marketing-pinterest-placeholder--image { aspect-ratio:auto; overflow:hidden; background:transparent; box-shadow:0 8px 20px rgba(27,27,25,.09); }.marketing-pinterest-page .marketing-pinterest-placeholder--image img { display:block; width:100%; height:auto; }.marketing-pinterest-lightbox__media img { display:block; max-width:100%; max-height:calc(100svh - 142px); width:auto; height:auto; object-fit:contain; }

/* BlueMoon uses Pinterest's proven case-study architecture while retaining its own project tone and content. */
.marketing-bluemoon-page { --project-tone:#5E88D9; background:#fff; }.marketing-bluemoon-page .site-header::before { background:rgba(255,255,255,.92); }.marketing-bluemoon-page .marketing-project { padding-top:112px; }.marketing-bluemoon-page .matcha-layout,.marketing-bluemoon-page .matcha-overview { min-height:calc(100svh - 112px); }.marketing-bluemoon-page .matcha-hero-media { width:82%; justify-self:end; min-height:clamp(390px,47vw,690px); }.marketing-bluemoon-page .matcha-overview__intro { max-width:560px; padding-top:clamp(82px,13vh,188px); }.marketing-bluemoon-page .marketing-bluemoon-intro h1 { color:var(--project-tone); font-family:"SF Pro","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-weight:400; }.marketing-bluemoon-page .bluemoon-overview-body { width:100%; max-width:560px; margin:0; color:var(--muted); font-family:var(--sans); font-size:16.1px; font-style:normal; font-weight:400; line-height:1.58; letter-spacing:normal; }.marketing-bluemoon-page .bluemoon-overview-body + .bluemoon-overview-body { margin-top:18px; }.marketing-bluemoon-page .bluemoon-key-skills-label { font:inherit; font-weight:700; font-size:inherit; font-style:inherit; line-height:inherit; letter-spacing:inherit; }.marketing-bluemoon-page .matcha-overview__meta dd { max-width:240px; }.marketing-bluemoon-page .marketing-bluemoon-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); width:100%; }.marketing-bluemoon-page .marketing-bluemoon-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:16 / 9; min-height:0; margin:0; padding:0; border:0; border-radius:5px; background:#e3e4df; box-shadow:0 8px 20px rgba(27,27,25,.09); color:var(--muted); cursor:zoom-in; font:400 10px/1.45 var(--sans); letter-spacing:.08em; text-align:center; text-transform:uppercase; transition:background-color .18s ease,transform .18s ease; }.marketing-bluemoon-page .marketing-bluemoon-placeholder:hover { background:#dddeda; transform:scale(.995); }.marketing-bluemoon-page .marketing-bluemoon-placeholder:focus-visible { outline:1px solid var(--ink); outline-offset:5px; }.marketing-bluemoon-lightbox[hidden] { display:none; }.marketing-bluemoon-lightbox { position:fixed; z-index:100; inset:0; }.marketing-bluemoon-lightbox__backdrop { display:grid; place-items:center; width:100%; height:100%; padding:30px; background:rgba(27,27,25,.88); }.marketing-bluemoon-lightbox__dialog { position:relative; display:grid; grid-template-columns:44px minmax(0,min(78vw,1120px)) 44px; grid-template-rows:minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; max-width:1240px; max-height:calc(100svh - 60px); }.marketing-bluemoon-lightbox__media { grid-column:2; grid-row:1; display:grid; place-items:center; width:100%; max-height:calc(100svh - 142px); aspect-ratio:16 / 9; background:#e3e4df; color:var(--muted); font-size:10px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.marketing-bluemoon-lightbox__close,.marketing-bluemoon-lightbox__previous,.marketing-bluemoon-lightbox__next { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; font:400 12px/1 var(--sans); }.marketing-bluemoon-lightbox__close { position:absolute; z-index:1; top:-50px; right:0; width:auto; padding:0 2px; }.marketing-bluemoon-lightbox__previous { grid-column:1; grid-row:1; }.marketing-bluemoon-lightbox__next { grid-column:3; grid-row:1; }.marketing-bluemoon-lightbox__count { grid-column:2; grid-row:2; margin:0; color:rgba(255,255,255,.68); font-size:11px; line-height:1.3; text-align:center; }.marketing-bluemoon-lightbox__close:hover,.marketing-bluemoon-lightbox__close:focus-visible,.marketing-bluemoon-lightbox__previous:hover,.marketing-bluemoon-lightbox__previous:focus-visible,.marketing-bluemoon-lightbox__next:hover,.marketing-bluemoon-lightbox__next:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:4px; }.marketing-bluemoon-lightbox__previous:hover,.marketing-bluemoon-lightbox__next:hover { transform:translateX(2px); }.marketing-bluemoon-lightbox__previous:hover { transform:translateX(-2px); }.marketing-bluemoon-lightbox__previous:disabled,.marketing-bluemoon-lightbox__next:disabled { opacity:.28; cursor:default; text-decoration:none; transform:none; }body.bluemoon-lightbox-open { overflow:hidden; }.marketing-bluemoon-lightbox__close:focus-visible,.marketing-bluemoon-lightbox__previous:focus-visible,.marketing-bluemoon-lightbox__next:focus-visible { outline:1px solid #fff; outline-offset:4px; }
@media (max-width:760px) { .marketing-bluemoon-page .marketing-bluemoon-intro { max-width:100%; }.marketing-bluemoon-page .bluemoon-overview-body { max-width:min(100%,560px); }.marketing-bluemoon-page .marketing-bluemoon-gallery { grid-template-columns:1fr; gap:12px; }.marketing-bluemoon-lightbox__backdrop { padding:18px; }.marketing-bluemoon-lightbox__dialog { grid-template-columns:44px minmax(0,1fr) 44px; gap:4px; max-height:calc(100svh - 36px); }.marketing-bluemoon-lightbox__media { max-height:calc(100svh - 112px); }.marketing-bluemoon-lightbox__close { top:-42px; }.marketing-bluemoon-lightbox__count { margin-top:4px; } }
html:has(body.marketing-bluemoon-page) { background:#fff; }

/* BlueMoon artwork follows the established Pinterest gallery grid without cropping individual slides. */
.marketing-bluemoon-page .matcha-hero-media { min-height:0; background:transparent; }.marketing-bluemoon-page .matcha-hero-media img { display:block; width:100%; height:auto; border-radius:5px; object-fit:contain; }.marketing-bluemoon-page .marketing-bluemoon-placeholder--image { aspect-ratio:auto; overflow:hidden; background:transparent; }.marketing-bluemoon-page .marketing-bluemoon-placeholder--image img { display:block; width:100%; height:auto; }.marketing-bluemoon-lightbox__media img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

/* Starbucks content update: the established editorial case-study structure remains intact. */
.marketing-starbucks-page { --project-tone:#006341; }.marketing-starbucks-page .case-introduction h1 { color:#006341; font-family:"SoDo Sans","SoDo Sans Black",var(--display); font-weight:900; font-style:normal; text-transform:none; }.marketing-starbucks-page .starbucks-overview-body { max-width:600px; margin:0; color:var(--muted); font-family:var(--sans); font-size:17px; font-style:normal; font-weight:400; line-height:1.58; letter-spacing:normal; }.marketing-starbucks-page .starbucks-overview-body + .starbucks-overview-body { margin-top:18px; }.marketing-starbucks-page .starbucks-key-skills-label { font:inherit; font-weight:700; font-size:inherit; font-style:inherit; line-height:inherit; letter-spacing:inherit; }.marketing-starbucks-page .case-feature-media + .case-feature-media { margin-top:clamp(70px,10vh,120px); }
.marketing-starbucks-page .case-hero-media { width:100%; min-height:0; margin:0 auto; background:transparent; }.marketing-starbucks-page .case-hero-media img { display:block; width:100%; height:auto; border-radius:5px; object-fit:contain; }.marketing-starbucks-page .case-feature-media.starbucks-image-sequence { display:grid; width:100%; gap:10px; min-height:0; margin:0 auto; background:transparent; }.marketing-starbucks-page .starbucks-image-sequence img { display:block; width:100%; height:auto; margin:0; border-radius:5px; object-fit:contain; }

/* Marketing detail navigation intentionally inherits the shared Work footer. */
.marketing-bluemoon-page { --project-tone:#161F5D; }

/* Breadly reuses the Matcha case-study grid; only its project media remains page-specific. */
.breadly-opening-images { display:grid; gap:0; width:100%; margin:0; padding:0; }
.breadly-opening-image { width:100%; margin:0; padding:0; line-height:0; }
.breadly-opening-image img { display:block; width:100%; height:auto; max-width:none; object-fit:contain; }
html:has(body.breadly-ai-page),body.breadly-ai-page { background:#fff; }
.breadly-ai-page .site-header::before { background:rgba(255,255,255,.92); }
.breadly-ai-page .matcha-case { padding-top:105px; }
.breadly-ai-page .matcha-layout { min-height:calc(100svh - 105px); }
.breadly-ai-page .matcha-directory__inner { padding-inline:clamp(21.78px,2.662vw,41.14px); }
.breadly-ai-page .matcha-content { padding-inline:clamp(36.3px,6.05vw,104.06px); }
.breadly-ai-page .matcha-directory__inner { top:96px; }

.breadly-overview-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(210px,.75fr); gap:clamp(48px,7vw,112px); align-items:start; width:100%; }
.breadly-overview-meta { grid-column:2; grid-row:1; }
.breadly-overview-hero { grid-column:1; grid-row:1; width:100%; margin:0; }
.breadly-overview-hero img { display:block; width:100%; height:auto; max-width:none; object-fit:contain; }
.breadly-overview > .breadly-overview-grid > .breadly-overview-about { grid-column:1 / -1; grid-row:2; width:100%; max-width:none; margin:0; }
.breadly-overview-heading { margin:0 0 clamp(28px,4vw,56px); }
.breadly-overview-about { color:var(--muted); font-size:16px; line-height:1.62; }
.breadly-about-composition { display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:clamp(24px,3vw,48px); align-items:start; width:100%; }
.breadly-about-copy { min-width:0; }
.breadly-about-copy p { margin:0; }
.breadly-about-video { width:100%; margin:0; overflow:hidden; border-radius:15px; justify-self:end; }
.breadly-about-video video { display:block; width:100%; height:auto; max-width:100%; border-radius:inherit; object-fit:contain; }
.breadly-about-copy .breadly-about-follow-up { margin-top:26px; }
.breadly-overview-meta { display:grid; gap:24px; max-width:300px; margin:0; padding:0; }
.breadly-overview-meta dt { margin-bottom:8px; color:var(--muted); font-size:10.35px; letter-spacing:.085em; line-height:1.3; text-transform:uppercase; }
.breadly-overview-meta dd { margin:0; color:var(--ink); font-size:13.8px; line-height:1.5; }
.breadly-brand-strategy { width:100%; }
.breadly-brand-strategy__media { display:grid; width:100%; margin:0; padding:0; gap:5px; }
.breadly-brand-strategy__media img { display:block; width:100%; height:auto; max-width:none; margin:0; padding:0; border-radius:5px; object-fit:contain; }
.breadly-brand-strategy__media img:first-child { margin-bottom:5px; }
.breadly-ux-copy { margin:0 0 clamp(52px,8vh,104px); }
.breadly-ux-copy strong { color:inherit; font-family:inherit; font-size:inherit; font-style:inherit; font-weight:700; line-height:inherit; letter-spacing:inherit; }
.breadly-ux-media-list { display:grid; gap:clamp(44px,7vh,88px); }
.breadly-ux-media-item { min-width:0; }
.breadly-ux-media-item--with-copy > .breadly-section-title { margin-bottom:clamp(14px,2vw,28px); }
.breadly-ux-media-copy { margin:0 0 clamp(26px,3vw,42px); }
.breadly-ux-scroll { width:100%; max-width:none; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-gutter:stable; }
.breadly-ux-scroll:focus-visible { outline:1px solid var(--ink); outline-offset:4px; }
.breadly-ux-scroll > img { display:block; width:auto; max-width:none; height:auto; max-height:clamp(240px,30vw,460px); margin:0; object-fit:contain; }
.breadly-brand-identity__media { display:grid; width:100%; margin:0; padding:0; gap:5px; }
.breadly-brand-identity__media img { display:block; width:100%; height:auto; max-width:100%; margin:0; padding:0; border-radius:5px; object-fit:contain; }

@media (max-width:900px) {
  .breadly-ai-page .matcha-case { padding-top:92px; }
  .breadly-ai-page .matcha-layout { min-height:0; }
  .breadly-overview-grid { grid-template-columns:minmax(0,1.5fr) minmax(180px,1fr); gap:clamp(36px,6vw,72px); }
}

@media (min-width:761px) and (max-width:900px) {
  .breadly-ai-page .matcha-directory__inner { padding-inline:21.78px; }
  .breadly-ai-page .matcha-content { padding-inline:22px; }
  .breadly-ai-page .project-pagination { width:calc(100% + 44px); margin-left:-22px; margin-right:-22px; padding-inline:22px; }
}

@media (max-width:760px) {
  .breadly-ai-page .matcha-directory__inner { padding-inline:18px; }
  .breadly-ai-page .matcha-content { padding-inline:18px; }
  .breadly-overview-grid { display:block; }
  .breadly-overview-meta { max-width:300px; margin:0; }
  .breadly-overview-hero { margin-top:36px; }
  .breadly-overview-about { margin-top:36px; }
  .breadly-about-composition { grid-template-columns:1fr; gap:28px; }
}

/* About retains its asymmetric opening composition while the bio and portrait share a quieter measure. */
.page-about .about-intro { display:flex; flex-direction:column; align-self:start; width:min(100%,390px); }.page-about .about-intro h1 { width:100%; max-width:390px; }.about-career-break { display:block; }.page-about .portrait-slot { width:51.2%; justify-self:end; align-self:start; }.page-about .about-get-in-touch { display:inline-flex; align-items:center; align-self:start; width:max-content; min-height:44px; margin-top:clamp(34px,5vh,62px); color:var(--muted); font-size:14px; line-height:1.35; text-decoration:none; }.page-about .about-get-in-touch:hover,.page-about .about-get-in-touch:focus-visible { color:var(--ink); text-decoration:none; }.page-about .contact-footer { scroll-margin-top:92px; }
@media (min-width:761px) { .page-about .about-hero { align-items:start; }.page-about .about-intro { position:static; height:auto; justify-content:flex-start; }.page-about .about-get-in-touch { position:absolute; z-index:2; top:auto; bottom:var(--about-doll-bottom); left:30px; min-height:0; margin-top:0; opacity:1; visibility:visible; transform:none; } }
@media (max-width:760px) { .page-about .about-intro { display:block; width:100%; max-width:27rem; }.page-about .about-intro h1 { max-width:27rem; }.about-career-break { display:inline; }.page-about .about-get-in-touch { margin-top:42px; }.page-about .portrait-slot { width:min(80%,288px); margin-left:auto; } }

/* Hover elevation is visual only: it never changes a badge's grid footprint. */
.badges-showcase figure { position:relative; z-index:0; }
/* Direct Design Work grid — replaces the shared hover-preview browser. */
.object-media,.portrait-slot,.case-study-media{padding:10px;font-size:10px;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.work-section{--work-content-width:min(100%,1380px)}.work-section>.section-heading,.work-section>.design-project-grid,.work-section>.more-work{width:var(--work-content-width);margin-left:auto;margin-right:auto}.design-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(72px,10vh,132px) clamp(24px,3vw,52px);width:var(--work-content-width);margin:0 auto;padding:0;list-style:none}
.design-project-card{min-width:0}.design-project-card__link{display:block;color:inherit;text-decoration:none}.design-project-card__art{position:relative;display:block;width:100%;aspect-ratio:3/2;margin:0;overflow:hidden;border-radius:5px}.design-project-card__art img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;transition:transform .22s ease,opacity .22s ease}.design-project-card__link:hover .design-project-card__art img,.design-project-card__link:focus-visible .design-project-card__art img{transform:scale(1.012)}.design-project-card__link:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.design-project-card__content{padding-top:14px}.design-project-card__meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase}.design-project-card__tags{display:flex;flex-wrap:wrap;gap:4px 14px;min-width:0;margin:0;padding:0;list-style:none}.design-project-card__meta>p{flex:0 0 auto;margin:0;font-variant-numeric:tabular-nums}.design-project-card h3{margin:14px 0 6px;font:400 clamp(22px,2vw,31px)/1.02 var(--display);letter-spacing:-.055em}.design-project-card__description{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.design-project-card__art.tone-clay{background:#bf847b}.design-project-card__art.tone-moss{background:#627b4d}.design-project-card__art.tone-ink{background:#292925}.design-project-card__art.tone-sky{background:#5e88d9}.design-project-card__art.tone-ochre{background:#cebba5}.design-project-card__art.tone-rose{background:#c88d86}.design-project-card--soon .design-project-card__coming-soon{position:absolute;top:50%;left:50%;padding:6px 8px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .18s ease}.design-project-card--soon:hover .design-project-card__coming-soon{opacity:1}
.more-work{width:var(--work-content-width);margin:clamp(153.6px,20.8vh,275.2px) auto 0}.more-work>h2.eyebrow{margin:0 0 clamp(28px,4vh,48px);font-weight:400}.more-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,36px);margin:0;padding:0;list-style:none}.more-work-card{min-width:0}.more-work-card__link{display:block;color:inherit;text-decoration:none}.more-work-card__art{display:block;width:100%;aspect-ratio:3/2;margin:0;overflow:hidden;border-radius:5px;background:rgba(41,41,37,.08)}.more-work-card__art img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;transition:transform .22s ease}.more-work-card__link:hover .more-work-card__art img,.more-work-card__link:focus-visible .more-work-card__art img{transform:scale(1.012)}.more-work-card__link:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.more-work-card h3{margin:14px 0 6px;font:400 clamp(16px,1.32vw,20.8px)/1.05 var(--display);letter-spacing:-.05em}.more-work-card__description{margin:0;color:var(--muted);font-size:12px;line-height:1.45}

/* Shared detail-page contracts. Individual projects supply their own colour and
   layout classes; these tokens keep future intro, TOC, and footer adjustments
   centralized without normalizing approved visual identities. */
.detail-intro{--detail-intro-description-scale:1.2;--detail-intro-content-gap:clamp(48px,8vh,96px)}
.matcha-page .matcha-directory a,.marketing-matcha-page .matcha-directory a{font-size:12.1px}
.design-project-card__description{font-size:14.4px}
.design-project-card__art video{display:block;width:100%;height:100%;max-width:none;object-fit:contain;transition:transform .22s ease,opacity .22s ease}.design-project-card__link:hover .design-project-card__art video,.design-project-card__link:focus-visible .design-project-card__art video{transform:scale(1.012)}
@media (max-width:760px){.matcha-page .matcha-directory a,.marketing-matcha-page .matcha-directory a{font-size:11px}}

/* Playground keeps one quiet, noninteractive visual holder among its five links. */
.archive-main .sticker-illustrations{left:12%;top:18%;width:clamp(153.6px,14.4vw,216px)}.archive-main .sticker-furniture-one{left:42%;top:16%;width:clamp(124.8px,13.2vw,189.6px)}.archive-main .sticker-book{right:22%;top:17%;width:clamp(158.4px,16.56vw,221.76px);aspect-ratio:925/759}.archive-main .sticker-film{right:10%;top:42%;width:clamp(158.4px,16.8vw,230.4px)}.archive-main .sticker-badges{left:20%;bottom:11%;width:clamp(124.8px,12.6vw,182.4px)}.archive-main .sticker-furniture-two{right:34%;bottom:12%;width:clamp(167.04px,17.28vw,239.04px)}

@media (min-width:761px) and (max-width:900px){.more-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.design-project-grid{grid-template-columns:minmax(0,1fr);gap:56px;width:100%}.design-project-card__content{padding-top:12px}.design-project-card h3{font-size:clamp(24px,7vw,30px)}.design-project-card__tags{gap:4px 10px}.more-work{width:var(--work-content-width);margin-top:134.4px}.more-work-grid{grid-template-columns:minmax(0,1fr);gap:44px}.more-work-card h3{font-size:clamp(18.4px,5.2vw,22.4px)}.archive-main .sticker-illustrations{left:7%;top:19%;width:30vw}.archive-main .sticker-furniture-one{left:36%;top:36%;width:27.6vw}.archive-main .sticker-book{right:8%;top:17%;width:34.56vw}.archive-main .sticker-film{right:7%;top:56%;width:34.8vw}.archive-main .sticker-badges{left:10%;bottom:13%;width:31.2vw}.archive-main .sticker-furniture-two{right:8%;bottom:7%;width:40.32vw}}

/* The Japanese illustration now enters from Playground while retaining its
   approved editorial case-study content treatment. */
.illustration-playground-page{--project-tone:#575b57}.illustration-playground-page .case-assembly{grid-template-columns:minmax(190px,.4fr) minmax(700px,1.6fr);gap:clamp(88px,13vw,250px);max-width:1600px}.illustration-playground-page .work-project--assembly{max-width:1600px}.illustration-playground-page .assembly-aside{padding-top:0}.illustration-playground-page .assembly-aside h1{margin:0 0 18px;font-size:clamp(27px,2.8vw,43px)}.illustration-playground-page .assembly-stack{justify-self:end;width:100%;gap:12px}.illustration-playground-page .assembly-aside .illustration-graphic-title{width:100%;max-width:264px;margin:0 0 18px;font-size:0;line-height:0}.illustration-playground-page .illustration-graphic-title img{display:block;width:120%;height:auto;max-width:none;object-fit:contain;transform-origin:left center}.illustration-playground-page .illustration-intro{width:100%;max-width:264px}.illustration-playground-page .illustration-subtitle{margin:0;color:var(--muted);font-size:10px;line-height:1.45;letter-spacing:.075em;text-transform:uppercase}.illustration-playground-page .illustration-description{margin:27px 0 0;color:var(--muted);font-size:13px;line-height:1.52}.illustration-playground-page .illustration-support{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:18px;margin-top:28px;color:var(--muted);font-size:13px;line-height:1.52}.illustration-playground-page .illustration-support p{margin:0}.illustration-playground-page .illustration-tools{white-space:nowrap}.illustration-playground-page .illustration-support-media{display:block;width:100%;height:auto;max-width:none;margin-top:32px;border-radius:5px;object-fit:contain}.illustration-playground-page .illustration-image-stack{--illustration-image-gap:12px;gap:var(--illustration-image-gap)}.illustration-playground-page .illustration-project-media{display:block;min-height:0;margin:0;background:transparent}.illustration-playground-page .illustration-project-media img,.illustration-playground-page .illustration-image-row img{display:block;width:100%;height:auto;max-width:none;border-radius:5px;object-fit:contain}.illustration-playground-page .illustration-image-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--illustration-image-gap);width:100%}.illustration-playground-page .illustration-image-row img{min-width:0}
@media (max-width:760px){.illustration-playground-page .case-assembly{display:block}.illustration-playground-page .assembly-aside{position:static}.illustration-playground-page .assembly-aside h1{font-size:clamp(29px,8vw,36px)}.illustration-playground-page .assembly-stack{margin-top:54px}.illustration-playground-page .illustration-intro{max-width:300px}.illustration-playground-page .illustration-support{gap:20px}}

/* Portfolio-group navigation and the compact Work heading preserve one
   predictable desktop hierarchy without changing the project grids. */
/* The heading row shares the same content-width token as the two-column
   Selected Work grid, so its outer edges remain mechanically aligned. */
@media (min-width:761px){.work-section>.section-heading{grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:baseline}.work-section>.section-heading .eyebrow{grid-column:1;grid-row:1}.work-section>.section-heading h2{display:none}.work-section>.section-heading .section-note{grid-column:2;grid-row:1;justify-self:end;width:max-content;max-width:100%;font-size:calc(11px * 1.05);text-align:right;white-space:nowrap}.archive-furniture-layout>.project-pagination{grid-column:1 / -1;width:calc(100% + 60px);margin:clamp(96px,15vh,180px) -30px 0;padding-inline:30px}}
@media (max-width:760px){.work-section>.section-heading .section-note{white-space:normal}.archive-furniture-layout>.project-pagination{grid-column:1 / -1}}

/* Playground keeps its original top-right route back and ends in natural
   editorial whitespace, rather than a second navigation region. */
.archive-project-page .work-project--assembly,.archive-furniture-layout{padding-bottom:clamp(72px,10vh,144px)}.archive-illustration-page .illustration-archive,.archive-badges-page .badges-showcase{margin-bottom:clamp(72px,10vh,144px)}
@media (max-width:760px){.archive-project-page .work-project--assembly,.archive-furniture-layout{padding-bottom:clamp(48px,9vh,72px)}.archive-illustration-page .illustration-archive,.archive-badges-page .badges-showcase{margin-bottom:clamp(48px,9vh,72px)}}

.more-work{scroll-margin-top:var(--header-divider)}.work-project--after-hours .case-introduction>p+p{margin-top:18px}