/* Flavour – striped site in the spirit of fattonys.fi, with Flavour's own red, cream and handwriting.
   Big Shoulders Inline stands where their Oskar Inline is, Big Shoulders for the buttons, Besley for the reading text. */
:root {
  --red: #e21e26;       /* brand red: on cream only */
  --stripe-a: #d81b23;  /* the two reds of the stripes; cream text passes contrast on both */
  --stripe-b: #bc1219;
  --cream: #f5f2ef;
  --cream-b: #ebe5dd;
  --ink: #3a0509;       /* deep oxblood instead of black */
  --display: 'Big Shoulders Inline', 'Arial Narrow', sans-serif;
  --caps: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --text: 'Besley', Georgia, serif;
  --pad: 24px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--stripe-b); color: var(--cream); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 clamp(18px, 1.55vw, 22px)/1.45 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
main { overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--pad); top: 8px; z-index: 40; padding: 8px 12px; background: var(--cream); color: var(--ink); }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.light :focus-visible { outline-color: var(--ink); }
section[id] { scroll-margin-top: 0; }

/* five stripes across the page, whatever the width */
.stripes { background: repeating-linear-gradient(90deg, var(--stripe-b) 0 20%, var(--stripe-a) 20% 40%); }
.stripes.light { background: repeating-linear-gradient(90deg, var(--cream) 0 20%, var(--cream-b) 20% 40%); color: var(--ink); }

/* type */
.display { display: block; font: 900 clamp(60px, 12.4vw, 184px)/0.88 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.light .display { color: var(--red); }
.lead { font: 900 clamp(26px, 2.8vw, 40px)/1.15 var(--text); letter-spacing: -0.01em; }
.strong { font-weight: 900; }
.note { font: 500 clamp(12px, 0.95vw, 14px)/1.5 var(--text); letter-spacing: 0.06em; text-transform: uppercase; }
.btn { display: inline-block; padding: 18px 44px 16px; border-radius: 999px; background: var(--cream); color: var(--ink); font: 800 19px/1 var(--caps); letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.3s, color 0.3s; }
.btn:hover { background: var(--ink); color: var(--cream); }
.light .btn { background: var(--red); color: var(--cream); }
.light .btn:hover { background: var(--ink); }

/* header floats over everything: two round badges, the handwriting, three fat bars */
.top { position: fixed; inset: 0 0 auto; z-index: 30; height: 118px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; pointer-events: none; color: var(--cream); transition: color 0.3s; }
.top > * { pointer-events: auto; }
.top-left { display: flex; gap: 12px; }
.badge { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--ink); font: 800 15px/1 var(--caps); letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.3s, color 0.3s, scale 0.3s var(--ease); }
.badge:hover { scale: 1.08; }
.logo { display: block; aspect-ratio: 2160 / 1407; background: currentColor; -webkit-mask: url(../logo.svg) no-repeat center / contain; mask: url(../logo.svg) no-repeat center / contain; }
.top-logo { position: absolute; left: 50%; top: 50%; width: 132px; translate: -50% -50%; }
.burger { width: 62px; height: 62px; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 0 4px; border: 0; background: none; color: inherit; cursor: pointer; }
.burger i { display: block; height: 9px; border-radius: 9px; background: currentColor; transition: translate 0.35s var(--ease), rotate 0.35s var(--ease), opacity 0.2s; }
.burger[aria-expanded='true'] i:nth-of-type(1) { translate: 0 18px; rotate: 45deg; }
.burger[aria-expanded='true'] i:nth-of-type(2) { opacity: 0; }
.burger[aria-expanded='true'] i:nth-of-type(3) { translate: 0 -18px; rotate: -45deg; }
/* over the cream section the header turns red */
.top.on-light { color: var(--red); }
.top.on-light .badge { background: var(--red); color: var(--cream); }
.menu-open .top { color: var(--cream); }
.menu-open .top .badge { background: var(--cream); color: var(--ink); }

/* menu: the whole screen in stripes, the words as big as they go */
.menu { position: fixed; inset: 0; z-index: 29; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 118px var(--pad) 40px; overflow-y: auto; }
.menu a { font: 900 clamp(44px, min(9.5vw, 11svh), 120px)/0.92 var(--display); letter-spacing: 0.01em; text-transform: uppercase; transition: opacity 0.3s; animation: rise 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 0.06s); }
.menu:hover a:not(:hover) { opacity: 0.55; }
@keyframes rise { from { opacity: 0; translate: 0 40px; } }

