/* Quiet archive — local design exploration. */
:root{--paper:#f6f3ed;--ink:#2d373b;--muted:#737a79;--line:#d8dbd9;--accent:#d9e2e7}
body{background:var(--paper)}.wrap{width:min(1120px,calc(100% - 96px))}.site-header{height:104px;border-bottom:1px solid var(--line)}.wordmark>span{color:#9d6953}.brand-name{letter-spacing:0}.site-header nav{gap:28px}.nav-dot{background:#9d6953}.header-note{margin-left:24px}.home-link{font-size:11px;letter-spacing:0}
.studio-intro{padding:28px 0 52px}.studio-caption{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:var(--muted)}.studio-title{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:64px;padding:56px 0 48px}h1{font-size:clamp(60px,6.5vw,88px);line-height:1.17;letter-spacing:-5px;font-weight:650;margin:0}h1>span{color:#8b6353}.studio-note{max-width:280px;justify-self:end}.note-cross{color:#829aa5;font-size:40px}.studio-note p{font-size:13px;line-height:2;color:#657076;margin:16px 0 24px}.studio-note a{display:inline-flex;font-size:12px;gap:48px;border-bottom:1px solid #9ea9ad;padding-bottom:10px}.studio-note a span{transition:transform .2s}.studio-note a:hover span{transform:translateY(4px)}.archive-strip{display:flex;align-items:center;gap:36px;background:#dce5e9;padding:20px 32px;position:relative;min-height:112px;border-radius:2px}.strip-mark{font-family:MuRound,sans-serif;font-size:68px;font-weight:bold;letter-spacing:-5px;color:#4b626d;line-height:1}.archive-strip>span:nth-child(2){font-size:11px;line-height:1.8;color:#526772;border-left:1px solid #b7c8cf;padding-left:32px}.archive-stamp{margin-left:auto;border:1px solid #9d6953;color:#8b6353;padding:10px 14px;font-size:10px;line-height:1.4;letter-spacing:1px;transform:rotate(-8deg)}.strip-index{font-size:9px;letter-spacing:1px;color:#5e7179;margin-left:20px}.collection{border-top:0}.collection-heading{border-top:0;padding-top:0}.collection-heading h2{font-size:23px;font-weight:600}.collection-heading p{font-size:11px}.collection-toolbar{margin:0 0 28px;padding:0 0 16px;border-bottom:1px solid var(--line)}.filters{gap:22px}.filters button{padding:6px 0;border-radius:0;min-height:32px;font-size:12px}.filters button[aria-pressed="true"]{background:transparent;color:#8b6353;border-bottom:1px solid #8b6353}.filters button:hover:not([aria-pressed="true"]){background:transparent;color:#8b6353}.random-button{font-size:11px;min-height:32px}.work-grid{gap:48px 36px}.work-card:nth-child(even){padding-top:56px}.work-card.web{padding-top:0}.work-link{display:block}.work-card .cover{height:300px;border-radius:2px;background:#e5e8e5}.work-card.woolly .cover{background:#e5e9e3}.work-card.space .cover{background:#dce2e4}.work-card.web .cover{background:#e4e8e0}.work-card .preview-frame{inset:46px 24px 24px;border:0;border-radius:2px;transform:none;box-shadow:0 6px 14px -12px #2d373b}.work-link:hover .preview-frame{transform:translateY(-4px)}.cover-top{top:18px;left:24px;right:24px}.cover-label{font-size:8px;font-weight:400;letter-spacing:1.1px}.cover-number{font-size:9px}.cover-note{display:none}.cover-action{border-radius:2px;background:#394e59;font-size:10px;padding:10px 14px;right:32px;bottom:32px}.work-info{padding:20px 0 0}.work-heading h3{font-size:21px;font-weight:600}.work-arrow{color:#8b6353;font-size:21px}.work-description{font-size:12px;line-height:1.9;margin:10px 0 14px}.work-tags{gap:14px}.work-tags>span:not(.sr-only){border:0;border-radius:0;padding:0;color:#78807d;font-size:9px}.work-tags>span:not(.sr-only)+span:not(.sr-only){border-left:1px solid #c8ceca;padding-left:14px}.web-orbit{border-color:#a5b29f}.collection-end{margin-top:40px;color:#808783;font-size:9px}.about{border-top:1px solid var(--line);margin-top:40px;padding:44px 0;grid-template-columns:1fr 1.8fr auto;gap:28px}.about-label{color:#8b6353;gap:16px}.small-spark{opacity:.55;width:32px;height:32px}.about h2{font-size:28px;font-weight:500}.about p{font-size:12px}.back-top{border-radius:0;border:0;color:#8b6353}.back-top:hover{background:#e8eceb}.site-footer{padding-block:24px;border-top:1px solid var(--line);font-size:9px}.site-footer strong{font-family:MuRound,sans-serif;color:#536974;margin-right:8px}
@media(max-width:1000px){.header-note{display:none}.studio-title{gap:32px}h1{font-size:70px}.strip-index{display:none}}
@media(max-width:767px){.wrap{width:calc(100% - 40px)}.site-header{height:84px;gap:12px}.brand{gap:12px}.brand-name{font-size:10px;padding-left:12px}.site-header nav{gap:14px;font-size:11px}.studio-intro{padding:24px 0 40px}.studio-caption{font-size:8px;letter-spacing:.2px}.studio-title{grid-template-columns:1fr;padding:36px 0;gap:28px}h1{font-size:clamp(54px,10vw,74px);letter-spacing:-3px}.studio-note{justify-self:start;max-width:none;display:grid;grid-template-columns:36px 1fr;column-gap:16px}.note-cross{font-size:30px;grid-row:1 / 3;padding-top:4px}.studio-note p{margin:0 0 16px;font-size:12px}.studio-note a{font-size:11px;justify-self:start;gap:40px}.archive-strip{padding:20px;gap:20px;min-height:100px}.strip-mark{font-size:50px}.archive-strip>span:nth-child(2){font-size:10px;padding-left:18px}.archive-stamp{display:none}.collection-heading h2{font-size:21px}.collection-heading p{font-size:9px;max-width:120px;text-align:right}.filters{gap:18px}.filters button{font-size:11px}.random-button{font-size:10px;gap:5px;padding-left:0}.shuffle-symbol{font-size:20px}.work-card:nth-child(n){padding-top:0;grid-column:1}.work-grid{row-gap:36px}.work-card .cover{height:260px}.work-card .preview-frame{inset:42px 18px 18px}.cover-top{left:18px;right:18px}.work-heading h3{font-size:20px}.about{grid-template-columns:1fr;padding:32px 0;gap:20px}.about h2{font-size:24px}.back-top{justify-self:end}.site-footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){.studio-note a span{transition:none}}

/* Match the header wordmark, scaled for the archive strip. */
.strip-mark.wordmark{color:var(--ink);letter-spacing:-.07143em}.strip-mark.wordmark>span{margin-left:-.04762em;color:#9d6953}

.strip-mark.wordmark{font-size:42px;letter-spacing:-3px;padding:0;color:var(--ink)}.strip-mark.wordmark>span{margin-left:-2px}
@media(max-width:767px){.strip-mark.wordmark{font-size:36px}}

/* Two stacked words paired with a single oversized word. */
.studio-title{grid-template-columns:minmax(0,1fr) 220px;gap:48px}
h1.title-lockup{display:flex;align-items:center;gap:20px;letter-spacing:-.045em;font-size:clamp(48px,5vw,72px);line-height:1;font-weight:700;white-space:nowrap}
h1.title-lockup .title-stack{display:flex;flex-direction:column;gap:.08em;color:var(--ink);flex-shrink:0}
h1.title-lockup .title-play{font-size:2.08em;color:#8b6353;letter-spacing:-.055em;line-height:1}
@media(max-width:1000px){.studio-title{grid-template-columns:1fr;gap:28px}.studio-note{justify-self:start;max-width:none}.title-lockup{justify-self:start}}
@media(max-width:767px){h1.title-lockup{font-size:clamp(36px,8.2vw,58px);gap:12px}.studio-title{gap:28px}}

.title-stack>span{position:relative}.title-comma{position:absolute;font-size:.45em;bottom:0;left:100%}.title-stop{font-size:.45em;letter-spacing:0}

/* Tighten the title groups to match the supplied reference. */
h1.title-lockup{gap:6px}
@media(max-width:767px){h1.title-lockup{gap:4px}}

/* Full-size hanging comma; the right word starts after its visible ink. */
h1.title-lockup{gap:.4em}
.title-comma{font-size:1em;left:100%;bottom:0;line-height:1}
@media(max-width:767px){h1.title-lockup{gap:.4em}}

.title-stop{font-size:.7em}