/* simondilling.com
   Layout: image first. The portrait sits in the cscmusic.dk hexagon mask;
   one calm column of text beside it; ruled lists carry the record.
   The look is the current workstation's: its Gruvbox inks, yellow and orange,
   on a white ground (Simon, 14 Nov 2026: "I like the current workstation preview").
   No CSC sunset gradient anywhere. */

/* Fonts are self-hosted, nothing loads from Google (Simon, 14 Nov 2026, item 613:
   "approve rec"). Files from @fontsource 5.2.8, latin subset, SIL OFL 1.1
   (licences beside the files in fonts/). */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

/* Tokens read from workstation.py, 13 Nov 2026 */
:root {
  --paper: #ffffff;
  --panel: #f9f5e7;
  --ink: #282828;
  --ink-soft: #7c6f64;
  --rule: #e2d8bf;
  --accent: #fabd2f;       /* active pill */
  --accent-ink: #282828;   /* text on the accent */
  --hex: #fe8019;
  --hex-fill: #fdf0dd;
  --frame: #3c3836;
  --frame-line: #282828;
  --mark: #d65d0e;         /* link underlines, list markers */
  --display: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --display-weight: 700;
  --display-case: none;
  --display-track: 0;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --body-weight: 400;
  --label: "JetBrains Mono", Consolas, "Courier New", monospace;
  --radius: 8px;
  --radius-lg: 14px;
  --measure: 62ch;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: var(--body-weight);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration-color: var(--mark); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Header */
.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block: 28px 8px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.wordmark svg { width: 20px; height: 20px; flex: none; transform: rotate(-12deg); }
.wordmark polygon { fill: none; stroke: var(--hex); stroke-width: 2.4; }

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin: 0;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
}
.pills a {
  display: block;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.pills a:hover { background: var(--panel); }
.pills a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

/* The portrait: the cscmusic.dk artist mask (13 Nov 2026, from
   cscmusic.dk/roster/amea): an inline SVG, viewBox 308 x 272, a flat-top hexagon
   with rounded corners as a clipPath. img/simon.jpg is the one portrait in the
   vault with its four ringed corners replaced by the grey backdrop and 60 px of
   backdrop added on every side (built 14 Nov 2026), so it can sit zoomed out and
   lower: drawn at x -11.2, y -16.2, 330.4 x 329.9, the face 264 px wide, the top
   of the hair about 20 px below the mask's top edge (Simon, 14 Nov: "zoom out a
   bit more on the picture, bring it down a bit, so hair is not cut out"). */
.portrait {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 308 / 272;
  margin: 0;
}
.portrait svg { display: block; width: 100%; height: 100%; }

/* Home hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  padding-block: 32px 64px;
}
.hero .portrait { max-width: 440px; justify-self: center; }
.hero-text { min-width: 0; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  text-transform: var(--display-case);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 7vw, 4.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: 1.125rem; }

.lede {
  font-size: clamp(1.15rem, 2vw, 1.375rem);
  line-height: 1.5;
  max-width: 34ch;
  margin: 18px 0 0;
}
.label, .place, .kicker, .record .when {
  font-family: var(--label);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.place { margin: 18px 0 0; }

/* Sections */
.section { padding-block: 52px; border-top: 1px solid var(--rule); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.sub { margin: 32px 0 14px; }

/* Ruled record list */
.record { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.record li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 4px 24px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}
.record li:first-child { border-top: 1px solid var(--rule); }
.record .when { padding-top: 0.3em; font-variant-numeric: tabular-nums; }
.record .what { min-width: 0; }
.record .outlet { font-family: var(--display); font-weight: var(--display-weight); }
.record .src { display: block; font-size: 0.875rem; color: var(--ink-soft); }
.record .src a { color: var(--ink); }

.note { max-width: var(--measure); margin: 16px 0 0; font-size: 0.9375rem; color: var(--ink-soft); }

/* Page index on Home */
.doors { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doors a {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: 8px 32px;
  align-items: baseline;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.doors a:hover { border-color: var(--hex); background: var(--panel); }
.doors h3 { font-size: 1.5rem; }
.doors p { margin: 0; color: var(--ink-soft); }
.doors .go { font-size: 1.25rem; color: var(--mark); transition: transform 0.2s ease; }
.doors a:hover .go { transform: translateX(4px); }

/* Inner page head */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 32px;
  align-items: center;
  padding-block: 32px 36px;
}
.page-head .portrait { width: 170px; }
.page-head .lede { max-width: 44ch; }

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; }
.aside { min-width: 0; }
.aside h3 { margin-bottom: 12px; }
.aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.steps { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 10px; max-width: var(--measure); }
.steps li::marker { font-family: var(--label); color: var(--mark); }

/* The one offer, and the press kit: rounded panels */
.offer, .kit {
  max-width: 640px;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
}
.offer { border: 1px solid var(--rule); background: var(--paper); }
.kit { max-width: var(--measure); background: var(--panel); }
.offer h3 { font-size: 1.5rem; }
.offer .price { margin: 6px 0 14px; font-size: 0.9375rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.offer p, .kit p { margin: 0 0 14px; }

.btn {
  font: inherit;
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }

.contact-line { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.15rem, 2.6vw, 1.5rem); user-select: all; overflow-wrap: anywhere; margin: 0 0 12px; }

.site-foot { border-top: 1px solid var(--rule); margin-top: 24px; }
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 28px 96px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* Consultancy: more air between text blocks (Simon, after v4) */
.roomy .section { padding-block: 80px; }
.roomy .page-head { padding-block: 40px 56px; }
.roomy .prose p { margin-bottom: 1.5em; }
.roomy .prose h2, .roomy .section-head { margin-bottom: 32px; }
.roomy .record li { padding-block: 20px; }
.roomy .steps { gap: 20px; }
.roomy .aside ul { gap: 16px; }
.roomy .aside h3 { margin-bottom: 18px; }
.roomy .offer { padding: 32px 34px; }
.roomy .offer p { margin-bottom: 18px; }
.roomy .split { gap: 72px; }

@media (max-width: 760px) {
  .roomy .section { padding-block: 52px; }
  .roomy .split { gap: 48px; }
}

@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 16px 44px; }
  .hero .portrait { max-width: 300px; justify-self: start; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .page-head { grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; padding-block: 20px 24px; }
  .page-head .portrait { width: 104px; }
  .record li { grid-template-columns: minmax(0, 1fr); }
  .doors a { grid-template-columns: minmax(0, 1fr) auto; }
  .doors p { grid-column: 1 / -1; grid-row: 2; }
  .section { padding-block: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}