@media (min-width: 1024px) and (max-width: 1199px) { .nav-link { padding-inline: var(--space-3); } }
/* ================= WORKS PAGE ================= */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.kicker { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.kicker::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); border: var(--border-thin) solid var(--color-border-strong); background: var(--k, var(--color-candy-pink)); }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-links .nav-link { font-weight: var(--weight-semibold); }
@media (max-width: 1023px) { .navbar-inner .btn-wa-nav { display: inline-flex; padding-inline: var(--space-3); } .wa-label { display: none; } }

/* Page head */
.works-head { padding: var(--space-16) 0 var(--space-12); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-10); align-items: end; }
.works-head h1 { margin: var(--space-4) 0 0; font-size: 90px; font-weight: var(--weight-bold); line-height: 1; letter-spacing: -0.02em; }
.works-head p { margin: 0; font-size: var(--text-body-lg); color: var(--color-text-secondary); max-width: 36ch; }
.works-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-block: var(--border-base) solid var(--color-border-strong); }
.chip .count { margin-left: var(--space-1); opacity: .6; font-variant-numeric: tabular-nums; }
.result-note { font-size: var(--text-body-sm); color: var(--color-text-muted); }

/* ===== Work cards: bento + sticker posters ===== */
.works-grid { list-style: none; margin: 0; padding: var(--space-16) 0 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-10) var(--space-8); }
.wc { grid-column: span 12; perspective: 1400px; }
.wc[hidden] { display: none; }
.wc.w-5 { grid-column: span 5; } .wc.w-7 { grid-column: span 7; }
.wc.solo { grid-column: span 12; }
.wc-card { position: relative; display: block; height: 100%; min-height: 600px; color: inherit; text-decoration: none; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--m); box-shadow: var(--shadow-sticker-md);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-calm), box-shadow var(--dur-base) var(--ease-spring); }
.wc-card:hover, .wc-card:focus-visible { box-shadow: var(--shadow-sticker-lg); }
.wc-card.is-tilting { transition: box-shadow var(--dur-base) var(--ease-spring); }
.wc-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.wc-clip::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--ms) 1.5px, transparent 1.6px); background-size: 22px 22px; opacity: .35; }
.wc-mark { position: absolute; left: -1.5%; bottom: -4%; margin: 0; font-size: clamp(110px, 17vw, 260px); font-weight: var(--weight-bold); line-height: .8; letter-spacing: -0.06em; color: var(--ms); white-space: nowrap; pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -10px), 0); transition: transform var(--dur-slow) var(--ease-calm); }
.wc-visual { display: block; position: absolute; pointer-events: none; transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 16px), 60px) rotate(var(--vr, 0deg)); transition: transform var(--dur-slow) var(--ease-calm); }
.wc-card.is-tilting .wc-mark, .wc-card.is-tilting .wc-visual { transition: none; }
.wc-num { position: absolute; left: var(--space-6); top: var(--space-6); z-index: 3; width: 56px; height: 56px; display: grid; place-items: center; font-weight: var(--weight-bold); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg-surface); font-variant-numeric: tabular-nums; transform: translateZ(90px); }
.wc-sticker { position: absolute; z-index: 3; padding: var(--space-2) var(--space-4); font-size: var(--text-body-sm); font-weight: var(--weight-bold); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--sb, var(--color-bg-surface)); box-shadow: var(--shadow-sticker-sm); transform: translateZ(90px) rotate(var(--r, -6deg)); transition: transform var(--dur-base) var(--ease-spring); }
.wc-card:hover .wc-sticker { transform: translateZ(90px) rotate(calc(var(--r, -6deg) * -1)) scale(1.06); }
.wc-info { display: grid; position: absolute; z-index: 4; left: var(--space-6); bottom: var(--space-6); width: min(440px, calc(100% - var(--space-12))); display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--color-bg-surface); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); transform: translateZ(80px); }
.wc-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.wc-name { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.wc-title { margin: 0; font-size: var(--text-heading-lg); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.wc-desc { margin: 0; color: var(--color-text-secondary); }
.wc-go { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-pill); border: var(--border-base) solid var(--color-border-strong); background: var(--m); transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-fast) var(--ease-calm); }
.wc-card:hover .wc-go { transform: rotate(-45deg); background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.wc-go svg { width: 20px; height: 20px; }
.placeholder { outline: var(--border-thin) dashed var(--color-text-muted); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Card 1 — Kopernesia: info + visual side by side, everything stays inside the card */
.wc.lay-wide .wc-card { min-height: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: stretch; padding: var(--space-8); }
.wc.lay-wide .wc-info { position: relative; left: auto; bottom: auto; width: auto; grid-column: 1; grid-row: 1; align-content: space-between; grid-template-rows: auto 1fr auto; transform: translateZ(50px); }
.wc.lay-wide .wc-title { align-self: end; }
.wc.lay-wide .wc-visual { position: relative; right: auto; top: auto; width: auto; grid-column: 2; grid-row: 1; display: flex; transform: translateZ(50px); }
.wc.lay-wide .browser { display: flex; flex-direction: column; width: 100%; }
.wc.lay-wide .browser-view { flex: 1; aspect-ratio: auto; min-height: 340px; }
.wc.lay-wide .browser-view img { object-position: 40% 55%; transform: scale(1.14); }
.wc.lay-wide .wc-mark { bottom: -6%; }
.wc.lay-wide .wc-sticker { align-self: start; justify-self: start; height: auto; }
.wc.lay-wide .wc-num { align-self: start; justify-self: start; }
.wc.lay-wide .wc-num { left: var(--space-6); top: var(--space-4); transform: translateZ(55px); }
.wc.lay-wide .wc-sticker { transform: translateZ(55px) rotate(var(--r, -6deg)); }
.wc.lay-wide .wc-card:hover .wc-sticker { transform: translateZ(55px) rotate(calc(var(--r, -6deg) * -1)) scale(1.04); }
.wc.lay-wide .s1 { left: auto; margin-top: calc(var(--space-3) * -1); right: 34%; top: var(--space-8); bottom: auto; --r: -5deg; --sb: var(--color-candy-lemon); }
.wc.lay-wide .s2 { left: auto; margin-top: calc(var(--space-3) * -1); right: 22%; top: var(--space-8); bottom: auto; --r: 4deg; --sb: var(--color-candy-mint); }
.wc.lay-wide .s3 { left: auto; margin-top: calc(var(--space-3) * -1); right: var(--space-10); top: var(--space-8); bottom: auto; --r: -3deg; }
.browser, .browser-bar, .browser-view { display: block; }
.browser-bar { display: flex; }
.browser { border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-surface); overflow: hidden; box-shadow: var(--shadow-sticker-lg); }
.browser-bar { display: flex; gap: 6px; padding: var(--space-3) var(--space-4); border-bottom: var(--border-base) solid var(--color-border-strong); }
.browser-bar i { width: 12px; height: 12px; border-radius: var(--radius-pill); border: var(--border-thin) solid var(--color-border-strong); }
.browser-view { aspect-ratio: 16 / 10.4; overflow: hidden; }
.browser-view img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; transform: scale(1.08); display: block; }

