/* ==========================================================================
   FLUXOS CREW — one-ink screenprint on black stock
   Ink: #ffe9a6 · Stock: #080806 · Archivo Black + Hanken Grotesk
   ========================================================================== */

:root{
  /* --- ink & stock (pinned palette) --- */
  --ink:        #ffe9a6;
  --ink-92:     rgba(255,233,166,.92);
  --ink-70:     rgba(255,233,166,.70);
  --ink-62:     rgba(255,233,166,.62);
  --ink-52:     rgba(255,233,166,.52);
  --ink-34:     rgba(255,233,166,.34);
  --ink-20:     rgba(255,233,166,.20);
  --ink-12:     rgba(255,233,166,.12);
  --ink-06:     rgba(255,233,166,.06);
  --stock:      #080806;
  --stock-deep: #000000;

  /* --- press registration (driven by scroll velocity) --- */
  --reg-x: 0px;
  --reg-y: 0px;

  /* --- measure --- */
  --maxw: 1440px;
  --gutter: clamp(20px, 4.2vw, 68px);
  --rail: 40px;

  /* --- rules --- */
  --rule: 1px solid var(--ink-20);
  --rule-heavy: 2px solid var(--ink);

  /* --- motion --- */
  --snap: cubic-bezier(.2,.9,.25,1);
  --press: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--stock);
  color:var(--ink);
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 32 32'%3E%3Cpath d='M4,3 L4,23 L9.5,18 L13,26 L16.5,24.5 L13,16.5 L21,16.5 Z' fill='none' stroke='%23ffe9a6' stroke-width='7' stroke-linejoin='round' opacity='0.14'/%3E%3Cpath d='M4,3 L4,23 L9.5,18 L13,26 L16.5,24.5 L13,16.5 L21,16.5 Z' fill='none' stroke='%23ffe9a6' stroke-width='4.5' stroke-linejoin='round' opacity='0.32'/%3E%3Cpath d='M4,3 L4,23 L9.5,18 L13,26 L16.5,24.5 L13,16.5 L21,16.5 Z' fill='%23080806' stroke='%23ffe9a6' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto;
}

/* ink screen over the whole stock — the print's dot grid */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9998;
  background-image:radial-gradient(circle, var(--ink) .5px, transparent .6px);
  background-size:5px 5px;
  opacity:.045;
}

/* --- browser surfaces wear the ink too --- */
::selection{ background:var(--ink); color:var(--stock); }
::-moz-selection{ background:var(--ink); color:var(--stock); }
html{ scrollbar-color: var(--ink-52) var(--stock); scrollbar-width: thin; caret-color: var(--ink); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--stock); }
::-webkit-scrollbar-thumb{ background:var(--ink-34); border:3px solid var(--stock); }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-70); }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
section{ position:relative; }
strong{ font-weight:700; color:var(--ink); }

/* ==========================================================================
   TYPE
   ========================================================================== */

h1,h2,h3,h4,.display{
  font-family:'Archivo', 'Hanken Grotesk', sans-serif;
  font-weight:900;
  font-stretch:125%;
  font-variation-settings:'wdth' 125, 'wght' 900;
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.88;
  color:var(--ink);
}

.mark{
  font-family:'Hanken Grotesk', sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-62);
  line-height:1.2;
  cursor:default;
  transition:color .3s var(--snap), text-shadow .3s var(--snap);
}
.mark:hover{
  color:var(--ink);
  text-shadow:0 0 16px rgba(255,233,166,.75), 0 0 4px rgba(255,233,166,.5);
}

.num{ font-variant-numeric:tabular-nums lining-nums; }

p{ max-width:68ch; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
  position:relative;
}

/* a section is a printed panel: it always carries its own rhythm */
.panel{
  padding-block:clamp(84px, 11vw, 168px);
  border-top:var(--rule);
}
.panel--tight{ padding-block:clamp(64px, 8vw, 112px); }
.panel--flush{ border-top:none; }

