/* ============================================================
   AIDAN KLEIN — NARRATIVE DESIGNER — GLOBAL STYLES
   ------------------------------------------------------------
   ELEMENTOR: Paste this entire file ONCE into
   Elementor > Site Settings > Custom CSS
   (or Appearance > Customize > Additional CSS).
   Every section chunk inherits from these variables/classes —
   nothing here is repeated inside the section widgets.
   ============================================================ */

/* ---- Font imports ----
   Autour One + Amiri come from Google Fonts.
   Droid Serif was retired from Google Fonts, so it's loaded from
   the CDNFonts mirror with Noto Serif / Georgia as fallbacks. */
/* ELEMENTOR-EDIT: Fonts — font imports (must stay at the very top of the CSS) */
@import url('https://fonts.googleapis.com/css2?family=Autour+One&family=Amiri:ital,wght@0,400;0,700;1,400&family=Noto+Serif:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.cdnfonts.com/css/droid-serif-2');

/* ------------------------------------------------------------
   1. DESIGN TOKENS (CSS custom properties)
   Tune the whole site from this one block.
   ------------------------------------------------------------ */
:root {
  /* Palette — DARK THEME.
     Midnight Violet is the site's PRIMARY SURFACE (cards, header,
     badges, the soft section band), not just the ink colour it used
     to be. Void sits underneath it as the page itself. */
  /* ELEMENTOR-EDIT: Colors — site palette (seven brand colors) */
  --c-void:        #1d1122;  /* Void            — page background, deepest surface */
  --c-midnight:    #3d2645;  /* Midnight Violet — PRIMARY surface: cards, header, bands */
  --c-grape:       #7f438c;  /* Grape Soda      — primary accent, CTAs, offset shadows */
  --c-lavender:    #8a8fc2;  /* Lavender Grey   — borders, structure, decorations */
  --c-lavender-lt: #a8adda;  /* Lavender Light  — accent TEXT on dark (AA-safe) */
  --c-periwinkle:  #4f549b;  /* Dark Periwinkle — deepened lavender: writing-card
                                shadows, and the lined-paper sheet's outline */
  --c-silver:      #ccc5c4;  /* Silver          — body text on dark */
  --c-ghost:       #f0eff4;  /* Ghost White     — headings, high-contrast text */

  /* Semantic aliases (use these in components) */
  /* Contrast, checked against WCAG AA:
       ghost on void .......... 16.0:1
       ghost on midnight ...... 11.7:1
       silver on midnight ...... 7.9:1
       lavender-light on midnight 6.2:1
     Plain --c-lavender on midnight is only 4.34:1, which fails AA for
     small text — that is why --c-lavender-lt exists. Use --accent-text
     (not --accent) for any small text like kickers and subheads:
     grape on midnight is 2.0:1 and is decoration only, never type. */
  /* ELEMENTOR-EDIT: Colors — semantic color roles (background / surface / ink / accent / lines) */
  --bg-page:        var(--c-void);
  --bg-surface:     var(--c-midnight);    /* cards and other raised panels */
  --bg-block-dark:  #150c19;              /* deeper band, for alternating sections */
  --bg-block-soft:  var(--c-midnight);    /* midnight brought forward as a visible band */
  --ink:            var(--c-ghost);
  --ink-soft:       var(--c-silver);      /* muted body text on dark */
  --ink-on-dark:    var(--c-ghost);
  --accent:         var(--c-grape);       /* fills, shadows, decoration — NOT small text */
  --accent-text:    var(--c-lavender-lt); /* accent TEXT: kickers, subheads */
  --line:           rgba(138, 143, 194, 0.35);

  /* Typography */
  /* ELEMENTOR-EDIT: Fonts — font families (headings / subheadings / body) */
  --font-h1:   'Autour One', 'Comic Sans MS', cursive;
  --font-h2:   'Amiri', 'Times New Roman', serif;
  --font-body: 'Droid Serif', 'Noto Serif', Georgia, serif;

  /* ELEMENTOR-EDIT: Fonts — font sizes & line height */
  --fs-hero:    clamp(2.6rem, 7vw, 5.2rem);
  --fs-h2:      clamp(2rem, 4.5vw, 3.2rem);
  --fs-h3:      clamp(1.25rem, 2.5vw, 1.6rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --lh-body:    1.7;

  /* Spacing scale */
  /* ELEMENTOR-EDIT: Spacing — spacing scale (used everywhere) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;

  /* Layout */
  /* ELEMENTOR-EDIT: Sizing — content width, corner radius, header height */
  --content-max: 72rem;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --header-h: 4.25rem;

  /* Animation timing — the single source of truth for "feel".
     js/main.js reads these same values via its ANIM constants;
     change both together if you retune. */
  /* ELEMENTOR-EDIT: Animation — speed & easing variables (CSS side; edit together with the JS twin DWP.ANIM in main.js) */
  --anim-fast:   0.25s;
  --anim-med:    0.6s;
  --anim-slow:   1s;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* "expo-ish" settle */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */
}

/* ------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.dwp-body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

/* ------------------------------------------------------------
   2b. WORDPRESS / ELEMENTOR ROOT
   On the live site the shortcode output is wrapped by the plugin
   in <div class="dwp-root">, because the theme's <body> is NOT
   .dwp-body — so base typography, color, page background, and
   horizontal-overflow containment must live on the wrapper, not
   the body. (The standalone body.dwp-body rule above keeps the
   local index.html preview pixel-identical.) One .dwp-root wraps
   each section widget; the values inherit into the section markup.
   ------------------------------------------------------------ */
.dwp-root {
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Contain the decorative blobs/rings (position:absolute, negative
     offsets) on the x-axis without touching <body>. overflow-x:clip
     leaves vertical flow (the accordion) untouched and, unlike
     overflow:hidden, creates no scroll container or fixed-pos trap. */
  overflow-x: clip;
}

/* height:auto is not optional here. Images carry real width/height
   attributes (so the browser can reserve their box and avoid layout shift),
   and those attributes act as presentational hints — without this, max-width
   shrinks the width while the height stays pinned at the source pixel height
   and every image renders violently stretched. It also keeps `aspect-ratio`
   usable downstream: that property is ignored unless one axis is auto. */
.dwp img, .dwp svg { max-width: 100%; height: auto; display: block; }

/* Anchor targets land below the sticky header */
.dwp-section { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ------------------------------------------------------------
   3. TYPE CLASSES
   ------------------------------------------------------------ */
.dwp-h1 {
  font-family: var(--font-h1);
  font-size: var(--fs-hero);
  font-weight: 400;           /* Autour One only ships 400 */
  line-height: 1.1;
  margin: 0;
}
.dwp-h2 {
  font-family: var(--font-h2);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
}
.dwp-h3 {
  font-family: var(--font-h2);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--sp-1);
}
.dwp-kicker {
  font-family: var(--font-h1);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --accent-text, not --accent: grape on a dark surface is 2:1 and
     unreadable at this size. See the contrast note in the token block. */
  color: var(--accent-text);
  margin: 0 0 var(--sp-2);
}
.dwp-lead { font-size: 1.2rem; }
.dwp-small { font-size: var(--fs-small); }

/* ------------------------------------------------------------
   4. LAYOUT HELPERS
   ------------------------------------------------------------ */
.dwp-wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
.dwp-section {
  width: 100%;
  margin: 0;
  padding-block: var(--sp-6);
  position: relative;
  /* Clip the decorative blobs/rings (position:absolute, negative offsets) to
     the section's own full-width box. This is what stops them pushing the page
     wider than the viewport — the horizontal scrollbar and the strip of bare
     page to the right of the colour blocks. overflow-x:clip only affects the
     x-axis, so the vertically-expanding Work accordion is untouched. It lives
     on .dwp-section (not just .dwp-root) so it works even where the plugin
     wrapper isn't present. */
  overflow-x: clip;
}

/* Color-block section variants. The whole site is dark now, so these
   are depth steps rather than a light/dark flip:
     --dark  = deeper than the page (recedes)
     --soft  = Midnight Violet (comes forward off the page) */
.dwp-section--dark {
  background: var(--bg-block-dark);
  color: var(--ink-on-dark);
}
.dwp-section--soft { background: var(--bg-block-soft); color: var(--ink); }

/* ------------------------------------------------------------
   5. BUTTONS & PILLS
   ------------------------------------------------------------ */
/* The offset "sticker" shadow is the site's signature and stays. On dark
   the shadow can't be ink any more (ink is now near-white), so it becomes
   Grape — which keeps the shape reading against both Void and Midnight. */
.dwp-btn {
  display: inline-block;
  font-family: var(--font-h1);
  font-size: 1rem;
  padding: 0.8em 1.7em;
  border-radius: 999px;
  border: 3px solid var(--c-ghost);
  background: var(--accent);
  color: var(--c-ghost);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--c-grape);
  transition: transform var(--anim-fast) var(--ease-bounce),
              box-shadow var(--anim-fast) var(--ease-bounce),
              background var(--anim-fast) ease;
}
.dwp-btn:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--c-lavender); }
/* The site's legacy theme paints [type=submit]/[type=button] a coral
   red on hover/focus; restate our palette at higher specificity so
   buttons keep the Grape accent everywhere. */
