/* The portfolio stage and editorial covers share the site's neutral palette. */
.work-showcase, .work-directory, .price-wrap { width: min(100%, 1480px); margin-inline: auto; padding-inline: clamp(18px, 4vw, 58px); }
.work-showcase { padding-top: clamp(90px, 8.2vw, 130px); }
.work-heading { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .65fr); align-items: end; gap: 1rem 2.4rem; margin-bottom: clamp(20px, 3vw, 42px); }
.work-heading h1, .price-head h1 { margin: 0; font-size: clamp(2.85rem, 7vw, 7.05rem); letter-spacing: -.068em; line-height: .96; }
.work-kicker, .work-kind, .price-label { margin: 0 0 .8rem; font-family: var(--font-mono, monospace); font-size: .75rem; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.work-heading > p { max-width: 36ch; margin: 0; color: #525252; font-size: clamp(1rem, 1.45vw, 1.3rem); line-height: 1.5; }
.work-tabs { display: flex; gap: .34rem; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-inline: contain; padding: 4px 3px .6rem; margin-inline: -3px; }
.work-tabs[hidden], .work-panel[hidden], .work-motion[hidden] { display: none !important; }
.work-tabs button { display: inline-flex; flex: 1 0 auto; align-items: baseline; justify-content: center; gap: .47rem; min-height: 44px; padding: .7rem .8rem; border: 1px solid #ccc8bf; background: transparent; color: #222; font: 650 .84rem/1.16 var(--font-main, sans-serif); cursor: pointer; white-space: nowrap; }
.work-tabs button span { color: #635b54; font: 650 .64rem/1.16 var(--font-mono, monospace); }
.work-tabs button[aria-selected="true"] { color: #fff; background: #242126; border-color: #242126; }
.work-tabs button[aria-selected="true"] span { color: #ffc9df; }
.work-showcase :is(a, button, [tabindex]):focus-visible { outline: 2px solid #a91648; outline-offset: 3px; }
.work-panel { --field: #e2cfdf; --field-deep: #b27ca1; --work-ink: #201722; display: grid; grid-template-columns: minmax(255px, .62fr) minmax(0, 1.38fr); min-height: clamp(360px, 37.5vw, 555px); background: #222024; color: #fff; isolation: isolate; }
.work-panel--lavender { --field: #dfddfd; --field-deep: #9a92ea; }
.work-panel--ice { --field: #d8eff5; --field-deep: #88afbf; }
.work-panel--sage { --field: #e3e8d8; --field-deep: #a6b28a; }
.work-panel--blue { --field: #d3e4fb; --field-deep: #6594d6; }
.work-panel--lime { --field: #ebf5ca; --field-deep: #b2c568; }
.work-panel--orange { --field: #f1d2b7; --field-deep: #c48566; }
.work-panel--graphite { --field: #d1d4db; --field-deep: #8f98a8; }
.work-copy { align-self: center; padding: clamp(24px, 3.7vw, 63px); min-width: 0; container-type: inline-size; }
.work-kind { color: #ffc9df; }
.work-copy h2 { font-size: clamp(2.6rem, 4.5vw, 5.25rem); line-height: .96; letter-spacing: -.056em; margin: .25rem 0 1rem; overflow-wrap: anywhere; }
.work-panel--ice .work-copy h2 { font-size: clamp(1.45rem, 13.8cqw, 3.65rem); overflow-wrap: normal; }
.work-copy > p:not(.work-kind) { color: #e0dae0; max-width: 34ch; margin: 0 0 1.65rem; line-height: 1.52; }
.work-open { display: inline-flex; align-items: center; min-height: 46px; gap: .7rem; padding: .6rem .88rem; background: #f5f2ed; color: #211c21; font-weight: 750; }
.work-open:hover { background: #ffc9df; }
.work-visual, .work-video-frame { position: relative; min-width: 0; min-height: 100%; isolation: isolate; }
.work-visual { display: block; overflow: visible; background: radial-gradient(ellipse at 45% 55%, var(--field) 10%, var(--field-deep) 125%); color: var(--work-ink); }
.work-visual::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 79px, rgb(255 255 255 / .2) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgb(255 255 255 / .2) 79px 80px); pointer-events: none; }
.work-visual-index { position: absolute; left: 4%; bottom: 0; font-size: clamp(7rem, 16vw, 17rem); line-height: .85; letter-spacing: -.1em; color: rgb(255 255 255 / .29); font-weight: 750; }
.work-visual img { display: block; position: absolute; object-fit: contain; object-position: center; filter: drop-shadow(0 12px 18px rgb(31 22 35 / .24)); transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.work-front { width: 78%; height: 69%; top: 12%; left: 7%; }
.work-back { width: 27%; height: 74%; bottom: 7%; right: 6%; z-index: 2; }
.work-visual:hover .work-front { transform: translateY(-4px); }
.work-visual--studio .work-front { width: 74%; height: 76%; left: 6%; top: 9%; transform: rotate(-4deg); }
.work-visual--studio .work-back { width: 24%; height: 81%; bottom: 5%; right: 9%; transform: rotate(7deg); }
.work-visual--studio:hover .work-front { transform: translateY(-4px) rotate(-3deg); }
.work-visual--devices .work-front { width: 82%; height: 73%; }
.work-visual--devices .work-back { width: 20%; height: 72%; right: 7%; bottom: 10%; }
.work-visual--spread .work-front { left: 5%; top: 10%; width: 63%; height: 71%; }
.work-visual--spread .work-back { right: 6%; bottom: 7%; width: 47%; height: 65%; }
.work-visual--brand .work-front { left: 15%; top: 7%; width: 81%; height: 78%; z-index: 3; transform: rotate(4deg); }
.work-visual--brand .work-back { left: 4%; bottom: 5%; width: 48%; height: 51%; transform: rotate(-7deg); }
.work-visual--brand:hover .work-front { transform: translateY(-4px) rotate(3deg); }
.work-visual--detail .work-front { left: 10%; top: 12%; width: 86%; height: 77%; }
.work-visual--detail .work-back { left: 5%; bottom: 7%; width: 22%; height: 66%; }
.work-visual--story .work-front { left: 3%; top: 7%; width: 91%; height: 76%; }
.work-visual--story .work-back { right: 6%; bottom: 5%; width: 44%; height: 43%; transform: rotate(-4deg); }
.work-visual--motion .work-front { width: 73%; height: 74%; left: 8%; top: 11%; z-index: 3; }
.work-visual--motion .work-back { width: 54%; height: 62%; right: 5%; bottom: 7%; transform: rotate(5deg); }
.work-video-frame video { position: absolute; z-index: 4; width: 73%; height: 74%; left: 8%; top: 11%; object-fit: contain; pointer-events: none; opacity: 0; transition: opacity .25s; }
.work-video-frame video.is-playing { opacity: 1; }
.work-motion { position: absolute; z-index: 6; left: 9%; bottom: 9%; min-height: 42px; padding: .5rem .72rem; background: #232024; color: #fff; border: 1px solid #fff8; font: 700 .78rem var(--font-main, sans-serif); cursor: pointer; }
.work-visual-link { position: absolute; z-index: 5; top: 5%; right: 4%; display: grid; place-items: center; width: 41px; height: 41px; background: #f7f4ef; color: #211e21; font-size: 1.38rem; }
.work-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.5rem; margin: 1.25rem 0 0; }
.work-foot a { font-weight: 700; text-underline-offset: .22em; text-decoration: underline; }
.work-directory { margin-block: clamp(56px, 8vw, 108px); scroll-margin-top: 90px; }
.work-directory-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: 1rem 3rem; align-items: end; margin-bottom: 1.45rem; }
.work-directory-head h2 { margin: 0; font-size: clamp(2.55rem, 5vw, 5.1rem); line-height: .98; letter-spacing: -.05em; }
.work-directory-head p { color: #525252; max-width: 45ch; margin: 0; line-height: 1.5; }
.work-directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem clamp(16px, 2vw, 34px); }
.work-directory-card { --card-wash: #eaf1f4; display: grid; align-content: start; min-width: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--site-edge); color: inherit; }
.work-directory-card[data-review-card~="seo"] { --card-wash: #eee7f8; }
.work-directory-card[data-review-card~="merch"] { --card-wash: #f8e9e6; }
.work-directory-card[data-review-card~="concept"] { --card-wash: #eaf0dd; }
.work-directory-card:hover h3 { text-decoration: underline; text-underline-offset: .17em; }
.work-directory-card figure { display: grid; align-items: center; aspect-ratio: 16 / 10; margin: 0 0 .85rem; padding: 7px; background: var(--site-grid), var(--card-wash); background-size: var(--site-grid-size) var(--site-grid-size); }
.work-directory-card img { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 10; object-fit: contain; object-position: center; }
.work-directory-card h3 { font-size: clamp(1.3rem, 2vw, 1.78rem); line-height: 1.1; letter-spacing: -.032em; margin: .2rem 0 .5rem; overflow-wrap: anywhere; }
.work-directory-card span { color: #5d4352; font-size: .75rem; font-weight: 750; letter-spacing: .035em; }
.work-directory-card p { font-size: .91rem; color: #545252; margin: 0; }
.work-directory-card[hidden] { display: none; }
.journal-front { --site-hover-ink: #8e2450; display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); align-items: center; gap: clamp(18px, 4vw, 62px); border-block: 1px solid var(--site-edge); }
.journal-front .journal-intro { align-self: center; padding-block: clamp(24px, 4vw, 66px); min-width: 0; }
.journal-front .journal-intro h1 { font-size: clamp(2.5rem, 4.85vw, 5.4rem); line-height: .96; letter-spacing: -.06em; overflow-wrap: normal; }
.journal-front .journal-intro p:not(.journal-kicker) { color: #4c4650; font-size: clamp(1rem,1.6vw,1.25rem); }
.journal-front .button-primary { background: #29232a; color: #fffefa; }
.journal-front-visual { position: relative; isolation: isolate; margin: 0; min-height: clamp(300px, 35vw, 526px); }
.journal-front-visual > a { display: block; position: absolute; inset: 0; }
.journal-front-field { position: absolute; inset: 14% 5% 12% 12%; background: var(--site-grid), radial-gradient(ellipse at 70% 10%, #ddd0f4, #b9b2e5 90%); background-size: var(--site-grid-size) var(--site-grid-size), auto; }
.journal-front-visual img { position: absolute; height: auto; object-fit: contain; border: 1px solid #e0d5ed; background: #fff; box-shadow: 0 12px 24px #2b1b3a29; }
.journal-front-primary { width: 68%; top: 18%; left: 5%; transform: rotate(-6deg); }
.journal-front-secondary { width: 53%; right: 5%; bottom: 12%; transform: rotate(8deg); }
.journal-front-mark { position: absolute; top: 8%; right: 8%; padding: .32rem .52rem; background: #29232a; color: #fffefa; font: 730 .72rem var(--font-mono, monospace); letter-spacing: .07em; }
.editorial-cover { margin: 0; min-width: 0; }
.editorial-cover > a { display: block; }
.editorial-cover-media { position: relative; isolation: isolate; overflow: visible; aspect-ratio: 1200 / 760; background: #302936; }
.editorial-cover-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.editorial-cover figcaption { color: var(--j-muted); font-size: .85rem; line-height: 1.45; padding-top: .65rem; }
.editorial-cover-trace { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .75; background: linear-gradient(114deg, transparent 35%, rgb(255 255 255 / .19) 48%, transparent 54%) -145% center / 62% 100% no-repeat; transition: background-position .85s cubic-bezier(.2,.7,.2,1); }
.journal-article-head .editorial-cover:hover .editorial-cover-trace, .journal-grid a:hover .editorial-cover-trace, .home-journal-cards a:hover .editorial-cover-trace { background-position: 245% center; }
.home-journal-cards a { display: block; }
.home-journal-cards .editorial-cover-media { margin-bottom: .75rem; }
.journal-grid .editorial-cover-media img { aspect-ratio: auto; }
.journal-article-head .editorial-cover-media { outline: 1px solid rgb(30 22 28 / .1); }
.journal-page .journal-intro > a { margin-top: .9rem; }
.journal-component-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 1.5rem; }
.journal-component-media { background: var(--site-grid), #eee9f4; background-size: var(--site-grid-size) var(--site-grid-size); }
.journal-component-media img { height: auto; object-fit: contain; background: transparent; }
.journal-library-head { display: grid; grid-template-columns: 1fr minmax(220px,.55fr); align-items: end; gap: 1.3rem 3rem; margin-bottom: 2rem; }
.journal-library-head > p { margin: 0 0 1.15rem; color: #59535c; }
.journal-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.journal-library-item { display: flex; min-width: 0; }
.journal-library-card { display: block; width: 100%; background: var(--site-paper-raised); border: 1px solid var(--site-edge); }
.journal-library-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #eee8f2; }
.journal-library-card > div { position: relative; padding: .95rem 2.4rem 1rem 1rem; }
.journal-library-card .journal-kicker { margin-bottom: .4rem; }
.journal-library-card h3 { font-size: clamp(1.07rem, 1.5vw, 1.5rem); line-height: 1.15; overflow-wrap: anywhere; }
.library-arrow { position: absolute; right: 1rem; top: .85rem; color: #8e2450; }
.journal-library-pages { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 1.3rem; }
.journal-library-pages button { min-width: 44px; min-height: 44px; padding: .42rem .68rem; background: var(--site-paper-raised); border: 1px solid var(--site-edge); cursor: pointer; }
.journal-library-pages button[aria-current="page"] { background: #29232a; color: #fff; }
.journal-library-pages[hidden], .journal-library-item[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .journal-front-visual img { transition: transform .4s var(--ease); }
  .journal-front-visual a:is(:hover, :focus-visible) .journal-front-primary { transform: translate(-2%, -3%) rotate(-4deg); }
  .journal-front-visual a:is(:hover, :focus-visible) .journal-front-secondary { transform: translate(3%, 1%) rotate(6deg); }
}

@media (min-width: 881px) {
  .journal-catalog:has([data-value="all"][aria-pressed="true"]) .journal-grid li:last-child { grid-column: 1 / -1; }
  .journal-catalog:has([data-value="all"][aria-pressed="true"]) .journal-grid li:last-child a {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: center; gap: clamp(25px,5vw,82px);
  }
  .journal-catalog:has([data-value="all"][aria-pressed="true"]) .journal-grid li:last-child h3 { font-size: clamp(1.8rem,3.2vw,3.25rem); max-width: 17ch; }
  .journal-card-copy p:not(.journal-kicker) { max-width: 52ch; }
}
@media (max-width: 970px) {
  .work-panel { grid-template-columns: minmax(225px, .66fr) minmax(0, 1.34fr); }
  .work-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .journal-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .work-showcase { padding-top: 80px; }
  .work-heading, .work-directory-head, .journal-front { grid-template-columns: minmax(0,1fr); }
  .work-heading { margin-bottom: 16px; }
  .work-heading h1 { max-width: 12ch; }
  .work-heading > p { max-width: 35ch; }
  .work-tabs { margin-right: -18px; padding-right: 18px; }
  .work-tabs button { flex: 0 0 auto; }
  .work-panel { grid-template-columns: minmax(0,1fr); }
  .work-visual, .work-video-frame { grid-row: 1; min-height: 0; aspect-ratio: 1.56; }
  .work-copy { padding: 1.05rem 1.2rem; }
  .work-copy h2 { margin-bottom: .62rem; }
  .work-copy > p:not(.work-kind) { margin-bottom: .9rem; }
  .work-directory-grid { grid-template-columns: minmax(0,1fr); }
  .journal-front-visual { min-height: 0; aspect-ratio: 1.28; }
  .journal-front .journal-intro { padding-block: 1.35rem 0; }
  .journal-front .journal-intro h1 { font-size: clamp(2.14rem, 10.5vw, 3.9rem); }
  .journal-library-head { grid-template-columns: minmax(0,1fr); gap: .25rem; }
}
@media (max-width: 540px) {
  .journal-library-grid, .journal-component-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .work-visual img, .work-video-frame video, .editorial-cover-trace { animation: none !important; transition: none !important; }
}