/* ===========================================================================
   CINE ENTERTAINMENT LLC
   True black, one expanded grotesque, hairline rules, square corners.
   The catalogue is shown at full size and carries the page.
   =========================================================================== */

@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo.woff2") format("woff2-variations");
  font-weight:400 700; font-stretch:62% 125%; font-style:normal; font-display:swap;
}

:root{
  --bg:      #000000;
  --panel:   #0B0B0C;
  --panel-2: #131315;
  --line:    #232326;
  --line-2:  #35353A;
  --fg:      #FFFFFF;
  --fg-2:    #9C9CA2;
  --fg-3:    #62626A;
  --accent:  #E2674F;

  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1.15rem,4vw,3.25rem);
  --wrap:1600px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(.97rem,.93rem + .2vw,1.03rem); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* browser surfaces */
::selection{ background:var(--accent); color:#12100F; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
html{ scrollbar-color:var(--line-2) var(--bg); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--line-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#12100F; padding:.7rem 1.1rem; font-weight:600; }
.skip:focus{ left:0; }
.hp{ position:absolute; left:-9999px; opacity:0; }

/* ---------------------------------------------------------------- header */
/* Solid, not translucent: text scrolling behind a blurred bar reads as a
   rendering fault, not as depth. */
.hd{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:0 var(--pad); min-height:60px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.hd__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.hd__brand img{ width:34px; height:34px; border-radius:50%; }
.hd__brand span{
  font-variation-settings:"wdth" 112,"wght" 650;
  font-size:.9rem; letter-spacing:.02em; text-transform:uppercase;
}
.hd__nav{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); }
.hd__nav a{
  text-decoration:none; color:var(--fg-2); font-size:.8rem;
  letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:"wdth" 104,"wght" 550;
  padding:.4rem 0; border-bottom:1px solid transparent; transition:color .16s ease,border-color .16s ease;
}
.hd__nav a:hover{ color:var(--fg); border-bottom-color:var(--accent); }
@media (max-width:520px){ .hd__brand span{ display:none; } }

/* ------------------------------------------------------------------ hero */
.hero{ padding:clamp(3.5rem,10vw,8.5rem) var(--pad) clamp(2rem,5vw,3.5rem); max-width:var(--wrap); margin-inline:auto; }
.hero h1{
  margin:0 0 clamp(1.8rem,4vw,3rem);
  font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(2.35rem,7.4vw,6rem);
  line-height:.96; letter-spacing:-.035em; text-transform:uppercase;
  max-width:19ch; text-wrap:balance;
}
/* "Thirty" cycles through the languages Cine actually releases in. Archivo's
   latin subset has none of these scripts, so the stack hands off to the
   platform's own faces for Arabic, Devanagari, Gurmukhi, CJK and Thai. */
.cyc{
  display:inline-block; color:var(--accent);
  font-family:"Archivo","Geeza Pro","Devanagari Sangam MN","Gurmukhi MN",
              "PingFang SC","Apple SD Gothic Neo","Thonburi","Noto Sans",
              system-ui,sans-serif;
  transition:opacity .26s ease, transform .26s ease;
}
.cyc.is-out{ opacity:0; transform:translateY(-.1em); }
@media (prefers-reduced-motion:reduce){
  .cyc{ transition:none; }
}
/* The cycling word's line is its own block, so a wide word ("Tiga puluh")
   cannot re-wrap the lines beneath it on every tick. */
.h1a,.h1b{ display:block; }
.h1b{ max-width:16ch; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:1.4rem 3rem; align-items:end; justify-content:space-between;
  border-top:1px solid var(--line); padding-top:clamp(1.2rem,2.5vw,1.8rem);
}
.hero__meta p{ margin:0; max-width:68ch; color:var(--fg-2); }

.cta{
  display:inline-block; text-decoration:none; white-space:nowrap; cursor:pointer;
  font-family:var(--sans); font-variation-settings:"wdth" 106,"wght" 600;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.78rem 1.5rem; border:1px solid var(--line-2); background:transparent; color:var(--fg);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.cta:hover{ background:var(--fg); border-color:var(--fg); color:#000; }
.cta--solid{ background:var(--accent); border-color:var(--accent); color:#12100F; }
.cta--solid:hover{ background:#EF7A63; border-color:#EF7A63; color:#12100F; }

/* --------------------------------------------------------------- section */
.bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  border-bottom:1px solid var(--line); padding-bottom:.9rem; margin-bottom:clamp(1.3rem,3vw,2.2rem);
}
.bar h2{
  margin:0; font-variation-settings:"wdth" 112,"wght" 650;
  font-size:clamp(.9rem,1.5vw,1.05rem); letter-spacing:.13em; text-transform:uppercase;
}
.bar__n{ margin:0; font-size:.8rem; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3); font-variant-numeric:tabular-nums; }

.work,.house,.contact,.terr{
  padding:clamp(2.2rem,5vw,4rem) var(--pad);
  max-width:var(--wrap); margin-inline:auto;
  scroll-margin-top:72px;          /* clear the sticky header on anchor jumps */
}
.house{ padding-bottom:clamp(1.4rem,3vw,2.2rem); }
.terr{ padding-block:clamp(1.8rem,4vw,3rem); }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------------------------------------------------------------- ticker */
.ticker{
  overflow:hidden; border-block:1px solid var(--line);
  padding-block:clamp(.6rem,1.2vw,.95rem); user-select:none;
}
.ticker__row{ display:flex; width:max-content; animation:slide 90s linear infinite; }
.ticker:hover .ticker__row{ animation-play-state:paused; }
.ticker b{
  font-variation-settings:"wdth" 112,"wght" 600;
  font-size:clamp(.86rem,1.5vw,1.12rem); letter-spacing:.02em; text-transform:uppercase;
  color:var(--fg-2); white-space:nowrap; padding-inline:clamp(.7rem,1.4vw,1.2rem);
}
.ticker i{ color:var(--accent); font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .ticker__row{ animation:none; }
  .ticker{ overflow-x:auto; }
}

/* ----------------------------------------------------------------- tools */
.tools{
  display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:center;
  justify-content:space-between; margin-bottom:clamp(1.1rem,2.4vw,1.7rem);
}
.find{ flex:1 1 240px; max-width:340px; }
.find input{
  width:100%; font-family:var(--sans); font-size:.9rem; color:var(--fg);
  background:var(--panel); border:1px solid var(--line); border-radius:0;
  padding:.6rem .8rem; transition:border-color .16s ease;
}
.find input::placeholder{ color:var(--fg-3); }
.find input:focus{ outline:none; border-color:var(--accent); }
.find input::-webkit-search-cancel-button{ filter:invert(1) opacity(.45); }

.segs{ display:flex; }
.seg{
  cursor:pointer; font-family:var(--sans); font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase;
  font-variation-settings:"wdth" 104,"wght" 550;
  padding:.55rem 1rem; border:1px solid var(--line); border-radius:0;
  background:transparent; color:var(--fg-2);
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.seg + .seg{ border-left:0; }
.seg:hover{ color:var(--fg); }
.seg.is-on{ background:var(--fg); border-color:var(--fg); color:#000; }

.empty{ margin:2rem 0 0; color:var(--fg-3); font-size:.9rem; }

/* ------------------------------------------------------------------ wall */
.wall{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,15vw,208px),1fr));
  gap:clamp(.55rem,1vw,.9rem);
}
.cell__art{ aspect-ratio:2/3; overflow:hidden; background:var(--panel); }
.cell__art img{ width:100%; height:100%; object-fit:cover; }

/* titles whose artwork has not been supplied yet: a typeset plate, treated as
   a designed cell rather than a blank */
.cell__plate{
  aspect-ratio:2/3; display:flex; align-items:flex-end;
  padding:clamp(.8rem,1.1vw,1.15rem); position:relative;
  background:linear-gradient(200deg,var(--panel-2) 0%,#08080A 62%);
  border:1px solid var(--line);
}
.cell__plate::before{           /* the sheet's own rule, as key art would carry */
  content:""; position:absolute; left:clamp(.8rem,1.1vw,1.15rem); top:clamp(.8rem,1.1vw,1.15rem);
  width:22px; height:2px; background:var(--accent);
}
.cell__plate span{
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:clamp(1rem,1.7vw,1.4rem); line-height:.98; letter-spacing:-.03em;
  text-transform:uppercase; color:var(--fg); text-wrap:balance;
}
/* every cell names its picture in the same place, art or no art */
.cell__t{
  margin:.55rem 0 0; font-size:.78rem; line-height:1.25; color:var(--fg-2);
  font-variation-settings:"wdth" 100,"wght" 450;
}

/* ----------------------------------------------------------------- house */
/* The section spans 1600px but the copy does not. The right column has to
   carry substance to roughly the depth of the statement, or the block reads
   as unfinished rather than spacious. */
.house__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4.5rem); align-items:start;
  margin-bottom:clamp(2rem,4.5vw,3.2rem);
}
@media (max-width:860px){ .house__grid{ grid-template-columns:1fr; } }

.house__lead{
  margin:0; font-variation-settings:"wdth" 106,"wght" 550;
  font-size:clamp(1.2rem,.95rem + 1vw,1.85rem); line-height:1.24; letter-spacing:-.022em;
  max-width:22ch;
}
.house__col{ display:flex; flex-direction:column; gap:1.05rem; }
.house__body{ margin:0; color:var(--fg-2); max-width:60ch; }

/* the facts a rights holder actually checks, in the same grammar as the rows */
.hmeta{ margin:.5rem 0 0; border-top:1px solid var(--line); }
.hmeta > div{
  display:grid; grid-template-columns:minmax(92px,128px) 1fr; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--line);
}
.hmeta dt{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3); padding-top:.15rem;
}
.hmeta dd{ margin:0; font-size:.92rem; color:var(--fg); }

