/* Typography and layout: approved XG / La Roche-Posay detail rules.
   Leading below includes the shared detail-common 60% spacing rule. */
:root{--graff-green:#23594a;--nav-height:66px}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fff;color:#111;font-family:'Pretendard Variable',sans-serif}.graff-page .wrap,.graff-page .wide{width:min(1100px,calc(100% - 80px));margin-inline:auto}.graff-page figure{margin:0}.graff-page img,.graff-page video{display:block;width:100%;height:auto}.graff-page .intro{padding:60px 0 42px}.graff-page .project-label{display:inline-block;background:#111;color:#fff;padding:10px 18px;font-size:21px;font-weight:650;margin:0 0 27px;letter-spacing:.01em}.graff-page h1{font-size:clamp(40px,4.6vw,65px);font-weight:720;line-height:1.18;letter-spacing:-.055em;word-break:keep-all;margin:0}.graff-page .lead{font-size:21px;line-height:1.48;margin:28px 0 0;word-break:keep-all}.graff-page .project-meta{display:grid;grid-template-columns:1fr .65fr 2fr;gap:30px;border-top:1px solid #ddd;margin:40px 0 0;padding-top:26px}.graff-page .project-meta dt{font-size:16px;color:#777;margin-bottom:10px}.graff-page .project-meta dd{font-size:18px;line-height:1.48;margin:0;word-break:keep-all}.hero-gallery{position:relative;background:#04231d;isolation:isolate}.hero-slide[hidden]{display:none}.hero-slide img{aspect-ratio:16/9}.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:52px;height:52px;border:1px solid #ffffff80;border-radius:50%;background:#07141040;color:white;cursor:pointer}.hero-arrow:hover{background:#07141090}.hero-arrow svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.5}.hero-prev{left:18px}.hero-next{right:18px}.hero-counter{position:absolute;right:26px;bottom:23px;font-size:12px;letter-spacing:.1em;color:#fff;font-variant-numeric:tabular-nums}.graff-page figcaption{font-size:16px;line-height:1.39;text-align:center;color:#777;margin-top:14px;word-break:keep-all}.asset-source{display:block;font-size:12px;line-height:1.6;font-weight:400;color:#888;margin-top:7px}.asset-source a{border-bottom:1px solid #ccc}.graff-page .section{padding:76px 0}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:650;color:var(--graff-green);margin:0 0 22px}.split-copy{display:grid;grid-template-columns:1fr 1fr;gap:45px}.graff-page h2{font-size:clamp(30px,3.2vw,43px);line-height:1.18;letter-spacing:-.045em;font-weight:680;margin:0;word-break:keep-all}.graff-page .section-copy{max-width:850px;font-size:20px;line-height:1.51;letter-spacing:normal;color:#444;word-break:keep-all;margin:24px 0 0}.graff-page .section-copy:first-child{margin-top:0}.graff-page .campaign{padding-bottom:36px}.campaign-film video{background:#071410;aspect-ratio:16/9}.graff-page .photography{padding-top:38px}.photo-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.photo-open{display:block;width:100%;border:0;background:none;padding:0;cursor:zoom-in}.photo-row img{aspect-ratio:2000/2502}.technical{border-top:1px solid #ddd}.scope-line{display:flex;gap:24px;justify-content:space-between;margin-top:36px;border-block:1px solid #ddd;padding:24px 0;font-size:18px;line-height:1.48;color:#555;word-break:keep-all}.scope-line span:before{content:'';display:inline-block;width:4px;height:4px;background:var(--graff-green);border-radius:50%;vertical-align:middle;margin:0 10px 3px 0}.graff-page .credits{border-block:1px solid #ddd;display:grid;grid-template-columns:1fr 2fr;gap:45px}.credits dl{margin:0}.credits dl>div{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;border-bottom:1px solid #eee;padding:18px 0;font-size:17px;line-height:1.48}.credits dl>div:first-child{padding-top:0}.credits dt{color:#777;word-break:keep-all}.credits dd{margin:0;word-break:keep-all}.credits a{border-bottom:1px solid #ccc}.neighbors{display:flex;justify-content:space-between;gap:25px;padding:50px 0 70px;font-size:16px;line-height:1.6;color:#777}.neighbors strong{display:block;font-size:20px;font-weight:650;color:#111;margin-top:6px}.neighbors>a:last-child{text-align:right}button:focus-visible,a:focus-visible,.hero-gallery:focus-visible{outline:2px solid #267b63;outline-offset:5px}#viewer figure{margin:0}#viewer figcaption{text-align:center;margin-top:10px}#viewer button{position:absolute;border:0;background:#fff;color:#111;width:44px;height:44px;font-size:32px;cursor:pointer}.viewer-close{top:2px;right:5px}.viewer-prev{top:50%;left:2px}.viewer-next{top:50%;right:2px}
@media(max-width:700px){.graff-page .wrap,.graff-page .wide{width:calc(100% - 40px)}.graff-page .intro{padding:30px 0}.graff-page .project-label{font-size:17px;margin-bottom:24px}.graff-page h1{font-size:36px}.graff-page .lead{font-size:18px}.lead br{display:none}.graff-page .project-meta{grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.graff-page .project-meta>div:last-child{grid-column:1/-1}.graff-page .project-meta dt{font-size:15px}.graff-page .project-meta dd{font-size:17px}.hero-arrow{width:36px;height:36px}.hero-arrow svg{width:20px;height:20px}.hero-prev{left:10px}.hero-next{right:10px}.hero-counter{right:14px;bottom:11px;font-size:11px}.graff-page figcaption{margin-top:10px;font-size:15px}.asset-source{font-size:11px}.graff-page .section{padding:48px 0}.eyebrow{margin-bottom:18px}.split-copy{grid-template-columns:1fr;gap:24px}.graff-page h2{font-size:30px}.graff-page .section-copy{font-size:18px;line-height:1.48;margin-top:20px}.graff-page .campaign{padding-bottom:28px}.graff-page .photography{padding-top:28px}.photo-row{grid-template-columns:1fr;gap:25px}.scope-line{flex-direction:column;gap:12px;margin-top:28px;padding:20px 0;font-size:17px}.graff-page .credits{grid-template-columns:1fr;gap:22px}.credits dl>div{gap:20px;font-size:15px}.neighbors{padding:36px 0 90px;flex-direction:column}.neighbors>a:last-child{text-align:left}.neighbors strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Campaign archive: three supplied stills and a wider film scene. */
@media(min-width:701px){.photo-trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.graff-page .set-still{margin-top:48px}
@media(max-width:700px){.graff-page .set-still{margin-top:32px}}

.film-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}.film-controls button{font:inherit;font-size:16px;line-height:1.45;padding:12px 18px;border:1px solid #ccc;background:#fff;color:#555;cursor:pointer;border-radius:3px}.film-controls button[aria-pressed="true"]{background:#173c31;border-color:#173c31;color:#fff}#film-range-note{display:inline-block;color:#555;margin-bottom:5px}.graff-page .model-explainer{padding-top:64px;border-bottom:1px solid #ddd}.model-explainer .model-figure{margin-top:32px}.model-labels{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px;text-align:center;font-size:18px;line-height:1.48}.model-labels p{margin:0}.model-labels span{display:block;font-size:16px;color:#777;margin-top:7px}.graff-page .model-note{font-size:14px;line-height:1.5;color:#777;margin-top:20px;text-align:center}@media(max-width:700px){.film-controls{gap:8px}.film-controls button{font-size:14px;padding:10px 12px}.graff-page .model-explainer{padding-top:48px}.model-labels{gap:12px;font-size:16px}.model-labels span{font-size:14px}.graff-page .model-note{font-size:13px}}

.model-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}.model-view{aspect-ratio:1;position:relative;overflow:hidden}.graff-page .model-view img{position:absolute;width:100%;height:100%;object-fit:cover}.model-side img{object-position:left center}.model-front img{object-position:right center}.graff-page .model-pair figcaption{font-size:18px;color:#333}.model-detail{display:block;font-size:16px;color:#777;margin-top:7px}@media(max-width:700px){.model-pair{grid-template-columns:1fr;gap:28px;margin-top:24px}.graff-page .model-pair figcaption{font-size:17px}.model-detail{font-size:15px}}

.graff-page .rig-model{margin-top:32px}.rig-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-block:1px solid #ddd;padding:22px 0;margin:28px 0 0}.rig-facts dt{font-size:16px;color:#777;margin-bottom:8px}.rig-facts dd{margin:0;font-size:20px;line-height:1.48;font-weight:550}@media(max-width:700px){.graff-page .rig-model{margin-top:24px}.rig-facts{grid-template-columns:1fr;gap:18px;margin-top:24px;padding:20px 0}.rig-facts>div{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}.rig-facts dt{font-size:15px;margin:0}.rig-facts dd{font-size:17px}}
