@font-face{font-family:Figtree;src:url("fonts/figtree-latin.woff2") format("woff2");font-style:normal;font-weight:300 900;font-display:swap}
:root{--ink:#171717;--yellow:#f9ed32;--paper:#fff;--muted:#565650;--gutter:clamp(24px,5vw,80px);color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.5 Figtree,Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}
a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:disabled{opacity:.4;cursor:default}
a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #2255dd;outline-offset:5px}
svg,img{display:block}img{max-width:100%}[hidden]{display:none!important}
.skip{position:fixed;z-index:10;left:16px;top:-100px;padding:12px;background:white}.skip:focus{top:10px}
.intro{background:var(--yellow);padding:clamp(60px,7vw,104px) var(--gutter);min-height:100svh;display:flex;align-items:center}
.intro-inner{width:100%;max-width:1200px;margin:auto}
h1{font-size:clamp(88px,11.5vw,164px);line-height:.92;letter-spacing:-.045em;font-weight:800;margin:0 0 64px}
.opening-layout{display:block}
.opening-copy{font-size:20px;line-height:1.55;letter-spacing:-.015em}
.opening-copy{max-width:51ch}.opening-copy p{margin:0 0 22px}.opening-copy p:last-child{margin-bottom:0}
.browse-ads{position:relative;display:inline-flex;align-items:center;gap:24px;min-height:48px;margin-top:24px;font-size:17px;font-weight:750;text-decoration:none}
.browse-ads::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;opacity:0}
.browse-ads:focus-visible::after{opacity:1}
.browse-ads span{font-size:24px;font-weight:400;line-height:1;transition:transform .18s ease}
.opening-note{font-size:14px;line-height:1.5;margin:18px 0 0;color:#48483c;max-width:30ch}
.provider-note{font-size:12px;line-height:1.6;color:#48483c;max-width:70ch;margin:38px 0 0}
.collection{max-width:1360px;padding:0 var(--gutter);margin:auto}
.collection-opening{padding:72px 0 8px;max-width:900px}
.collection-opening p{font-size:20px;line-height:1.5;margin:12px 0 0}
.collection-opening .collection-reply{font-size:17px;line-height:1.6;margin:0 0 30px}
.collection-opening h2{font-size:clamp(30px,3.3vw,46px);line-height:1.12;letter-spacing:-.035em;font-weight:750;margin:0}
.ad{--ad-padding:44px;--next-ad-space:68px;--story-space:calc(var(--ad-padding) + var(--next-ad-space) - 32px);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start;padding:44px 0;margin-top:24px;scroll-margin-top:24px}
.ad:has(+.feature){--next-ad-space:104px}
.ad:has(+.interlude){--next-ad-space:108px}
.ad:has(+.editorial-interlude){--next-ad-space:104px}
.ad:last-child{--next-ad-space:calc(60px + clamp(72px,10vw,144px))}
.ad-copy{display:grid;padding:6px 0 0;min-width:0}
.ad-caption{display:contents}.caption-divider{display:none}
.ad-copy .brand{grid-row:1}.ad-copy h2{grid-row:2}.ad-copy .version{grid-row:3}.ad-copy .tease{grid-row:4}.ad-actions{grid-row:5}
.feature{--ad-padding:64px;padding:64px 0;margin-top:40px}
.feature:first-child{margin-top:0}
.feature .ad-copy{display:grid;padding:6px 0 0}
.poster{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#171717;color:white;text-decoration:none}
.poster img{width:100%;height:100%;object-fit:contain}
.poster-trigger{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.poster-trigger:focus-visible{outline-offset:-5px}
.poster iframe,.poster video{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;object-fit:contain;background:#171717}
.preview-fallback{position:absolute;inset:0;display:grid;place-items:center;color:#aaa;font-size:14px;pointer-events:none}
.play{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:9px;padding:11px 15px;background:#171717e8;color:#fff;font-size:13px;font-weight:600;line-height:1.4;pointer-events:none;transition:background .18s,color .18s}
.play svg{width:17px;height:18px}
.brand{font-size:14px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.brand span{margin-left:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ad h2{font-size:clamp(32px,3.25vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin:0 0 18px;overflow-wrap:break-word;text-wrap:balance}
.feature h2{font-size:clamp(44px,5.2vw,74px);letter-spacing:-.04em;margin-bottom:18px}
.tease{font-size:20px;line-height:1.4;letter-spacing:-.018em;max-width:35ch;margin:0 0 14px}
.feature .tease{font-size:23px;max-width:31ch}
.version{font-size:13px;color:var(--muted);margin:0 0 16px}
.feature .version{margin:0 0 16px}
summary{cursor:pointer;font-size:14px;line-height:1.5;min-height:44px;padding:11px 0;list-style-position:inside}
.ad-actions summary{width:fit-content;min-width:112px;font-weight:600;color:var(--muted)}
.ad-actions details[open] summary{color:var(--ink)}
/* Use the existing gap first, keeping 32px clear before the next ad's content. */
.ad-actions:has(details[open]){margin-bottom:calc(-1 * var(--story-space))}
.ad-actions details[open]{position:relative;z-index:1}
.story{font-size:17px;line-height:1.65;max-width:52ch;padding:8px 0 0}
.story p{margin:0 0 18px}.credit,.story .credit{font-size:13px;color:var(--muted);line-height:1.6}
.story a,.story button{display:inline-block;font-size:14px;min-height:44px;padding:11px 0}
.story .save{min-width:44px;margin:0 0 0 24px;text-align:left;text-decoration:underline;text-underline-offset:5px}
.save{display:none}.has-js .save{display:inline-block}
.save[aria-pressed=true]{text-decoration:none}
.paper{display:flex;width:100%;min-height:360px;align-items:center;justify-content:center;padding:40px;background:#eee;color:var(--ink);font-size:clamp(36px,4vw,60px);font-weight:800;letter-spacing:-.04em}
.paper.blue{background:#13549b;color:white}.paper.red{background:#c92328;color:white}.paper.white{background:white}.paper.yellow{background:var(--yellow)}
.print-ad .poster{aspect-ratio:auto;background:transparent;color:var(--ink);display:flex;flex-direction:column;align-items:center}
.actual-print img{width:100%;height:auto;max-height:620px;object-fit:contain}
.print-caption{position:static;width:100%;color:var(--muted);font-size:12px;line-height:1.5;padding:14px 0 0;text-align:center}
.portrait .poster{max-width:420px;justify-self:center;width:100%}
.portrait .actual-print img{max-height:none}
.interlude{padding:108px 0 24px;max-width:850px}
.interlude h2{font-size:clamp(48px,6.2vw,88px);line-height:.99;letter-spacing:-.04em;margin:0 0 24px;font-weight:800}
.interlude p{font-size:19px;max-width:40ch;margin:0}
.editorial-interlude{max-width:none;padding:104px 0 84px}.editorial-interlude h2{max-width:20ch}
.closing{background:var(--yellow);padding:clamp(72px,10vw,144px) var(--gutter);margin-top:60px}
.closing-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(44px,8vw,128px);align-items:end}
.closing h2{font-size:clamp(70px,9vw,128px);line-height:.9;letter-spacing:-.04em;font-weight:800;margin:0}
.closing-copy{font-size:22px;line-height:1.45;letter-spacing:-.02em;max-width:29ch}
.closing-copy p{margin:0 0 26px}
.destination{display:inline-flex;align-items:center;gap:16px;min-height:48px;font-size:19px;font-weight:750;margin-top:2px;text-decoration:none;letter-spacing:-.02em}
.destination span{font-size:28px;line-height:1;transition:transform .18s ease}
footer{padding:32px var(--gutter) 44px;background:var(--yellow);font-size:13px;color:var(--muted)}
.footer-inner{max-width:1200px;margin:auto}
.footer-bottom{display:block}
.footer-controls,.footer-actions{display:flex;align-items:center;flex-wrap:wrap}
.footer-controls{justify-content:space-between;gap:12px 32px}
.footer-actions{gap:4px 28px}
.footer-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;font-size:14px;text-align:left}
.footer-toggle::before{content:"";border:4px solid transparent;border-left-color:currentColor;transform-origin:2px 4px}
.footer-toggle[aria-expanded="true"]::before{transform:rotate(90deg)}
.footer-credit{margin:20px 0 0;font:400 12px/1.5 Figtree,Arial,Helvetica,sans-serif;letter-spacing:.01em}
.footer-controls .footer-credit{margin:0}
footer details p{line-height:1.7}footer summary{font-size:14px}
.footer-panel{max-width:740px;padding:24px 0 0;text-align:left;color:var(--muted);overflow-wrap:anywhere}
.footer-panel p:first-child{margin-top:0}.footer-panel p:last-child{margin-bottom:0}
.footer-panel:focus-visible{outline:3px solid #2255dd;outline-offset:3px}
#saved-ads{max-width:100%}
#saved-ads .saved-list{text-align:left}
.js-only{display:none}.has-js .js-only{display:block}.saved-list{padding-left:22px}
.saved-list a{display:inline-block;min-height:44px;padding:9px 0}
.saved-tools{display:flex;gap:24px;flex-wrap:wrap}.saved-tools button{font-size:14px;min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:5px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:var(--ink);color:white;font-size:14px;line-height:1.5;padding:12px 18px;z-index:20;pointer-events:none}.toast:empty{display:none}
@media(hover:hover) and (pointer:fine){
 .poster-trigger:hover .play{background:white;color:var(--ink)}
 .browse-ads:hover span{transform:translateY(3px)}
 .destination:hover span{transform:translate(3px,-3px)}
 a:hover{text-decoration-thickness:2px}.destination:hover{text-decoration:underline}.browse-ads:hover{text-decoration:none}.browse-ads:hover::after{opacity:1}
 .ad-actions summary:hover{color:var(--ink)}
}
@media(max-width:1000px){
 .opening-layout{gap:48px}
 .ad{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px}
}
@media(max-width:760px){
  :root{--gutter:24px;--ads-intro-gap:16px;--ads-handoff-gap:20px;--ads-candidates-gap:25px;--ads-visionaries-gap:20px}
 .intro{padding:44px var(--gutter) 38px;min-height:100svh}
 h1{font-size:clamp(66px,12.8vw,98px);margin-bottom:34px;max-width:9ch;letter-spacing:-.04em}
 .opening-layout{display:block}
 .opening-copy{font-size:18px;line-height:1.5;letter-spacing:-.015em;max-width:54ch}
  .opening-copy p{margin-bottom:var(--ads-intro-gap,16px)}
 .opening-invitation{margin-top:26px}
 .browse-ads{margin-top:20px;font-size:16px}
 .opening-note{max-width:none;margin-top:14px;font-size:13px}
 .provider-note{font-size:12px;margin-top:18px;max-width:52ch}
 .collection-opening{padding-top:44px}
 .collection-opening p{font-size:18px}
  .collection-opening .collection-reply{font-size:16px;margin-bottom:var(--ads-handoff-gap,20px)}
  .collection-opening h2+p{margin-top:var(--ads-candidates-gap,12px)}
 .ad,.feature{--ad-padding:30px;--next-ad-space:50px;display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:30px 0;margin-top:20px}
 .ad:has(+.feature){--next-ad-space:70px}
 .ad:has(+.interlude),.ad:has(+.editorial-interlude){--next-ad-space:72px}
 .ad:last-child{--next-ad-space:94px}
 .feature{--ad-padding:38px;padding:38px 0;margin-top:32px}
 .ad>.poster{grid-row:2;margin:0}
 .ad-copy,.feature .ad-copy{display:contents}
 .ad .ad-copy h2{grid-row:1;width:100%;direction:ltr;text-align:left;font-size:clamp(34px,7vw,52px);line-height:1.04;margin:0 0 14px;letter-spacing:-.04em}
 .ad:is(#old-spice,#gandhi,#terry,#cindy,#hilltop,#beef,#think-small,#avis,#fck,#the-force,#tide) .ad-copy h2{direction:ltr;text-align:left}
 .ad:is(#vending,#pass-heinz,#londoner) .ad-copy h2{text-align:center}
 .ad .ad-copy .version{grid-row:4;margin:7px 0 0}
  .ad-caption{grid-row:3;display:block;margin-top:18px;font-size:17px;line-height:1.5;text-wrap:wrap}
 .ad-caption .brand,.ad-caption .tease{display:inline;font-size:inherit;line-height:inherit;max-width:none;margin:0}
  .ad-caption .brand{font-size:13px}.ad-caption .brand span{margin-left:0}
 .caption-divider{display:inline;font-size:13px;color:var(--muted)}
 .ad-actions{display:block;grid-row:5}
 .story{font-size:17px;line-height:1.65;max-width:52ch}
 .play{font-size:12px;padding:9px 12px;left:12px;bottom:12px}
 .portrait>.poster{max-width:350px;margin:0;justify-self:center}
 .portrait h2,.portrait .ad-caption,.portrait .version{width:100%;max-width:350px;justify-self:center}
 .actual-print img{max-height:560px}
 .interlude{padding:72px 0 10px}
 .interlude h2{font-size:clamp(44px,8vw,66px);margin-bottom:20px}
 .interlude p{font-size:18px}
  .editorial-interlude{padding:72px 0 62px}
  .editorial-interlude h2{margin-bottom:var(--ads-visionaries-gap,20px)}
 .closing{padding:62px var(--gutter) 60px;margin-top:32px}
 .closing-inner{display:block}
 .closing h2{font-size:clamp(76px,16vw,112px);margin-bottom:38px}
 .closing-copy{font-size:21px;max-width:35ch}
 .closing-copy p{margin-bottom:24px}
 .destination{font-size:18px}
 footer{padding:26px var(--gutter) 32px}
 .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
 :root{--gutter:20px}
 .intro{padding-top:36px}
 h1{font-size:64px;margin-bottom:28px}
 .opening-copy{font-size:17px}
 .closing h2{font-size:72px}
}
/* Playback controls occupy their own row below the complete film frame. */
@media screen{
 .poster.is-playing{aspect-ratio:auto;overflow:visible}
 .film-shell{width:100%;background:var(--paper);color:var(--ink);outline-offset:4px}
 .film-media{position:relative;width:100%;aspect-ratio:var(--film-ratio,16/9);background:#171717}
 .film-media[data-provider=youtube]{min-height:200px}
 .film-controls{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;padding:2px 10px}
 .film-save-wrap{display:inline-flex;position:relative}
 .film-save-note{position:absolute;z-index:1;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;min-width:calc(100% + 12px);max-width:180px;padding:9px 13px;border:1px solid #e9e1cc;border-radius:13px;background:#fffaf0;color:#343127;font-size:13px;font-weight:650;line-height:1.35;text-align:center;white-space:nowrap;box-shadow:0 2px 5px #30271909,0 7px 18px #30271912;pointer-events:none;animation:ad-save-confirm .18s ease-out both}
 .film-save-note small{display:block;font-size:11px;font-weight:450;margin-top:3px}
 @keyframes ad-save-confirm{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}
 .film-controls button,.film-source{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;font-size:13px;line-height:1.3;color:inherit}
 .film-controls [data-film-action=save]{min-width:54px}
 .film-controls button:focus-visible,.film-source:focus-visible{outline:2px solid #2255dd;outline-offset:-2px}
 .film-source{margin-left:auto;text-underline-offset:3px}
 .film-source-icon{display:none;width:19px;height:19px}
 .film-message{margin:0;padding:0 18px 14px;color:var(--muted);font-size:13px;line-height:1.5}
 .film-message:empty{display:none}
 .film-shell:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;background:#171717;color:white;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .film-shell:-webkit-full-screen{display:flex;flex-direction:column;width:100%;height:100%;background:#171717;color:white}
 .film-shell:is(:fullscreen,.is-expanded) .film-media{flex:1;min-height:0;aspect-ratio:auto}
 .film-shell:-webkit-full-screen .film-media{flex:1;min-height:0;aspect-ratio:auto}
 .film-shell.is-expanded{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;width:100%;height:100dvh;background:#171717;color:white;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .film-shell:is(:fullscreen,.is-expanded) .film-message{color:#ddd}
 .film-shell:-webkit-full-screen .film-message{color:#ddd}
 .film-shell:is(:fullscreen,.is-expanded) :is(button,a):focus-visible{outline-color:#f9ed32}
 .film-shell:-webkit-full-screen :is(button,a):focus-visible{outline-color:#f9ed32}
 .film-expanded{overflow:hidden}
 @media(hover:hover) and (pointer:fine){.film-controls button,.film-source{min-height:32px;padding-block:6px}}
 @media(max-width:760px){.film-source-label{display:none}.film-source-icon{display:block}}
 @media(max-width:360px){.film-controls{gap:0 2px;padding-inline:5px}.film-controls button,.film-source{padding-inline:6px;font-size:12px}.film-controls [data-film-action=save]{min-width:46px}}
}
@media print{.film-shell{display:none!important}.poster.is-playing>.poster-trigger{display:block!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{html{scroll-behavior:auto}.skip,.ad-actions,.play,.js-only,.toast{display:none!important}.ad{break-inside:avoid}.intro,.closing{background:white;color:black;min-height:0}.poster img{opacity:1!important}footer{color:black}}