/* ==========================================================================
   Gecco Films — static recreation
   ========================================================================== */

:root {
  --white: #ffffff;
  --black: #000000;
  --ink: #111111;
  --muted: #8a8a8a;

  /* Type scale only. Container widths below are in px so that changing this
     makes the text smaller without narrowing the layout. */
  /* One number scales every type size on the site. The proportions between
     headings, navigation, buttons and body copy stay as drawn; only the whole
     thing gets smaller. */
  --type-scale: 0.8;

  /* The navigation carries the site scale plus a little, so it stays legible
     at the top of the page while the body copy sits back. */
  --nav-scale: calc(var(--type-scale) * 1.1);

  /* Photographs in the body of a page. The heroes are full bleed and not
     affected; this is the stills, the archive columns and the portrait. */
  --media-scale: 0.8;

  /* How much of that width the film meta and synopsis take. Lower gives a
     shorter line; it has no effect on the photographs. */
  --film-measure: 0.74;
  --base-font-size: calc(13px * var(--type-scale));
  --heading-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body-font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --max-page-width: 1390px;
  --page-padding: 4vw;
  --mobile-page-padding: 6vw;
  --header-logo-height: 65px;

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --load-duration: 0.8s;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--base-font-size); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55em;
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 200;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.01em;
  line-height: 1.05em;
  text-transform: lowercase;
}

h1 { font-size: calc(43px * var(--type-scale)); }
h2 { font-size: calc(36px * var(--type-scale)); }
h3 { font-size: calc(32px * var(--type-scale)); }

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
em { font-style: italic; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 1000;
  padding: 0.9em 1.6em;
  background: var(--white); color: var(--black);
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em;
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 100;
  color: var(--white);
}

.header-gradient {
  position: absolute; inset: 0 0 auto 0;
  height: 320px;
  background: linear-gradient(to bottom, var(--black) 0%, rgba(0,0,0,0) 100%);
  opacity: 0.12;
  pointer-events: none;
}

.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 4vw;
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: 2.3rem var(--page-padding);
}

.header-logo img {
  display: block; width: auto; max-width: 100%;
  max-height: var(--header-logo-height);
}

.nav-desktop { display: flex; align-items: center; gap: 2.4rem; }

.nav-item > a, .nav-folder-title {
  display: inline-block;
  padding: 0; border: 0; background: none;
  color: inherit;
  font-family: var(--body-font);
  font-size: calc(14px * var(--nav-scale)); font-weight: 400;
  letter-spacing: 0.08em; line-height: 1.5em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.nav-item > a:hover, .nav-folder-title:hover { opacity: 0.65; }

.nav-item.is-current > a,
.nav-folder.is-current .nav-folder-title {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.nav-folder { position: relative; }

/* Right-aligned panel: the links' right edge lines up with "films" above. */
.nav-folder-content {
  position: absolute; top: 100%; right: -1.2rem; left: auto;
  transform: translateY(6px);
  width: max-content;
  margin-top: 0.9rem; padding: 0.85rem 1.2rem;
  background: var(--black);
  text-align: right;
  opacity: 0; visibility: hidden;
  transition: opacity 0.24s ease, transform 0.24s var(--ease-out-expo), visibility 0.24s;
}

.nav-folder:hover .nav-folder-content,
.nav-folder:focus-within .nav-folder-content {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.nav-folder-content a {
  display: block; padding: 4px 0;
  font-size: calc(14px * var(--nav-scale)); white-space: nowrap;
  transition: opacity 0.2s ease;
}
.nav-folder-content a:hover { opacity: 0.65; }

.nav-folder-content a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.burger {
  display: none; width: 30px; height: 22px;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.burger span {
  display: block; width: 100%; height: 1px; background: currentColor;
  transition: transform 0.3s var(--ease-out-expo);
}
.burger span:first-child { margin-bottom: 8px; }
body.nav-open .burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
body.nav-open .burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--mobile-page-padding) 4rem;
  background: var(--black); color: var(--white);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  overflow-y: auto;
}
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }

.nav-overlay a, .nav-overlay .nav-folder-title {
  display: block; width: 100%; padding: 0.55em 0;
  text-align: left; font-size: calc(22px * var(--nav-scale)); letter-spacing: 0.06em;
}

.nav-overlay .nav-folder-title::after {
  content: ""; display: inline-block;
  width: 0.4em; height: 0.4em; margin-left: 0.7em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.3s var(--ease-out-expo);
}
.nav-overlay .nav-folder-title[aria-expanded="true"]::after { transform: translateY(0.1em) rotate(-135deg); }

.nav-overlay .nav-folder-content {
  position: static; transform: none; width: auto;
  right: auto; text-align: left;
  margin: 0; padding: 0 0 0 1.4rem;
  background: none; opacity: 1; visibility: visible; display: none;
}
.nav-overlay .nav-folder-content.is-open { display: block; }
.nav-overlay .nav-folder-content a { font-size: calc(15px * var(--nav-scale)); opacity: 0.75; }

/* --------------------------------------------------------------------------
   Portal sign-in
   -------------------------------------------------------------------------- */

/* Set slightly apart from the public nav — it leads somewhere else. */
.nav-item--portal { margin-left: 0.6rem; padding-left: 1.6rem; position: relative; }
.nav-item--portal::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 13px; margin-top: -6.5px;
  background: currentColor; opacity: 0.35;
}

