/* fakkeldy.ca: direction A, "Paper and brass".
   Every colour, size and gap here comes from the A spec board.
   Type sizes are in rem (16px base) so a reader's own text size still applies. */

/* ── Fonts ─────────────────────────────────────────────── */
/* Lexend is a variable font (wght 100–900), so 400 and 600 share one file. */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lexend-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lexend-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;
}
/* Only downloaded once someone presses Aa. */
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/OpenDyslexic-Regular.woff2') format('woff2');
}

/* ── Tokens ────────────────────────────────────────────── */
/* Light: paper. Ratios against #FAF7F0 are on the spec board. */
:root {
  --paper: #FAF7F0;
  --ink: #1F1D1A;          /* 15.72:1 */
  --muted: #5E584E;        /* 6.58:1 */
  --link: #7A5C1E;         /* 5.81:1 */
  --link-hover: #5F4714;   /* 8.18:1 */
  --button-bg: #7A5C1E;
  --button-fg: #FAF7F0;    /* 5.81:1 */
  --button-hover-bg: #5F4714;
  --button-hover-fg: #FAF7F0;
  --focus: #7A5C1E;
  --control-border: #A68B5C; /* 3.03:1, non-text */
  --pressed-bg: #7A5C1E;
  --pressed-fg: #FAF7F0;
  --hairline: #C9A24B;     /* 2.24:1, decorative only */
  --font-body: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: light;
}

/* Dark: KinNoKi black with gold links. */
:root[data-theme="dark"] {
  --paper: #000000;
  --ink: #F5F5F7;          /* 19.29:1 */
  --muted: #B8B8BF;        /* 10.65:1 */
  --link: #E0C47A;         /* 12.35:1 */
  --link-hover: #F1D596;   /* 14.70:1 */
  --button-bg: #C9A24B;
  --button-fg: #000000;    /* 8.75:1 */
  --button-hover-bg: #E0C47A;
  --button-hover-fg: #000000;
  --focus: #E0C47A;
  --control-border: #A68B5C; /* 6.47:1 */
  --pressed-bg: #C9A24B;
  --pressed-fg: #000000;
  --hairline: #997843;
  color-scheme: dark;
}

/* The Aa toggle swaps every face. OpenDyslexic sets wider, so the
   38rem column holds about 40 characters a line instead of about 65. */
:root[data-font="dyslexic"] {
  --font-body: 'OpenDyslexic', 'Lexend', sans-serif;
}

/* ── Base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.1875rem; /* 19px */
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--link-hover);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ── Page frame ────────────────────────────────────────── */
/* Phone: 20px gutters, 24px between groups. */
.page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 20px 48px;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.place {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.4;
  color: var(--muted);
}

.controls {
  display: flex;
  gap: 8px;
}

/* Without JavaScript the toggles can't work, so they don't appear. */
html:not(.js) .controls {
  display: none;
}

.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--control-border);
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  /* The circle is a fixed 44px, so the label stops growing at 20px;
     past that, OpenDyslexic's "Aa" would spill outside it. */
  font-size: min(1rem, 20px);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.font-toggle[aria-pressed="true"] {
  background: var(--pressed-bg);
  color: var(--pressed-fg);
}

/* The theme button shows the theme you would switch to. CSS picks the
   icon so it is right on first paint, before site.js runs. */
.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

/* The reading column. A video aside, when there is one, sits beside it
   inside .layout; without it nothing moves (see README). */
.layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  max-width: 38rem; /* 608px, about 65 characters of body text */
  overflow-wrap: anywhere; /* long words still fit at very large text sizes */
}

main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Name and line ─────────────────────────────────────── */
.intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h1 {
  font-size: 1.875rem; /* 30px */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 1.375rem; /* 22px */
  font-weight: 400;
  line-height: 1.36;
}

/* ── Contact ───────────────────────────────────────────── */
.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 21px; /* 22px with the border */
  border: 1px solid transparent; /* invisible, but keeps the button's shape in forced colours */
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--button-fg);
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.button:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-fg);
}

.note {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
}

/* The address is plain, selectable text; one tap or click selects all of it. */
.address {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  -webkit-user-select: all;
  user-select: all;
  overflow-wrap: anywhere;
}

/* ── Section labels ────────────────────────────────────── */
.label {
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}

.subject {
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

/* ── Link lists: doors and selected work ───────────────── */
.doors,
.group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.links {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.links li {
  border-bottom: 1px solid var(--hairline);
}

.links a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  text-decoration: none;
}

.links .title {
  font-size: 1.1875rem; /* 19px */
  font-weight: 600;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.links .sub {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.45;
  color: var(--muted);
}

.studio-note {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Who I am, selected work ───────────────────────────── */
.who,
.work {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Footer ────────────────────────────────────────────── */
.colophon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.colophon p {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
}

.colophon a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  line-height: 1.4;
}

/* ── Wider screens ─────────────────────────────────────── */
@media (min-width: 48em) {
  .page {
    gap: 48px;
    padding: 40px 40px 64px;
  }

  .column,
  main {
    gap: 32px;
  }

  .intro {
    gap: 12px;
  }

  h1 {
    font-size: 2.125rem; /* 34px */
  }

  .lede {
    font-size: 1.75rem; /* 28px */
    line-height: 1.3;
  }
}

/* Desktop: the column starts one sixth of the way across (240px at 1440).
   The header spans the column, a 96px gap and the 360px video margin. */
@media (min-width: 64em) {
  .page {
    padding-left: calc(100% / 6);
  }

  .masthead {
    max-width: calc(38rem + 96px + 360px);
  }

  .layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 96px;
  }

  .column {
    flex: 0 1 38rem;
  }
}

/* Windows High Contrast and other forced-colour modes drop backgrounds,
   so the pressed Aa needs a system colour to look different from unpressed. */
@media (forced-colors: active) {
  .font-toggle[aria-pressed="true"] {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    outline-color: CanvasText;
  }
}