.dwp-btn[type="submit"]:hover, .dwp-btn[type="submit"]:focus,
.dwp-btn[type="button"]:hover, .dwp-btn[type="button"]:focus { background: var(--accent); }
.dwp-btn:active { transform: translate(2px, 2px);  box-shadow: 1px 1px 0 var(--c-grape); }
.dwp-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--c-lavender);
  box-shadow: 4px 4px 0 var(--c-midnight);
}
.dwp-btn--ghost:hover { background: var(--accent); color: var(--c-ghost); border-color: var(--c-ghost); }

.dwp-pill {
  display: inline-block;
  font-family: var(--font-h1);
  font-size: var(--fs-small);
  padding: 0.45em 1.2em;
  border-radius: 999px;
  border: 2px solid var(--c-lavender);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--anim-fast) ease,
              color var(--anim-fast) ease,
              transform var(--anim-fast) var(--ease-bounce);
}
.dwp-pill:hover { transform: translateY(-2px); background: var(--accent); color: var(--c-ghost); }
.dwp-pill.is-active { background: var(--accent); color: var(--c-ghost); border-color: var(--accent); }

/* Category color coding. Now used only for the card's offset shadow and
   the diamond marker on deliverables — the per-card category badges that
   also used it are gone, since the two section headings already say which
   category you're in.
   One constraint remains: 'game' can't be Midnight, because Midnight is
   the card surface itself and the shadow would disappear against it.
   These are all deep tones (they were chosen when they had to carry Ghost
   White badge text at 4.5:1); that's no longer required, so there is room
   to brighten them if you want the shadows louder. */
