/* Go Plugins.
   One idea: paper, ink, and the work. The images and videos carry the colour; the one gradient on the
   page is the copper "Go" of the name. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: block;
    src: url(../fonts/inter-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: block;
    src: url(../fonts/inter-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --paper: #f3ecdc;
    --ink: #161513;
    --muted: #6b675e;
    --line: rgba(22, 21, 19, 0.14);

    --max: 1240px;
    --pad: clamp(20px, 4vw, 48px);
}

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

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--paper);
}

body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
main { flex: 1; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a:focus-visible, [role="slider"]:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ---------- Type ---------- */
h1 {
    font-weight: 500;
    font-size: clamp(2.7rem, 7.2vw, 6.2rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
}
h2 {
    font-weight: 500;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
h3 { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 34ch; }
.small { font-size: 14px; color: var(--muted); }

/* THE "GO": the same copper as the word "Davinci Resolve" on the Go Atlas page, drawn as a soft
   three-stop gradient. It is the one coloured thing in the name, so the eye lands on it first. */
.go-mark {
    background: linear-gradient(135deg, #a9502a 0%, #cf7448 48%, #e3a35c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-right: 0.02em;
}

/* ---------- Hub: three plugins, centred, all above the fold ---------- */
/* One axis. The name, its line and the three cards share the centre of the page, and the cards sit on
   a grid whose margins are the header's, so nothing hangs off the edge of anything else. */
.hub { background: radial-gradient(ellipse 75% 46% at 50% 0%, #faf5e9 0%, var(--paper) 74%), var(--paper); }
/* On a tall screen the composition is centred between the header and the footer, not left hanging from the top. */
/* VERTICAL RHYTHM: three spaces and only three - above the name, between the name and the cards, below the cards.
   The outer two are equal because the block is centred between the header and the footer, and it is lifted a
   little (more room below than above), since a block sitting on the exact middle looks low. The space between
   is the smaller one: the name and its three products read as a single thing. */
.hub main { display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 3vh, 40px) 0 clamp(28px, 6vh, 72px); }
.hub .hero { padding: 0 0 clamp(36px, 8.5vh, 104px); }
.hero-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(6px, 1vh, 12px); }
/* THE NAME IS SET LIKE THE GO ATLAS TITLE: Inter, weight 800, no tracking. */
.hero-stack h1 { font-size: clamp(2.6rem, min(6.4vw, 10vh), 6rem); font-weight: 800; letter-spacing: 0; line-height: 1.02; max-width: none; }
/* OPTICAL CENTRING. The name is geometrically centred, but the copper "Go" is lighter than the black word after it, so
   the visual weight sat about a third of an em to the right (measured: +27 px at 1440 px). A shift of 0.12em is the compromise: the weight is about halfway back to the middle, and the word does not look pushed left. */
.hero-stack h1 { transform: translateX(-0.12em); }
.hero-sub { display: inline-flex; align-items: center; gap: 0.55em; font-size: clamp(0.85rem, min(1.1vw, 2.2vh), 1.05rem); font-weight: 500; color: var(--muted); }
.hero-sub-logo { width: 1.05em; height: 1.05em; }

.lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.piece a { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vh, 20px); text-align: center; }
.piece-media {
    width: 100%;
    overflow: hidden;
    /* The dark grey of the Go Atlas price cards. The demo clips are light on black, so they are laid on it with
       Screen: black becomes this grey, white stays white, and a glow keeps adding light instead of being clipped. */
    background: linear-gradient(180deg, rgba(233, 221, 200, 0.045), rgba(233, 221, 200, 0.012) 42%, transparent 100%), #222220;
    isolation: isolate;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(22, 21, 19, 0.08), 0 22px 44px -22px rgba(22, 21, 19, 0.45);
    transition: filter 0.3s ease;
}
/* THE CARDS DO NOT MOVE OR GROW UNDER THE POINTER. Arriving here from another page leaves the pointer over one of them, and a moment
   after load that card rose and swelled while its neighbours stayed put. The card lightens instead. */
.piece a[href]:hover .piece-media { filter: brightness(1.12); }
.piece-media video { mix-blend-mode: screen; }
.piece-media img, .piece-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.piece h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: 0; }
.piece p { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 32ch; margin-top: calc(-1 * clamp(4px, 1vh, 10px)); }
.piece .piece-soon { margin-top: 0; color: var(--ink); font-size: 17px; font-weight: 700; }
/* A large screen gets larger cards instead of wider margins. */
@media (min-width: 1600px) and (min-height: 900px) {
    .hub .wrap { max-width: 1480px; }
}
@media (max-width: 900px) {
    .lineup { grid-template-columns: 1fr; gap: 40px; max-width: 560px; margin: 0 auto; }
}