/* Do Karelia public home: wordmark, films, one link. Tokens from brand/tokens.json. */
@font-face{font-family:"Platypi";src:url("../assets/fonts/Platypi.ttf") format("truetype");font-weight:300 800;font-display:swap}
@font-face{font-family:"Ubuntu";src:url("../assets/fonts/Ubuntu-Regular.ttf") format("truetype");font-weight:400;font-display:swap}

:root{--ink:#2e3d2b;--background:#f4f0ed;--berry:#8e2419;--stone:#cbc2be;--pad:clamp(16px,3vw,40px)}
*{box-sizing:border-box}
html,body{margin:0}
body{height:100svh;min-height:440px;display:grid;grid-template-rows:auto 1fr;background:var(--background);color:var(--ink);font:400 1rem/1.5 "Ubuntu",system-ui,sans-serif}

/* Wide screens: wordmark centred, partners link on the same line at the right. */
header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:clamp(12px,2.5vh,28px) var(--pad)}
.wordmark{grid-column:2;margin:0;font:500 clamp(2.25rem,4.5vw,3.75rem)/1.1 "Platypi",Georgia,serif;letter-spacing:-.06em;white-space:nowrap}
.wordmark-dot{color:var(--berry)}
.partners{grid-column:3;justify-self:end;padding:10px 4px;color:var(--ink);text-underline-offset:.25em}
.partners:hover{color:var(--berry)}

main{min-height:0;padding:0 var(--pad) clamp(4px,1vh,12px)}
/* The stage is everything under the header; the film takes as much of it as its shape allows. */
.stage{height:100%;container-type:size;display:grid;justify-items:center;align-content:center}
.film{width:min(100cqw,calc((100cqh - 44px) * 16 / 9));aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.film video{display:block;width:100%;height:100%;object-fit:cover;background:var(--background)}

.films{display:flex;justify-content:center}
.films[hidden]{display:none}
.films button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.films button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--stone);transition:background .2s}
.films button[aria-pressed="true"]::before{background:var(--berry)}
.films button:focus-visible,.partners:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}

/* Portrait screens: one compact group in the middle of the screen. Wordmark, the
   square cut edge to edge, dots, then the link. */
@media (max-aspect-ratio:3/4){
  body{height:auto;min-height:100svh;grid-template-rows:none;align-content:center;padding:16px 0}
  header{display:contents}
  .wordmark{order:1;grid-column:1;text-align:center;padding:0 var(--pad) 16px}
  main{order:2;grid-column:1;padding:0}
  .stage{height:auto;container-type:normal}
  .film{width:min(100vw,calc(100svh - 230px));aspect-ratio:1/1;border-radius:0}
  .partners{order:3;grid-column:1;justify-self:center}
}
@media (prefers-reduced-motion:reduce){.films button::before{transition:none}}