/* ============================================================
   ARCHIVE ARABIA site stylesheet
   Locked identity: Source Serif 4 · near-white cool ground ·
   black and white · black masthead/footer/rails · quiet fade.
   One authoritative copy. Shared by index / method / about.
   ============================================================ */

:root {
  --paper: #f7f8f9;       /* near-white, faint cool */
  --ink: #1a1a1a;         /* rich near-black text */
  --ink-true: #000000;
  --ink-soft: #6b6b6b;    /* quiet labels */
  --hair: #d9d9d6;        /* faint rule */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink-true); }
.railwrap { background: var(--paper); min-height: 100vh;
  border-left: 8px solid var(--ink-true); border-right: 8px solid var(--ink-true); }
@media (max-width: 720px){ .railwrap { border-left-width: 4px; border-right-width: 4px; } }
body {
  font-family: var(--serif); color: var(--ink);
  font-weight: 400; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 3rem; }
main .wrap { max-width: 940px; }
a { color: inherit; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: #000; color: #fff; padding: .6rem 1rem; z-index: 10; }

/* ---- masthead: solid black block, white wordmark, quiet nav ---- */
.masthead { background: var(--ink-true); }
.masthead .wrap { display: flex; align-items: baseline; justify-content: space-between; padding: 2rem 3rem; }
.brandblock { text-decoration: none; }
.brandblock .name { font-weight: 600; font-size: 1.42rem; letter-spacing: .005em; color: #fff; line-height: 1; }
.brandblock .sub { display: block; font-weight: 400; font-style: italic; font-size: .82rem; color: #b7b7b4; margin-top: .35rem; }
.nav ul { list-style: none; display: flex; gap: 2.6rem; margin: 0; padding: 0; }
.nav a { font-weight: 400; font-size: .98rem; color: #d8d8d6; text-decoration: none;
  padding-bottom: .15rem; border-bottom: 1px solid transparent; transition: color .2s ease; }
.nav a[aria-current="page"] { color: #fff; }
.nav a:hover { color: #fff; }

/* ---- footer: solid black block, white text ---- */
footer { background: var(--ink-true); color: #e8e8e6; margin-top: 10vh; }
footer .wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; max-width: 1180px; }
.foot-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.foot-brand .name { font-weight: 600; font-size: 1.2rem; color: #fff; }
.foot-brand p { color: #a9a9a6; margin: .5rem 0 0; font-size: .95rem; font-style: italic; }
.foot-nav { display: flex; gap: 2rem; }
.foot-nav a { font-size: .95rem; color: #d8d8d6; text-decoration: none; }
.foot-nav a:hover { color: #fff; }
.foot-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid #333; font-size: .85rem; color: #8f8f8c; }

/* ---- fast quiet fade on open ---- */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
html.js body { animation: pageIn .45s ease both; }
@media (prefers-reduced-motion: reduce){ html.js body { animation: none; } }

/* ---- scroll reveals (used on home) ---- */
.reveal { opacity: 0; transform: translateY(12px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* ============================================================
   HOME
   ============================================================ */

/* hero: full-bleed image carrying the top, white wash into the body */
.hero { position: relative; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.28) contrast(1.07) brightness(1.01); }
/* wash: paper fading down from bottom so the page flows into the body,
   and a lighter veil at top-left so the title stays legible */
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(247,248,249,0) 60%, rgba(247,248,249,.30) 85%, var(--paper) 100%),
    linear-gradient(100deg, rgba(247,248,249,.82) 0%, rgba(247,248,249,.45) 34%, rgba(247,248,249,0) 62%); }
.hero-inner { position: relative; z-index: 2; padding: 20vh 0 16vh; max-width: 940px; }
.hero-statement { font-weight: 600; color: var(--ink-true); text-shadow: 0 1px 20px rgba(247,248,249,.6);
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.03; letter-spacing: -.015em; margin: 0; max-width: 20ch; }
.hero-statement em { font-style: italic; }
.hero-desc { position: relative; z-index: 2; font-size: 1.35rem; line-height: 1.5; color: var(--ink); text-shadow: 0 1px 16px rgba(247,248,249,.7);
  max-width: 34rem; margin: 2rem 0 0; }
.hero-credit { position: absolute; z-index: 2; bottom: 1rem; right: 3rem; margin: 0;
  font-size: .78rem; font-style: italic; color: #2a2a2a; text-shadow: 0 1px 8px rgba(247,248,249,.9); }

/* featured film */
.band { }
.featured { padding: 2vh 0 0; }
.featured-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center;
  border-top: 2px solid var(--ink-true); padding-top: 3rem; }
.featured .frame { display: block; overflow: hidden; border: 1px solid var(--ink-true); }
.featured .frame img { width: 100%; display: block; filter: saturate(1.05) contrast(1.03);
  transition: transform .6s ease, filter .6s ease; }
.featured .frame:hover img { transform: scale(1.02); filter: saturate(1.1) contrast(1.05); }
.featured-meta .label { font-style: italic; font-size: 1rem; color: var(--ink-soft); }
.featured-title { font-weight: 500; font-size: 1.9rem; line-height: 1.12; letter-spacing: -.01em;
  margin: .6rem 0 1rem; color: var(--ink-true); }
.featured-desc { font-size: 1.14rem; line-height: 1.55; margin: 0 0 1.6rem; max-width: 34rem; }
.featured-cta { display: flex; align-items: center; gap: 1.8rem; margin: 0; }
.btn { display: inline-block; background: var(--ink-true); color: #fff; text-decoration: none;
  font-weight: 500; font-size: 1rem; letter-spacing: .01em; padding: .95rem 1.8rem;
  border: 1.5px solid var(--ink-true); transition: background .2s ease, color .2s ease; }
.btn:hover { background: transparent; color: var(--ink-true); }
.btn .arw { margin-left: .4rem; }
.textlink { text-decoration: none; font-size: 1.02rem; color: var(--ink-true);
  border-bottom: 1.5px solid var(--ink-true); padding-bottom: .12rem; transition: opacity .2s ease; }
.textlink:hover { opacity: .6; }

/* films index */
.section { padding: 11vh 0 0; }
.section-head { display: flex; align-items: baseline; gap: 1.4rem; margin-bottom: 1rem; }
.section-head h2 { font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; margin: 0; color: var(--ink-true); white-space: nowrap; }
.section-head .rule { flex: 1; height: 2px; background: var(--ink-true); }
.section ol { list-style: none; margin: 0; padding: 0; }
.filmrow { display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: baseline; gap: 1.4rem;
  padding: 1.3rem 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); }
a.filmrow:hover { color: var(--ink-true); }
a.filmrow:hover .ft { border-bottom: 1px solid var(--ink-true); }
.filmrow .no { font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--ink-soft); font-style: italic; }
.filmrow .ft { font-size: 1.2rem; line-height: 1.25; color: var(--ink-true); }
.filmrow .fd { font-size: .95rem; color: var(--ink-soft); white-space: nowrap; text-align: right; }
.filmrow .fs { font-size: .82rem; font-style: italic; color: var(--ink-soft); white-space: nowrap; text-align: right; }

/* rigour block */
.rigour { padding: 12vh 0 0; }
.rigour-line { font-weight: 500; font-size: 1.9rem; line-height: 1.35; color: var(--ink-true);
  max-width: 30rem; margin: 0 0 1.4rem; letter-spacing: -.006em; }
.rigour-body { font-size: 1.18rem; line-height: 1.6; color: var(--ink); max-width: 38rem; margin: 0 0 1.4rem; }

/* independence */
.independence { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
  border-top: 2px solid var(--ink-true); padding-top: 3rem; }
.independence .big { font-weight: 500; font-size: 1.6rem; line-height: 1.28; margin: 0; color: var(--ink-true); letter-spacing: -.006em; }
.independence p { font-size: 1.12rem; line-height: 1.6; margin: 0; }

/* ============================================================
   ABOUT
   ============================================================ */
.page-head { padding: 12vh 0 0; }
.page-head .label { font-style: italic; font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 1.6rem; }
.page-title { font-weight: 500; color: var(--ink-true);
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -.012em; margin: 0; max-width: 20ch; }

.dsec { padding: 7vh 0 0; }
.dgrid { display: grid; grid-template-columns: 12rem 1fr; gap: 2.5rem; align-items: start;
  border-top: 1px solid var(--hair); padding-top: 2.4rem; }
.dgrid .label { font-style: italic; font-size: 1.02rem; color: var(--ink-soft); }
.dcontent { max-width: 40rem; }
.dcontent .lead { font-weight: 500; font-size: 1.5rem; line-height: 1.4; color: var(--ink-true); margin: 0 0 1.2rem; letter-spacing: -.004em; }
.dcontent p { font-size: 1.16rem; line-height: 1.62; margin: 0 0 1rem; }
.dcontent p:last-child { margin-bottom: 0; }

.page-tail { height: 12vh; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 720px) {
  .wrap { padding: 0 1.6rem; }
  .masthead .wrap { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.6rem; }
  .nav ul { gap: 1.6rem; }
  .hero-inner { padding: 14vh 0 10vh; }
  .hero-credit { right: 1.6rem; }
  .featured-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .independence { grid-template-columns: 1fr; gap: 1.4rem; }
  .dgrid { grid-template-columns: 1fr; gap: .8rem; }
  .filmrow { grid-template-columns: 2rem 1fr auto; }
  .filmrow .fd { display: none; }
}

/* ============================================================
   METHOD PAGE (Research & Method Standard)
   ============================================================ */
.m-open .kicker {
    font-weight:400; font-style:italic; font-size:1.05rem;
    color: var(--ink-soft); margin:0 0 2rem;
  }
.m-open h1 {
    font-family: var(--serif); font-weight: 500; color: var(--ink-true);
    letter-spacing: -.008em;
    font-size: clamp(2.9rem, 6vw, 5rem); line-height:1.04;
    margin:0; max-width: 18ch;
  }
.m-open .meta {
    font-weight:400; font-size:.98rem; color: #3d3d3d;
    margin: 3rem 0 0; display:flex; gap:2.4rem; flex-wrap:wrap;
    letter-spacing:.01em;
  }
.m-open .meta .dot { color: #3d3d3d; }
.m-brief p.lead {
    font-weight: 500; font-size: 1.72rem; line-height: 1.42;
    color: var(--ink-true); margin: 0 0 1.5rem; letter-spacing:-.004em;
  }
.m-brief p.sub {
    font-weight: 400; font-size: 1.2rem; line-height: 1.66;
    color: var(--ink); margin: 0; max-width: 40rem;
  }
.m-read { margin-top: 6vh; }
.m-read a {
    display:inline-block; background: var(--ink-true); color:#fff;
    font-weight:500; font-size:1.06rem; letter-spacing:.01em; text-decoration:none;
    padding: 1.05rem 2rem; border:1.5px solid var(--ink-true);
    transition: background .2s ease, color .2s ease;
  }
.m-read a:hover { background: transparent; color: var(--ink-true); }
.m-read .note { display:block; margin-top:1rem; font-size:1rem; font-style:italic; color: var(--ink-soft); }
.m-covers .inner { border-top: 2px solid var(--ink-true); padding-top: 2.6rem; max-width: 52rem; }
.m-covers .hd {
    font-weight:400; font-style:italic; font-size:1.08rem;
    color: var(--ink-soft); margin:0 0 2rem;
  }
.m-covers ul { list-style:none; margin:0; padding:0; columns:2; column-gap:4.5rem; }
.m-covers li {
    font-weight:400; font-size:1.16rem; line-height:1.35; color: var(--ink);
    padding:.6rem 0; break-inside:avoid;
  }
.m-tail { height: 16vh; }
.m-open { padding-top: 10vh; }
.m-brief p.lead { font-size: 1.42rem; }
.m-covers ul { columns:1; }

/* method page mobile */
@media (max-width: 720px) {
  .m-open { padding-top: 8vh; }
  .m-covers ul { columns: 1; }
  .m-brief p.lead { font-size: 1.42rem; }
}

/* ============================================================
   FILM CATALOGUE: horizontal filmstrip + per-film pages
   ============================================================ */

/* --- horizontal filmstrip (home page) --- */
.strip-head { display: flex; align-items: baseline; gap: 1.4rem; margin: 0 0 1.6rem; }
.strip-head h2 { font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; margin: 0; color: var(--ink-true); white-space: nowrap; }
.strip-head .rule { flex: 1; height: 2px; background: var(--ink-true); }
.strip-scroll { display: flex; gap: 1.6rem; overflow-x: auto; padding: .4rem .2rem 1.6rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.strip-scroll::-webkit-scrollbar { height: 6px; }
.strip-scroll::-webkit-scrollbar-thumb { background: #cfcfca; }
.filmcard { flex: 0 0 auto; width: 360px; max-width: 82vw; scroll-snap-align: start; text-decoration: none; color: var(--ink); display: block; }
.filmcard .thumb { position: relative; overflow: hidden; aspect-ratio: 16/9; background: #1a1a1a; }
.filmcard .thumb img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: saturate(1.03) contrast(1.02); transition: transform .5s ease; }
.filmcard:hover .thumb img { transform: scale(1.03); }
.filmcard .no { font-style: italic; font-size: .9rem; color: var(--ink-soft); margin: .9rem 0 .3rem; }
.filmcard .ct { font-weight: 500; font-size: 1.2rem; line-height: 1.2; color: var(--ink-true); letter-spacing: -.005em; }
.filmcard .cs { font-style: italic; font-size: .9rem; color: var(--ink-soft); margin-top: .3rem; }
@media (max-width: 720px){ .filmcard { width: 78vw; } }

/* --- per-film page --- */
.film-head { padding: 8vh 0 0; }
.film-head .kicker { font-style: italic; font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 1rem; }
.film-head h1 { font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08;
  letter-spacing: -.012em; color: var(--ink-true); margin: 0; max-width: 20ch; }
.film-head .daterange { font-style: italic; font-size: 1.15rem; color: var(--ink-soft); margin: 1rem 0 0; }
.film-player { margin: 4vh 0 0; border: 1px solid var(--ink-true); background: #000; aspect-ratio: 16/9; }
.film-player iframe { width: 100%; height: 100%; display: block; border: 0; }
.film-watch { margin: 1.2rem 0 0; font-style: italic; font-size: .95rem; color: var(--ink-soft); }
.film-watch a { color: var(--ink-true); border-bottom: 1px solid var(--ink-true); text-decoration: none; }
.film-body { padding: 6vh 0 0; max-width: 40rem; }
.film-body p { font-size: 1.24rem; line-height: 1.6; color: var(--ink); margin: 0 0 1.3rem; }
.film-sources { padding: 8vh 0 0; }
.film-sources .inner { border-top: 2px solid var(--ink-true); padding-top: 2.6rem; max-width: 46rem; }
.film-sources h2 { font-weight: 500; font-size: 1.3rem; letter-spacing: -.005em; margin: 0 0 .5rem; color: var(--ink-true); }
.film-sources .note { font-style: italic; font-size: .98rem; color: var(--ink-soft); margin: 0 0 2rem; }
.film-sources h3 { font-weight: 600; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); margin: 2.4rem 0 1rem; }
.film-sources ul { list-style: none; margin: 0; padding: 0; }
.film-sources li { font-size: 1.04rem; line-height: 1.5; color: var(--ink); padding: .55rem 0;
  border-bottom: 1px solid var(--hair); }
.film-back { padding: 7vh 0 0; }
.film-back a { font-style: italic; font-size: 1rem; color: var(--ink-true);
  border-bottom: 1px solid var(--ink-true); text-decoration: none; }


/* --- film player: click-to-play facade (prevents Error 153 on load; loads iframe only on click) --- */
.film-player { position: relative; margin: 4vh 0 0; border: 1px solid var(--ink-true); background:#000; aspect-ratio:16/9; overflow:hidden; }
.film-facade { position:absolute; inset:0; cursor:pointer; border:0; padding:0; width:100%; height:100%; background-size:cover; background-position:center; display:block; }
.film-facade::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.22); transition:background .3s ease; }
.film-facade:hover::after { background:rgba(0,0,0,.10); }
.film-facade .play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; transition:transform .3s ease, background .3s ease; }
.film-facade:hover .play { transform:translate(-50%,-50%) scale(1.06); background:#fff; }
.film-facade .play::before { content:""; margin-left:5px; border-style:solid; border-width:15px 0 15px 24px; border-color:transparent transparent transparent #111; }
.film-player iframe { position:absolute; inset:0; width:100%; height:100%; display:block; border:0; }


/* --- films in a black band (a gallery strip) --- */
.filmband { background: var(--ink-true); color:#fff; padding: 7vh 0; margin: 11vh 0 0; }
.filmband .strip-head h2 { color:#fff; }
.filmband .strip-head .rule { background:#fff; }
.filmband .strip-nav { display:flex; gap:.6rem; }
.filmband .strip-nav button { background:transparent; border:1px solid #fff; color:#fff;
  width:2.4rem; height:2.4rem; cursor:pointer; font-size:1rem; line-height:1;
  transition:background .2s ease, color .2s ease; }
.filmband .strip-nav button:hover { background:#fff; color:var(--ink-true); }
.filmband .filmcard { color:#e8e8e6; }
.filmband .filmcard .thumb { border: none; }
.filmband .filmcard .no { color:#b7b7b4; }
.filmband .filmcard .ct { color:#fff; }
.filmband .filmcard .cs { color:#b7b7b4; }
.filmband .strip-scroll::-webkit-scrollbar-thumb { background:#555; }


/* --- contact form (austere) --- */
.cform { margin-top: 3vh; max-width: 34rem; }
.cform .hp { position:absolute; left:-9999px; }
.frow { margin: 0 0 1.6rem; }
.frow label { display:block; font-size:.95rem; font-style:italic; color: var(--ink-soft); margin: 0 0 .5rem; }
.frow input, .frow textarea { width:100%; box-sizing:border-box; font-family: var(--serif);
  font-size:1.05rem; color: var(--ink); background:#fff; border:1px solid var(--ink-true);
  padding:.8rem .9rem; border-radius:0; }
.frow input:focus, .frow textarea:focus { outline:2px solid var(--ink-true); outline-offset:-2px; }
.frow textarea { resize:vertical; }
.csend { display:inline-block; background: var(--ink-true); color:#fff; font-family: var(--serif);
  font-weight:500; font-size:1.02rem; letter-spacing:.01em; padding:.9rem 2.2rem;
  border:1.5px solid var(--ink-true); cursor:pointer; transition:background .2s ease, color .2s ease; }
.csend:hover { background:transparent; color: var(--ink-true); }


/* about page: plain prose */
.about-prose { max-width: 40rem; padding-top: 2vh; }
.about-prose p { font-size: 1.24rem; line-height: 1.6; color: var(--ink); margin: 0 0 1.5rem; }
.about-prose p.lead { font-size: 1.4rem; }
.about-prose a { color: var(--ink-true); border-bottom: 1px solid var(--ink-true); text-decoration: none; }


/* film page: austere method/about links (replaces sources boilerplate) */
.film-links { padding-top: 4vh; font-size: 1.05rem; }
.film-links a { color: var(--ink-true); border-bottom: 1px solid var(--ink-true); text-decoration: none; }
.film-links a:hover { opacity: .6; }
.film-links .sep { color: var(--ink-soft); margin: 0 .5rem; }


/* home page closing: two plain links, no prose */
.closing { padding: 12vh 0 4vh; }
.closing-links { font-size: 1.2rem; line-height: 1.6; margin: 0 0 .6rem; color: var(--ink); }
.closing-links a { color: var(--ink-true); border-bottom: 1px solid var(--ink-true); text-decoration: none; padding-bottom: .08rem; }
.closing-links a:hover { opacity: .6; }