/* ELEMENTOR-EDIT: Colors — project category colors (pairs with the tags used in projects-data.js; add a matching line here when adding a category) */
.dwp-cat--game      { --cat-color: var(--c-grape); }   /* #7f438c */
.dwp-cat--narrative { --cat-color: #8f3f9e; }          /* grape soda, one shade fizzier */
.dwp-cat--writing   { --cat-color: var(--c-periwinkle); } /* lavender, deepened for AA */
.dwp-cat--graphic   { --cat-color: #5a5f96; }          /* lavender-indigo, deepened for AA */

/* ------------------------------------------------------------
   6. CARDS & MEDIA PLACEHOLDERS
   ------------------------------------------------------------ */
/* Cards are the Midnight Violet surface, raised off the Void page. */
.dwp-card {
  background: var(--bg-surface);
  border: 3px solid var(--c-lavender);
  border-radius: var(--radius-lg);
  box-shadow: 6px 6px 0 var(--cat-color, var(--c-grape));
  overflow: hidden;
  transition: transform var(--anim-fast) var(--ease-bounce),
              box-shadow var(--anim-fast) var(--ease-bounce);
}
.dwp-card:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--cat-color, var(--c-grape)); }

/* Labeled placeholder for media you'll swap in later.
   Components generate these automatically for empty srcs.
   Every image on the site is currently one of these, so legibility
   matters more here than subtlety: Silver label (10.8:1 on the tile)
   over a hatch that reads as deliberately unfinished, not broken. */
/* ELEMENTOR-EDIT: Media — placeholder tile look & shape (shown wherever an image src is empty) */
.dwp-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-2);
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(45deg,
      rgba(168,173,218,0.14) 0 12px, rgba(168,173,218,0.04) 12px 24px),
    var(--bg-block-dark);
  border: 2px dashed var(--c-lavender-lt);
  border-radius: var(--radius-sm);
  color: var(--c-silver);
  font-family: var(--font-h1);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------
   7. DECORATIVE SHAPES (pure CSS — no image assets)
   Position with inline style="top:...;left:..." per instance.
   ------------------------------------------------------------ */
