/*
Theme Name: EntoDigital Video
Theme URI: https://video.entodigital.io/
Author: EntoDigital
Description: Single-page theme for video.entodigital.io. Built to the approved reference design: Petrona display, Manrope UI, off-white on near-black, a self-hosted showreel hero and click-to-load YouTube facades.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: entovideo
*/

/* ---------------------------------------------------------------------------
   Tokens. The reference is a fixed 1440px canvas with 80px gutters, so the
   content column is 1280px. Everything below scales from that.
   --------------------------------------------------------------------------- */
:root {
    --ink:        #1F2328;   /* near-black navy ground */
    --paper:      #FFFCED;   /* off-white text and marks */
    --content:    1280px;
    --gutter:     clamp(20px, 5.6vw, 80px);
    --rule:       rgba(255, 252, 237, .14);
    --card-edge:  rgba(255, 252, 237, .09);

    --serif: "Petrona", Georgia, "Times New Roman", serif;
    --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.5;
    /* The hero is full-bleed; nothing should ever scroll sideways. */
    overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

a { color: var(--paper); text-decoration: none; transition: opacity .18s ease; }
a:hover { opacity: .7; }

/* A visible focus ring everywhere, since the design is otherwise low-contrast
   chrome and a default outline disappears against the dark ground. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--paper);
    outline-offset: 3px;
    border-radius: 3px;
}

.serif { font-family: var(--serif); }

.wrap {
    max-width: calc(var(--content) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Skip link — the first tab stop on a page whose first real control is buried
   under a full-screen video. */
.skip-link {
    position: absolute; left: 50%; top: 8px;
    transform: translate(-50%, -200%);
    background: var(--paper); color: var(--ink);
    padding: 10px 18px; border-radius: 4px;
    font-weight: 600; font-size: 15px; z-index: 100;
    transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); opacity: 1; }

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.site-header {
    position: absolute;      /* sits over the hero video */
    top: 0; left: 0; right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: calc(var(--content) + var(--gutter) * 2);
    margin-inline: auto;
    padding: clamp(18px, 2.4vw, 28px) var(--gutter);
}
.site-logo { height: clamp(26px, 2.4vw, 34px); width: auto; }

.site-nav {
    display: flex;
    gap: clamp(20px, 2.8vw, 40px);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .5px;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: clamp(560px, 86vh, 860px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    /* The gradient is also the fallback ground if the video never loads. */
    background:
        radial-gradient(120% 90% at 78% 20%, rgba(255,252,237,.10), rgba(255,252,237,0) 55%),
        linear-gradient(135deg, #23292f 0%, #1F2328 45%, #121417 100%);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero-media img,
.hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The poster stays under the video so there is never a flash of empty ground
   between first paint and the video having enough data to show a frame. */
.hero-poster { position: absolute; inset: 0; }
.hero-video  { position: relative; opacity: 0; transition: opacity .9s ease; }
.hero-video.is-ready { opacity: 1; }

/* Scrim. The reel is bright footage — mean luma runs 115-207 — so off-white
   text needs a real scrim, not a token 20% wash. Heaviest on the left where
   the copy sits, lighter on the right so the picture still reads. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg,
            rgba(31,35,40,.95) 0%,
            rgba(31,35,40,.86) 32%,
            rgba(31,35,40,.62) 62%,
            rgba(31,35,40,.72) 100%),
        linear-gradient(180deg,
            rgba(31,35,40,.75) 0%,
            rgba(31,35,40,.35) 30%,
            rgba(31,35,40,.45) 70%,
            rgba(31,35,40,.85) 100%);
}
/* Narrow screens get no hero video, so the poster is the hero image — and the
   copy runs the full width rather than sitting in the left half. The horizontal
   scrim above would then apply its heaviest stop across the whole picture and
   flatten it to a dark panel. Swap to a vertical scrim: dark where the header
   and the buttons sit, open through the middle so the photograph reads. */
@media (max-width: 780px) {
    .hero-scrim {
        background: linear-gradient(180deg,
            rgba(31,35,40,.88) 0%,
            rgba(31,35,40,.66) 30%,
            rgba(31,35,40,.74) 64%,
            rgba(31,35,40,.93) 100%);
    }
}

/* The reference's film-grain streak, kept as texture over the footage. */
.hero-grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(115deg,
        rgba(255,252,237,.03) 0 2px, rgba(255,252,237,0) 2px 9px);
    opacity: .5;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    width: 100%;
    max-width: calc(var(--content) + var(--gutter) * 2);
    margin-inline: auto;
    padding: 140px var(--gutter) 90px;
}
/* 800px, not the reference's 760: measured, "Shot, edited, delivered."
   needs 778px at the full 76px size and was breaking to a third line. */
.hero-copy { max-width: 800px; }

.hero-kicker {
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: 4px;
    font-weight: 600;
    opacity: .75;
    margin-bottom: 26px;
}
.hero-title {
    font-family: var(--serif);
    font-weight: 800;
    /* Floor is 33px, not 38: at 390px wide the second line needs 371px
       against 346px available, so 38px wrapped to three lines there too. */
    font-size: clamp(33px, 5.3vw, 76px);
    line-height: 1.02;
    letter-spacing: -1.5px;
    margin: 0 0 26px;
}
.hero-sub {
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.55;
    opacity: .88;
    max-width: 560px;
    margin: 0 0 38px;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 28px);
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    font-size: 16px;
    padding: 16px 30px;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    font-family: var(--sans);
}
.btn:hover { opacity: .85; }
.btn-lg { font-size: 18px; padding: 18px 40px; }

.btn-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    opacity: .95;
    background: none;
    border: 0;
    color: var(--paper);
    cursor: pointer;
    padding: 6px 2px;
    font-family: var(--sans);
}
.btn-play svg { flex: 0 0 auto; }