/* Card 2 — Piku: tall, phone pops out of the top */
.wc.lay-portrait .wc-card { min-height: 720px; }
.wc.lay-portrait .wc-visual { left: 50%; top: 5%; height: 58%; margin-left: -24%; --vr: -4deg; }
.wc.lay-portrait .wc-visual img { height: 100%; width: auto; display: block; filter: drop-shadow(6px 6px 0 var(--color-border-strong)); }
.wc.lay-portrait .wc-mark { font-size: clamp(110px, 12vw, 200px); bottom: auto; top: 44%; left: 50%; translate: -50% 0; }
.wc.lay-portrait .wc-info { left: var(--space-5); right: var(--space-5); width: auto; bottom: var(--space-5); }
.wc.lay-portrait .s1 { left: 6%; top: 34%; --r: -10deg; --sb: var(--color-candy-lemon); }
.wc.lay-portrait .s2 { right: 5%; top: 22%; --r: 8deg; --sb: var(--color-candy-pink); }

/* Card 3 — JBA: fanned phones */
.wc.lay-phones .wc-card { min-height: 720px; }
.wc.lay-phones .wc-visual { left: 0; right: 0; top: 12%; display: flex; justify-content: center; }
.fan { display: block; position: relative; width: 70%; height: 380px; }
.fan span { position: absolute; top: 0; left: 50%; width: 42%; aspect-ratio: 9 / 18; margin-left: -21%; background: var(--color-bg-surface); border: var(--border-thick) solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-md); display: grid; align-content: start; gap: var(--space-3); padding: var(--space-8) var(--space-4); transform-origin: 50% 110%; transition: transform var(--dur-slow) var(--ease-spring); }
.fan span:nth-child(1) { transform: rotate(-14deg) translateX(-18%); background: var(--color-candy-lemon-soft); }
.fan span:nth-child(3) { transform: rotate(14deg) translateX(18%); background: var(--color-candy-pink-soft); }
.fan span:nth-child(2) { z-index: 1; }
.wc-card:hover .fan span:nth-child(1) { transform: rotate(-22deg) translateX(-30%); }
.wc-card:hover .fan span:nth-child(3) { transform: rotate(22deg) translateX(30%); }
.fan b { display: block; height: 12px; border-radius: var(--radius-pill); background: var(--color-bg-inverse); }
.fan b.s { width: 60%; opacity: .3; height: 9px; }
.fan i { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-candy-lilac-soft); }
.wc.lay-phones .wc-mark { bottom: auto; top: 4%; right: -2%; left: auto; }
.wc.lay-phones .wc-info { left: auto; right: var(--space-6); }
.wc.lay-phones .s1 { left: 6%; top: 40%; --r: -8deg; --sb: var(--color-candy-mint); }