/* the left rail carries the section marker, as a printer's margin note */
.rail{
  position:absolute;
  left:4px;
  top:2px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  transform-origin:center;
  white-space:nowrap;
}
.rail::after{
  content:'';
  display:block;
  width:1px; height:44px;
  background:var(--ink-34);
  margin:14px auto 0;
}

.head{ max-width:min(100%, 860px); }
.head h2{ font-size:clamp(38px, 6.2vw, 88px); max-width:15ch; }
.head p{
  margin-top:24px;
  color:var(--ink-70);
  font-size:clamp(16px,1.3vw,19px);
  font-weight:300;
  max-width:56ch;
}

/* ==========================================================================
   OVERPRINT — the signature: a second impression, slightly out of register
   ========================================================================== */

.op{ position:relative; display:inline-block; }
.op::before{
  content:attr(data-op);
  position:absolute;
  left:0; top:0;
  color:var(--ink-20);
  width:100%;
  translate:14px 10px;
  transform:translate(var(--reg-x), var(--reg-y));
  transition:translate 1.1s var(--press), color 1.1s var(--press);
  pointer-events:none;
  z-index:-1;
}
.in .op::before, .op.in::before{ translate:3px 2px; }

/* the whole sheet misregisters, not only the lettering */
.plate > .ink, .plate > .screen{
  inset:-10px;
  transform:translate(var(--reg-x), var(--reg-y));
}

/* ==========================================================================
   INK PLATE — photography reduced to one ink, released to colour on hover
   ========================================================================== */

.plate{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--stock-deep);
}
.plate > .em{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(1.28) brightness(.92);
  transition:filter .7s var(--snap), transform 1.1s var(--snap);
  transform:scale(1.01);
}
.plate > .ink{
  position:absolute; inset:0;
  background:var(--ink);
  mix-blend-mode:multiply;
  opacity:.3;
  transition:opacity .7s var(--snap);
}
.plate > .screen{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(0,0,0,.62) .85px, transparent 1.05px);
  background-size:4px 4px;
  opacity:.55;
  transition:opacity .7s var(--snap);
  pointer-events:none;
}
.plate:hover > .ink{ opacity:0; }
.plate:hover > .screen{ opacity:.12; }
.plate:hover > .em{ filter:grayscale(0) contrast(1.03) brightness(1); transform:scale(1.045); }

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(8,8,6,.72);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--ink-12);
  transition:background .45s var(--snap), border-color .45s var(--snap);
  padding-block:15px;
}
header.scrolled{
  background:rgba(8,8,6,.94);
  border-bottom-color:var(--ink-34);
}
header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:none;
}
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo img{ height:28px; width:auto; }
footer .logo img{ height:42px; }

nav.links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); }
nav.links a{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-52);
  padding:6px 0;
  position:relative;
  transition:color .3s var(--snap);
}
nav.links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--snap);
}
nav.links a:hover{ color:var(--ink); }
nav.links a:hover::after{ transform:scaleX(1); }
nav.links a.active{ color:var(--ink); }
nav.links a.active::after{ transform:scaleX(1); }

/* the box-office block */
.nav-cta{
  background:var(--ink);
  color:var(--stock) !important;
  padding:11px 20px !important;
  letter-spacing:.16em !important;
}
.nav-cta::after{ display:none !important; }
.nav-cta:hover{ background:var(--ink-70); }

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:inherit;
  z-index:1001; padding:8px 4px;
}
.burger span{
  width:26px; height:2px; background:var(--ink);
  transition:transform .35s var(--snap), opacity .25s;
}
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   THE POSTER (home hero)
   ========================================================================== */

.poster{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:112px;
  padding-bottom:30px;
  position:relative;
  overflow:hidden;
}
.poster-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.poster-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,6,.5) 0%, rgba(8,8,6,.68) 55%, rgba(8,8,6,.88) 100%);
  z-index:0;
}

/* floats and breathes gently on its own, like SUIKA on suikastudios.com — same type, colour and layout, just alive */
.poster-float{
  animation:posterFloat 5.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes posterFloat{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-14px) scale(1.015); }
}
@media (prefers-reduced-motion: reduce){
  .poster-float{ animation:none; }
}