/* capped so the copy does not trail off into 500px of empty right-hand page */
.rows{ margin:0; border-top:1px solid var(--line); max-width:1180px; }
.row{
  display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:.6rem clamp(1.2rem,4vw,3.5rem);
  padding:clamp(1rem,2.2vw,1.5rem) clamp(.7rem,1.6vw,1.1rem);
  margin-inline:calc(-1 * clamp(.7rem,1.6vw,1.1rem));
  border-bottom:1px solid var(--line);
  transition:background .18s ease;
}
.row:hover{ background:var(--panel); }
.row dt{
  font-variation-settings:"wdth" 108,"wght" 600;
  font-size:.82rem; letter-spacing:.11em; text-transform:uppercase; color:var(--fg);
  transition:color .18s ease;
}
/* the differentiator is marked in type, not with a coloured rail that knocks
   the row out of alignment with its neighbours */
.row--key dt{ color:var(--accent); }
.row--key dt::after{
  content:""; display:block; width:20px; height:2px;
  background:var(--accent); margin-top:.5rem;
}
.row dd{ margin:0; color:var(--fg-2); max-width:72ch; transition:color .18s ease; }
.row:hover dd{ color:#C3C3C9; }
@media (max-width:640px){ .row{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- contact */
.contact__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.8rem,5vw,4.5rem); align-items:start; }
@media (max-width:820px){ .contact__grid{ grid-template-columns:1fr; } }

.facts{ list-style:none; margin:0; padding:0; }
.facts li{ display:grid; grid-template-columns:88px 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.facts span{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); padding-top:.2rem; }
.facts a{ text-decoration:none; border-bottom:1px solid var(--line-2); transition:border-color .16s ease; }
.facts a:hover{ border-bottom-color:var(--accent); }
.facts address{ font-style:normal; color:var(--fg-2); font-size:.93rem; }

.f{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.f label{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.f input,.f textarea{
  width:100%; font-family:var(--sans); font-size:.95rem; color:var(--fg);
  background:var(--panel); border:1px solid var(--line); border-radius:0;
  padding:.72rem .85rem; resize:vertical; transition:border-color .16s ease,background .16s ease;
}
.f input:focus,.f textarea:focus{ outline:none; border-color:var(--accent); background:var(--panel-2); }
.fnote{ margin:.85rem 0 0; font-size:.85rem; min-height:1.2em; color:var(--fg-2); }
.fnote.ok{ color:#5FBF89; }
.fnote.err{ color:var(--accent); }

/* ------------------------------------------------------------ territories */
.terr__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem clamp(1.2rem,3vw,2.6rem);
}
.terr__list li{
  position:relative; padding-bottom:.18em;
  font-variation-settings:"wdth" 114,"wght" 650;
  font-size:clamp(1.3rem,3.4vw,2.6rem); line-height:1.1; letter-spacing:-.028em;
  text-transform:uppercase; color:var(--fg-3);
  transition:color .2s ease;
}
.terr__list li::after{      /* rule wipes in from the left on hover */
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.2,.8,.3,1);
}
.terr__list li:first-child{ color:var(--fg); }
.terr__list li:hover{ color:var(--fg); }
.terr__list li:hover::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .terr__list li::after{ transition:none; }
}
/* regions are not countries — they read as a footnote, not as peers in the
   list, which is what made "MIDDLE EAST / ASIA" sit oddly at display size */
.terr__more{
  margin:clamp(.9rem,2vw,1.4rem) 0 0;
  font-size:.86rem; letter-spacing:.06em; color:var(--fg-3);
}

/* -------------------------------------------------------------- lightbox */
.lb{
  border:0; padding:0; background:transparent; color:var(--fg);
  max-width:min(92vw,560px); max-height:92vh;
}
.lb::backdrop{ background:rgba(0,0,0,.88); }
.lb__fig{ margin:0; }
.lb__fig img,.lb__fig #lbSlot img{ width:100%; height:auto; max-height:82vh; object-fit:contain; background:var(--panel); }
.lb__fig figcaption{
  margin-top:.85rem; font-variation-settings:"wdth" 110,"wght" 600;
  font-size:.95rem; letter-spacing:.02em; text-transform:uppercase;
}
.lb__x{
  position:absolute; top:-2.4rem; right:0; cursor:pointer;
  background:transparent; border:0; color:var(--fg-2); font-size:1.9rem; line-height:1;
  padding:.2rem .4rem; transition:color .16s ease;
}
.lb__x:hover{ color:var(--fg); }

/* cells with artwork open the poster, so they carry a real affordance */
.cell--open{ cursor:zoom-in; }
.cell--open .cell__art img{ transition:opacity .2s ease; }
.cell--open:hover .cell__art img{ opacity:.8; }
@media (prefers-reduced-motion:reduce){ .cell--open:hover .cell__art img{ opacity:1; } }

/* ---------------------------------------------------------------- footer */
.ft{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  max-width:var(--wrap); margin-inline:auto; padding:1.7rem var(--pad);
  border-top:1px solid var(--line);
}
.ft p{ margin:0; font-size:.78rem; color:var(--fg-3); letter-spacing:.03em; }