/* hero: the film from edge to edge, three words stacked in the middle */
.hero { position: relative; height: 100svh; min-height: 560px; display: grid; place-items: center; overflow: hidden; background: #1c1210; text-align: center; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: rgba(28, 10, 8, 0.3); }
.words { position: relative; z-index: 1; display: grid; font: 900 clamp(72px, min(17vw, 24svh), 260px)/0.86 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.words .set { grid-area: 1 / 1; display: grid; }
/* each word comes in after the one above it, and they leave together */
.words b { font-weight: inherit; opacity: 0; translate: 0 60px; transition: opacity 0.5s ease, translate 0.5s ease; }
.words .on b { opacity: 1; translate: 0 0; transition: opacity 0.9s ease, translate 1s var(--ease); }
.words .on b:nth-child(2) { transition-delay: 0.3s; }
.words .on b:nth-child(3) { transition-delay: 0.6s; }

/* a block of centred words, on stripes or on a photo */
.block { display: grid; justify-items: center; gap: 22px; padding: clamp(88px, 11vw, 168px) var(--pad); text-align: center; }
.block > * { min-width: 0; max-width: 100%; }
.block > p:not(.note) { max-width: min(30em, 100%); }
.block > .lead { max-width: 22em; }
.block > .display + * { margin-top: 10px; }
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
.list li + li { margin-top: 2px; }
.houses li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 14px; }
.houses a { border-bottom: 3px solid transparent; transition: border-color 0.3s, color 0.3s; }
.houses a:hover { color: var(--red); border-color: currentColor; }
.houses span { font: 500 0.42em/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.contact { font-weight: 900; font-size: 1.1em; line-height: 1.5; }
.contact a { border-bottom: 2px solid currentColor; }

/* two tall photos side by side, a word at the foot of each */
.tiles { display: grid; grid-template-columns: 1fr 1fr; }
.tile { position: relative; display: grid; align-items: end; justify-items: center; height: min(100svh, 68vw); overflow: hidden; background: #1c1210; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.6s var(--ease); }
.tile:hover img { scale: 1.05; }
.tile::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(rgba(28, 10, 8, 0), rgba(28, 10, 8, 0.55)); }
.tile .display { position: relative; z-index: 1; padding-bottom: clamp(24px, 4.5vw, 70px); font-size: clamp(48px, 9.6vw, 150px); }

/* a photo from edge to edge with the words on top */
.photo { position: relative; display: grid; align-items: center; min-height: 100svh; background: #1c1210; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ''; position: absolute; inset: 0; background: rgba(28, 10, 8, 0.58); }
.photo .block { position: relative; z-index: 1; }

/* calm entrances: the heading first, then each line after the one before it */
.js [data-reveal] > * { opacity: 0; translate: 0 80px; transition: opacity 1.1s ease, translate 1.1s var(--ease); }
.js [data-reveal].in > * { opacity: 1; translate: 0 0; }
.js [data-reveal].in > :nth-child(2) { transition-delay: 0.3s; }
.js [data-reveal].in > :nth-child(3) { transition-delay: 0.55s; }
.js [data-reveal].in > :nth-child(4) { transition-delay: 0.8s; }
.js [data-reveal].in > :nth-child(n + 5) { transition-delay: 1.05s; }

/* footer */
.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px; background: var(--ink); font: 500 13px/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase; }
.foot-logo { width: 84px; }

/* phone */
@media (max-width: 820px) {
  :root { --pad: 20px; }
  .top { height: 84px; padding: 0 14px; }
  .top-left { gap: 6px; }
  .badge { width: 54px; height: 54px; font-size: 11.5px; }
  .top-logo { width: 84px; }
  .burger { width: 48px; height: 48px; gap: 7px; }
  .burger i { height: 7px; }
  .burger[aria-expanded='true'] i:nth-of-type(1) { translate: 0 14px; }
  .burger[aria-expanded='true'] i:nth-of-type(3) { translate: 0 -14px; }
  .menu { padding-top: 84px; }
  .words { font-size: clamp(64px, 23vw, 130px); }
  .display { font-size: clamp(44px, 15.5vw, 110px); }  /* KOKKAAMAAN has to fit on one line */
  .block { gap: 18px; padding: 84px var(--pad); }
  .tiles { grid-template-columns: 1fr; }
  .tile { height: 112vw; }
  .tile .display { padding-bottom: 28px; font-size: clamp(56px, 19vw, 120px); }
  .photo { min-height: 0; }
  .btn { padding: 16px 34px 14px; font-size: 17px; }
  .foot { padding: 24px 20px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu a { animation: none; }
  .words b, .tile img { transition: none; }
  .js [data-reveal] > * { opacity: 1; translate: none; transition: none; }
}