/* Shared look for the Zigzag mock-ups (3a, 3b, 3c) */
:root {
    --blue: #1b22c9;
    --blue-deep: #10158a;
    --cream: #f4efe2;
    --yellow: #ffe03d;
    --display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
    --serif: 'EB Garamond', Georgia, serif;
    --mono: 'Space Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--blue); color: var(--cream); font-family: var(--serif); }

.bar-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 2rem; background: linear-gradient(var(--blue) 60%, transparent);
}
.brand { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; line-height: 1; }
.brand small { display: block; font-family: var(--mono); font-weight: 400; font-size: .68rem; letter-spacing: .08em; opacity: .75; text-transform: uppercase; margin-top: .35rem; }
.langs { display: flex; gap: 2px; }
.langs button {
    font-family: var(--mono); font-size: .75rem; background: none; color: var(--cream); border: 1px solid #f4efe255;
    padding: .35rem .6rem; cursor: pointer;
}
.langs button.on { background: var(--yellow); color: var(--blue); border-color: var(--yellow); }

/* Title block: the work's name, large */
.title-block h1 { font-family: var(--display); font-weight: 800; line-height: .88; letter-spacing: -0.035em; font-size: clamp(3rem, 7.5vw, 7rem); }
.title-block h1 span { display: block; color: var(--yellow); }
.title-block .tag { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.7rem); margin-top: 1rem; }
.title-block p { font-size: 1.25rem; font-style: italic; margin-top: 1rem; max-width: 30rem; line-height: 1.35; opacity: .9; }

/* A letter on the line */
.node { position: absolute; cursor: pointer; text-align: center; }
.node .dot { width: 12px; height: 12px; background: var(--yellow); margin: 0 auto; transition: transform .2s; }
.node .ch { font-family: var(--display); font-weight: 800; line-height: .85; color: #f4efe233; transition: color .3s, transform .3s; }
.node .w { font-style: italic; white-space: nowrap; }
.node .w small { display: block; font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .1em; opacity: .6; text-transform: uppercase; }
.node.lit .ch { color: var(--cream); }
.node:hover .ch { color: var(--yellow); transform: rotate(-4deg); }
.node:hover .dot { transform: rotate(45deg) scale(1.4); }
.node.off .ch { color: transparent; -webkit-text-stroke: 1px #f4efe266; }
.node.off .w { opacity: .45; }

svg.line { position: absolute; overflow: visible; pointer-events: none; }
svg.line path { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linejoin: miter; }
svg.line path.ghost { stroke: #ffffff26; stroke-width: 1; stroke-dasharray: 4 6; }

/* viewer (shared viewer.js) */
.viewer {
    position: fixed; inset: 0; z-index: 10; background: var(--cream); color: var(--blue);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path .6s cubic-bezier(.7,0,.2,1);
    display: grid; grid-template-rows: auto 1fr; padding: 1.6rem 2rem; overflow: hidden;
}
.viewer.open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.viewer-close { position: absolute; top: 1.2rem; right: 1.6rem; background: var(--blue); color: var(--cream); border: 0; width: 2.8rem; height: 2.8rem; font-size: 1.6rem; cursor: pointer; }
.viewer-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.4rem; }
.viewer-letter { font-family: var(--display); font-weight: 800; font-size: 6rem; line-height: .8; }
.viewer-title { font-size: 2.4rem; font-style: italic; }
.viewer-langs { margin-left: auto; margin-right: 4rem; display: flex; gap: 2px; align-self: center; }
.viewer-langs button { font-family: var(--mono); font-size: .75rem; background: none; color: inherit; border: 1px solid currentColor; opacity: .55; padding: .35rem .6rem; cursor: pointer; }
.viewer-langs button.on { opacity: 1; background: var(--blue); color: var(--cream); border-color: var(--blue); }
.viewer-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; min-height: 0; }
.viewer-video video { width: 100%; display: block; background: #000; box-shadow: 12px 12px 0 var(--yellow); }
.viewer-novideo { font-size: 1.5rem; font-style: italic; }
.viewer-transcript { overflow-y: auto; font-size: 1.15rem; line-height: 1.6; color: #1a1a3a; padding-right: 1rem; }
.viewer-transcript p + p { margin-top: .9em; }
.viewer-transcript .turn.q { font-style: italic; color: #4a4f9a; padding-left: 1.2em; border-left: 3px solid var(--yellow); }
.viewer-transcript .turn.q::before { content: 'Claire Parnet'; display: block; font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }

@media (max-width: 760px) {
    .bar-top { padding: .8rem 16px; }
    .brand small { display: none; }
    .viewer { display: block; overflow-y: auto; padding: 1.2rem 16px; }
    .viewer-body { grid-template-columns: 1fr; }
    .viewer-head { flex-wrap: wrap; }
    .viewer-langs { margin: .6rem 0 0; width: 100%; }
}