.nav-overlay-portal { margin-top: 1.2rem; opacity: 0.7; }

.portal-screen {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  padding: 8rem var(--page-padding) 5rem;
  color: var(--white);
}

.portal-bg { position: absolute; inset: 0; overflow: hidden; }
.portal-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.portal-panel {
  position: relative; z-index: 2;
  width: 100%; max-width: 340px;
  text-align: center;
}

.portal-panel h1 { margin-bottom: 0.9rem; }

.portal-note {
  margin-bottom: 2.4rem;
  font-size: 0.9rem;
  opacity: 0.72;
  line-height: 1.6em;
}

.portal-form { text-align: left; }

.portal-form label {
  display: block;
  margin-bottom: 0.45em;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.portal-form input {
  width: 100%;
  margin-bottom: 1.4rem;
  padding: 0.85em 0.9em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-family: var(--body-font);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  transition: border-color 0.2s ease;
}

.portal-form input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.75);
}

.portal-submit {
  width: 100%;
  margin-top: 0.4rem;
  border: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body-font);
  cursor: pointer;
}

.portal-message {
  min-height: 1.4em;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.portal-message.is-pending { opacity: 0.7; }
.portal-message.is-error { opacity: 1; color: #ffb4a8; }

.portal-submit[disabled] { opacity: 0.55; cursor: default; }

.portal-help {
  margin-top: 1.6rem;
  font-size: 0.85rem;
  opacity: 0.6;
}
.portal-help a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Hero sections
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  color: var(--white);
  text-align: center;
}

/* max() so the hero keeps its share of a tall viewport — a bare px floor
   would pin it and let the section below take over the screen. */
.hero-full    { min-height: 100vh; }
.hero-tall    { min-height: max(72vh, 560px); }
.hero-mid     { min-height: max(50vh, 400px); }
.hero-short   { min-height: max(42vh, 330px); }

.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-overlay { position: absolute; inset: 0; background: var(--black); }

.grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.25; mix-blend-mode: overlay; pointer-events: none;
}
/* the grain belongs to the photograph, not to the buttons beneath it */
.portrait-frame { position: relative; display: block; }
.portrait-frame .grain { opacity: 0.2; }

.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: 8rem var(--page-padding) 6rem;
}

.hero-sub {
  margin-top: 2.6rem;
  font-size: 1.15rem;
  letter-spacing: 0.09em;
}

/* --------------------------------------------------------------------------
   Body sections
   -------------------------------------------------------------------------- */

.band { padding: 6.5rem 0 5rem; }
.band-tight { padding: 4.5rem 0 4rem; }

.wrap {
  width: 100%;
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.column {
  max-width: 840px;
  margin: 0 auto;
}

/* The about page reads better narrower: the bands cap below the site width. */
.wrap-narrow { max-width: 980px; }

/* Film pages: meta + synopsis */

.film-detail {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 0 4%;
  /* Narrower than the stills below, because a synopsis set this small needs a
     shorter line than the photographs need width. Centred on the same axis as
     them, so the block sits balanced rather than hanging off one margin. */
  width: calc(100% * var(--media-scale) * var(--film-measure));
  margin-left: auto;
  margin-right: auto;
}

.film-meta { text-align: right; }

.meta-label {
  margin: 0 0 0.35em;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.meta-value {
  margin: 0 0 2.6em;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.7em;
  text-transform: uppercase;
}

.meta-value:last-child { margin-bottom: 0; }

.film-synopsis .meta-label { text-align: left; }
.film-synopsis p {
  text-align: justify;
  font-size: 0.95rem;
  line-height: 1.75em;
}

/* Stills grid */

.stills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  margin-top: 1rem;
  /* narrower than the column it sits in, so it is centred rather than left
     against the text margin */
  width: calc(100% * var(--media-scale));
  margin-left: auto;
  margin-right: auto;
}

.stills-2 { grid-template-columns: repeat(2, 1fr); }
.stills-3 { grid-template-columns: repeat(3, 1fr); }

.stills img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* About */

.prose { max-width: 952px; margin: 0 auto; }
.founder + .prose { margin-top: 5.5rem; }
.prose h2 { margin-bottom: 1.5rem; }
.prose p { text-align: justify; font-size: 0.95rem; line-height: 1.75em; }

.founder {
  display: grid;
  grid-template-columns: 36% 1fr;
  gap: 0 7%;
  align-items: start;
  max-width: 952px;
  margin: 5.5rem auto 0;
}

.founder-portrait { width: calc(100% * var(--media-scale)); }

/* Fixed portrait ratio. The bio column is much taller than this once the logo
   strips are in, and stretching to meet it would only narrow the crop, so the
   left column is allowed to end early instead. */
.founder-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 0.72;
  object-fit: cover;
  object-position: 50% 28%;
}

