/* =========================================================
   TIME IS EVERYTHING — minimalist black/white stylesheet
   ========================================================= */

/* 1. RESET — strip browser defaults so nothing fights us. */
*,
*::before,
*::after {
    box-sizing: border-box;     /* padding/border included in width */
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;               /* allows 100vh layouts */
    background: #ffffff;
    color: #000000;
    /* Inter is used for small UI text (date, quote, labels). */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 2. STAGE — the vertical rhythm of the whole page.
      The timer takes the full first screen (100vh),
      the media block sits below it. */
.stage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================================================
   TIMER BLOCK
   ========================================================= */

.timer-block {
    position: relative;             /* anchor for the scroll-hint arrow */
    height: 100vh;                  /* fills the first screen exactly */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;        /* vertically centered */
    align-items: center;
    gap: 1.25rem;                   /* space between timer and date */
}

/* The timer itself is a <button> so it is clickable & accessible.
   We strip all button chrome and let the text do the talking. */
.timer {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;

    /* Fraunces is a beautiful variable serif. `opsz` (optical size) tells
       the variable font to render at its display-size design, which makes
       the shapes more elegant at huge sizes. */
    font-family: "Fraunces", "Times New Roman", serif;
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    font-weight: 300;            /* thin, editorial */
    font-style: normal;

    /* clamp(min, preferred, max):
       - on tiny screens it won't shrink below 4rem
       - scales with 14vw as the viewport grows
       - caps at 15rem so it doesn't become absurd on 4k */
    font-size: clamp(4rem, 14vw, 15rem);
    letter-spacing: -0.02em;     /* tight, like a magazine masthead */
    line-height: 0.95;

    /* tabular-nums = every digit is the same width, so the
       timer doesn't "jiggle" every time a digit changes. */
    font-variant-numeric: tabular-nums;
}

.date {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.55;                  /* softer than the timer */
}

/* =========================================================
   WORDMARK — the little brand lockup, top-left of the page
   ========================================================= */

.wordmark {
    position: fixed;                /* stays while you scroll */
    top: 1.75rem;
    left: 2rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    z-index: 20;                    /* above the timezone overlay trigger */
}

/* .mark is the little "t·i·e" monogram — sits in a bordered square
   so it reads as a logo even without an actual icon. */
.wordmark-mark {
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border: 1px solid #000;
    padding: 6px 8px 5px;
    line-height: 1;
}
.wordmark-mark .dot {
    display: inline-block;
    transform: translateY(-1px);
    opacity: 0.6;
    margin: 0 1px;
}

.wordmark-name {
    font-family: "Fraunces", serif;
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}
.wordmark-name em {
    font-style: italic;
    font-weight: 300;
    opacity: 0.7;
}

/* ---------- scroll hint (arrow) ----------
   Absolutely positioned at the bottom of the first screen.
   Hidden by default, fades + slides in when the user hovers
   ANYWHERE inside the .timer-block. */
.scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translate(-50%, 6px); /* start slightly below final spot */
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease;
    pointer-events: none;           /* never blocks clicks */
}

.timer-block:hover .scroll-hint {
    opacity: 0.5;
    transform: translate(-50%, 0);
}

/* The arrow is built from TWO CSS borders rotated 45°.
   No SVG, no icon font — pure CSS. */
.arrow {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
}

/* =========================================================
   TIMEZONE OVERLAY — shown when the user clicks the timer
   ========================================================= */

.tz-overlay {
    position: fixed;                /* covers the whole viewport */
    inset: 0;                       /* top/right/bottom/left = 0 */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);     /* subtle frosted effect */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.tz-overlay[hidden] { display: none; }