/* The SHOWREEL tag. The big play mark that used to sit mid-hero is gone --
   the hero is obviously moving, and "Watch the showreel" already offers it. */
.hero-tag {
    position: absolute;
    top: clamp(96px, 13vw, 130px);
    right: var(--gutter);
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; letter-spacing: 3px; font-weight: 600; opacity: .75;
}
.hero-tag .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--paper); display: inline-block;
}
@media (max-width: 1023px) {
    .hero-tag { display: none; }
}

/* ---------------------------------------------------------------------------
   Work intro + lanes
   --------------------------------------------------------------------------- */
.section-pad { padding-top: clamp(64px, 8vw, 110px); }

.eyebrow {
    font-family: var(--serif);
    font-size: clamp(14px, 1.1vw, 16px);
    letter-spacing: 3px;
    font-weight: 600;
    opacity: .55;
    text-transform: uppercase;
}
.work-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(30px, 3.2vw, 46px);
    letter-spacing: -.5px;
    margin: 14px 0 0;
    max-width: 760px;
    line-height: 1.15;
    text-wrap: balance;
}

.lane { padding-top: clamp(40px, 4.4vw, 64px); }

.lane-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    border-top: 1px solid var(--rule);
    padding-top: 26px;
    margin-bottom: 34px;
}
.lane-name {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(24px, 2.1vw, 30px);
    margin: 0;
}
.lane-note {
    font-size: clamp(14px, 1.1vw, 16px);
    opacity: .6;
    max-width: 520px;
    text-align: right;
    margin: 0;
}
@media (max-width: 780px) {
    .lane-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .lane-note { text-align: left; max-width: none; }
}

.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .grid, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

.card { display: flex; flex-direction: column; gap: 14px; }
.card-caption { font-size: 15px; opacity: .62; line-height: 1.5; margin: 0; }
.grid-3 .card-caption { font-size: 14px; opacity: .6; }

/* ---------------------------------------------------------------------------
   YouTube facade. A poster, a title and a play mark; the real iframe is only
   written into the DOM on click, so the page costs nothing to YouTube until
   somebody actually asks for a video.
   --------------------------------------------------------------------------- */
