/* ============================================================
   ALENA HETZENDORFER — KINO
   Vermilion frame, black + red rounded cards, giant red type,
   outlined pill rows, a fixed pill navigation at the bottom.
   ============================================================ */

/* Layout: the whole page sits inside a red frame; every block is a
   rounded card (black or red-with-black-outline) separated by 10px gaps. */
:root{
  --red:    #E0321F;
  --black:  #0A0A0A;
  --cream:  #F3EDE4;
  --radius: 22px;
  --gap:    10px;
  --frame:  max(14px, env(safe-area-inset-left, 0px));
  --frame-r:max(14px, env(safe-area-inset-right, 0px));
  /* the whole site uses three typefaces: Archivo (sans), Instrument Serif, Nothing You Could Do (hand) */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-serif:   'Instrument Serif', 'Times New Roman', serif;
  --f-script:  'Nothing You Could Do', cursive;
  --f-print:   'Instrument Serif', 'Times New Roman', serif;
  /* Name font. Free stand-in for Druk Wide Bold (Archivo, widest + heaviest).
     If you buy a Druk Wide web license, put 'Druk Wide' first in this list. */
  --f-name:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat; color:var(--black);
  font-family:var(--f-body); font-size:16px; line-height:1.35; font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding: max(14px, env(safe-area-inset-top,0px)) var(--frame-r) calc(110px + env(safe-area-inset-bottom,0px)) var(--frame);
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
::selection{ background:var(--black); color:var(--red); }
:focus-visible{ outline:2px solid var(--black); outline-offset:3px; }

main{ display:flex; flex-direction:column; gap:var(--gap); }
.card{ border-radius:var(--radius); overflow:hidden; }
.card-black{ background:var(--black); color:var(--red); }
.card-line{ background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat; border:1.5px solid var(--black); }

/* giant red display type, scaled by script.js to fill its line */
.display{ font-family:var(--f-display); font-weight:800; letter-spacing:-.035em; line-height:.86; margin:0; }
[data-fit] > span{ display:block; width:max-content; white-space:nowrap; }

/* ================= TOP STRIP ================= */
/* same tall serif as the clients band */
.strip{ padding:10px 16px 14px; margin-bottom:var(--gap); text-align:center; }
.strip p{
  margin:0; font-family:var(--f-serif); font-weight:400; line-height:1;
  font-size:clamp(1.9rem, 3.6vw, 3rem); letter-spacing:-.01em;
  display:inline-block; transform:scaleY(1.25); transform-origin:50% 60%;
}

/* ================= HERO ================= */
.hero{ position:relative; height:calc(100svh - 120px); min-height:460px; background:#000; }
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-title .m{ display:none !important; }
@media (max-width:700px){ .hero-title .d{ display:none !important; } .hero-title .m{ display:block !important; } }
.hero-title{
  font-family:var(--f-name); font-weight:900; font-stretch:125%;
  font-variation-settings:'wdth' 125, 'wght' 900; letter-spacing:-.02em; line-height:.9;
}
.hero-title{ position:absolute; left:0; right:0; top:0; z-index:2; padding:2.4% 1.6% 0; color:var(--red); }

/* ================= MARQUEE (clients) ================= */
.marquee{ padding:18px 0 22px; }
.marquee-track{ display:flex; width:max-content; animation:marq var(--dur, 90s) linear infinite; }
.marquee-track span{
  font-family:var(--f-serif); font-size:clamp(3rem, 7.4vw, 6.4rem); line-height:1; white-space:nowrap;
  display:inline-block; transform:scaleY(1.25); transform-origin:50% 60%; padding:0 .32em; letter-spacing:-.02em;
}
.marquee-track span.star{ font-family:var(--f-display); font-weight:400; font-size:clamp(2rem,4.4vw,4rem); transform:none; align-self:flex-start; padding:0 .1em; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ================= FILM GRID ================= */
.films{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }
.film{
  appearance:none; border:0; background:none; padding:0; margin:0; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:var(--gap); min-width:0;
}
.film-cap{ flex:1 0 auto; padding:12px 16px 14px; font-size:clamp(1.25rem, 2.4vw, 2.1rem); line-height:1.12; font-weight:500; transition:background .2s, color .2s; }
.film-cap span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.film-cap span:first-child{ white-space:normal; text-wrap:balance; }
.film-media{ position:relative; aspect-ratio:16/10; background:#000; }
.film-media img, .film-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.film-media video{ opacity:0; transition:opacity .5s ease; }
/* vertical (9:16) films: shown whole, centred on the site's red paper */
.film-media.is-portrait{ background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat; box-shadow:inset 0 0 0 1.5px var(--black); }
.film-media.is-portrait img, .film-media.is-portrait video{ object-fit:contain; }
.film-media video.on{ opacity:1; }
.film-play{
  position:absolute; right:14px; bottom:14px; z-index:2; padding:8px 16px; border-radius:999px;
  background:var(--red); border:1.5px solid var(--black); font-weight:600; opacity:0; transition:opacity .2s;
}
.film:hover .film-play, .film:focus-visible .film-play{ opacity:1; }
.film:hover .film-cap, .film:focus-visible .film-cap, .film:active .film-cap{ background:var(--black); color:var(--red); }
/* Work page + menu pools: landscape and portrait films in separate blocks */
.films.is-grouped{ display:flex; flex-direction:column; gap:var(--gap); }
.films-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }
.films-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:clamp(14px,2vw,24px) clamp(16px,2.6vw,36px); }
.films-head h2{ margin:0; font-family:var(--f-name); font-stretch:125%; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; line-height:.9; font-size:clamp(1.8rem,5vw,4.2rem); color:var(--red); }
.films-head span{ font-size:clamp(1rem,1.6vw,1.3rem); white-space:nowrap; }
.films-grid + .films-head{ margin-top:clamp(14px,3vw,40px); }
/* portrait block: tall 9:16 cards, three across */
.films-tall{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.films-tall .film-media{ aspect-ratio:9/16; }
.films-tall .film-media.is-portrait{ background:#000; box-shadow:none; }
.films-tall .film-media.is-portrait img, .films-tall .film-media.is-portrait video{ object-fit:cover; }
.films-tall .film-cap{ font-size:clamp(1.05rem, 1.8vw, 1.6rem); }
@media (max-width:700px){
  .films, .films-grid{ grid-template-columns:1fr; } .film-play{ opacity:1; }
  .films-tall{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .films-tall .film-cap{ padding:10px 12px 12px; font-size:1rem; }
  .films-tall .film-play{ right:8px; bottom:8px; padding:6px 12px; font-size:.9rem; }
}

/* ================= CONTENTS (work page) ================= */
.contents{ padding:clamp(16px,2.4vw,32px) clamp(16px,2.6vw,36px); }
.contents-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-bottom:1.5px solid var(--black); padding-bottom:10px; margin-bottom:6px; }
.contents-head h2{ margin:0; font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.8rem,4vw,3rem); line-height:1; }
.contents-head span{ font-size:clamp(1rem,1.6vw,1.3rem); }
.contents-list{ list-style:none; margin:0; padding:0; columns:2; column-gap:clamp(24px,4vw,64px); }
.contents-list li{ break-inside:avoid; }
.contents-list a{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid rgba(10,10,10,.35); font-size:clamp(1rem,1.5vw,1.25rem); }
.contents-list .n{ font-variant-numeric:tabular-nums; font-weight:700; min-width:2ch; }
.contents-list .t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.contents-list .dots{ flex:1; min-width:16px; border-bottom:2px dotted rgba(10,10,10,.55); transform:translateY(-4px); }
.contents-list .c{ white-space:nowrap; opacity:.8; }
.contents-list a:hover .t{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px){ .contents-list{ columns:1; } }
.film{ scroll-margin-top:16px; }

/* ================= MENU (index table) ================= */
.menu{ padding: clamp(20px,3vw,40px) clamp(16px,2.6vw,36px) clamp(16px,2.6vw,36px); }
.menu-title{ color:var(--red); margin-bottom:clamp(28px,5vw,80px); }
.menu-panel{ background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat; color:var(--black); border-radius:28px; padding:clamp(16px,2.2vw,30px); }
.menu-head, .menu-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; }
.menu-head{ padding:6px 22px 18px; font-weight:800; font-size:clamp(1.2rem,2.2vw,2rem); }
.menu-head span:last-child, .menu-row span:last-child{ text-align:right; }
.menu-rows{ display:flex; flex-direction:column; gap:12px; }
.menu-row{
  appearance:none; width:100%; text-align:left; cursor:pointer; background:transparent;
  border:1.5px solid var(--black); border-radius:18px; padding:12px 20px;
  font-size:clamp(1.1rem,2.2vw,2rem); font-weight:500; transition:background .15s, color .15s;
}
.menu-row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-row:hover, .menu-row:focus-visible, .menu-row:active{ background:var(--black); color:var(--red); outline:none; }
@media (max-width:640px){
  .menu-head{ display:none; }
}

/* ================= PAGE TITLE CARD ================= */
.page-title{ padding:clamp(16px,2.4vw,32px) clamp(14px,2vw,28px) clamp(12px,1.6vw,22px); color:var(--red); }
.page-sub{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 18px; font-size:clamp(1.1rem,2vw,1.6rem); }
.page-sub p{ margin:0; max-width:60ch; }

/* ================= ABOUT ================= */
.about{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--gap); align-items:start; }
.portrait{ margin:0; background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat; }
.portrait img{ width:100%; height:auto; }
.about-text{ padding:clamp(18px,2.4vw,32px); display:flex; flex-direction:column; gap:18px; }
/* "Creating art is what I do": the same red paper, one shade deeper, so the box stands out */
.about-text.card-line{
  background:linear-gradient(rgba(70,0,0,.17), rgba(70,0,0,.17)), url('assets/paper-red.jpg') center top / 500px auto repeat;
  background-color:#C22817;
}
.about-text .lead{ font-size:clamp(1.5rem,3vw,2.6rem); line-height:1.08; font-weight:700; letter-spacing:-.02em; margin:0; }
.about-text p{ margin:0; font-size:1.1rem; max-width:62ch; }
.facts{ display:flex; flex-direction:column; gap:10px; margin:6px 0 0; }
.facts div{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:12px; border:1.5px solid var(--black); border-radius:16px; padding:10px 16px; font-size:1.15rem; }
.facts dt{ font-weight:800; } .facts dd{ margin:0; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } }

