/*
 * fisher.sh - elegant cream + Marauder serif.
 *
 * Layout, typography, and link behavior live here as defaults.
 * The token values (colors, sizes, opsz axes, weights) are also
 * declared in :root with sensible defaults so this file renders fine
 * on its own. build.py emits a second tiny theme.css from theme.json
 * which is linked AFTER this file in the template, so any value the
 * user has tuned via the editor wins via the cascade.
 *
 * Marauder is opsz + wght variable; the 'opsz' axis runs 6 (Caption,
 * tuned for body sizes) to 72 (Display, tuned for headlines).
 * Without setting it explicitly, browsers use a middle default
 * that flattens the typeface's character.
 */

@font-face {
    font-family: 'Marauder';
    src: url('/fonts/Marauder.woff2') format('woff2-variations'),
         url('/fonts/Marauder.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 25% 200%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marauder';
    src: url('/fonts/Marauder-Italic.woff2') format('woff2-variations'),
         url('/fonts/Marauder-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 25% 200%;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Newsreader';
    src: url('/fonts/Newsreader.woff2') format('woff2-variations'),
         url('/fonts/Newsreader.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Newsreader';
    src: url('/fonts/Newsreader-Italic.woff2') format('woff2-variations'),
         url('/fonts/Newsreader-Italic.woff2') format('woff2');
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg: #f4ecd8;
    --fg: #2c2825;
    --muted: #8a7e6e;
    --link-color: #5a4a3a;
    --accent: #a8460e;
    --accent-link-weight: 700;
    --hover: #6b2a0a;
    --hover-bg: transparent;
    --divider-color: #8a7e6e;
    --h1-color: #2c2825;
    --h2-color: #2c2825;
    --dim-color: #8a7e6e;
    --dim-hover: #2c2825;
    --dim-hover-bg: rgba(168, 70, 14, 0.18);

    --font-size-base: 22px;
    --font-size-h1: 4.5rem;
    --font-size-h2: 1.4rem;
    --max-width: 720px;
    --line-height-body: 1.55;

    --opsz-body: 6;
    --opsz-h1: 72;
    --opsz-h2: 10;
    --weight-body: 400;
    --weight-h1: 700;
    --weight-h2: 700;
    --weight-link: 400;

    --bullet-glyph: '\2022';
    --bullet-projects-glyph: '\25E6';
    --bullet-size: 1.5em;
    --bullet-offset-x: 0em;
    --bullet-offset-y: 0.04em;

    /* Per-block spacing. em-based so gaps scale with the element's own
     * font size (heading gaps stay proportional even as h2 grows). */
    --h2-margin-top:    1.6em;
    --h2-margin-bottom: 0.35em;
    --p-margin-top:     0em;
    --p-margin-bottom:  1em;
    --ul-margin-top:    0em;
    --ul-margin-bottom: 0.5em;
    --li-padding-top:    0.05em;
    --li-padding-bottom: 0.05em;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    padding: 0;
    font-family: 'Newsreader', 'Georgia', 'Iowan Old Style', 'Charter', serif;
    font-weight: var(--weight-body);
    font-variation-settings: 'opsz' var(--opsz-body);
    font-synthesis: none;
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    font-feature-settings: 'liga' 1, 'clig' 1, 'dlig' 1, 'calt' 1, 'kern' 1;
    font-kerning: normal;
    background: var(--bg);
    color: var(--fg);
    line-height: var(--line-height-body);
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

main {
    /* Hug the longest line, but never exceed the readable cap. Shrinks on
     * narrow screens, grows to fit short content. */
    width: fit-content;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5rem 1.75rem 6rem;
}

h1 {
    font-family: 'Marauder', 'Georgia', serif;
    font-size: var(--font-size-h1);
    font-weight: var(--weight-h1);
    font-variation-settings: 'opsz' var(--opsz-h1);
    color: var(--h1-color);
    line-height: 1;
    letter-spacing: -0.015em;
    margin: 0 0 var(--h2-margin-bottom);
}

h2 {
    font-family: 'Marauder', 'Georgia', serif;
    font-size: var(--font-size-h2);
    font-weight: var(--weight-h2);
    font-variation-settings: 'opsz' var(--opsz-h2);
    color: var(--h2-color);
    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
}

p {
    margin: var(--p-margin-top) 0 var(--p-margin-bottom);
}

ul {
    list-style: none;
    padding: 0;
    margin: var(--ul-margin-top) 0 var(--ul-margin-bottom);
}

li {
    position: relative;
    padding: var(--li-padding-top) 0 var(--li-padding-bottom) 1.75rem;
    margin: 0;
}

/* Bullet glyph, size, and X/Y offsets are all theme-controlled via
 * --bullet-* tokens (editable in the editor's Settings tab). The
 * defaults aim for lowercase-x-height centering; nudge offset-y up
 * for cap-center, down for descender baseline. */
li::before {
    content: var(--bullet-glyph);
    position: absolute;
    left: calc(0.25rem + var(--bullet-offset-x));
    top: var(--bullet-offset-y);
    font-size: var(--bullet-size);
    line-height: var(--line-height-body);
    color: var(--fg);
}

/* Nested lists get the projects-glyph too (visual sub-status marker
 * matching the projects list, since both denote "less primary"). */
ul ul li::before,
ul.projects li::before {
    content: var(--bullet-projects-glyph);
}

/* Sub-bullet indentation: tighten the wrapping ul's margin so children
 * sit right under the parent's text, not extending farther right. */
ul ul {
    margin: 0.15rem 0 0.15rem 0;
}

em {
    font-style: italic;
    color: var(--muted);
}

/* Links: dotted underline + accent color by default, swap to solid +
 * hover color + a highlight-bg on hover. The box-shadow trick gives a
 * marker-pen feel: the bg bleeds 0.15em past the text on each side
 * without shifting layout. transparent default = no highlight effect
 * unless the user picks one. Transition is 220ms ease-out for a
 * smooth feel without going laggy. */
a, a:visited {
    color: var(--link-color);
    font-weight: var(--weight-link);
    text-decoration: none;
    border-bottom: 1px dotted var(--link-color);
    padding-bottom: 1px;
    background-color: transparent;
    box-shadow: 0 0 0 0 transparent;
    transition:
        color 220ms ease-out,
        border-bottom-color 220ms ease-out,
        border-bottom-style 220ms ease-out,
        background-color 220ms ease-out,
        box-shadow 220ms ease-out;
}

a:hover, a:focus-visible {
    color: var(--hover);
    border-bottom: 1px solid var(--hover);
    background-color: var(--hover-bg);
    box-shadow: 0.15em 0 0 var(--hover-bg), -0.15em 0 0 var(--hover-bg);
    outline: none;
}

/* Accent link variant: for the few links that should pull attention
 * (the blog link, the resume button, etc.). Bolder + the orange
 * accent color, otherwise inherits all the hover behavior. */
a.accent, a.accent:visited {
    color: var(--accent);
    font-weight: var(--accent-link-weight);
    border-bottom: 1px dotted var(--accent);
}
a.accent:hover, a.accent:focus-visible {
    color: var(--hover);
    border-bottom: 1px solid var(--hover);
}

.kw {
    color: var(--accent);
    font-weight: var(--weight-link);
    border-bottom: 1px dotted var(--accent);
    padding-bottom: 1px;
}
a.kw, a.kw:visited {
    color: var(--accent);
    border-bottom: 1px dotted var(--accent);
}
a.kw:hover, a.kw:focus-visible {
    color: var(--hover);
    border-bottom: 1px solid var(--hover);
    background-color: var(--hover-bg);
    box-shadow: 0.15em 0 0 var(--hover-bg), -0.15em 0 0 var(--hover-bg);
}

/* Secondary / "dim" links - for things like old employers where you
 * want a link but it shouldn't pull as much attention as a primary one.
 * Solid underline by default (always present), muted text color,
 * a soft tinted hover bg. Same transition curve as primary. */
a.dim, a.dim:visited {
    color: var(--dim-color);
    font-weight: var(--weight-body);
    border-bottom: 1px solid var(--dim-color);
    text-decoration: none;
    padding-bottom: 1px;
    background-color: transparent;
    box-shadow: 0 0 0 0 transparent;
}
a.dim:hover, a.dim:focus-visible {
    color: var(--dim-hover);
    border-bottom: 1px solid var(--dim-hover);
    background-color: var(--dim-hover-bg);
    box-shadow: 0.15em 0 0 var(--dim-hover-bg), -0.15em 0 0 var(--dim-hover-bg);
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

/* Referenced SVG dividers (via `<!-- divider -->`, which expands to
 * `<div class="divider" style="--divider-img: url('/dividers/<name>.svg')">`).
 * The SVG is loaded as a CSS mask and tinted with --divider-color, so the
 * file stays out of the HTML but the divider still follows the theme. */
.divider {
    display: block;
    margin: 2.5em auto;
    width: 180px;
    aspect-ratio: 310 / 106;
    background-color: var(--divider-color);
    -webkit-mask: var(--divider-img, url('/dividers/flourish.svg')) no-repeat center / contain;
    mask: var(--divider-img, url('/dividers/flourish.svg')) no-repeat center / contain;
}

/* Text alignment classes for use via attr_list on any block:
 *     this text is centered
 *     {: .center }
 * Works on paragraphs, headings, lists. Place {: .class } on a line
 * by itself directly after the block you want to align. */
.center { text-align: center; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.right  { text-align: right;  }
.left   { text-align: left;   }

@media (max-width: 600px) {
    body { font-size: calc(var(--font-size-base) * 0.86); }
    main { padding: 3rem 1.25rem 4rem; }
    h1 { font-size: calc(var(--font-size-h1) * 0.71); margin-bottom: 1.75rem; }
    h2 { font-size: calc(var(--font-size-h2) * 0.9); }
    li { padding-left: 1.5rem; }
    li::before { left: 0.35rem; }
}