.tz-panel {
    width: min(420px, 90vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    background: #fff;
}

.tz-search {
    border: none;
    border-bottom: 1px solid #000;
    padding: 14px 18px;
    font: inherit;
    font-size: 0.95rem;
    outline: none;
    background: transparent;
}

.tz-list {
    list-style: none;               /* no bullets */
    overflow-y: auto;                /* scrolls when list is long */
    flex: 1;
}

.tz-list li {
    padding: 10px 18px;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.tz-list li:hover,
.tz-list li.active {
    background: #000;
    color: #fff;
}

/* =========================================================
   MEDIA BLOCK (video + quote)
   ========================================================= */

.media-block {
    width: 100%;
    min-height: 100vh;
    padding: 6rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

/* On desktop, the two inner wrappers are transparent — their children
   (video-frame, quote) behave as direct flex items of .media-block.
   On mobile we re-enable them as real boxes to become 100svh screens. */
.video-screen {
    display: contents;
}

.video-frame {
    width: min(900px, 92vw);
    aspect-ratio: 16 / 9;            /* keeps it video-shaped */
    border: 1px solid #000;
    border-radius: 4px;              /* "ganz wenig abgerundete ecken" */
    overflow: hidden;
    position: relative;
    background: #000;                /* dark frame before the iframe loads */
}

/* Any <iframe> or <video> dropped inside fills the frame perfectly. */
.video-frame iframe,
.video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    opacity: 0.35;
}

.quote {
    max-width: 600px;
    text-align: center;
}

.quote p {
    font-family: "Fraunces", serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.5;
}

.quote cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.7rem;
    font-style: normal;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* =========================================================
   RESPONSIVE — tablet (≤ 900px)
   ========================================================= */
@media (max-width: 900px) {
    .media-block {
        padding: 4rem 1.25rem 3rem;
        gap: 2rem;
        min-height: auto;           /* let it be as tall as it needs */
    }

    .quote p { font-size: 1.15rem; }
}

/* =========================================================
   RESPONSIVE — phone (≤ 560px)
   ========================================================= */
@media (max-width: 560px) {

    /* --- Wordmark: centered at the top, only the monogram --- */
    .wordmark {
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);    /* true horizontal center */
        gap: 0.5rem;
    }
    .wordmark-name { display: none; }

    /* --- Timer block: tighter vertical rhythm --- */
    .timer-block {
        /* `svh` = small viewport height — ignores mobile browsers'
           collapsing URL bar, so the timer never jumps. Falls back
           to `vh` on older browsers. */
        height: 100svh;
        gap: 0.9rem;
        padding: 0 1rem;
    }

    .timer {
        /* bigger `vw` share so it still dominates the screen */
        font-size: clamp(3.2rem, 20vw, 6rem);
        letter-spacing: -0.03em;
    }

    .date {
        font-size: 0.65rem;
        letter-spacing: 0.2em;
        text-align: center;
        /* the date string "Monday, 15 April 2026 · Europe/Zurich" is long;
           allow it to wrap instead of overflowing the viewport */
        max-width: 90vw;
        line-height: 1.5;
    }

    .scroll-hint { bottom: 1.5rem; }

    /* --- Media block: video and quote each become their own full screen --- */
    .media-block {
        padding: 0;
        gap: 0;
        min-height: auto;
    }

    /* Re-enable the wrappers so they can be real 100svh sections.
       Each one centers its child (video-frame or quote) in the middle
       of the screen, giving the scroll a clear "page after page" feel. */
    .video-screen {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100svh;
        padding: 2rem 1rem;
    }

    .video-frame { width: 100%; }

    .quote        { margin: 20px; padding: 0 0.5rem; }
    .quote p      { font-size: 1.15rem; }
    .quote cite   { font-size: 0.6rem; letter-spacing: 0.25em; }
}

/* Phones in landscape — the timer block would otherwise overflow */
@media (max-height: 480px) and (orientation: landscape) {
    .timer-block { height: 100svh; gap: 0.5rem; }
    .timer { font-size: clamp(2.5rem, 14vh, 5rem); }
    .scroll-hint { display: none; }
}