.poster-plate{
  position:absolute;
  top:0; right:0; bottom:-8%;
  width:min(56%, 860px);
  z-index:0;
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, #000 42%);
  mask-image:linear-gradient(100deg, transparent 0%, #000 42%);
  opacity:.5;
}
/* the stock absorbs the plate at the foot — no printed edge */
.poster::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:36%;
  background:linear-gradient(180deg, rgba(8,8,6,0) 0%, var(--stock) 88%);
  z-index:1;
  pointer-events:none;
}
.poster-plate > .em{ filter:grayscale(1) contrast(1.5) brightness(.72); }
.poster-plate > .screen{ opacity:.7; }
.poster .wrap{ position:relative; z-index:2; width:100%; }

/* the colophon line — under the heading, never above it */
.bill-line--foot{
  border-bottom:none;
  border-top:var(--rule);
  margin-bottom:0;
  margin-top:clamp(24px,3vw,40px);
  padding-bottom:0;
  padding-top:15px;
}
.bill-line--sub{
  border-bottom:none;
  padding-bottom:0;
  margin-top:-4px;
  margin-bottom:clamp(24px,3vw,40px);
}

/* top line of the bill */
.bill-line{
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:14px;
  border-bottom:var(--rule);
  margin-bottom:clamp(28px,5vw,64px);
}
.bill-line .dot{
  width:7px; height:7px; flex-shrink:0;
  background:var(--ink);
  animation:beat 2.4s infinite steps(1,end);
}
@keyframes beat{ 0%,60%{opacity:1;} 61%,100%{opacity:.25;} }
.bill-line .mark{ color:var(--ink-70); }

.poster h1{
  font-size:clamp(56px, 13.8vw, 200px);
  line-height:.82;
  margin-bottom:clamp(26px,3.2vw,46px);
}
.poster h1 .l1{
  display:block;
  color:transparent;
  -webkit-text-stroke:clamp(1.4px,.22vw,3px) var(--ink);
}
.poster h1 em{
  display:block;
  font-style:normal;
  color:var(--ink);
}

.poster .lead{
  font-size:clamp(16px,1.45vw,21px);
  font-weight:300;
  color:var(--ink-70);
  max-width:52ch;
  margin-bottom:clamp(32px,4vw,52px);
}

.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  font-family:'Hanken Grotesk', sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:2px solid var(--ink);
  cursor:inherit;
  transition:background .3s var(--snap), color .3s var(--snap), transform .3s var(--snap);
}
.btn-solid{ background:var(--ink); color:var(--stock); }
.btn-solid:hover{ background:transparent; color:var(--ink); }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--stock); }
.btn:active{ transform:translateY(2px); }

.foot-rule{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:clamp(26px,3.4vw,50px);
  padding-top:13px;
  flex-wrap:wrap;
  border-top:var(--rule);
}
.foot-rule .mark{ color:var(--ink-62); }

/* ==========================================================================
   SUBPAGE MASTHEAD
   ========================================================================== */

.sheet-head{
  padding-top:clamp(150px,17vw,230px);
  padding-bottom:clamp(48px,6vw,86px);
  position:relative;
  overflow:hidden;
  border-bottom:var(--rule-heavy);
}
.sheet-head .plate{
  position:absolute; inset:0;
  opacity:.32;
  z-index:0;
}
.sheet-head .plate > .em{ filter:grayscale(1) contrast(1.45) brightness(.6); }
.sheet-head .wrap{ position:relative; z-index:1; }
.sheet-head h1{ font-size:clamp(44px, 9vw, 134px); }
.sheet-head p{
  color:var(--ink-70);
  font-size:clamp(16px,1.3vw,19px);
  font-weight:300;
  margin-top:22px;
  max-width:54ch;
}
.sheet-head .bill-line{ margin-bottom:clamp(22px,3vw,38px); }

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.about-text h2{ font-size:clamp(34px,5vw,72px); margin-bottom:34px; }
.about-text p{
  color:var(--ink-70);
  font-size:clamp(16px,1.25vw,19px);
  font-weight:300;
  margin-bottom:22px;
}