/* Cursor "View" bubble */
.view-bubble { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); width: 104px; height: 104px; margin: -52px 0 0 -52px; display: grid; place-items: center; text-align: center; font-size: var(--text-body-sm); font-weight: var(--weight-bold); line-height: 1.1; background: var(--color-candy-lemon); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-pill); box-shadow: var(--shadow-sticker-sm); pointer-events: none; opacity: 0; scale: .3; transition: opacity var(--dur-fast) var(--ease-calm), scale var(--dur-base) var(--ease-spring); }
.view-bubble.is-on { opacity: 1; scale: 1; }

/* CTA band */
.cta-band { margin-top: var(--space-24); padding: var(--space-16) var(--space-10); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-candy-pink-soft); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; box-shadow: var(--shadow-sticker-lg); }
.cta-band h2 { margin: 0; font-size: var(--text-display-lg); line-height: 1; letter-spacing: -0.035em; }
.cta-band p { margin: var(--space-3) 0 0; font-size: var(--text-body-lg); color: var(--color-text-secondary); }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Footer (same as home) */
.home-footer { margin-top: var(--space-24); }
.brand-big { font-size: clamp(52px, 14vw, 220px); font-weight: var(--weight-bold); letter-spacing: -0.06em; line-height: .85; margin: 0; }
.brand-big sup { font-size: .22em; vertical-align: top; position: relative; top: .5em; letter-spacing: 0; }
.footer-tag { font-size: var(--text-heading-lg); font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin: var(--space-6) 0 0; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-16); padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-text-inverse); font-size: var(--text-body-sm); }
.footer-row ul { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.footer-row a { color: inherit; opacity: .85; text-decoration: none; } .footer-row a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1023px) {
  .works-head { grid-template-columns: 1fr; gap: var(--space-6); }
  .works-head h1 { font-size: 72px; }
  .wc.w-5, .wc.w-7 { grid-column: span 12; }
  .wc.lay-portrait .wc-visual { height: 60%; }
  .wc.lay-wide .wc-card { grid-template-columns: minmax(0, 1fr); }
  .wc.lay-wide .wc-info, .wc.lay-wide .wc-visual { grid-column: 1; grid-row: auto; }
  .wc.lay-wide .wc-visual { order: -1; }
  .cta-band { grid-template-columns: 1fr; padding: var(--space-10) var(--space-6); }
}
@media (max-width: 767px) {
  .wrap { padding: 0 var(--space-4); }
  .works-head { padding-top: var(--space-10); }
  .works-head h1 { font-size: clamp(44px, 13vw, 60px); }
  .works-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-top: var(--space-12); }
  .wc, .wc.w-5, .wc.w-7, .wc.solo { grid-column: auto; }
  .wc-card, .wc.lay-wide .wc-card, .wc.lay-portrait .wc-card, .wc.lay-phones .wc-card { min-height: 0; display: flex; flex-direction: column; }
  .wc-visual, .wc.lay-wide .wc-visual, .wc.lay-portrait .wc-visual, .wc.lay-phones .wc-visual { position: relative; left: auto; right: auto; top: auto; margin: -8% auto 0; transform: rotate(var(--vr, 0deg)); }
  .wc.lay-wide .wc-card { padding: 0; }
  .wc.lay-wide .wc-visual { width: auto; margin: var(--space-5) var(--space-5) 0; }
  .wc.lay-wide .browser-view { min-height: 0; aspect-ratio: 16 / 10.4; }
  .wc.lay-portrait .wc-visual { height: 340px; margin-left: auto; }
  .fan { width: 88%; height: 300px; margin-top: var(--space-12); }
  .wc.lay-phones .wc-visual { margin-top: 0; width: 100%; }
  .wc-info, .wc.lay-portrait .wc-info, .wc.lay-phones .wc-info { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: var(--space-5); transform: none; }
  .wc-mark { font-size: 120px; }
  .wc-sticker { display: none; }
  .wc-num, .wc.lay-wide .wc-num { transform: none; top: var(--space-4); left: var(--space-4); }
  .wc-title { font-size: var(--text-heading-md); }
}

