/* =============================================================================
   Design Studies — global stylesheet
   -----------------------------------------------------------------------------
   Only DESIGN TOKENS, RESET and a few GLOBAL primitives live here.
   Every component's styles live in assets/css/<name>.snippet.css and are
   auto-loaded by the `snippet-assets` plugin the first time the snippet
   renders. See FRONTEND.md for the full map.
   ========================================================================== */

/* Bespoke variable display face for the "DESIGN STUDIES" wordmark (Figma).
   Custom axes: wght 0–100 · srff 0–100 (serif amount) · ital −100–100 · nvgn 0–100. */
@font-face {
    font-family: "Times New Arial";
    src: url("../fonts/TimesNewArialVF.woff2") format("woff2-variations");
    font-weight: 1 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Colour (from Figma variables) --------------------------------------- */
    --color-black: #1e1e1e; /* Figma: "Black"      */
    --color-white: #ffffff; /* Figma: "White"      */
    --color-accent: #59ff4d; /* Figma: "Neon Green" — index dots / active state */
    --color-bar: #e6e6e6; /* menubar background   */
    --color-note: #ff2d2d; /* footnote markers + article top gradient */
    --color-muted: #6b6b6b;

    --color-fg: var(--color-black);
    --color-bg: var(--color-bar);
    --color-line: var(--color-black); /* hairline rules used throughout */

    /* --- Typography ---------------------------------------------------------- */
    /* The whole platform is set in "Times New Arial" (bespoke variable font,
     @font-face above), with a Times-like serif fallback while it loads. */
    --font-serif:
        "Times New Arial", "Times New Roman", Times, "Liberation Serif", serif;
    --font-display: var(--font-serif);

    --fs-body: 1rem; /* justified serif body ~19px */
    --fs-article-body: 1.2rem;
    --fs-small: 1rem;
    --fs-meta: 0.85rem; /* metadata sidebar labels */
    --fs-menu: 2rem; /* menubar items */
    --fs-heading: 2rem; /* column headings: "Neuwerk Magazine" */
    --fs-subheading: 1.5rem;
    --fs-title: 3rem; /* article title */
    --fs-subtext: 1.25rem;
    --fs-wordmark: 2rem;

    --leading-body: 1.35;
    --leading-tight: 1.05;

    /* --- Spacing scale (rem) ------------------------------------------------- */
    --space-3xs: 0.15rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;

    /* --- Layout -------------------------------------------------------------- */
    --menubar-h: 3rem;
    --maxw: 1440px; /* desktop reference width */
    --col-side: clamp(
        18rem,
        25vw,
        22.5rem
    ); /* landing / article side columns */
    /* Shared page grid (1 : 2 : 1): flexible side columns that never fall below
       --col-side, a 2fr centre. Landing and article both use it so their columns
       line up across views. */
    --cols-page: minmax(var(--col-side), 1fr) 2fr minmax(var(--col-side), 1fr);
    --measure: 42rem; /* article body measure */
    --border: 1px solid var(--color-line);
    --border-thin: 0.5px solid var(--color-line);
    --article-accent-height: 1.75rem;

    /* --- Shapes -------------------------------------------------------------- */
    /* clip-path tokens for the issue "dot" indicators. An issue's `shape` field
       selects one of these; the value inherits down to the dot as --shape (see
       the [data-shape] rules below). Circle is the fallback, so needs no rule.
       All shapes are regular (equal-sided) and centred. The compact/round ones
       (square … nonagon) are scaled to match the circle's area, so they read the
       same size as it. The pointy shapes (triangle, star, hexagram, cross) keep
       a smaller area — matching them to the circle would push their points out
       past the others — so they stay visually balanced rather than over-reaching. */
    --shape-circle:   circle(40%);
    --shape-triangle: polygon(50.0% 12.5%, 93.3% 87.5%, 6.7% 87.5%);
    --shape-square:   inset(14.6%);
    --shape-diamond:  polygon(50.0% 0.0%, 100.0% 50.0%, 50.0% 100.0%, 0.0% 50.0%);
    --shape-pentagon: polygon(50.0% 4.0%, 93.7% 35.8%, 77.0% 87.2%, 23.0% 87.2%, 6.3% 35.8%);
    --shape-hexagon:  polygon(50.0% 6.0%, 88.1% 28.0%, 88.1% 72.0%, 50.0% 94.0%, 11.9% 72.0%, 11.9% 28.0%);
    --shape-heptagon: polygon(50.0% 7.1%, 83.5% 23.3%, 91.8% 59.5%, 68.6% 88.6%, 31.4% 88.6%, 8.2% 59.5%, 16.5% 23.3%);
    --shape-octagon:  polygon(50.0% 7.8%, 79.8% 20.2%, 92.2% 50.0%, 79.8% 79.8%, 50.0% 92.2%, 20.2% 79.8%, 7.8% 50.0%, 20.2% 20.2%);
    --shape-nonagon:  polygon(50.0% 8.3%, 76.8% 18.1%, 91.1% 42.8%, 86.1% 70.8%, 64.3% 89.2%, 35.7% 89.2%, 13.9% 70.8%, 8.9% 42.8%, 23.2% 18.1%);
    --shape-star:     polygon(50.0% 1.0%, 63.3% 31.8%, 96.6% 34.9%, 71.4% 57.0%, 78.8% 89.6%, 50.0% 72.6%, 21.2% 89.6%, 28.6% 57.0%, 3.4% 34.9%, 36.7% 31.8%);
    --shape-hexagram: polygon(50.0% 6.7%, 62.5% 28.3%, 87.5% 28.3%, 75.0% 50.0%, 87.5% 71.7%, 62.5% 71.7%, 50.0% 93.3%, 37.5% 71.7%, 12.5% 71.7%, 25.0% 50.0%, 12.5% 28.3%, 37.5% 28.3%);
    --shape-cross:    polygon(38.1% 10.0%, 61.9% 10.0%, 61.9% 38.1%, 90.0% 38.1%, 90.0% 61.9%, 61.9% 61.9%, 61.9% 90.0%, 38.1% 90.0%, 38.1% 61.9%, 10.0% 61.9%, 10.0% 38.1%, 38.1% 38.1%);
}