/* capabilities as a tariff column, not pills */
.caps{
  margin-top:44px;
  border-top:var(--rule);
}
.caps li{
  list-style:none;
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:13px 2px;
  border-bottom:var(--rule);
  font-family:'Archivo', sans-serif; font-weight:900; font-stretch:125%; font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(15px,1.5vw,21px);
  text-transform:uppercase;
  letter-spacing:-.02em;
  position:relative;
  isolation:isolate;
  transition:color .35s var(--snap);
  cursor:default;
}
.caps li::after{
  content:'';
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  background:var(--ink);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .42s var(--press);
  z-index:-1;
}
.caps li:hover::after{ transform:scaleY(1); }
.caps li:hover{ color:var(--stock); padding-left:14px; }
.caps li > span{
  display:inline-block;
  transition:transform .35s var(--snap), color .35s var(--snap);
}
.caps li::before{
  content:'';
  width:22px; height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--snap), background .35s var(--snap);
  flex-shrink:0;
  align-self:center;
}
.caps li:hover > span{ transform:translateX(6px); color:var(--stock); }
.caps li:hover::before{ transform:scaleX(1); background:var(--stock); }

/* the ledger of counts */
.ledger{
  border-top:var(--rule-heavy);
  align-self:stretch;
  display:flex;
  flex-direction:column;
}
.ledger-row{
  padding:26px 0;
  border-bottom:var(--rule);
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ledger-row .n{
  font-family:'Archivo', sans-serif; font-weight:900; font-stretch:125%; font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(52px,7vw,96px);
  line-height:.86;
  letter-spacing:-.05em;
  color:var(--ink);
  display:block;
}
.ledger-row .n.small{ font-size:clamp(26px,3.2vw,42px); letter-spacing:-.03em; }
.ledger-row .mark{ margin-top:10px; display:block; color:var(--ink-62); }

/* ==========================================================================
   THE BILL — explore rows / package rows (a lineup, not cards)
   ========================================================================== */

.bill{ border-top:var(--rule-heavy); }
.bill-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(16px,3vw,48px);
  padding:clamp(22px,3vw,38px) 0;
  border-bottom:var(--rule);
  position:relative;
  isolation:isolate;
  transition:color .35s var(--snap);
}
.bill-row::before{
  content:'';
  position:absolute;
  left:-1000px; right:-1000px; top:0; bottom:0;
  background:var(--ink);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .42s var(--press);
  z-index:-1;
}
.bill-row:hover::before{ transform:scaleY(1); }
.bill-row:hover{ color:var(--stock); }
.bill-row:hover .mark{ color:var(--stock); }
.bill-row:hover .go{ color:var(--stock); }
.bill-row .idx{ color:var(--ink-62); transition:color .35s var(--snap); }
.bill-row h3{
  font-size:clamp(26px,4.4vw,62px);
  transition:color .35s var(--snap), transform .4s var(--press);
}
.bill-row:hover h3{ color:var(--stock); transform:translateX(clamp(8px,1.4vw,20px)); }
.bill-row .go{
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-62);
  white-space:nowrap;
  transition:color .35s var(--snap), transform .35s var(--snap);
}
.bill-row:hover .go{ transform:translateX(6px); }

/* ==========================================================================
   PACKAGES — the tariff sheet
   ========================================================================== */