/* ================= AD (About page) ================= */
/* A vintage print ad: a narrow justified column of copy rising straight
   out of the camera's lens hood. The column width = the hood width (62%). */
.ad{
  /* same red as the page; white type; black camera */
  background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat;
  color:#FFFFFF; position:relative; border:1.5px solid var(--black);
  padding: clamp(36px,6vw,90px) clamp(14px,3vw,40px) clamp(30px,5vw,70px);
}
.ad-inner{
  position:relative; margin:0 auto; display:flex; flex-direction:column; align-items:center;
  --col: clamp(230px, 30vw, 340px);   /* text column = lens hood width */
}
.ad-copy{ width:var(--col); font-family:var(--f-print); }
.ad-copy h2{
  font-family:var(--f-print); font-weight:400; font-size:clamp(1.55rem, 4.6vw, 2.25rem);
  letter-spacing:-.01em; line-height:1.05; margin:0 0 .55em; text-align:center; text-wrap:balance;
}
.ad-copy p{
  margin:0; font-size:clamp(10.5px, 2.5vw, 13.2px); line-height:1.38; text-align:justify;
  hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty;
}
.ad-copy p + p{ text-indent:1.3em; }
.ad-copy u{ text-decoration-thickness:1px; text-underline-offset:2px; }
.ad-copy p.sig{ text-indent:0; text-align:right; font-family:var(--f-script); font-size:clamp(1.5rem,4vw,2rem); line-height:1; margin:.15em 0 0; }
.ad-sign{
  display:flex; align-items:center; gap:8px; margin:.9em 0 .8em; padding-top:.6em; border-top:1px solid #FFFFFF;
  font-size:clamp(8px,1.9vw,9.5px); line-height:1.25; letter-spacing:.02em; text-transform:uppercase;
}
.ad-sign .seal{
  flex:none; width:clamp(30px,6vw,40px); aspect-ratio:1; background:#FFFFFF; color:var(--red);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-serif); font-size:clamp(15px,3vw,20px); text-transform:none;
}
/* the hood is 37.6% of the image width, so the image is scaled to make it match the column;
   on phones the camera body runs past the card edges and is cropped, like a magazine bleed */
