/* Johan Laserna — white, quiet: rotating quote, rotating photo, info block */
:root{
  --bg:#ffffff; --ink:#1c1c1c; --muted:#6b665f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1000px;margin:0 auto;padding:0 clamp(18px,5vw,40px)}
main.wrap{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1rem,3vh,2rem);overflow:hidden;
  padding-top:clamp(1.2rem,4vh,2.5rem);padding-bottom:clamp(1.2rem,4vh,2.5rem)}

/* rotating quote (real text, like the old quote-cards) */
/* fixed-height quote block so different-length quotes never move the page */
/* measure in rem, not ch: ch resolves against the body sans, which made the column far
   narrower than the serif quote needed and left quotes tall and narrow. Wider measure plus
   a slightly smaller baseline means far more quotes fit at full size without being shrunk.
   Bottom-aligned at every width: the box height is fixed so nothing below ever moves, and
   anchoring to the bottom keeps the last line the same distance above the photo whether the
   quote runs one line or three. Any slack falls above the quote instead. */
.quote-wrap{max-width:38rem;margin:0 auto;height:clamp(7.5em,20vh,11.5em);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.quote{font-family:var(--f-quote,var(--serif));text-align:center;width:100%;max-width:100%;min-width:0;margin:0;
  font-size:clamp(1.15rem,2.4vw,calc(var(--fs-quote,2.05rem) * .88));line-height:1.3;overflow-wrap:break-word;transition:opacity 1.2s ease}
.quote .text{display:block;text-wrap:balance;letter-spacing:var(--ls-quote,0em)}
.quote .by{display:block;font-family:var(--f-author,var(--serif));font-style:var(--a-style,italic);
  font-size:var(--fs-author,.62em);color:var(--muted);margin-top:.85rem;letter-spacing:var(--ls-author,.01em)}

/* rotating photo, contained on white so any image blends cleanly */
/* the photo scales up with the space available instead of stopping at a fixed cap: it takes
   its own shape (so no letterbox) up to the column width, and only the viewport-height cap
   holds it back on short screens, where it then fits by height with clean side margins. */
.stage{position:relative;width:100%;aspect-ratio:1135/652;height:auto;max-height:46vh;margin:0}
.stage:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:6px}
.layer{position:absolute;inset:0;background-size:contain;background-position:center;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.2s ease;will-change:opacity}

/* info block (from the old design): name, titles, contact */
.info{text-align:center;margin-top:0}
.info__name{font-family:var(--f-name,var(--sans));font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-name,.2em);
  font-size:var(--fs-name,.82rem);color:var(--ink);margin:0}
.info__titles{margin-top:.55rem;color:var(--ink);font-family:var(--f-titles,var(--sans));font-size:var(--fs-titles,1.02rem);letter-spacing:var(--ls-titles,0em)}
.info__contact{margin-top:.7rem;color:var(--muted);font-family:var(--f-contact,var(--sans));font-size:var(--fs-contact,.94rem);line-height:1.75;letter-spacing:var(--ls-contact,0em)}
.info__contact a{text-decoration:none}
.info__contact a:hover{text-decoration:underline}
.info__contact .sep{opacity:.5;margin:0 .25em}

@media (max-width:560px){
  /* anchor content to the top so it floats upward; any leftover height falls to the bottom */
  main.wrap{justify-content:flex-start}
  /* slimmer side margins so the quote and details text gain effective width */
  .wrap{padding:0 14px}
  /* shorter, bottom-aligned quote box: the quote keeps a fixed, tight distance above the
     photo whatever its length, and the photo and details never shift as quotes rotate.
     Slack for short quotes becomes quiet breathing room at the top instead of a big gap. */
  .quote-wrap{max-width:100%;height:clamp(5.5em,15vh,7em)}
  .quote{font-size:clamp(1rem,4.2vw,calc(var(--fs-quote,2.05rem) * .68))}
  /* full-bleed photo (edge to edge) to gain size. body has overflow-x:hidden so 100vw
     cannot scroll. Shape, height and the safety cap are inherited from the base rule. */
  .stage{width:100vw;margin-inline:calc(50% - 50vw)}
  .info__titles{font-size:calc(var(--fs-titles,1.02rem) * .92)}
  .info__contact{font-size:calc(var(--fs-contact,.94rem) * .94)}
  .info__contact .c-line{display:block;margin:.15rem 0}
  .info__contact .sep-desk{display:none}
}
/* Large screens: let the whole composition scale with the viewport instead of sitting
   as a small island in a 1000px column (it used only 36% of the width and 60% of the
   height at 1440p). Scaling the root size lifts type, measure, box and spacing together,
   which is what actually carries presence, and it stays crisp at any size because text
   is vector. Every value here is viewport-derived, so the vertical budget stays
   proportional and never scrolls. The photo is allowed to grow only to roughly its
   native 1135px, so the artwork is never upscaled into softness or cropped. */
@media (min-width:1400px) and (min-height:1000px){
  /* continuous at the 1000px threshold (6px + 1vh == 16px there), so crossing it does
     not step the type, then ramps smoothly up to a 28px ceiling */
  html{font-size:clamp(16px,calc(6px + 1vh),28px)}
  .wrap{max-width:1360px}
  .stage{max-height:52vh}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }