/* =====================================================================================
   v8 HOME (2026-09-21): TereZa's favourite, Radical Media, for Lolli Brands. Less is more.
   Measured off radicalmedia.com at 1440: 30 px page margin, 2 columns of 675 px, captions in a
   bold grotesk around 30 px, one hero video framed inside the page, nothing else on it but the
   wordmark. Her own words on the call: "whiter backgrounds", "not a plain white, graded very
   slightly", "very minimal, not so busy, but clean", "lopsided, very very pretty".
   ===================================================================================== */
body.home-r { background: var(--paper); }

/* the frame: one reel, inset in the page, only the mark on it */
.fh { position: relative; padding: calc(var(--header-h) + 2px) var(--margin) 0; background: var(--paper); }
/* v10 the lens: the page opens on paper with the mark in ink; an aperture opens inside its lens ring onto the reel and
   keeps opening until the reel fills the frame (site.js). The ink mark sits under the frame exactly where the white one is. */
.fh__win { position: relative; height: calc(100svh - var(--header-h) - clamp(64px, 9svh, 110px)); min-height: 440px; }
.fh__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--stage); }
html.js .fh__frame { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); }
html.js .fh.is-open .fh__frame { clip-path: none; }
.fh__ink { position: absolute; z-index: 0; left: 50%; top: 52%; width: min(34vw, 50svh * 1.226); transform: translate(-50%, -50%); }
.fh__ink img { width: 100%; height: auto; display: block; }
.fh.is-open .fh__ink { visibility: hidden; }
.fh__reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--push, 1)); will-change: transform; }
.fh__frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 55%, rgba(11, 10, 13, .1), rgba(11, 10, 13, .42)); pointer-events: none; }
.fh__mark { position: absolute; z-index: 2; left: 50%; top: 52%; width: min(34vw, 50svh * 1.226); transform: translate(-50%, -50%); will-change: transform, opacity; }
.fh__mark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .35)); }
.fh__down { display: grid; place-items: center; height: clamp(64px, 9svh, 110px); color: var(--ink); }
.fh__down svg { width: 26px; height: 34px; transition: transform .4s var(--ease-expressive); }
@media (hover: hover) { .fh__down:hover svg { transform: translateY(6px); } }

/* the lopsided wall */
.rw { padding: clamp(20px, 3vw, 44px) var(--margin) clamp(70px, 9vw, 150px); background: var(--paper); }
.rw__intro { max-width: 1100px; margin-bottom: clamp(48px, 7vw, 120px); }
.rw__intro h1 { font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 5.2rem); letter-spacing: -.045em; line-height: .96; text-wrap: balance; }
.rw__intro p { margin-top: clamp(16px, 1.6vw, 26px); font-size: clamp(1.02rem, 1.3vw, 1.3rem); line-height: 1.4; color: var(--ink-2); max-width: 44ch; }
.rw__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 2.1vw, 34px); align-items: start; }
.rw__col { display: grid; gap: clamp(56px, 7vw, 128px); align-content: start; }
.rw__col--b { margin-top: clamp(90px, 16vw, 280px); will-change: transform; }
.rw__more { margin-top: clamp(60px, 7vw, 120px); }