.ad-cam{ width:calc(var(--col) / .3758); max-width:none; flex:none; height:auto; display:block; margin-top:4px; }

/* ================= ARCHIVE FOLDER (Call page) ================= */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.desk{ background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat; display:flex; justify-content:center; padding:clamp(24px,4vw,56px) 0; }
/* the folder photo and everything on it share a 640 x 820 grid; 1u = 1/640 of the width */
.doc{
  --w:min(760px, 94vw);
  position:relative; flex:none; width:var(--w); min-height:calc(var(--w) * 860 / 640);
  container-type:inline-size; --u:calc(100cqw / 640); --t:1.12; color:#1d1c1a;
  /* the folder photo is a 9-slice: clip/top and dog-ears/bottom keep their shape,
     the plain paper in between stretches when the form needs more room */
  border:0 solid transparent;
  border-image:url('assets/folder.webp') 320 0 280 0 fill / calc(var(--w) * 160 / 640) 0 calc(var(--w) * 140 / 640) 0 stretch;
}
@media (max-width:640px){ .doc{ --w:142vw; --t:1.42; } }   /* phones: zoom in on the sheet, tabs bleed off, type larger */
/* printed ink: slightly uneven, multiplied into the paper */
.d-fax, .d-head dt, .d-head dd > span, .d-head .d-mail, .df > span, .df legend, .check, .d-foot, .d-attach span, .d-attach-note{
  mix-blend-mode:multiply; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.1 1.55'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.1 1.55'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.d-fax{ position:absolute; left:calc(118 * var(--u)); right:calc(118 * var(--u)); top:calc(56 * var(--u)); margin:0;
  display:flex; justify-content:space-between; font-family:var(--f-body); font-weight:700; font-size:calc(8.6 * var(--u) * var(--t)); letter-spacing:.04em; }
.d-fax span:nth-child(2){ visibility:hidden; }
.d-head{ margin:0;
  font-family:var(--f-body); font-weight:900; font-stretch:125%; text-transform:uppercase;
  font-size:calc(7.6 * var(--u) * var(--t)); letter-spacing:.05em; line-height:1.25; }
.d-head div{ display:grid; grid-template-columns:calc(110 * var(--u)) minmax(0,1fr); gap:calc(8 * var(--u)); padding:calc(3.5 * var(--u)) 0; border-bottom:1px dotted rgba(29,28,26,.5); }
.d-head div:first-child{ border-top:1px solid rgba(29,28,26,.75); }
.d-head dt{ opacity:.6; }
.d-mail{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.d-mail:hover{ color:#B3261A; }
.d-mail:focus-visible{ outline:2px solid #1f2a55; outline-offset:2px; }
/* live dot: open bookings are current */
.live{ display:inline-block; width:calc(6 * var(--u) * var(--t)); height:calc(6 * var(--u) * var(--t)); margin-left:calc(7 * var(--u)); vertical-align:middle;
  border-radius:50%; background:#1FAE4B; box-shadow:0 0 0 0 rgba(31,174,75,.55); animation:livepulse 1.6s ease-out infinite; }
@keyframes livepulse{ 0%{ opacity:1; box-shadow:0 0 0 0 rgba(31,174,75,.55); } 60%{ opacity:.35; box-shadow:0 0 0 calc(5 * var(--u)) rgba(31,174,75,0); } 100%{ opacity:1; box-shadow:0 0 0 0 rgba(31,174,75,0); } }
@media (prefers-reduced-motion: reduce){ .live{ animation:none; } } .d-head dd{ margin:0; overflow-wrap:anywhere; }
.d-head dd .d-mail{ text-transform:none; font-stretch:100%; font-weight:700; letter-spacing:.01em; }
.d-body{ position:relative; margin:0 calc(150 * var(--u)) 0 calc(140 * var(--u)); padding:calc(160 * var(--u)) 0 calc(128 * var(--u)); display:flex; flex-direction:column; gap:calc(13 * var(--u)); }
.d-form{ margin:0; display:flex; flex-direction:column; gap:calc(11 * var(--u)); }
.d-last{ display:grid; grid-template-columns:minmax(calc(170 * var(--u)),1fr) auto; align-items:start; gap:calc(10 * var(--u)); margin-top:calc(4 * var(--u)); }
.df{ display:block; border:0; padding:0; margin:0; min-width:0; }
.df-pick{ margin-bottom:calc(5 * var(--u)); }
.df > span, .df legend{ display:block; padding:0; font-family:var(--f-body); font-weight:900; font-stretch:125%;
  font-size:calc(7.8 * var(--u) * var(--t)); letter-spacing:.06em; }
.df input, .df textarea{
  display:block; width:100%; border:0; background:transparent; outline:none; resize:none; color:#1f2a55;
  font-family:'Nothing You Could Do', cursive; font-size:calc(18 * var(--u)); line-height:calc(26 * var(--u));
  height:calc(26 * var(--u)); padding:0; border-bottom:1px solid rgba(29,28,26,.45);
}
.df textarea{ height:calc(100 * var(--u)); border-bottom:0;
  background-image:linear-gradient(transparent calc(24 * var(--u)), rgba(29,28,26,.42) calc(24 * var(--u)), transparent calc(25 * var(--u)));
  background-size:100% calc(25 * var(--u)); line-height:calc(25 * var(--u)); }
.df input:focus, .df textarea:focus{ background-color:rgba(224,50,31,.06); }
.checks{ display:grid; grid-template-columns:repeat(3, max-content); gap:calc(9 * var(--u)) calc(22 * var(--u)); margin-top:calc(9 * var(--u)); }
.check{ position:relative; display:flex; align-items:center; gap:calc(6 * var(--u)); cursor:pointer;
  font-family:var(--f-body); font-weight:700; font-size:calc(9 * var(--u) * var(--t)); letter-spacing:.02em; }
.check input{ position:absolute; opacity:0; pointer-events:none; }
.check b{ width:calc(11 * var(--u)); height:calc(11 * var(--u)); border:1.5px solid #1d1c1a; display:inline-flex; align-items:center; justify-content:center; font-weight:400; }
.check input:checked + b::after{ content:"\2715"; font-size:calc(11 * var(--u) * var(--t)); line-height:1; color:#1f2a55; transform:rotate(-6deg) scale(1.15); }
.check input:focus-visible + b{ outline:2px solid #1f2a55; outline-offset:2px; }
/* rubber stamp = the send button */
.d-stamp{
  position:relative; margin-top:calc(6 * var(--u)); transform:rotate(-7deg);
  appearance:none; cursor:pointer; background:transparent; color:#B3261A; text-align:left;
  border:calc(3 * var(--u)) double currentColor; padding:calc(6 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u));
  font-family:var(--f-body); font-weight:900; font-stretch:125%; line-height:.92;
  mix-blend-mode:multiply; opacity:1; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.75'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.75'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  transition:transform .15s ease;
}
.d-stamp b{ display:block; font-size:calc(13 * var(--u) * 1.12); letter-spacing:.04em; }
.d-stamp span{ display:block; font-size:calc(27 * var(--u) * 1.12); letter-spacing:-.01em; }
.d-stamp i{ display:block; font-style:normal; font-family:var(--f-body); font-weight:700; font-size:calc(8 * var(--u) * 1.12); text-transform:uppercase; margin-top:calc(4 * var(--u)); }
.d-stamp:hover{ transform:rotate(-7deg) scale(1.04); }
.d-stamp:active{ transform:rotate(-7deg) scale(.96); }
.d-stamp:focus-visible{ outline:2px dashed #C42A1B; outline-offset:4px; }
.d-note{ margin:calc(-4 * var(--u)) 0 0; max-width:calc(260 * var(--u));
  font-family:'Nothing You Could Do', cursive; font-size:calc(17 * var(--u)); line-height:1.3; color:#1f2a55; transform:rotate(-2deg); }
.d-foot{ position:absolute; left:calc(140 * var(--u)); bottom:calc(104 * var(--u)); margin:0; font-family:var(--f-body); font-weight:900; font-stretch:125%; font-size:calc(6.4 * var(--u) * var(--t)); letter-spacing:.08em; }

.d-attach{ display:inline-block; cursor:pointer; position:relative; }
.d-attach input{ position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.d-attach span{ display:inline-block; font-family:var(--f-body); font-weight:900; font-stretch:125%; font-size:calc(7.8 * var(--u) * var(--t)); letter-spacing:.06em;
  border:1.5px solid #1d1c1a; padding:calc(4 * var(--u)) calc(9 * var(--u)); }
.d-attach:hover span{ background:#1d1c1a; color:#EFEDE6; mix-blend-mode:normal; -webkit-mask:none; mask:none; }
.d-attach:focus-within span{ outline:2px solid #1f2a55; outline-offset:2px; }
.d-attach-note{ margin:calc(5 * var(--u)) 0 0; font-family:var(--f-body); font-size:calc(7.6 * var(--u) * var(--t)); line-height:1.3; }
.d-files{ list-style:none; margin:calc(4 * var(--u)) 0 0; padding:0; font-family:'Nothing You Could Do', cursive; font-size:calc(13 * var(--u)); line-height:1.3; color:#1f2a55; }
.d-files li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc.sent .d-attach{ pointer-events:none; opacity:.5; }
.doc.sent input, .doc.sent textarea{ pointer-events:none; }
.doc.sent .d-stamp{ cursor:default; }

/* ================= CALL (contact) ================= */
.call{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--gap); align-items:start; }
.call-info{ padding:clamp(18px,2.4vw,30px); display:flex; flex-direction:column; gap:14px; font-size:1.15rem; }
.call-info p{ margin:0; }
.call-info b{ font-weight:800; display:block; }
.copy-btn{ appearance:none; cursor:pointer; background:var(--red); border:1.5px solid var(--black); border-radius:999px; padding:4px 12px; font-weight:600; margin-left:6px; }
.copy-btn:hover{ background:var(--black); color:var(--red); }
form.call-form{ padding:clamp(16px,2.2vw,28px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fld{ display:flex; flex-direction:column; gap:6px; border:1.5px solid var(--black); border-radius:18px; padding:10px 16px; min-width:0; }
.fld.full{ grid-column:1 / -1; }
.fld label, .fld legend{ font-weight:800; font-size:.95rem; padding:0; }
fieldset.fld{ margin:0; }
.fld input, .fld textarea{ border:0; background:transparent; outline:none; color:var(--black); font:inherit; font-size:1.3rem; padding:2px 0; }
.fld input::placeholder, .fld textarea::placeholder{ color:rgba(10,10,10,.5); }
.fld textarea{ resize:vertical; min-height:110px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips input{ position:absolute; opacity:0; pointer-events:none; }
.chips label{ border:1.5px solid var(--black); border-radius:999px; padding:6px 14px; cursor:pointer; font-weight:500; font-size:1.05rem; }
.chips input:checked + label{ background:var(--black); color:var(--red); }
.chips input:focus-visible + label{ outline:2px solid var(--black); outline-offset:2px; }
.send{
  grid-column:1 / -1; appearance:none; border:0; cursor:pointer; border-radius:var(--radius);
  background:var(--black); color:var(--red); padding:16px 22px 12px; text-align:left;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.send .display{ font-size:clamp(2.6rem,7vw,6rem); }
.send:hover{ opacity:.92; }
.receipt{ padding:clamp(18px,3vw,36px); }
.receipt .display{ font-size:clamp(2rem,6vw,5rem); color:var(--red); }
.receipt p{ margin:14px 0 0; font-size:1.2rem; }
@media (max-width:820px){ .call{ grid-template-columns:1fr; } form.call-form{ grid-template-columns:1fr; } }

/* ================= FOOTER ================= */
footer{ margin-top:var(--gap); padding:clamp(18px,2.4vw,30px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; font-size:1.1rem; }
footer .stack{ display:flex; flex-direction:column; gap:4px; min-width:0; }
footer b{ font-weight:800; }
footer a:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px){ footer{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ================= PILL NAV (fixed, bottom centre) ================= */
.pills{
  position:fixed; z-index:60; left:50%; transform:translateX(-50%);
  bottom:max(14px, env(safe-area-inset-bottom,0px));
  display:flex; align-items:stretch; gap:2px;
}
.pills a{
  background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat; border:1.5px solid var(--black); color:var(--black);
  padding:12px 24px; font-size:clamp(1.05rem,1.8vw,1.55rem); font-weight:600; line-height:1;
  display:flex; align-items:center; transition:background .15s, color .15s; white-space:nowrap;
}
.pills a{ border-radius:999px; }
.pills a:hover, .pills a[aria-current="page"]{ background:var(--black); color:var(--red); }
@media (max-width:420px){ .pills a{ padding:11px 15px; } }

/* ================= PLAYER ================= */
.player{
  position:fixed; inset:0; z-index:150; background:var(--black); color:var(--red);
  display:flex; flex-direction:column; gap:12px;
  padding:max(14px, env(safe-area-inset-top,0px)) max(14px, env(safe-area-inset-right,0px)) max(14px, env(safe-area-inset-bottom,0px)) max(14px, env(safe-area-inset-left,0px));
}
.player-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:clamp(1.1rem,2vw,1.6rem); }
.player-close{ appearance:none; cursor:pointer; background:var(--red); color:var(--black); border:1.5px solid var(--red); border-radius:999px; padding:8px 18px; font-weight:600; }
.player-close:hover{ background:var(--black); color:var(--red); }
.player-stage{ flex:1; min-height:0; border-radius:var(--radius); overflow:hidden; background:#000; }
.player video{ width:100%; height:100%; object-fit:contain; }
.player-meta{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.player-meta h3{ margin:0; font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.8rem,4vw,3.4rem); line-height:.95; }
.player-meta p{ margin:0; font-size:1.05rem; color:var(--cream); opacity:.8; max-width:60ch; }
@media (max-width:640px){ .player-meta{ grid-template-columns:1fr; } }

/* ================= POOL (Alena's menu → every film of one style) ================= */
.pool{
  position:fixed; inset:0; z-index:140; overflow-y:auto; overscroll-behavior:contain;
  background:var(--red) url('assets/paper-red.jpg') center top / 500px auto repeat;
  padding:max(14px, env(safe-area-inset-top,0px)) var(--frame-r) calc(110px + env(safe-area-inset-bottom,0px)) var(--frame);
  display:flex; flex-direction:column; gap:var(--gap);
}
.pool > *{ flex-shrink:0; }
.pool-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  padding:clamp(14px,2vw,26px) clamp(16px,2.6vw,36px);
}
.pool-kicker{ display:block; font-size:clamp(1rem,1.6vw,1.3rem); opacity:.85; margin-bottom:4px; }
.pool-name h2{
  margin:0; color:var(--red); font-family:var(--f-name); font-stretch:125%; font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.9; font-size:clamp(2.2rem,8vw,7rem);
}
.pool-side{ display:flex; align-items:center; gap:14px; color:var(--red); font-size:clamp(1rem,1.6vw,1.3rem); white-space:nowrap; }
.menu-row.is-empty{ cursor:default; opacity:.5; }
.menu-row.is-empty:hover{ background:transparent; color:var(--black); }
@media (max-width:640px){
  .pool-head{ flex-direction:column; align-items:stretch; }
  .pool-side{ justify-content:space-between; }
}
/* the floating close pill, same place and look as the main pill nav */
.pool-back{
  position:fixed; z-index:145; left:50%; transform:translateX(-50%); bottom:max(14px, env(safe-area-inset-bottom,0px));
  appearance:none; cursor:pointer; border-radius:999px; border:1.5px solid var(--black);
  background:var(--black); color:var(--red); padding:12px 26px; font-size:clamp(1.05rem,1.8vw,1.55rem); font-weight:600; line-height:1; white-space:nowrap;
}
.pool-back:hover{ background:var(--red); color:var(--black); }
.pool[hidden] + .pool-back{ display:none; }

/* ================= TRANSITIONS ================= */
/* Page to page: the new page wipes up over the old one, which sinks back
   a little. The strip on top and the pill nav stay put during the change.
   (Chrome, Edge, Safari 18.2+; other browsers simply switch pages.) */
@view-transition{ navigation:auto; }
.strip{ view-transition-name:strip; }
.pills{ view-transition-name:pills; }
::view-transition-group(root){ animation-duration:.7s; }
::view-transition-old(root){ animation:vt-sink .7s cubic-bezier(.65,0,.25,1) both; }
::view-transition-new(root){ animation:vt-wipe .7s cubic-bezier(.65,0,.25,1) both; }
::view-transition-group(pills), ::view-transition-group(strip){ animation-duration:.7s; animation-timing-function:cubic-bezier(.65,0,.25,1); }
@keyframes vt-sink{ to{ transform:scale(.94) translateY(-2%); opacity:.35; filter:brightness(.55); } }
@keyframes vt-wipe{ from{ clip-path:inset(100% 0 0 0 round 28px 28px 0 0); } to{ clip-path:inset(0 0 0 0 round 0); } }

/* first paint of every page: content rises in softly */
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
main > *{ animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
main > *:nth-child(2){ animation-delay:.06s; } main > *:nth-child(3){ animation-delay:.12s; }
main > *:nth-child(4){ animation-delay:.18s; } main > *:nth-child(n+5){ animation-delay:.24s; }

/* film pool + player: slide in, fade out */
@keyframes sheet-in{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
.pool:not([hidden]){ animation:sheet-in .5s cubic-bezier(.2,.7,.2,1) both; }
.player:not([hidden]){ animation:fade-in .35s ease both; }
.player:not([hidden]) .player-stage{ animation:sheet-in .5s cubic-bezier(.2,.7,.2,1) both; }
.pool.is-closing, .player.is-closing{ animation:none; opacity:0; transition:opacity .25s ease; }
.pool.is-closing{ transform:translateY(24px); transition:opacity .25s ease, transform .25s ease; }
.pool-back{ animation:fade-in .4s .15s ease both; }

/* smooth card hover */
.film-media img, .film-media video{ transition:opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover){ .film:hover .film-media img, .film:hover .film-media video{ transform:scale(1.03); } }

@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
  main > *, .pool:not([hidden]), .player:not([hidden]), .player:not([hidden]) .player-stage, .pool-back{ animation:none; }
  .film:hover .film-media img, .film:hover .film-media video{ transform:none; }
}