/* ==========================================================================
   tomvsreality.com : shared system
   Comic-book line design. No JavaScript. Self-hosted fonts.
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------- */
@font-face {
    font-family: 'Bungee';
    src: url('../fonts/bungee-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/comic-neue-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/comic-neue-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
    /* Background (three-colour marble) */
    --navy: #313F5B;
    --swirl-body: #252525;
    --swirl-edge: #1C1C1C;

    /* The one brand accent: horizontal gradient, orange -> gold, left to right */
    --accent: linear-gradient(90deg, #FF7700 0%, #FFC300 100%);

    /* Neutrals. Ink (outlines + text) is always pure at 100%.
       Buttons are full opaque black (they carry hover / gradient effects).
       Panels, cards, and headline letter-fills use --surface-dark, a TRANSLUCENT
       black so the marble reads through them, exactly like the logo. One dial. */
    --ink-white: #FFFFFF;
    --ink-black: #000000;
    --surface-opacity: 0.7;
    --surface-dark: rgba(0, 0, 0, var(--surface-opacity));
    --surface-light: rgba(255, 255, 255, var(--surface-opacity));

    /* Comic-book ink line: ONE weight everywhere, fixed px, never em-relative */
    --line: 3px;
    --radius: 12px;
    /*
       Title outline. The one stroke that cannot be a fixed px value: the title
       is sized in vw, and browser zoom shrinks the CSS viewport rather than the
       stroke, so a fixed stroke gains relative weight as the letters shrink and
       -webkit-text-stroke (centred, half of it painting inward) starts closing
       the counters. Tracks the title's own 6vw ramp instead, so the stroke stays
       between 3.75% and 5% of the cap height at every viewport and zoom level.
       Ends: 2.4px at a 64px title, 1.6px at the 32px floor.
    */
    --title-line: clamp(1.6px, calc(0.8px + 0.15vw), 2.4px);

    /* Bungee needs negative tracking to read like the logo (-3% to -5%) */
    --bungee-tracking: -0.04em;
}

/* ---- Reset ------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

body {
    font-family: 'Comic Neue', system-ui, sans-serif;
    font-weight: 700;
    color: var(--ink-white);
    background-color: var(--navy);
    background-image: url('../images/background-swirl.svg');
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Comic-line primitives (shared across home + sub-pages)
   ========================================================================== */

/*
   Outlined button. The gradient-border trick: two stacked backgrounds, the
   dark surface clipped to padding-box and the outline colour clipped to
   border-box. This keeps a true rounded outline at a constant --line weight
   while letting the 80%-opacity surface show the marble through it.
   Default outline is pure white. On hover the outline and the label both
   switch to the accent gradient.
*/
.btn {
    /* buttons are full opaque black, so their two-layer outline trick is fine */
    --surface-dark: var(--ink-black);
    display: inline-block;
    border: var(--line) solid transparent;
    border-radius: var(--radius);
    padding: 0.7em 1.15em;
    background:
        linear-gradient(var(--surface-dark), var(--surface-dark)) padding-box,
        linear-gradient(var(--ink-white), var(--ink-white)) border-box;
    transition: background 0.15s ease;
    cursor: pointer;
}
.btn__label {
    display: block;
    font-family: 'Comic Neue', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    color: var(--ink-white);
}
.btn:hover,
.btn:focus-visible {
    outline: none;
    background:
        linear-gradient(var(--surface-dark), var(--surface-dark)) padding-box,
        var(--accent) border-box;
}
.btn:hover .btn__label,
.btn:focus-visible .btn__label {
    background: var(--hue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/*
   Hover colour is a per-button variable --hue (a gradient or a flat colour
   expressed as a gradient). Default hue is the brand accent. Brand classes
   below just reset --hue (and --fill-text for the fill variant).
*/
.btn { --hue: var(--accent); --fill-text: var(--ink-black); }
.btn:hover, .btn:focus-visible {
    background:
        linear-gradient(var(--surface-dark), var(--surface-dark)) padding-box,
        var(--hue) border-box;
}

.brand-accent    { --hue: var(--accent);                            --fill-text: var(--ink-black); }
.brand-coral     { --hue: linear-gradient(#FF424D, #FF424D);        --fill-text: var(--ink-white); }
.brand-linkedin  { --hue: linear-gradient(#0A66C2, #0A66C2);        --fill-text: var(--ink-white); }
.brand-instagram { --hue: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5); --fill-text: var(--ink-white); }
.brand-teal      { --hue: linear-gradient(#2A5050, #2A5050);        --fill-text: var(--ink-white); }
.brand-uorange   { --hue: linear-gradient(#FFB83C, #FFB83C);        --fill-text: var(--ink-black); }

/*
   .btn--fill : instead of colouring only the outline + label on hover, fill the
   whole button with --hue and switch the label to --fill-text. Used for the
   About contact buttons.
*/
.btn--fill:hover,
.btn--fill:focus-visible {
    /* surface fills with the brand --hue, but the outline stays the text colour
       (--fill-text), so the edge reads against the fill instead of vanishing */
    background: var(--hue) padding-box,
        linear-gradient(var(--fill-text), var(--fill-text)) border-box;
}
.btn--fill:hover .btn__label,
.btn--fill:focus-visible .btn__label {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--fill-text);
    -webkit-text-fill-color: var(--fill-text);
}

/*
   .btn--accent : the accent gradient at rest (outline + label), filling on
   hover. Used for the primary calls to action (Get the book, Join the Patreon).
*/
.btn--accent {
    background:
        linear-gradient(var(--surface-dark), var(--surface-dark)) padding-box,
        var(--accent) border-box;
}
.btn--accent .btn__label {
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.btn--accent:hover,
.btn--accent:focus-visible {
    /* fills with the accent, outline stays the label colour (black) */
    background: var(--accent) padding-box,
        linear-gradient(var(--ink-black), var(--ink-black)) border-box;
}
.btn--accent:hover .btn__label,
.btn--accent:focus-visible .btn__label {
    background: none;
    color: var(--ink-black);
    -webkit-text-fill-color: var(--ink-black);
}

/* ==========================================================================
   Sub-page primitives (shared by book / articles / projects / about / privacy)
   ========================================================================== */

.subpage {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 4vh, 2.5rem);
    padding: clamp(3.75rem, 9vh, 6.5rem) 6vw clamp(2.5rem, 6vh, 4rem);
}

/* Close button: returns to home. An X built from an SVG whose stroke stays at
   the uniform --line weight regardless of scale (non-scaling-stroke). */
.close-x {
    /* full opaque black like the buttons (it has a hover state) */
    --surface-dark: var(--ink-black);
    position: absolute;
    top: clamp(1.1rem, 3vw, 2.2rem);
    right: clamp(1.1rem, 3vw, 2.2rem);
    width: clamp(2.6rem, 4vw, 3.4rem);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--line) solid transparent;
    border-radius: var(--radius);
    background:
        linear-gradient(var(--surface-dark), var(--surface-dark)) padding-box,
        linear-gradient(var(--ink-white), var(--ink-white)) border-box;
    transition: background 0.15s ease;
}
.close-x svg { width: 55%; height: 55%; display: block; }
.close-x svg line {
    stroke: var(--ink-white);
    stroke-width: var(--line);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.close-x:hover,
.close-x:focus-visible {
    outline: none;
    background:
        linear-gradient(var(--surface-dark), var(--surface-dark)) padding-box,
        var(--accent) border-box;
}
.close-x:hover svg line,
.close-x:focus-visible svg line { stroke: #FF9500; }

/* Bungee outline title: dark fill, white outline at the uniform --line weight */
.page-title {
    font-family: 'Bungee', system-ui, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--bungee-tracking);
    line-height: 1.05;
    text-align: center;
    color: var(--surface-dark);
    -webkit-text-stroke: var(--title-line) var(--ink-white);
    font-size: clamp(2rem, 6vw, 4rem);
}

/* Content panel: ONE translucent layer + a real border, so the marble reads
   through it like the logo (no opaque backing). */
.panel {
    width: min(760px, 100%);
    border: var(--line) solid var(--ink-white);
    border-radius: calc(var(--radius) + 6px);
    background: var(--surface-dark);
    padding: clamp(1.6rem, 4vw, 2.9rem);
    color: var(--ink-white);
    font-family: 'Comic Neue', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    text-align: center;
}
.panel p { margin: 0 0 1em; }
.panel p:last-child { margin-bottom: 0; }
.panel a { color: var(--ink-white); text-decoration: underline; }
.panel--left { text-align: left; }
.panel--left h2 {
    font-size: 1.15em;
    margin: 1.4em 0 0.35em;
}
.panel--left h2:first-child { margin-top: 0; }

/* Accent inline text (a phrase inside body copy set in the brand gradient) */
.accent-text {
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Row of action buttons under a panel */
.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Sub-page buttons match the (well-sized) home buttons */
.subpage .btn {
    font-size: clamp(0.95rem, 1.4vw, 1.35rem);
}