.pkg{
  display:grid;
  grid-template-columns:minmax(210px, .8fr) 1.6fr;
  gap:clamp(24px,4vw,72px);
  padding:clamp(34px,4.4vw,64px) clamp(0px,2vw,28px);
  border-bottom:var(--rule);
  align-items:start;
  transition:background .4s var(--snap), color .4s var(--snap);
}
.pkg:first-of-type{ border-top:var(--rule-heavy); }
.pkg-name{
  font-family:'Archivo', sans-serif; font-weight:900; font-stretch:125%; font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(34px,5.4vw,80px);
  text-transform:uppercase;
  letter-spacing:-.045em;
  line-height:.88;
  overflow-wrap:break-word;
}
/* longer package names print at a calmer scale so the bill stays level */
.pkg-name--sm{ font-size:clamp(26px,3.6vw,50px); letter-spacing:-.03em; }
.pkg-kind{ display:block; margin-top:14px; }
.pkg-desc{
  color:var(--ink-70);
  font-size:clamp(16px,1.25vw,19px);
  font-weight:300;
  margin-bottom:26px;
  max-width:58ch;
}
.pkg-list{ list-style:none; border-top:var(--rule); }
.pkg-list li{
  display:grid;
  grid-template-columns:minmax(120px,.42fr) 1fr;
  gap:clamp(12px,2vw,32px);
  padding:14px 0;
  border-bottom:var(--rule);
  font-size:15.5px;
  font-weight:300;
  color:var(--ink-70);
}
.pkg-list li strong{
  font-family:'Hanken Grotesk', sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-62);
  padding-top:4px;
}

/* the featured package is a solid impression */
.pkg.featured{
  background:var(--ink);
  color:var(--stock);
}
.pkg.featured .pkg-name,
.pkg.featured .pkg-desc,
.pkg.featured .pkg-list li{ color:var(--stock); }
.pkg.featured .pkg-desc{ opacity:.82; }
.pkg.featured .pkg-list,
.pkg.featured .pkg-list li{ border-color:rgba(8,8,6,.24); }
.pkg.featured .pkg-list li strong{ color:rgba(8,8,6,.62); }
.pkg.featured .mark{ color:rgba(8,8,6,.62); }

.close-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  margin-top:clamp(48px,6vw,88px);
}
.close-line p{
  font-family:'Archivo', sans-serif; font-weight:900; font-stretch:125%; font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(24px,3.4vw,46px);
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.95;
  max-width:16ch;
}

/* ==========================================================================
   CREW — photographic plates, no card chrome
   ========================================================================== */

.crew{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
  border:1px solid var(--ink-20);
}
.member{
  position:relative;
  aspect-ratio:3/4;
  display:block;
  overflow:hidden;
  isolation:isolate;
  background:var(--stock-deep);
}
.member .cap{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding:18px 16px 16px;
  background:linear-gradient(0deg, rgba(8,8,6,.94) 15%, rgba(8,8,6,.55) 60%, transparent);
  transition:background .45s var(--snap);
}
.member .cap .mark{ color:var(--ink-70); }
.member .handle{
  display:block;
  margin-top:6px;
  font-family:'Archivo', sans-serif; font-weight:900; font-stretch:125%; font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(13px,1.15vw,17px);
  letter-spacing:-.02em;
  text-transform:none;
  color:var(--ink);
  word-break:break-word;
}
.member::after{
  content:'';
  position:absolute; inset:0;
  border:2px solid transparent;
  z-index:4;
  transition:border-color .35s var(--snap);
  pointer-events:none;
}
.member:hover::after{ border-color:var(--ink); }

/* ==========================================================================
   BTS GALLERY
   ========================================================================== */