/* a work: the picture at its own shape, the caption as three plain lines */
.rw__item { display: block; min-width: 0; }
.rb { display: block; color: var(--ink); }
.rb__media { position: relative; overflow: hidden; background: var(--paper-2); }
.rb--work:not(.rb--poster) .rb__media { aspect-ratio: var(--ar, 16 / 10); }
.rb--poster .rb__media { width: 62%; aspect-ratio: var(--par, 2 / 3); background: var(--stage); }
.rw__col--b .rb--poster .rb__media, .rw__col--b .rb--poster .rb__cap { margin-left: auto; width: 62%; }
.rw__col .rw__item:nth-child(4n+3) .rb--poster .rb__media, .rw__col .rw__item:nth-child(4n+3) .rb--poster .rb__cap { margin-left: 19%; width: 62%; }
.rb--poster .rb__cap { width: 62%; }
.rb__media > img, .rb__media > video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease-expressive), opacity .6s var(--ease-productive); }
.rb--poster .rb__media > img { object-fit: contain; }
.rb__hover { position: absolute; inset: 0; opacity: 0; }
.rb.is-playing .rb__hover { opacity: 1; }
@media (hover: hover) { a.rb--work:hover .rb__media > img, a.rb--work:hover .rb__media > video { transform: scale(1.035); } }
.rb__bug { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.rb__media > .status { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(11, 10, 13, .66); color: #fff; border-color: transparent; font-size: .6rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rb__cap { margin-top: 14px; display: grid; gap: 2px; font-weight: 700; font-size: clamp(1.1rem, 1.55vw, 1.6rem); letter-spacing: -.028em; line-height: 1.12; }
.rb__cap span { color: var(--ink-2); font-weight: 600; }
@media (hover: hover) { a.rb--work:hover .rb__cap b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }

/* a press item, Radical Media style */
.rb--press { display: grid; grid-template-columns: 38% 1fr; gap: clamp(14px, 1.6vw, 26px); align-items: start; }
.rb--press:not(:has(.rb__thumb)) { grid-template-columns: 1fr; }
.rb__thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.rb__thumb { position: relative; }
.rb__thumb img, .rb__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-expressive); }
.rb__thumb .grain { display: none; }
.rb--press h3 { font-weight: 700; font-size: clamp(1.25rem, 2vw, 2rem); letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.rb__src { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 600; color: var(--ink-2); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
@media (hover: hover) { a.rb--press:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; } a.rb--press:hover .rb__thumb img, a.rb--press:hover .rb__thumb video { transform: scale(1.05); } }

/* the one dark band: the record, Radical's black awards section */
.rp { background: var(--stage); color: var(--on-stage); padding: clamp(80px, 11vw, 190px) var(--margin); }
.rp__in { max-width: 1400px; }
.rp .slug { color: var(--on-stage-2); }
.rp__line { margin-top: 22px; font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 4.6rem); letter-spacing: -.045em; line-height: 1; max-width: 22ch; text-wrap: balance; }
.rp .laurels { margin-top: clamp(40px, 5vw, 80px); }
.rp .btn { border-color: var(--rule-stage); }

/* the close */
.rc { background: var(--paper); padding: clamp(90px, 12vw, 200px) var(--margin); display: grid; gap: clamp(18px, 2vw, 30px); }
.rc__h { font-weight: 700; font-size: clamp(2.2rem, 5.6vw, 6.4rem); letter-spacing: -.05em; line-height: .95; max-width: 17ch; text-wrap: balance; }

/* the cursor: a small pill that says what a click will do (desktop only) */
.cursor-pill { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transform: translate3d(-100px, -100px, 0); transition: opacity .25s var(--ease-productive); }
.cursor-pill span { display: block; transform: translate(-50%, -50%) scale(.6); transition: transform .35s var(--ease-expressive); background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .9em 1.2em .82em; border-radius: 999px; }
.cursor-pill.is-on { opacity: 1; }
.cursor-pill.is-on span { transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (pointer: coarse) { .cursor-pill { display: none; } }

/* phones: one column, the same order interleaved, the frame keeps its inset */
@media (max-width: 860px) {
  .fh__win { height: calc(78svh - var(--header-h)); }
  .fh__mark, .fh__ink { width: 68vw; }
  .rw__cols { grid-template-columns: 1fr; row-gap: clamp(56px, 12vw, 90px); }
  .rw__col, .rw__col--b { display: contents; }
  .rb--poster .rb__media, .rb--poster .rb__cap, .rw__col--b .rb--poster .rb__media, .rw__col--b .rb--poster .rb__cap, .rw__col .rw__item:nth-child(4n+3) .rb--poster .rb__media, .rw__col .rw__item:nth-child(4n+3) .rb--poster .rb__cap { width: 78%; margin-left: 0; }
  .rw__item:nth-child(even) .rb--poster .rb__media, .rw__item:nth-child(even) .rb--poster .rb__cap { margin-left: auto; }
  .rb--press { grid-template-columns: 34% 1fr; }
}
/* capture and reduced motion: open, still, readable */
html.shot .fh__win { height: 780px; }
html.shot .fh__frame { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) { html.js .fh__frame { clip-path: none; } }