.detail-page header{height:80px}.back-link{display:flex;gap:8px;align-items:center;font-size:10px;letter-spacing:.4px;min-height:44px}.back-link>span{font-size:24px}.detail-page .wordmark{font-size:34px;letter-spacing:-3px}.detail-page .wordmark span{font-size:11px}.project-no{font-size:11px;color:var(--muted)}.project-intro{padding-top:31px}.project-intro h1{font-size:clamp(67px,20vw,106px);line-height:.91;letter-spacing:-5px;font-weight:600;margin:25px 0}.project-subtitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.project-subtitle p{font-size:14px;line-height:1.7;letter-spacing:-.3px}.project-subtitle>span{font-size:38px;color:var(--ink)}.cover{position:relative;aspect-ratio:1.02;margin:0 -24px;background:#101114;overflow:hidden}.cover img{height:100%;object-position:64% center}.cover>span{position:absolute;bottom:18px;left:24px;font-size:8px;letter-spacing:1.5px;color:white}.facts{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:10px;border-bottom:1px solid var(--line);margin:0;padding:24px 0}.facts dt{font-size:11px;color:var(--muted);margin-bottom:9px}.facts dd{font-size:13px;line-height:1.5;margin:0}.story-section{padding:45px 0}.chapter{display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.5px;color:var(--muted);margin-bottom:25px}.story-section h2{font-size:clamp(27px,7.6vw,40px);line-height:1.3;letter-spacing:-1.5px;font-weight:600;margin-bottom:20px}.story-section h2 em{font-style:normal;color:inherit}.story-section>p{font-size:14px;line-height:1.95;letter-spacing:-.25px;color:#646464;word-break:keep-all;overflow-wrap:break-word}.scope{display:flex;flex-wrap:wrap;gap:6px;margin:23px 0 30px}.scope span{font-size:9px;border:1px solid var(--line);border-radius:25px;padding:7px 10px}figure{margin:0}.lifestyle{background:white;padding:15px 10px 0}.lifestyle img{height:auto;object-fit:contain}.lifestyle figcaption{font-size:8px;letter-spacing:.7px;color:var(--muted);padding:16px 5px;border-top:1px solid #eaeaea}.direction{padding-top:5px}.direction>p{margin-bottom:23px}.direction-row{display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);padding:20px 0}.swatch{width:39px;height:47px;border-radius:2px;flex-shrink:0}.purple{background:#8b67b5}.bronze{background:#b58a78}.pop{background:linear-gradient(135deg,#d4e59b 50%,#c6b4e0 50%)}.direction-row h3{font-size:19px;letter-spacing:-.5px;font-weight:600}.direction-row p{font-size:11px;color:var(--muted);line-height:1.7;margin-top:5px}.direction-number{margin-left:auto;font-size:10px;color:var(--muted)}.edge-figure{margin:0 -24px;background:#e3e3e3;padding:30px 12px 0}.edge-figure img{height:auto}.edge-figure figcaption{padding:20px 12px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.5px}.gallery-heading{display:flex;justify-content:space-between;align-items:center;margin:27px 0 14px}.gallery-heading>span{font-size:9px;letter-spacing:.7px}.gallery-heading>div{display:flex;gap:5px}.gallery-heading button{width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:50%;font-size:22px;cursor:pointer}.gallery-heading button:disabled{opacity:.3;cursor:default}.gallery-heading button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.screen-gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:3px}.screen-gallery::-webkit-scrollbar{display:none}.screen-gallery figure{flex:0 0 85%;scroll-snap-align:start}.screen-gallery img{width:100%;height:auto;border:1px solid #dcdcdc;border-radius:4px}.screen-gallery figcaption{font-size:9px;letter-spacing:.4px;display:flex;gap:12px;padding:15px 0}.screen-gallery figcaption>span{color:var(--muted)}.gallery-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;color:var(--muted)}.closing{border-top:1px solid var(--line);padding-top:30px}.original-link{display:flex;justify-content:space-between;align-items:center;margin-top:25px;border-bottom:1px solid #a4a4a4;padding:14px 0;font-size:12px;min-height:44px}.original-link span{font-size:21px}.return-work{display:block;background:var(--accent);padding:28px 24px;margin:0 -24px}.return-work>span{font-size:9px;letter-spacing:1px}.return-work strong{display:block;font-size:33px;font-weight:600;line-height:1.2;letter-spacing:-1.3px;margin-top:22px;position:relative}.return-work strong span{position:absolute;right:0;bottom:0;font-size:38px}.detail-nav a{min-width:57px;padding:0 15px}.detail-page footer{padding-top:27px}@media(min-width:700px){.cover,.edge-figure,.return-work{margin-left:-36px;margin-right:-36px}.cover{aspect-ratio:1.25}.return-work{padding:32px 36px}}@media(max-width:350px){.cover,.edge-figure,.return-work{margin-left:-18px;margin-right:-18px}.chapter{font-size:8px}.facts dd{font-size:12px}.direction-row{gap:10px}.direction-row p{font-size:10px}.detail-nav a{padding:0 12px;min-width:51px}}

/* Keep project labels and reading text comfortably legible. */
.back-link,.project-no,.project-subtitle p,.facts dt,.facts dd,.chapter,.story-section>p,.scope span,.direction-row p,.gallery-heading>span,.gallery-foot,.screen-gallery figcaption,.original-link,.return-work>span{font-weight:600}
.story-section h2{font-size:clamp(28px,7.8vw,41px)}
.detail-nav a:last-child{font-size:13px}

/* Extra-bold project titles. */
.project-intro h1,.project-intro h1 .serif,.story-section h2,.direction-row h3,.return-work strong{font-weight:800}

/* Photo swatches for projects whose "direction" is a set of initiatives
   rather than a color story (e.g. samsung-promotion.html, rounz.html) —
   same box as .purple/.bronze/.pop, a photo instead of a flat/gradient fill. */
.swatch.thumb{background-size:cover;background-position:center}

/* .direction-row.photo: the same row, restacked so the photo reads as a
   card image instead of a small icon — actual screenshots carry content
   worth seeing, unlike the flat/gradient color chips above. Title+number
   share a line under the image so the number doesn't strand itself at
   the row's far edge once the layout goes vertical. */
.direction-row.photo{flex-direction:column;align-items:stretch;gap:16px}
.direction-row.photo .swatch.thumb{width:100%;height:200px;border-radius:6px}
.direction-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.direction-row.photo .direction-number{margin-left:0}
@media(min-width:700px){
  .direction-row.photo .swatch.thumb{height:280px}
}

/* Big single-number payoff (rounz.html's App Store rating) inside a
   .direction section, after its rows. */
.result-stat{text-align:center;border-top:1px solid var(--line);padding-top:30px;margin-top:5px}
.result-num{display:block;font-size:56px;font-weight:800;letter-spacing:-2px;line-height:1;margin-bottom:12px}
.result-stat p{font-size:11px;color:var(--muted);max-width:260px;margin:0 auto;line-height:1.7}

/* A single continuous wide image (ROUNZ's marquee banners aren't discrete
   slides like .screen-gallery) shown at readable height and left to the
   viewer to swipe across horizontally, echoing .screen-gallery's gesture
   without needing prev/next buttons on a single frame. */
.wide-label{display:block;font-size:9px;letter-spacing:.7px;color:var(--muted);margin:0 0 14px}
.wide-scroll{margin:0 0 45px}
.wide-scroll-track{display:flex;margin:0 -24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wide-scroll-track img{display:block;flex:0 0 auto;height:220px;width:auto;max-width:none;margin-left:24px}
.wide-scroll-track img:last-child{margin-right:24px}
@media(min-width:700px){
  .wide-scroll-track{margin-left:-36px;margin-right:-36px}
  .wide-scroll-track img{height:280px;margin-left:36px}
  .wide-scroll-track img:last-child{margin-right:36px}
}

/* Tall portrait banners (SKT newsletter/promo strip) need more height than
   the default wide-marquee crop to stay legible, and read better packed
   tighter together than the single-hero wide-scroll spacing. */
.wide-scroll.tall .wide-scroll-track{gap:6px}
.wide-scroll.tall .wide-scroll-track img{height:480px;margin-left:0}
.wide-scroll.tall .wide-scroll-track img:first-child{margin-left:24px}
@media(min-width:700px){
  .wide-scroll.tall .wide-scroll-track img{height:560px}
  .wide-scroll.tall .wide-scroll-track img:first-child{margin-left:36px}
}


.lifestyle.dark{background:#181818;border-radius:8px;overflow:hidden}
.lifestyle.dark figcaption{color:#9a9a9a;border-top-color:#333}
.direction-row.photo.split .split-figures{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.direction-row.photo.split .split-figures figure:first-child{grid-column:1/-1}
.direction-row.photo.split .split-figures figure{background:#181818;border-radius:8px;overflow:hidden;padding:16px 14px;display:flex;flex-direction:column;justify-content:center}
.direction-row.photo.split .split-figures img{width:100%;height:auto;display:block}

/* etc-01~06.png are transparent-background device mockups — without a
   backing fill they read as floating on the page's off-white paper. */
#etc .swatch.thumb{background-size:contain;background-repeat:no-repeat;aspect-ratio:921/552;height:auto}

/* Full-bleed variant of .edge-figure: image runs edge-to-edge with no
   padding gap or background frame. */
.edge-figure.flush{padding:0;background:none}
.edge-figure.flush figcaption{padding:16px 24px}
@media(min-width:700px){
  .edge-figure.flush figcaption{padding:16px 36px}
}

/* Full-Korean-sentence hero titles (vs. the site's usual 1-2 word titles)
   need a smaller scale to stay to two lines instead of wrapping to four. */
.project-intro h1.long{font-size:clamp(36px,10vw,58px);line-height:1.15;letter-spacing:-2px}