.btn {
  display: block;
  margin-top: 0.9rem;
  padding: 0.85em 1.2em;
  background: var(--ink);
  color: var(--white);
  /* pinned: the body copy is at 80% but a button still has to be readable */
  font-size: calc(11px * var(--type-scale));
  letter-spacing: 0.12em;
  text-align: center;
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.82; }

.founder-bio h3 { margin-bottom: 1.4rem; }
.founder-bio h3 .role { color: var(--muted); }
.founder-bio p { text-align: justify; font-size: 0.95rem; line-height: 1.75em; }

/* Archive photographs. Widths grow in proportion to each image's aspect ratio,
   so a square and an upright frame end up the same height without cropping. */

.history {
  display: grid;
  grid-template-columns: 1fr 46%;
  gap: 0 3.5%;
  align-items: start;
}

/* Two vertical columns, paired so their totals are close: the tall corridor
   goes with the wide screening room, the two squarer frames together. This
   fills far more height than a 2x2 grid at the same width, uncropped. */
.archive-stack {
  display: flex; gap: 1rem; align-items: flex-start;
  /* fill the column, so no white channel opens between text and photographs */
  width: 100%;
}

.archive-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.archive-col img {
  width: 100%;
  height: auto;
  display: block;
}

/* Logo strips — a quiet credit block, deliberately understated */

.credits { margin-top: 3rem; }
.credits-wide { margin-top: 3.6rem; }
/* Sits below the split but keeps the text column's width and left edge. */
.credits-textcol { max-width: 43%; }
.logo-row--studios { --logo-scale: 1; gap: 1.6rem 2.6rem; }

.credits-group + .credits-group { margin-top: 2.2rem; }

.credits-label {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-family: var(--heading-font);
  font-weight: 200;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: lowercase;
}

.logo-row {
  --logo-scale: 0.72;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
}

/* Each mark carries its own --w/--h from the source artwork, so the row keeps
   the optical sizing of the originals instead of forcing a uniform height. */
.logo-row img {
  display: block;
  width: calc(var(--w) * var(--logo-scale) * 1px);
  height: calc(var(--h) * var(--logo-scale) * 1px);
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity 0.25s ease;
}

.logo-row img:hover { opacity: 1; }

/* Contact */

.contact-grid {
  display: flex;
  justify-content: center;
  gap: 3rem 5.5rem;
  margin: 0 auto;
  text-align: left;
}

.contact-label {
  margin: 0 0 0.15em;
  color: var(--muted);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.contact-grid p { font-size: 1.05rem; line-height: 1.6em; }

/* Awards */

.awards { max-width: 840px; margin: 0 auto; }
.awards h2 { margin-bottom: 1.6rem; }
.awards ul { margin: 0 0 3.4rem; padding-left: 1.6em; list-style: disc; }
.awards li { margin-bottom: 0.6em; font-size: 0.98rem; line-height: 1.6em; }
.awards ul:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Load-in
   -------------------------------------------------------------------------- */

.rise {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--load-duration) var(--ease-out-expo),
    transform var(--load-duration) var(--ease-out-expo);
  transition-delay: var(--delay, 0s);
}
.rise.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --page-padding: var(--mobile-page-padding);
    --header-logo-height: 44px;
  }

  h1 { font-size: calc(29px * var(--type-scale)); }
  h2 { font-size: calc(27px * var(--type-scale)); }
  h3 { font-size: calc(24px * var(--type-scale)); }

  .header-inner { padding: 1.6rem var(--page-padding); }
  .portal-screen { min-height: 100vh; padding-top: 7rem; }
  .nav-desktop { display: none; }
  .burger { display: block; }

  .hero-full { min-height: 88vh; }
  .hero-tall { min-height: max(68vh, 480px); }
  .hero-content { padding: 7rem var(--page-padding) 4rem; }

  .band { padding: 4rem 0 3.5rem; }

  .film-detail,
  .founder { grid-template-columns: 1fr; gap: 2.4rem; }
  .contact-grid { flex-direction: column; align-items: center; gap: 2.4rem; }

  /* One column at this width, so the narrowing that balances the desktop
     layout would only squeeze the text. Everything runs the full width. */
  .film-detail, .stills, .archive-stack, .founder-portrait {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .film-meta { text-align: left; }
  .meta-value { margin-bottom: 1.8em; }

  .founder { margin-top: 3.5rem; }
  .founder + .prose { margin-top: 3.5rem; }
  .founder-portrait { max-width: 252px; }
  .founder-portrait img { aspect-ratio: 0.78; }

  .history { grid-template-columns: 1fr; gap: 2rem; }
  .archive-stack { flex-direction: column; gap: 1rem; }
  .archive-col { gap: 1rem; }
  .archive-col img { max-width: 308px; }

  .credits { margin-top: 2.4rem; }
  .logo-row { --logo-scale: 0.62; gap: 1.1rem 1.5rem; }
  .logo-row--studios { --logo-scale: 0.78; gap: 1.2rem 1.8rem; }
  .credits-textcol { max-width: none; }

  .stills { grid-template-columns: 1fr 1fr; gap: 1rem; }

  .film-synopsis p, .prose p, .founder-bio p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .grain { display: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}