.dwp-blob, .dwp-dots, .dwp-ring {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* Opacities are all lowered from their light-theme values: the same
   shapes that read as soft blocks on Ghost White turn into glare on
   Void and start competing with the text. */
.dwp-blob {
  width: 16rem; height: 16rem;
  background: var(--c-lavender);
  opacity: 0.22;
  border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
}
.dwp-blob--grape { background: var(--c-grape); opacity: 0.32; }
.dwp-blob--silver { background: var(--c-lavender-lt); opacity: 0.16; }
.dwp-dots {
  width: 10rem; height: 10rem;
  /* Grape dots disappear against Void — lavender is the readable dot. */
  background-image: radial-gradient(var(--c-lavender) 2.5px, transparent 2.5px);
  background-size: 1.35rem 1.35rem;
  opacity: 0.3;
}
.dwp-ring {
  width: 9rem; height: 9rem;
  border: 1rem solid var(--c-lavender);
  border-radius: 50%;
  opacity: 0.25;
}
/* Content sits above decorations */
.dwp-above { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   8. ANIMATION HOOKS
   Elements with .dwp-reveal are revealed by GSAP ScrollTrigger
   (js/main.js). If JS fails, they stay visible — the hidden
   state is applied BY GSAP, not by CSS.
   ------------------------------------------------------------ */
.dwp-reveal { will-change: transform, opacity; }

/* WordPress admin bar: offset the fixed header by the bar's height using
   WP's own custom property (not a hardcoded pixel value). Only logged-in
   users see the bar; visitors are unaffected. Below 782px WP switches the
   bar to position:absolute (it scrolls away), so the header returns to top:0. */
/* The cloud reproduces the header's position from its own CSS rather than
   measuring the bar, so it has to take the same offset — otherwise it sits
   32px high of the bar it is supposed to look like part of. */
.admin-bar .dwp-header,
.admin-bar .dwp-cloud { top: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .dwp-header,
  .admin-bar .dwp-cloud { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dwp *, .dwp *::before, .dwp *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------
   9. FORM ELEMENTS (contact section)
   ------------------------------------------------------------ */
.dwp-input, .dwp-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  /* Void, not the deep band: the form card it sits inside is the deep
     band, so the fields need to be a step away from it to read as
     fields at all. */
  background: var(--c-void);
  border: 3px solid var(--c-lavender);
  border-radius: var(--radius-sm);
  padding: 0.75em 1em;
  transition: box-shadow var(--anim-fast) ease, border-color var(--anim-fast) ease;
}
/* Placeholder text needs an explicit colour on dark — the UA default is
   a light-theme grey that drops to roughly 2:1 here. */
.dwp-input::placeholder, .dwp-textarea::placeholder { color: #9d93a5; opacity: 1; }
.dwp-input:focus, .dwp-textarea:focus {
  outline: none;
  border-color: var(--c-lavender-lt);
  box-shadow: 4px 4px 0 var(--accent);
}
.dwp-label {
  display: block;
  font-family: var(--font-h1);
  font-size: var(--fs-small);
  margin-bottom: 0.4rem;
}

/* ------------------------------------------------------------
   10. FOCUS VISIBILITY
   Keyboard users previously only got a focus style on form fields.
   One ring for everything else, bright enough to clear AA against
   both Void and Midnight.
   ------------------------------------------------------------ */
.dwp a:focus-visible,
.dwp button:focus-visible,
.dwp summary:focus-visible,
.dwp-header a:focus-visible,
.dwp-header button:focus-visible,
/* The cloud is the logo link and lives outside .dwp-header now, so it needs
   naming here in its own right. */
.dwp-cloud:focus-visible {
  outline: 3px solid var(--c-lavender-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader-only text. Used where a visual element is assembled from
   parts that would be read out as nonsense — the About odometer stacks the
   digits 0-9 to roll through, so the real value is carried by one of these
   and the rolling markup is aria-hidden. */
.dwp-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Section 11 was the flow glyph — the node-and-connector mark that sat beside
   each portfolio category heading. Removed along with its markup in
   sections/04-work.html and its builder in js/main.js section 3. */