/* Extra sticker slots so every layout can take up to three (CMS) */
.wc.lay-portrait .s3 { right: 8%; top: 50%; --r: -6deg; --sb: var(--color-candy-lilac); }
.wc.lay-phones .s2 { right: 6%; top: 28%; --r: 7deg; --sb: var(--color-candy-lemon); }
.wc.lay-phones .s3 { left: 10%; top: 62%; --r: 5deg; --sb: var(--color-candy-pink); }

/* Layout "cover": landscape image filling the top of the card, tucked under the text box */
.wc.lay-cover .wc-card { min-height: 720px; display: flex; flex-direction: column; padding: var(--space-5); }
.wc.lay-cover .wc-visual { position: relative; left: auto; right: auto; top: auto; flex: 1 1 auto; min-height: 320px; margin: 0; overflow: hidden; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-inverse); --vr: 0deg; }
.wc.lay-cover .wc-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform var(--dur-slow) var(--ease-calm); }
.wc.lay-cover .wc-card:hover .wc-visual img { transform: scale(1.04); }
.wc.lay-cover .wc-info { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin-top: calc(var(--space-12) * -1); }
.wc.lay-cover .wc-num { left: var(--space-3); top: var(--space-3); }
.wc.lay-cover .s1 { left: 3%; top: 40%; --r: -8deg; --sb: var(--color-candy-lemon); }
.wc.lay-cover .s2 { right: 3%; top: 26%; --r: 7deg; --sb: var(--color-candy-pink); }
.wc.lay-cover .s3 { right: 10%; top: 52%; --r: -5deg; --sb: var(--color-candy-lilac); }
@media (max-width: 767px) {
  .wc.lay-cover .wc-card { min-height: 0; padding: var(--space-4); }
  .wc.lay-cover .wc-visual { flex: none; min-height: 0; aspect-ratio: 16 / 10; margin: 0; transform: none; }
  .wc.lay-cover .wc-info { margin: calc(var(--space-8) * -1) 0 0; }
}