.tiles{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
}
.tile{ aspect-ratio:4/5; }
.tile:nth-child(1), .tile:nth-child(6){ grid-row:span 1; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */

.reel{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
}
.reel-item{
  position:relative;
  aspect-ratio:16/9;
  cursor:inherit;
  overflow:hidden;
  isolation:isolate;
  background:var(--stock-deep);
  border:0;
  padding:0;
  width:100%;
  display:block;
  color:inherit;
  font:inherit;
  text-align:left;
}
/* no yellow ink wash or halftone dots over the thumbnails — grayscale to colour on hover only */
.reel-item > .ink{ display:none; }
.reel-item > .screen{ display:none; }

.reel-item.loading > .em{
  background-image:linear-gradient(100deg, #0b0b09 30%, #191712 50%, #0b0b09 70%);
  background-size:200% 100%;
  animation:shimmer 1.7s infinite linear;
}
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.reel-item .play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.8);
  width:52px; height:52px;
  border:2px solid var(--ink);
  background:rgba(8,8,6,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .35s var(--snap), transform .35s var(--press);
  z-index:5;
}
.reel-item .play svg{ fill:var(--ink); margin-left:3px; }
.reel-item:hover .play, .reel-item:focus-visible .play{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.reel-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  z-index:5;
  padding:12px 14px;
  background:linear-gradient(0deg, rgba(8,8,6,.9), transparent);
  opacity:0;
  transition:opacity .35s var(--snap);
}
.reel-item:hover .cap, .reel-item:focus-visible .cap{ opacity:1; }

/* a thumbnail that never arrived still reads as a cell of the bill */
.reel-item.failed > .em{
  background-image:repeating-linear-gradient(135deg, var(--ink-06) 0 8px, transparent 8px 16px);
  filter:none;
}
.reel-item.failed > .ink{ opacity:0; }
.reel-item.failed > .screen{ opacity:.25; }
.reel-item.failed .cap{ opacity:1; }
.reel-item.failed .play{ opacity:.75; transform:translate(-50%,-50%) scale(1); }

/* the count, at poster scale */
.count-block{
  border-top:var(--rule-heavy);
  border-bottom:var(--rule-heavy);
  padding:clamp(40px,5.5vw,84px) 0;
  margin-top:clamp(64px,8vw,120px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(28px,5vw,76px);
  align-items:center;
}
.count-block > div:first-child .mark{ display:block; margin-top:14px; }
.count-block .big{
  font-family:'Archivo', sans-serif; font-weight:900; font-stretch:125%; font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(96px,19vw,300px);
  line-height:.76;
  letter-spacing:-.06em;
  color:var(--ink);
}
.count-block h3{ font-size:clamp(26px,3.6vw,52px); margin-bottom:18px; }
.count-block p{ color:var(--ink-70); font-weight:300; margin-bottom:24px; max-width:52ch; }

.tag-row{ display:flex; flex-wrap:wrap; gap:0; border-top:var(--rule); }
.tag-row .legend{
  color:var(--ink);
  border-bottom-color:var(--ink);
}
.tag-row span{
  padding:11px 18px 11px 0;
  margin-right:18px;
  font-family:'Hanken Grotesk', sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-70);
  border-bottom:2px solid var(--ink-20);
}

.text-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding-bottom:5px;
  border-bottom:2px solid var(--ink);
  transition:gap .3s var(--snap), color .3s var(--snap);
}
.text-link:hover{ gap:18px; }

/* video modal */
.video-modal{
  position:fixed; inset:0; z-index:2000;
  background:rgba(8,8,6,.97);
  display:none;
  align-items:center; justify-content:center;
  padding:6vh 5vw;
  opacity:0;
  transition:opacity .3s var(--snap);
}
.video-modal.open{ display:flex; opacity:1; }
.video-modal-inner{
  width:100%; max-width:1180px;
  aspect-ratio:16/9;
  position:relative;
  border:2px solid var(--ink-34);
}
.video-modal-inner iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.modal-close{
  position:fixed; top:22px; right:26px; z-index:2001;
  width:46px; height:46px;
  background:transparent;
  border:2px solid var(--ink-34);
  color:var(--ink);
  font-size:24px; line-height:1;
  cursor:inherit;
  transition:border-color .3s var(--snap), background .3s var(--snap), color .3s var(--snap);
}
.modal-close:hover{ border-color:var(--ink); background:var(--ink); color:var(--stock); }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.info{ border-top:var(--rule-heavy); }
.info-row{
  display:grid;
  grid-template-columns:minmax(110px,.34fr) 1fr;
  gap:clamp(14px,2vw,28px);
  padding:22px 0;
  border-bottom:var(--rule);
  align-items:baseline;
}
.info-row .mark{ padding-top:4px; }
.info-value{
  font-size:clamp(16px,1.3vw,19px);
  font-weight:500;
  color:var(--ink);
  line-height:1.5;
}
.info-value a{
  border-bottom:1px solid var(--ink-34);
  transition:border-color .3s var(--snap);
}
.info-value a:hover{ border-color:var(--ink); }