.facade {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--card-edge);
    background: linear-gradient(135deg, #2a3138, #14171b);
    padding: 0;
    cursor: pointer;
    display: block;
    color: var(--paper);
    font-family: var(--sans);
}
.facade img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease, opacity .3s ease;
    opacity: .82;
}
.facade:hover img { transform: scale(1.035); opacity: .95; }

.facade-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(20,23,27,.15) 0%, rgba(20,23,27,.05) 40%, rgba(20,23,27,.82) 100%);
}
.facade-play {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .25s ease;
}
.facade:hover .facade-play { transform: translate(-50%, -50%) scale(1.08); }

.facade-title {
    position: absolute;
    left: 18px; right: 18px; bottom: 16px;
    font-weight: 600;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.25;
    text-align: left;
}
.grid-3 .facade-title { left: 16px; right: 16px; bottom: 14px; font-size: clamp(15px, 1.2vw, 17px); }

.facade iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* The invite / CTA tile that closes the third lane. */
.invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    border: 1px dashed rgba(255, 252, 237, .25);
    background: rgba(255, 252, 237, .03);
    text-align: center;
    padding: 24px;
    transition: background .2s ease, border-color .2s ease;
}
.invite:hover { background: rgba(255,252,237,.06); border-color: rgba(255,252,237,.45); }
.invite-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(20px, 1.8vw, 26px);
    max-width: 360px;
    line-height: 1.25;
}
.invite-go { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; opacity: .8; }
a.card:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   Proof / About / CTA / Footer
   --------------------------------------------------------------------------- */
.proof {
    border-top: 1px solid var(--rule);
    padding-top: 44px;
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    flex-wrap: wrap;
}
.proof-label { font-size: 15px; letter-spacing: 2px; opacity: .55; font-weight: 600; }
.proof-name {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(26px, 2.4vw, 34px);
    letter-spacing: .5px;
}
.proof-note { font-size: 15px; opacity: .45; }

.about { display: flex; gap: clamp(28px, 5.6vw, 80px); }
.about-label {
    font-family: var(--serif);
    font-weight: 600; font-size: 15px; letter-spacing: 3px;
    opacity: .55; text-transform: uppercase;
    width: 220px; flex-shrink: 0; padding-top: 10px;
}
.about-body { max-width: 820px; }
.about-lead {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.3;
    letter-spacing: -.3px;
    margin: 0;
}
.about-text {
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.65;
    opacity: .78;
    margin: 28px 0 0;
    max-width: 720px;
}
@media (max-width: 860px) {
    .about { flex-direction: column; gap: 18px; }
    .about-label { width: auto; padding-top: 0; }
}

.cta {
    padding-top: clamp(80px, 9vw, 130px);
    padding-bottom: clamp(80px, 8.4vw, 120px);
    text-align: center;
}
.cta-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(32px, 3.9vw, 56px);
    letter-spacing: -1px;
    line-height: 1.1;
    max-width: 900px;
    margin: 0 auto;
    text-wrap: balance;
}
.cta-sub { font-size: clamp(17px, 1.35vw, 19px); opacity: .72; margin: 24px 0 0; }
.cta .btn { margin-top: 40px; }

.site-footer {
    border-top: 1px solid rgba(255, 252, 237, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 36px;
    padding-bottom: 36px;
}
.footer-logo { height: 26px; width: auto; opacity: .85; }
.footer-meta { font-size: 14px; opacity: .5; }
.footer-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
@media (max-width: 720px) {
    .site-footer { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ---------------------------------------------------------------------------
   Showreel lightbox
   --------------------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(12, 14, 16, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-frame {
    width: min(1280px, 100%);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.lightbox-frame video { width: 100%; height: 100%; object-fit: contain; }
.lightbox-close {
    position: absolute;
    top: clamp(12px, 2.4vw, 28px);
    right: clamp(12px, 2.4vw, 28px);
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,252,237,.4);
    background: rgba(31,35,40,.6);
    color: var(--paper);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,252,237,.14); }

/* ---------------------------------------------------------------------------
   Motion preferences. Someone who has asked the OS for less motion should not
   be handed an autoplaying 64-second loop.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .hero-video { display: none; }
}