/* demo53 "Lucid Issues": a magazine profile whose pinned cover turns through the issues. */
.p-demo53 { --ink:#14211a; --soft:#4d5a52; --ground:#e8ebe4; --deep:#0f2a1a; --green:#2f7d43; --edge:clamp(16px,3.4vw,56px); background:var(--ground); }
.p-demo53 .main { padding:0; }
.p-demo53 .header { background:var(--deep); }
.p-demo53 .header::before { display:none; }
.lu { color:var(--ink); font-family:"Schibsted Grotesk",system-ui,sans-serif; transition:background-color .7s; overflow-x:clip; }
.lu :where(*) { color:inherit; }
.lu :where(h1,h2,h3,p,dl,dd,dt,figure) { margin:0; }
.lu img { display:block; width:100%; height:100%; object-fit:cover; }
.lu-hero { padding:clamp(18px,3vw,40px) var(--edge) 0; }
.lu-word { font:900 clamp(120px,31vw,560px)/.74 Fraunces,serif; letter-spacing:-.055em; margin-left:-.03em!important; padding-bottom:.08em; font-variation-settings:"opsz" 144; }
.lu-hero__row { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); gap:clamp(20px,4vw,72px); align-items:start; padding-top:clamp(20px,3vw,44px); }
.lu-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-size:15px; font-weight:500; }
.lu-badge { padding:4px 10px; border-radius:99px; background:var(--deep); color:#f4f6f1; font-size:12px; font-weight:700; }
.lu-about { margin-top:18px!important; font:400 clamp(21px,2.1vw,31px)/1.25 Fraunces,serif; }
.lu-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.lu-btn { display:inline-flex; align-items:center; min-height:46px; padding:0 22px; border:1.5px solid var(--deep); border-radius:99px; background:none; color:var(--deep); font:700 15px "Schibsted Grotesk",sans-serif; text-decoration:none; cursor:pointer; transition:background .2s,color .2s,transform .2s; }
.lu-btn:hover { transform:translateY(-2px); }
.lu-btn--solid,.lu-btn[aria-pressed=true] { background:var(--deep); color:#f4f6f1; }
.lu-stats div { padding:14px 0; border-top:1px solid #14211a40; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.lu-stats dt { font-size:14px; color:var(--soft); }
.lu-stats dd { font:600 30px/1 Fraunces,serif; }
.lu-hero__pic { aspect-ratio:4/5; margin-bottom:-14vw!important; position:relative; z-index:2; box-shadow:0 40px 70px -40px #0f2a1a99; }
.lu-issues { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,90px); padding:calc(14vw + 70px) var(--edge) 40px; }
.lu-stage { position:sticky; top:76px; height:calc(100vh - 96px); display:flex; align-items:center; justify-content:center; perspective:1800px; }
.lu-book { position:relative; height:min(100%,780px); aspect-ratio:4/5; max-width:100%; transform-style:preserve-3d; }
.lu-cover { position:absolute; inset:0; transform-origin:left center; transition:transform .9s cubic-bezier(.65,0,.2,1),opacity .3s .55s; backface-visibility:hidden; box-shadow:0 34px 60px -34px #0f2a1a80; }
.lu-cover.is-past { transform:rotateY(-105deg); opacity:0; }
.lu-step { min-height:82vh; display:flex; flex-direction:column; justify-content:center; max-width:520px; }
.lu-step__no { font-size:14px; font-weight:700; color:var(--green); }
.lu-step h2 { font:600 clamp(44px,6vw,92px)/.98 Fraunces,serif; letter-spacing:-.03em; margin:12px 0 18px; }
.lu-step>p:last-of-type { font-size:19px; line-height:1.5; }
.lu-step__mob { display:none; }
.lu-calls,.lu-works,.lu-team { padding:clamp(60px,8vw,130px) var(--edge) 0; }
.lu-sec { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:end; margin-bottom:34px; }
.lu-sec h2,.lu-team h2 { font:600 clamp(44px,6vw,92px)/1 Fraunces,serif; letter-spacing:-.03em; }
.lu-sec p { font-size:18px; color:var(--soft); max-width:520px; }
.lu-call { border-top:1px solid #14211a40; }
.lu-call:last-of-type { border-bottom:1px solid #14211a40; }
.lu-call summary { display:grid; grid-template-columns:5fr 2fr 2fr 28px; gap:14px; align-items:center; padding:20px 0; cursor:pointer; list-style:none; font-weight:500; }
.lu-call summary::-webkit-details-marker { display:none; }
.lu-call__t { font:600 clamp(24px,3vw,44px)/1.1 Fraunces,serif; }
.lu-call i { position:relative; height:28px; }
.lu-call i::before,.lu-call i::after { content:""; position:absolute; left:6px; right:6px; top:13px; height:2px; background:currentColor; transition:transform .25s; }
.lu-call i::after { transform:rotate(90deg); }
.lu-call[open] i::after { transform:none; }
.lu-call__in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr); gap:32px; padding:4px 0 30px; align-items:end; }
.lu-call__in img { aspect-ratio:16/8; }
.lu-call__in p { font-size:19px; line-height:1.45; margin-bottom:20px; }
.lu-mosaic { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(70px,8.4vw,150px); gap:10px; }
.lu-mosaic figure { overflow:hidden; }
.lu-mosaic img { transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.lu-mosaic figure:hover img { transform:scale(1.05); }
.lu-mosaic figure:nth-child(1) { grid-area:1/1/5/6; }
.lu-mosaic figure:nth-child(2) { grid-area:1/6/3/9; }
.lu-mosaic figure:nth-child(3) { grid-area:1/9/4/13; }
.lu-mosaic figure:nth-child(4) { grid-area:3/6/7/9; }
.lu-mosaic figure:nth-child(5) { grid-area:4/9/7/13; }
.lu-mosaic figure:nth-child(6) { grid-area:5/1/7/4; }
.lu-mosaic figure:nth-child(7) { grid-area:5/4/7/6; }
.lu-team { padding-bottom:clamp(60px,8vw,120px); }
.lu-team__g { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,28px); margin-top:30px; }
.lu-team a { color:inherit; text-decoration:none; display:grid; gap:2px; }
.lu-team img { aspect-ratio:1; margin-bottom:12px; filter:saturate(.9); transition:filter .3s; }
.lu-team a:hover img { filter:none; }
.lu-team strong { font:600 clamp(20px,2vw,30px)/1.1 Fraunces,serif; }
.lu-team span { color:var(--soft); font-size:15px; }
.lu :focus-visible { outline:3px solid var(--green); outline-offset:3px; }
@media (max-width:860px) {
  .lu-hero__row,.lu-sec,.lu-call__in { grid-template-columns:1fr; }
  .lu-hero__pic { margin-bottom:0!important; }
  .lu-issues { display:block; padding-top:48px; }
  .lu-stage { display:none; }
  .lu-step { min-height:0; padding:0 0 42px; }
  .lu-step__mob { display:block; margin-top:18px!important; aspect-ratio:4/5; }
  .lu-call summary { grid-template-columns:1fr 1fr 28px; }
  .lu-call__t { grid-column:1/-1; }
}
@media (max-width:520px) { .lu-team__g { grid-template-columns:1fr 1fr 1fr; } .lu-team span { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { .lu,.lu * { transition:none!important; } }