.phone-value{ display:flex; flex-direction:column; gap:10px; }
.phone-link{ display:inline-flex; align-items:center; gap:9px; width:fit-content; }
.wa-icon{ flex-shrink:0; color:var(--ink); }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.chip{
  padding:12px 20px;
  border:2px solid var(--ink-34);
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s var(--snap), color .3s var(--snap), border-color .3s var(--snap);
}
.chip:hover{ background:var(--ink); color:var(--stock); border-color:var(--ink); }

form.contact-form{ display:flex; flex-direction:column; gap:26px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.field label{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-52);
  margin-bottom:10px;
}
.field input, .field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:2px solid var(--ink-20);
  color:var(--ink);
  font-family:'Hanken Grotesk', sans-serif;
  font-size:17px;
  padding:12px 2px;
  transition:border-color .3s var(--snap);
}
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--ink); }
.field textarea{ resize:vertical; min-height:130px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-52); }
.form-note{ font-size:13.5px; color:var(--ink-62); font-weight:300; }

/* ==========================================================================
   COLOPHON
   ========================================================================== */

footer{
  border-top:var(--rule-heavy);
  padding-block:clamp(40px,5vw,64px) 28px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:26px;
  padding-bottom:30px;
  border-bottom:var(--rule);
  margin-bottom:22px;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom .mark{ color:var(--ink-62); }

/* ==========================================================================
   REVEAL — one authored entrance, from an already-legible default
   ========================================================================== */

.rv{
  opacity:.001;
  transform:translateY(26px);
  transition:opacity .85s var(--press), transform .85s var(--press);
}
.rv.in{ opacity:1; transform:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px){
  .crew, .tiles, .reel{ grid-template-columns:repeat(3, 1fr); }
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .pkg{ grid-template-columns:1fr; gap:22px; }
  .count-block{ grid-template-columns:1fr; gap:24px; }
  /* the margin note becomes a running head, still printed */
  .rail{
    position:static;
    writing-mode:horizontal-tb;
    transform:none;
    display:block;
    text-align:right;
    padding-bottom:11px;
    margin-bottom:clamp(26px,4vw,42px);
    border-bottom:var(--rule);
  }
  .rail::after{ display:none; }
}

@media (max-width: 860px){
  nav.links{
    position:fixed;
    top:0; right:0;
    height:100svh;
    width:min(82%, 360px);
    background:var(--stock);
    border-left:2px solid var(--ink);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:26px;
    padding:48px 36px;
    transform:translateX(101%);
    transition:transform .45s var(--press);
  }
  nav.links.open{ transform:translateX(0); }
  nav.links a{ font-size:15px; letter-spacing:.14em; }
  .nav-cta{ margin-top:10px; }
  .burger{ display:flex; }
  .crew, .tiles, .reel{ grid-template-columns:repeat(2, 1fr); }
  .form-row{ grid-template-columns:1fr; }
  .bill-row{ grid-template-columns:1fr auto; gap:10px 16px; }
  .bill-row .idx{ grid-column:1 / -1; }
  .poster-plate{ width:78%; opacity:.34; }
  .pkg-list li{ grid-template-columns:1fr; gap:4px; }
  .pkg-list li strong{ padding-top:0; }
  .info-row{ grid-template-columns:1fr; gap:6px; }
  .footer-top{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 520px){
  body{ font-size:16px; }
  .crew, .tiles{ grid-template-columns:1fr 1fr; }
  .reel{ grid-template-columns:1fr; }
  .poster h1{ font-size:clamp(46px,17vw,88px); }
  .op::before{ opacity:.6; translate:7px 5px; }
  .in .op::before, .op.in::before{ translate:2px 1px; }
  .close-line{ flex-direction:column; align-items:flex-start; gap:20px; }
  .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv{ opacity:1; transform:none; }
  .op::before{ display:none; }
}