@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,600;0,800;1,700&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:150px}body{margin:0;background:#ebebeb;color:#000;font-family:'Public Sans',Arial,sans-serif;font-size:20px;line-height:1.26}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}button,input,textarea{font:inherit}a{color:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #1573dd;outline-offset:5px}.skip{position:fixed;top:-100px;left:16px;z-index:100;background:white;padding:12px}.skip:focus{top:16px}.home-intro{text-align:center;padding-top:280px}.home-intro>p{font-size:20px}.home-intro h1{font-size:40px;line-height:1.26;max-width:650px;margin:100px auto 94px;font-weight:400}.home-intro h2,.latest>h2{font-size:20px;text-align:center}.home-intro h2{margin-bottom:105px}[data-keyword]{box-decoration-break:clone;-webkit-box-decoration-break:clone}[data-keyword].active{color:#fff;background:#000}.featured{max-width:1220px;width:calc(100% - 96px);padding:20px 12px 16px;margin:auto;background:#292929;color:white;border-radius:20px;text-align:center}.featured h2{text-transform:uppercase;font-size:14px;margin-bottom:20px}.featured-film{position:relative}.featured video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#000}.film-toggle{position:absolute;right:12px;bottom:12px;background:#fff;color:#000;border:0;border-radius:20px;padding:7px 14px;font-size:12px;opacity:0;transition:opacity .2s}.featured-film:hover .film-toggle,.film-toggle:focus-visible{opacity:1}.featured>p{font-size:16px;max-width:290px;margin:14px auto 8px}.featured>a{font-size:16px;font-weight:700}.latest{padding-top:130px}.latest>h2{margin-bottom:76px}.story-grid{max-width:1300px;width:calc(100% - 64px);margin:auto;display:grid;gap:28px}.story-row{display:flex;justify-content:center;gap:28px}.story-card{display:flex;flex-direction:column;flex:0 1 350px;min-width:0;height:426px;padding:20px 12px;border-radius:20px;background:var(--card-color);color:var(--card-text);text-align:center;text-decoration:none;gap:14px;overflow:hidden}.story-card h3{display:flex;align-items:center;justify-content:center;height:42px;flex:none;font-size:16px;font-weight:800;text-transform:uppercase;line-height:1.3}.story-card img{width:100%;height:196px;object-fit:cover;border-radius:12px;flex:none}.story-card p{height:100px;overflow:hidden;font-size:16px;line-height:1.26}.story-card strong{font-weight:700}.story-row:nth-child(1){padding-inline:70px}.story-row:nth-child(2){padding-inline:40px}.story-row:nth-child(3){padding-inline:14px}.story-row:nth-child(3) .story-card{flex-basis:390px}footer{max-width:600px;width:calc(100% - 40px);margin:200px auto 0;padding-bottom:340px;text-align:center}.portrait{display:block;width:350px;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:60px auto 54px}.availability{margin:100px 0 140px}.footer-links{display:flex;justify-content:center;gap:20px;font-size:20px}.dot-link{position:relative;text-decoration:underline;text-underline-offset:.15em}.dot-link::after{content:'';display:inline-block;width:.65em}.dot-link::before{content:'';position:absolute;right:0;bottom:.18em;width:.22em;height:.22em;min-width:5px;min-height:5px;border-radius:50%;background:currentColor;visibility:hidden}.dot-link:hover::before,.dot-link:focus-visible::before{visibility:visible;animation:link-bounce .8s infinite}@keyframes link-bounce{0%,100%{transform:translateY(0) scale(1.15,.87)}38%{transform:translateY(-.5em)}85%{transform:translateY(-.12em) scale(.93,1.08)}}
.island{position:fixed;top:40px;left:50%;transform:translateX(-50%);width:280px;padding:23px 49px;border-radius:62px;z-index:20;background:#fff;box-shadow:0 12px 36px -10px rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.045);transition:width .42s cubic-bezier(.2,.7,.2,1),padding .42s,background .3s,box-shadow .3s,opacity .3s,translate .35s;max-width:calc(100% - 32px)}.island-bar{display:flex;align-items:center;gap:24px;justify-content:space-between}.studio-mark{width:48px;height:48px;position:relative;display:block}.studio-mark-base{width:100%;height:100%;display:block}.studio-mark-dot{position:absolute;left:59.003%;top:59.386%;width:39.344%;height:39.344%}.wordmark{display:block;flex:none}.burger{width:26px;height:32px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:2px;border:0;background:none;color:inherit;flex:none}.burger span{height:2px;width:100%;background:currentColor;transition:transform .25s,opacity .25s}.island[data-state=top]{background:transparent;box-shadow:none;width:280px;top:80px}.island[data-state=top] .wordmark{margin:auto}.island[data-state=top] .burger{display:none}.island[data-hidden=true]{opacity:0;translate:0 -150%;pointer-events:none}.island.open{width:1140px;padding:44px 52px;background:#fff;box-shadow:0 12px 36px -10px rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.045)}.island.open .burger span:first-child{transform:translateY(6px) rotate(45deg)}.island.open .burger span:nth-child(2){opacity:0}.island.open .burger span:last-child{transform:translateY(-6px) rotate(-45deg)}.island-links{display:flex;align-items:center;gap:14px;flex:1;font-size:20px;white-space:nowrap}.island-links[hidden],#island-content[hidden]{display:none}#island-content h2{text-align:center;font-size:32px;font-weight:600;margin:61px 0}.suggested{background:#ebebeb;border-radius:24px;padding:26px;text-align:center}.suggested-cards{display:flex;gap:12px;margin-bottom:24px}.compact{height:314px;flex:1;gap:14px}.compact:nth-child(1){flex:1.2}.compact:nth-child(3){flex:.85}.compact img{height:218px}.suggested>.dot-link{font-size:20px}
@media(min-width:1500px){.story-card img{height:220px}.story-card{height:450px}.compact{height:338px}.compact img{height:242px}}
@media(max-width:1100px){.island.open{padding:28px;border-radius:40px}.island-links{font-size:14px;gap:8px}.island-bar{gap:16px}.story-grid{width:calc(100% - 48px)}.story-row{gap:18px}.story-row:nth-child(n){padding-inline:0}.story-card{flex:1!important;height:450px}.story-card p{height:124px}.compact{height:314px}.island.open .compact img{height:218px}.footer-links{font-size:18px}}
@media(max-width:700px){.home-intro{padding:200px 24px 0}.home-intro h1{font-size:30px;margin:64px auto}.desktop-break{display:none}.home-intro h2{margin-bottom:64px}.island{top:20px;scale:.85;transform-origin:left top}.island[data-state=top]{top:46px}.island.open{scale:1;padding:24px;border-radius:30px;max-height:calc(100dvh - 40px);overflow:auto}.island-links{flex-wrap:wrap;white-space:normal;gap:8px 12px;font-size:12px}.island.open .studio-mark{width:36px;height:36px}.island-bar{gap:12px}#island-content h2{margin:30px 0;font-size:24px}.suggested{padding:14px}.suggested-cards{gap:10px;overflow:auto}.compact{min-width:180px;height:260px!important;padding:14px 10px;gap:12px}.compact h3{font-size:12px}.island.open .compact img{height:176px}.featured{width:calc(100% - 32px)}.latest{padding-top:90px}.latest>h2{margin-bottom:48px}.story-grid{width:calc(100% - 32px);gap:20px}.story-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.story-row .story-card:last-child{grid-column:1/-1;max-width:400px;justify-self:center;width:100%}.story-card{height:450px}.story-card h3{font-size:14px}.story-card p{font-size:14px}footer{margin-top:120px;padding-bottom:140px;font-size:18px}.portrait{width:300px}.availability{margin:70px 0}.footer-links{flex-wrap:wrap;font-size:16px}}
@media(max-width:440px){.story-row{grid-template-columns:1fr}.story-row .story-card{width:100%;max-width:381px;justify-self:center}.story-card img{height:220px}.story-card{height:450px}.story-card p{font-size:16px}.story-card h3{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.film-toggle{opacity:1}}
/* Card widths follow the supplied Figma exports; height stays fixed. */
.home-intro h1{max-width:583px}
.story-row:nth-child(n){padding-inline:0}
.story-row .story-card{flex-grow:0!important;flex-shrink:1!important;height:430px}
.story-row .story-card img{height:220px}
.story-row .story-card p{height:100px;flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}












.story-card h3{overflow:hidden}.story-card h3 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.island.open{max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
.suggested-cards .compact{flex:1 1 315px;height:338px}
.suggested-cards .compact:first-child{flex-basis:381px}
.suggested-cards .compact:last-child{flex-basis:264px}
.island.open .compact img{height:220px}
@media(max-width:700px){.island.open .compact{height:260px}.island.open .compact img{height:176px}}
.island .wordmark{transition:transform .35s ease}
.island[data-state=top] .wordmark{margin:0;transform:translateX(67px)}
.island.open #island-content{animation:menu-reveal .35s ease both}
@keyframes menu-reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(hover:none){.film-toggle{opacity:1}}

/* The previous thumbnail tilt/glare, now applied to the complete story card. */
:is(.story-card, .featured) {
  position: relative;
  isolation: isolate;
  transform: perspective(1000px) translateY(0) rotateX(0deg) rotateY(0deg);
  transform-origin: center;
  transition: transform .35s ease-out, box-shadow .35s ease-out;
}
:is(.story-card, .featured)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, transparent 75%);
  opacity: 0;
  transition: opacity .3s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  :is(.story-card, .featured).is-tilting {
    z-index: 1;
    transform: perspective(1000px) translateY(-4px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    box-shadow: 0 18px 36px -12px rgba(0,0,0,.22), 0 5px 12px -5px rgba(0,0,0,.12);
    transition: transform .1s ease-out, box-shadow .3s ease-out;
  }
  :is(.story-card, .featured).is-tilting::after { opacity: 1; }
}
:is(a.story-card, a.featured):focus-visible {
  box-shadow: 0 18px 36px -12px rgba(0,0,0,.22), 0 5px 12px -5px rgba(0,0,0,.12);
}
@media (prefers-reduced-motion: reduce) {
  :is(.story-card, .featured), :is(.story-card, .featured).is-tilting { transform: none; transition: none; }
  :is(.story-card, .featured)::after { display: none; }
}

/* Desktop hover films share the image's box without changing card layout. */
.story-media {
  position: relative;
  width: 100%;
  height: 220px;
  flex: none;
  overflow: hidden;
  border-radius: 12px;
}
.story-card .story-media > img,
.story-card .story-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-media > video,
.story-media > [data-hover-image] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease-out;
}
@media (prefers-reduced-motion: no-preference) {
  .story-card.is-previewing .story-media > video,
  .story-card.is-previewing .story-media > [data-hover-image] { opacity: 1; }
}
@media (max-width: 700px) {
  .island.open .compact .story-media { height: 176px; }
}

/* Keep the full Teatime animation visible, with white side bars. */
.story-card[data-story="teatime"] .story-media > [data-hover-image] {
  object-fit: contain;
  background: #fff;
}

/* Honour deliberate two-line headings entered in the story editor. */
.story-card h3 span { white-space: pre-line; }

/* Static image proportions determine the card frame, including admin replacements. */
.story-grid { grid-template-columns:minmax(0,1fr); }
.story-row { min-width:0; }
.story-row { flex-wrap:wrap; }
.story-row .story-card,
.suggested-cards .story-card.compact {
  --image-height:220px;
  flex:0 0 auto!important;
  width:calc(var(--image-ratio, 1.5) * var(--image-height) + 24px);
  max-width:100%;
}
.suggested { width:100%; min-width:0; }
.suggested-cards { flex-wrap:nowrap; justify-content:center; }
.suggested-cards .story-card.compact { flex-shrink:1!important; min-width:0; }
.story-card > img,
.story-card .story-media { height:var(--image-height, 220px)!important; }
@media(max-width:700px){
  .story-row { display:flex; }
  .story-row .story-card:last-child { width:calc(var(--image-ratio, 1.5) * 220px + 24px);max-width:100%; }
  .suggested-cards .story-card.compact { --image-height:176px; min-width:0; padding-inline:12px; }
}
@media(max-width:440px){
  .story-row .story-card { width:calc(var(--image-ratio, 1.5) * 220px + 24px);max-width:100%; }
}

/* Grow the logo's circular shell into the navigation pill. */
.island {
  transition:width .65s cubic-bezier(.22,1,.36,1) .06s,
    padding .65s cubic-bezier(.22,1,.36,1) .06s,
    top .65s cubic-bezier(.22,1,.36,1),background .2s,
    box-shadow .45s,opacity .3s,translate .45s;
}
.island[data-state=top] { width:94px; padding:23px; }
.island[data-state=top] .wordmark { transform:none; margin:0; }
.island:not(.open) .island-bar { position:relative; height:48px; }
.island:not(.open) .burger {
  position:absolute; right:0; top:8px;
  opacity:1; visibility:visible;
  transition:right .65s cubic-bezier(.22,1,.36,1) .06s,
    opacity .22s ease .3s,visibility 0s .3s;
}
.island[data-state=top] .burger {
  display:flex; right:11px; opacity:0; visibility:hidden;
  pointer-events:none;
  transition:opacity .1s,visibility 0s,right .65s cubic-bezier(.22,1,.36,1);
}
@media(prefers-reduced-motion:reduce){
  .island,.island .wordmark,.island:not(.open) .burger { transition:none; }
  .island.open #island-content { animation:none; }
}

/* The featured film is one continuous-playing project link. */
a.featured { display:block; text-decoration:none; }
.featured-cta { font-size:16px; font-weight:700; }

/* First story canvas: edge-to-edge film with the same floating navigation. */
.project-canvas { background:#000; color:#fff; }
.project-canvas .island { color:#000; }
.project-hero { width:100%; height:100svh; background:#000; overflow:hidden; view-transition-name:hero-card; }
.project-hero video { display:block; width:100%; height:100%; object-fit:contain; view-transition-name:hero-video; }
.project-dummy { width:min(720px,calc(100% - 48px)); margin:0 auto; padding:120px 0 70vh; font-size:24px; line-height:1.5; }
.project-dummy section { margin-bottom:35vh; }
.project-dummy p+p { margin-top:28px; }
@view-transition { navigation:none; }
.featured { view-transition-name:hero-card; }
.featured video { view-transition-name:hero-video; }
.island { view-transition-name:nav-island; }
::view-transition-group(hero-card),::view-transition-group(hero-video) { animation-duration:.85s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-group(nav-island) { z-index:10; animation-duration:.85s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(nav-island) { display:none; }
::view-transition-new(nav-island) { animation:none; }
::view-transition-old(hero-video),::view-transition-new(hero-video) { height:100%; object-fit:cover; }
::view-transition-old(hero-card),::view-transition-new(hero-card) { height:100%; }
@media(prefers-reduced-motion:reduce){
 ::view-transition-group(*) { animation-duration:.01s; }
}

.featured video,.project-hero video { background:#000; }
.project-details { background:#fff; color:#000; }
.project-details .project-dummy { padding-top:200px; }

.card-opening-shell { position:fixed; z-index:15; overflow:hidden; background:#292929; border-radius:20px; text-align:center; pointer-events:none; }
.card-opening-shell video { position:absolute; display:block; object-fit:cover; max-width:none; background:#000; }
.opening-story { overflow:hidden; }
.project-canvas:not(.project-details) { transition:background-color .65s cubic-bezier(.4,0,.2,1),color .65s cubic-bezier(.4,0,.2,1); }
.project-canvas.light-canvas { background:#ebebeb; color:#000; }
@media(prefers-reduced-motion:reduce){ .project-canvas { transition:none!important; } }

.returning-story { background:var(--return-color,#ebebeb); }
.returning-story body { visibility:hidden; }
.returning-story .island,.returning-story .card-opening-shell { visibility:visible; }

.story-canvas { background:var(--story-color,#ff41a0); color:#000; }
.story-canvas.light-canvas { background:#ebebeb; color:#000; }
.sharing-content { padding-top:220px; }
.sharing-content>header { width:min(720px,calc(100% - 48px)); margin:auto; }
.story-layout h1 { font-size:clamp(36px,5vw,64px); font-weight:800; line-height:1.1; text-transform:uppercase; margin-bottom:40px; }
.sharing-caption { font-size:24px; line-height:1.5; }
.sharing-content .project-dummy { padding-top:90px; }
.card-opening-shell .sharing-flight-media { position:absolute; overflow:hidden; border-radius:12px; }
.card-opening-shell .sharing-flight-media img,.card-opening-shell .sharing-flight-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media(max-width:700px){ .sharing-content { padding-top:170px; } }

/* Reveal story copy immediately, with a short stagger rather than a blank hold. */
.story-layout h1,.sharing-caption,.sharing-content .project-dummy p {
 animation:story-copy-in .45s cubic-bezier(.22,1,.36,1) both;
 animation-delay:var(--copy-delay,0ms);
}
.sharing-caption { --copy-delay:40ms; }
@keyframes story-copy-in { from { opacity:0; transform:translateY(-24px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){
 .story-layout h1,.sharing-caption,.sharing-content .project-dummy p { animation:none; }
}

/* Story layout: a caption column and body column, with shared full-width inlays. */
.story-layout { padding:280px 0 300px; }
.story-measure { width:min(1036px,calc(100% - 64px)); margin-inline:auto; }
.story-layout .story-title { width:calc(100% - 48px); margin:0 auto 64px; text-align:center; font-size:clamp(36px,4vw,64px); font-weight:800; line-height:1.15; text-transform:none; }
.story-section { display:grid; grid-template-columns:minmax(0, .36fr) minmax(0, .64fr); gap:39px; }
.story-section h2 { font-size:24px; line-height:1.26; font-weight:800; text-transform:uppercase; }
.story-body { min-width:0; font-size:24px; line-height:1.3; }
.story-body p+p { margin-top:30px; }
.story-body strong { font-weight:700; }
.story-inlay { margin-block:120px 64px; }
.story-inlay img,.story-inlay video { display:block; width:100%; height:auto; }
.story-wide-media { width:calc(100% - 80px); margin:148px auto; }
.story-wide-media h2 { font-size:40px; line-height:1.2; font-weight:800; text-transform:uppercase; text-align:center; margin-bottom:148px; }
.story-wide-media iframe { display:block; border:0; width:100%; aspect-ratio:1030/598; min-height:600px; background:var(--story-color); }
.story-related { width:min(1036px,calc(100% - 48px)); margin:160px auto 0; text-align:center; }
.story-related>h2 { font-size:24px; font-weight:800; text-transform:uppercase; margin-bottom:160px; }
.story-related-cards { margin-bottom:24px; }
.story-related>a { font-size:16px; }
.story-layout .story-body p { animation:story-copy-in .45s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--copy-delay,40ms); }
@media(max-width:1100px){
 .story-section h2,.story-body { font-size:20px; }
 .story-measure { width:min(850px,calc(100% - 64px)); }
 .story-section { gap:32px; }
}
@media(max-width:700px){
 .story-layout { padding:180px 0 140px; }
 .story-measure { width:calc(100% - 40px); }
 .story-layout .story-title { margin-bottom:48px; font-size:36px; }
 .story-section { grid-template-columns:1fr; gap:20px; }
 .story-section h2 { font-size:16px; }
 .story-body { font-size:18px; line-height:1.4; }
 .story-body p+p { margin-top:24px; }
 .story-inlay { margin-block:56px 40px; }
 .story-wide-media { width:calc(100% - 32px); margin-block:72px; }
 .story-wide-media h2 { font-size:28px; margin-bottom:48px; }
 .story-wide-media iframe { aspect-ratio:auto; height:740px; min-height:0; }
 .story-related { margin-top:80px; }
 .story-related>h2 { font-size:18px; margin-bottom:48px; }
}
@media(prefers-reduced-motion:reduce){ .story-layout .story-body p { animation:none; } }

.story-image-placeholder { aspect-ratio:1030/598; display:grid; place-items:center; background:rgba(0,0,0,.055); border:1px solid rgba(0,0,0,.16); color:rgba(0,0,0,.45); font-size:20px; }
.story-inlay figcaption { margin-top:16px; font-size:16px; line-height:1.4; color:rgba(0,0,0,.65); }
@media(max-width:700px){ .story-image-placeholder { font-size:16px; } .story-inlay figcaption { font-size:14px; } }

.story-alpha { margin-top:80px; }

.story-inlay + .story-section + .story-section { margin-top:80px; }

.story-wide-media figcaption { margin-top:16px; font-size:16px; line-height:1.4; color:rgba(0,0,0,.65); }
.story-section + .story-section { margin-top:80px; }
.story-inlay>figure,.story-wide-media>figure { margin:0; }

.story-wide-media>video { display:block; width:100%; height:auto; }

/* Inset feature media uses the same measure as editorial inlays. */
.story-wide-media.story-measure { width:min(1036px,calc(100% - 64px)); }
@media(max-width:1100px){ .story-wide-media.story-measure { width:min(850px,calc(100% - 64px)); } }
@media(max-width:700px){ .story-wide-media.story-measure { width:calc(100% - 40px); } }

.story-credits { margin-block:80px 0; font-size:14px; font-weight:400; line-height:1.6; }
.story-credits p+p { margin-top:6px; }

.story-credits h2 { font-size:inherit; line-height:inherit; font-weight:400; }
.story-credits .story-copyright { margin-top:24px; }

/* Keep the landing coordinate system stable while scrolling is locked. */
html { scrollbar-gutter:stable; }
.opening-story :is(.story-card,.featured) { transform:none!important; transition:none!important; }

.story-more { margin-top:24px; font-size:14px; line-height:1.6; }
@media(max-width:700px){ .story-more>div:empty { display:none; } }

.story-media-pair { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.story-media-pair>figure { min-width:0; }
@media(max-width:700px){ .story-media-pair { grid-template-columns:1fr; gap:32px; } }

.identity-closing-hero img { display:block; width:100%; height:auto; }

/* LOVE overview: brief context, large visuals, then five detailed stories. */
.love-overview-intro { padding-block:120px 0; text-align:center; }
.love-overview-eyebrow { font-size:14px; line-height:1.5; letter-spacing:.06em; }
.love-overview-intro h1 { font-size:clamp(40px,6vw,88px); line-height:1.05; letter-spacing:-.035em; margin:32px 0; }
.love-overview-intro>p:not(.love-overview-eyebrow) { max-width:700px; margin:24px auto 0; font-size:24px; line-height:1.4; }
.love-overview-role { width:min(600px,calc(100% - 48px)); margin:64px auto; font-size:18px; line-height:1.4; text-align:center; }
.love-overview-media img,.love-overview-media video { display:block; width:100%; height:auto; }
.love-overview-media>figure { margin:0; min-width:0; }
.love-overview figcaption { color:inherit; opacity:.75; }
.love-overview-interaction { align-items:center; }
.love-overview-stories { width:min(1400px,calc(100% - 64px)); margin:148px auto 0; padding-bottom:140px; }
.love-overview-stories>h2 { margin-bottom:24px; }
.love-overview-stories>p { font-size:18px; margin-bottom:64px; }
@media(max-width:700px){
 .love-overview-intro { padding-top:72px; }
 .love-overview-eyebrow { font-size:11px; }
 .love-overview-intro>p:not(.love-overview-eyebrow) { font-size:20px; }
 .love-overview-role { font-size:16px; margin-block:40px; }
 .love-overview-stories { width:calc(100% - 32px); margin-top:72px; padding-bottom:80px; }
 .love-overview-stories>p { font-size:16px; margin-bottom:40px; }
}

.love-branded-photo { position:relative; }
.love-branded-photo img.love-photo-logo { position:absolute; bottom:clamp(12px,2vw,32px); right:clamp(12px,2vw,32px); width:clamp(56px,6vw,96px); height:auto; pointer-events:none; }
.love-award { display:flex; align-items:center; justify-content:center; gap:36px; margin-block:80px; }
.love-award>img { display:block; width:110px; height:auto; flex:none; }
.love-award>div { max-width:440px; }
.love-award p { font-size:20px; line-height:1.4; }
.love-award a { display:inline-block; font-size:14px; margin-top:24px; }
@media(max-width:700px){ .love-award { gap:24px; margin-block:56px; } .love-award>img { width:80px; } .love-award p { font-size:16px; } }

.love-first-wordmark { width:min(640px,calc(100% - 80px)); margin:clamp(100px,14vw,220px) auto; }
.love-first-wordmark img { display:block; width:100%; height:auto; filter:invert(1); transition:filter .65s cubic-bezier(.4,0,.2,1); }
.light-canvas .love-first-wordmark img { filter:none; }
@media(prefers-reduced-motion:reduce){ .love-first-wordmark img { transition:none; } }

.love-role-line { font-size:14px; font-weight:600; line-height:1.5; margin-bottom:24px; }

.love-retailers { display:flex; align-items:center; justify-content:center; gap:48px; margin-block:100px; }
.love-retailers>img { display:block; width:280px; max-width:45%; height:auto; }
.love-retailers>p { max-width:320px; font-size:20px; line-height:1.5; }
@media(max-width:700px){ .love-retailers { flex-direction:column; gap:28px; margin-block:64px; text-align:center; } .love-retailers>img { width:240px; max-width:100%; } .love-retailers>p { font-size:18px; } }

/* Úlfatími: character development followed by an uninterrupted retail story. */
.story-canvas[data-story-id="ulfatimi"], .story-canvas[data-story-id="arion"] { color:#fff; }
.story-canvas[data-story-id="ulfatimi"].light-canvas, .story-canvas[data-story-id="arion"].light-canvas { color:#000; }
.ulfatimi-media img { display:block; width:100%; height:auto; }
.ulfatimi-media figcaption { color:inherit; opacity:.65; font-size:14px; line-height:1.5; margin-top:16px; }
.ulfatimi-retail-sequence { margin-block:96px 120px; display:flow-root; }
.ulfatimi-retail-sequence .ulfatimi-media { margin-block:0 32px; }
.ulfatimi-retail-sequence .ulfatimi-media:last-child { margin-bottom:0; }
.ulfatimi-back { text-align:center; font-size:16px; }
@media(max-width:700px){
 .ulfatimi-retail-sequence { margin-block:56px 72px; }
 .ulfatimi-retail-sequence .ulfatimi-media { margin-block:0 20px; }
}

.story-card[data-story="playmo"] .story-media>video{object-fit:contain;background:#000}

@media(max-width:700px){
 main:has(>.project-hero){padding-top:120px}
 .project-hero{height:auto;aspect-ratio:16/9}
 .project-hero video{object-fit:contain}
}

/* Let the island fit the artwork proportions rather than squeezing the cards. */
.island.open{width:var(--expanded-width,1140px)}
.suggested-cards .story-card.compact{
 --image-height:var(--suggested-image-height,220px);
 flex-shrink:0!important;
}
.island.open .compact img{object-fit:contain}
@media(max-width:700px){
 .suggested-cards .story-card.compact{max-width:none}
}

.island.open .compact .story-media>img{height:100%!important}

.island-contact-footer{display:none}
/* Short desktop windows need a shallower menu, not smaller body text. */
@media(min-width:701px) and (max-height:850px){
 .island{top:20px}
 .island[data-state=top]{top:24px}
 .home-intro{padding-top:150px}
 .home-intro h1{margin:48px auto}
 .home-intro h2{margin-bottom:48px}
 .story-layout{padding-top:160px}
 .story-layout .story-title{margin-bottom:48px}
 .island.open{padding:24px;max-height:calc(100dvh - 40px);border-radius:36px}
 .island-links{font-size:14px;gap:12px}
 .island.open .studio-mark{width:40px;height:40px}
 .island.open #island-content h2{font-size:26px;margin:24px 0}
 .island.open .suggested{padding:20px}
 .island.open .compact{height:calc(var(--suggested-image-height,180px) + 96px)}
 .island.open .suggested-cards{margin-bottom:18px}
 .island.open .suggested>.dot-link{font-size:18px}
}
@media(max-width:700px){
 .island.open{padding:20px;max-height:calc(100dvh - 40px)}
 .island.open .island-links{font-size:12px;min-width:0}
 .island.open .island-links a{white-space:normal}
 .island.open #island-content h2{margin:24px 0;font-size:24px}
 .island.open .suggested{background:transparent;border-radius:0;padding:0}
 .island.open .suggested-cards{
  width:calc(100% + 40px);margin:0 -20px 20px;padding-inline:20px;
  justify-content:flex-start;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:20px;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
 }
 .island.open .suggested-cards::-webkit-scrollbar{display:none;width:0;height:0}
 .island.open .suggested-cards .compact{
  width:calc(100% - 32px);min-width:0;max-width:none;
  height:260px;scroll-snap-align:center;
 }
 .island.open .compact>img{object-fit:contain}
 .island.open .compact h3{font-size:12px}
 .island-contact-footer{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px 20px;
  margin-top:24px;font-size:14px;line-height:1.5;
 }
 .island-contact-footer a:first-child{flex-basis:100%;overflow-wrap:anywhere;text-align:center}
}

/* Let constrained story cards keep the still image's intrinsic proportions. */
.story-row .story-card .story-media {
 height:auto!important;
 aspect-ratio:var(--image-ratio,1.5);
}
.story-row .story-card .story-media > img { height:100%!important; }
.story-row .story-card > img { height:auto!important; aspect-ratio:var(--image-ratio,1.5); }
/* Preserve the TOS desktop icons if the preview and still differ slightly. */
.story-card[data-story="patch-station"] .story-media > video { object-position:left center; }