/* Map an issue's chosen shape (data-shape on the element carrying --dot) to the
   inherited --shape custom property, which the dot elements clip themselves to. */
[data-shape="triangle"] { --shape: var(--shape-triangle); }
[data-shape="square"]   { --shape: var(--shape-square); }
[data-shape="diamond"]  { --shape: var(--shape-diamond); }
[data-shape="pentagon"] { --shape: var(--shape-pentagon); }
[data-shape="hexagon"]  { --shape: var(--shape-hexagon); }
[data-shape="heptagon"] { --shape: var(--shape-heptagon); }
[data-shape="octagon"]  { --shape: var(--shape-octagon); }
[data-shape="nonagon"]  { --shape: var(--shape-nonagon); }
[data-shape="star"]     { --shape: var(--shape-star); }
[data-shape="hexagram"] { --shape: var(--shape-hexagram); }
[data-shape="cross"]    { --shape: var(--shape-cross); }

/* --- Reset ----------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /*outline: 1px solid red;*/
}

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

body {
    margin: 0;
    font-family: var(--font-serif);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Times New Arial's default instance has serifs off; set a readable serif
     resting value for all text. Components (e.g. the logo) override per element.
     Axes: wght 0–100 · srff 0–100 (serif amount) · ital −100–100 · nvgn 0–100. */
    font-size: var(--fs-body);
    line-height: var(--leading-tight);
    color: var(--color-fg);
    background: var(--color-bg);

}

* {
    font-variation-settings:
        "wght" var(--fa-weight, 0),
        "srff" var(--fa-serif, 100),
        "ital" var(--fa-italic, 0),
        "nvgn" 0;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
    margin: 0;
}
ul,
ol {
    padding: 0;
    list-style: none;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-size: inherit;
  line-height: inherit;
  font-weight: normal;
}

p {
  text-wrap: pretty;
}


/* --- Global primitives ----------------------------------------------------- */
.wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--space-s);
}

/* The site chrome (menubar + landing/article) is full-bleed, so page content
   opts out of .wrap by living directly in <main>. .wrap is kept for prose pages
   (About, imprint, …) rendered by page.php / default.php. */
.prose {
    max-width: var(--measure);
}
.prose > * + * {
    margin-top: var(--space-s);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}