:root{
  --ink:#292929;
  --surface:#f7f7f4;
  --image:#e0e0e0;
  --border:#bfbfbf;
  --muted:#9a9a9a;
  --text:#ffffff;
  --max:1312px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.page{min-height:100vh;background:var(--ink)}
.annotation{background:#fff;color:#737373;padding:20px;font-size:13px;border-bottom:1px solid #ddd}
.nav{height:88px;display:grid;grid-template-columns:1.35fr .9fr auto auto auto auto;gap:24px;align-items:center;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;background:rgba(41,41,41,.96);backdrop-filter:blur(10px);z-index:20}
.brand{font-size:24px;font-weight:800;letter-spacing:-.03em}
.nav-meta,.nav-link{font-family:ui-monospace,monospace;font-size:12px;color:#e0e0e0;white-space:nowrap}
.nav-link{font-size:13px;color:#fff}
.pill{border:1px solid var(--border);border-radius:999px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;min-height:42px;font-family:ui-monospace,monospace;font-size:12px}
.pill.light{background:#e0e0e0;color:var(--ink);border-color:#e0e0e0}
.pill.white{background:#fff;color:var(--ink);border-color:#fff}
.wrap{width:min(var(--max),calc(100% - 128px));margin:0 auto}
.hero{padding:64px 0 72px;min-height:790px}
.hero-meta{display:grid;grid-template-columns:1.2fr 1fr .6fr;gap:40px;color:#e0e0e0;font-size:13px;margin-bottom:32px}
.hero-title{font-size:clamp(110px,14.7vw,210px);line-height:.86;margin:0;font-weight:900;letter-spacing:-.075em}
.hero-title.right{text-align:right}
.hero-bottom{display:grid;grid-template-columns:1fr 1fr auto;gap:64px;margin-top:40px;align-items:start}
.hero-copy{font-size:22px;line-height:1.45;max-width:470px}
.small-note{font-size:13px;line-height:1.45;color:#e0e0e0}
.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:26px 0;font-size:46px;white-space:nowrap}
.section{padding:64px 0}
.section-label{font-family:ui-monospace,monospace;color:#e0e0e0;font-size:13px;letter-spacing:.02em}
.selected-header{display:grid;grid-template-columns:1fr auto 220px;gap:28px;align-items:center;margin-bottom:32px}
.selected-layout{display:grid;grid-template-columns:1.65fr .95fr;gap:56px}
.work-row{border-top:1px solid var(--border);padding:24px 0;min-height:260px;display:flex;flex-direction:column;gap:18px;transition:.2s ease}
.work-row:hover{padding-left:14px}
.work-row h3{font-size:52px;letter-spacing:-.04em;margin:0;font-weight:700}
.work-preview{position:sticky;top:120px;align-self:start}
.image-box{background:var(--image);border:1px solid var(--border);border-radius:5px;color:#737373;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:ui-monospace,monospace;font-size:12px;min-height:280px}
.image-box.tall{height:650px}.image-box.hero-img{height:560px}.image-box.wide{height:560px}.image-box.portrait{height:720px}
.image-box small{display:block;margin-top:8px}
.gallery{display:flex;gap:24px;overflow:auto;padding-bottom:12px;scrollbar-color:#777 transparent}
.gallery-card{min-width:340px}.gallery-card .image-box{height:560px}.gallery-caption{margin-top:16px;font-size:12px;color:#e0e0e0}
.footer{padding:64px 0 84px}
.footer h2{font-size:clamp(90px,13vw,180px);margin:26px 0 34px;letter-spacing:-.06em}
.footer-email{font-size:24px;margin-bottom:32px}
.footer-row{display:flex;gap:36px;align-items:center;flex-wrap:wrap;font-family:ui-monospace,monospace;font-size:12px;color:#e0e0e0}
.footer-spacer{flex:1}

/* Work */
.work-hero{padding:90px 0 20px}
.work-title{font-size:clamp(120px,16vw,230px);line-height:.8;letter-spacing:-.075em;margin:0;font-weight:900;position:relative;display:inline-block}
.work-count{position:absolute;right:-36px;top:-10px;font-family:ui-monospace,monospace;font-size:14px;font-weight:400;letter-spacing:0}
.view-controls{display:flex;justify-content:flex-end;gap:12px;margin:20px 0 26px}
.view-controls .pill{min-width:132px}
.list-head,.list-item{display:grid;grid-template-columns:44px 2.25fr 1fr 1fr 72px;gap:22px;align-items:center}
.list-head{font-family:ui-monospace,monospace;color:#e0e0e0;font-size:11px;padding:16px 0 34px}
.list-item{border-top:1px solid var(--border);min-height:150px;padding:22px 0}
.list-item .num,.list-item .type,.list-item .role,.list-item .year{font-family:ui-monospace,monospace;font-size:11px}
.list-item h3{font-size:44px;letter-spacing:-.035em;margin:0}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 26px;margin-top:16px}
.grid-card .image-box{height:520px}.grid-card h3{font-size:29px;margin:16px 0 8px;display:flex;justify-content:space-between;gap:20px}.grid-card h3 span:last-child{font-family:ui-monospace,monospace;font-size:11px;font-weight:400;margin-top:9px}.grid-card p{font-family:ui-monospace,monospace;font-size:11px;color:#e0e0e0}

/* Detail */
.detail-head{padding:64px 0 40px}.back{font-family:ui-monospace,monospace;font-size:12px}.detail-title{font-size:clamp(90px,13vw,190px);line-height:.9;margin:32px 0 28px;letter-spacing:-.06em}.meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.meta-label{font-family:ui-monospace,monospace;font-size:11px;color:#e0e0e0;margin-bottom:10px}.meta-value{font-size:20px}.cta-row{display:flex;gap:12px;margin:28px 0}
.detail-copy{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding:64px 0}.detail-copy h3{font-family:ui-monospace,monospace;font-size:13px;font-weight:400;color:#e0e0e0;margin:0}.detail-copy .copy p{font-size:24px;line-height:1.45;margin:0 0 22px}.detail-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.offset{padding-top:72px}.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.feature-split h2{font-size:66px;line-height:1.02;letter-spacing:-.04em;margin:38px 0 18px}.features{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}.feature{min-height:230px;border-top:1px solid var(--border);padding:24px 0}.feature-num{font-family:ui-monospace,monospace;font-size:11px;color:#e0e0e0}.feature h4{font-size:30px;margin:18px 0 14px}.feature p{font-size:15px;line-height:1.55;color:#e0e0e0}.outcome{font-size:52px;line-height:1.15;letter-spacing:-.04em;max-width:1180px;margin:44px 0 80px}.next-project{border-top:1px solid var(--border);padding:50px 0}.next-project h3{font-size:58px;margin:16px 0 0;letter-spacing:-.035em}

@media (max-width:900px){
  .annotation{font-size:11px}.nav{grid-template-columns:1fr auto auto;height:auto;padding:16px}.nav-meta,.nav-link:nth-of-type(2),.nav-link:nth-of-type(3){display:none}.brand{font-size:20px}.wrap{width:min(100% - 32px,var(--max))}.hero{min-height:auto;padding-top:40px}.hero-meta{grid-template-columns:1fr 1fr}.hero-meta>*:last-child{display:none}.hero-title{font-size:25vw}.hero-bottom{grid-template-columns:1fr;gap:24px}.selected-header{grid-template-columns:1fr auto}.selected-header>*:last-child{display:none}.selected-layout{grid-template-columns:1fr}.work-preview{position:static}.work-row{min-height:220px}.work-row h3{font-size:40px}.gallery{margin-right:-16px}.footer h2{font-size:23vw}.list-head{display:none}.list-item{grid-template-columns:36px 1fr 60px}.list-item .type,.list-item .role{display:none}.list-item h3{font-size:30px}.grid{grid-template-columns:1fr}.grid-card .image-box{height:360px}.meta-grid{grid-template-columns:1fr 1fr}.detail-copy,.detail-pair,.feature-split{grid-template-columns:1fr}.offset{padding-top:0}.features{grid-template-columns:1fr}.detail-title{font-size:19vw}.feature-split h2{font-size:48px}.outcome{font-size:38px}.image-box.hero-img,.image-box.portrait,.image-box.wide{height:420px}.work-title{font-size:25vw}.work-count{right:-18px}}

/* OFF FIELD final case study */
.case-page{background:#f7f4ed;color:#111;font-family:Arial,"Noto Sans KR",sans-serif}
.case-page .case-nav{height:72px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;background:#f7f4ed;border-bottom:1px solid #ddd8cf;position:sticky;top:0;z-index:50}
.case-page .case-brand{font-weight:800;font-size:18px;letter-spacing:-.02em}.case-nav-links{display:flex;gap:10px}.case-nav-links a{border:1px solid #c9c5bd;padding:10px 15px;font-size:12px}.case-nav-links a.is-active{background:#111;color:#fff;border-color:#111}
.case-section{padding:64px 0}.case-section.light{background:#f7f4ed;color:#111}.case-section.dark{background:#171717;color:#f7f4ed}.case-wrap{width:min(1180px,91vw);margin:auto}.case-back{display:inline-block;border:1px solid #c9c5bd;padding:9px 12px;font-size:12px;margin-bottom:32px}.case-hero h1{font-size:clamp(56px,7vw,104px);line-height:.95;margin:0 0 18px;letter-spacing:-.05em}.case-subtitle{font-size:20px;margin:0 0 32px}.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:28px}.case-meta span,.eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;color:#7b7770;margin-bottom:8px}.dark .eyebrow{color:#aaa59d}.case-meta strong{font-size:14px}.case-hero-image{width:100%;height:min(55vw,650px);object-fit:cover;display:block}.two-col{display:grid;grid-template-columns:240px 1fr;gap:64px}.intro-grid h2,.case-section> .case-wrap>h2{font-size:clamp(34px,4vw,60px);line-height:1.18;letter-spacing:-.04em;margin:0 0 24px}.case-section p{line-height:1.7}.lead{max-width:850px;color:#5b5751}.dark .lead{color:#cbc6bd}.process-row{display:grid;grid-template-columns:120px 1fr 370px;gap:34px;align-items:start;padding:64px 0;border-bottom:1px solid #d7d1c8}.process-num{font-size:72px;font-weight:800;color:#ded9d1;line-height:1}.process-copy h3,.concept-grid h3,.develop-block h3,.logo-feature h3{font-size:30px;margin:6px 0 14px;letter-spacing:-.03em}.process-row img{width:100%;aspect-ratio:4/3;object-fit:cover}.define-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:28px;padding:56px 0;border-bottom:1px solid #d7d1c8}.quote-card{background:#ebe7df;padding:34px}.quote-card blockquote{font-size:32px;font-weight:800;line-height:1.35;margin:14px 0 22px}.values{display:grid;gap:12px}.values div,.system-cards div{border:1px solid #d2ccc3;padding:18px;display:flex;flex-direction:column;gap:7px}.values span,.system-cards span{font-size:12px;color:#777169}.concept-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:38px;padding:56px 0}.concept-grid img{width:100%;height:420px;object-fit:cover}.concept-lead{font-weight:700}.keywords{font-size:12px;font-weight:700;letter-spacing:.04em}.develop-block{padding-top:28px;border-top:1px solid #d7d1c8}.system-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}.logo-feature{display:grid;grid-template-columns:1.5fr .8fr;gap:42px;align-items:start;margin-top:48px}.logo-feature>img{width:100%;background:#f7f4ed}.symbol-inline{width:100%;margin-top:22px;background:#f7f4ed}.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}.image-pair img{width:100%;display:block;background:#f7f4ed}.image-pair figure{margin:0}.image-pair figcaption{font-size:11px;color:#aaa59d;margin-top:8px}.small-heading{font-size:36px!important}.color-type-grid{display:grid;grid-template-columns:.9fr 1.5fr;gap:20px;margin-top:34px}.color-type-grid img{width:100%;height:320px;object-fit:cover}.type-card{background:#ede9e1;padding:36px;display:flex;flex-direction:column;justify-content:center}.type-card span{font-size:11px;color:#777169}.type-card strong{font-family:Georgia,serif;font-size:40px;margin:14px 0}.graphic-block{margin-top:60px}.graphic-block img{width:100%;height:240px;object-fit:cover;margin-top:20px}.goods-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.goods-grid img{width:100%;display:block}.next-section{border-top:1px solid #d7d1c8}.next-title{font-family:Georgia,serif;font-size:46px!important}.case-button{display:inline-block;border:1px solid #bdb7ae;padding:12px 16px;font-size:12px}.case-footer{background:#171717;color:#f7f4ed;padding:64px 0 76px}.footer-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}.case-footer h2{font-size:clamp(34px,4vw,58px);line-height:1.15;margin:12px 0 18px;letter-spacing:-.04em}.footer-actions{display:flex;gap:10px}.case-footer .case-button{border-color:#777;color:#f7f4ed}
@media (max-width:760px){.case-page .case-nav{padding:0 16px;height:60px}.case-nav-links{gap:8px}.case-nav-links a{border:0;padding:0;font-size:10px}.case-nav-links a:first-child,.case-nav-links a:last-child{display:none}.case-section{padding:38px 0}.case-wrap{width:calc(100% - 32px)}.case-hero h1{font-size:48px}.case-subtitle{font-size:16px}.case-meta{grid-template-columns:1fr;gap:7px;background:#fbf8f2;padding:14px}.case-meta div{display:flex;gap:10px}.case-meta span{width:64px;margin:0}.case-hero-image{height:300px}.two-col,.process-row,.define-grid,.concept-grid,.logo-feature,.image-pair,.color-type-grid,.goods-grid,.footer-grid{grid-template-columns:1fr}.two-col{gap:14px}.process-row{gap:18px;padding:38px 0}.process-num{font-size:54px}.process-row img{order:2}.quote-card blockquote{font-size:25px}.system-cards{grid-template-columns:1fr 1fr}.concept-grid img{height:340px}.logo-feature{gap:22px}.color-type-grid img{height:auto}.graphic-block img{height:auto}.goods-grid{gap:14px}.footer-actions{flex-direction:column;align-items:flex-start}.case-footer{padding:44px 0}.case-footer h2{font-size:34px}.dark .lead,.case-section p{font-size:14px}}