/*
  Ember — website layer, v4.1. Opt-in: only site pages link this file (after components.css,
  before the look's chrome css). App pages never load it.

  Patterns: site header, site footer, hero, statement, link index, now, CV, catalog, prose,
  not-found, print. Markup lives in ember/templates/_site.html (macros); behaviour in
  ember/js/site.js. Tokens only; look-specific touches belong in the look's chrome css.
*/

/* ==================================================================== */
/* Site header                                                           */
/* ==================================================================== */

.skiplink {
  position: absolute;
  top: calc(-1 * var(--space-24));
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.skiplink:focus { top: var(--space-2); }
main:focus { outline: none; }   /* the skip target, not a control */

.siteheader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg-raised);
  border-bottom: 1px solid var(--color-border-default);
}
.siteheader__home { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-primary); text-decoration: none; }
.siteheader__home:hover { color: var(--color-text-primary); }
.siteheader__mark { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); flex: none; }
.siteheader__mark :is(svg, img) { width: 100%; height: 100%; }
.siteheader__wordmark { font-family: var(--font-display); font-size: var(--font-size-display-md); letter-spacing: var(--letter-spacing-display); }
.siteheader__nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-inline-end: auto; }
.siteheader__nav a {
  padding: var(--space-1) 0;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.siteheader__nav a:hover { color: var(--color-text-primary); }
.siteheader__nav a[aria-current="page"] { color: var(--color-text-primary); border-bottom-color: var(--color-accent-mark); }
.siteheader .clocklist { gap: var(--space-4); }
.siteheader__action { font-size: var(--font-size-sm); }
.siteheader__menubtn {
  display: none;
  align-items: center;
  min-height: var(--control-h-touch);
  padding: 0 var(--space-3);
  margin-inline-start: auto;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.siteheader__menubtn:hover { background: var(--color-bg-surface); }

/* Under 640 px site.js turns the nav into a disclosure; without it the nav stays visible and wraps. */
@media (max-width: 639px) {
  .siteheader { padding-inline: var(--space-4); }
  .siteheader[data-nav] .siteheader__menubtn { display: inline-flex; }
  .siteheader[data-nav] .siteheader__nav { display: none; flex-basis: 100%; flex-direction: column; margin: 0; }
  .siteheader[data-nav="open"] .siteheader__nav { display: flex; }
  .siteheader[data-nav] .siteheader__nav a { padding: var(--space-3) 0; }
  /* closed header = one row: home, action, menu button; nav and clocks drop below */
  .siteheader[data-nav] .siteheader__action { order: 1; margin-inline-start: auto; }
  .siteheader[data-nav] .siteheader__menubtn { order: 2; margin-inline-start: 0; }
  .siteheader[data-nav] .siteheader__nav { order: 3; }
  .siteheader[data-nav] .clocklist { order: 4; }
}

/* ==================================================================== */
/* Site footer                                                           */
/* ==================================================================== */

.sitefooter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}
.sitefooter__version { font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-wide); }
.sitefooter__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.sitefooter__links a { color: var(--color-text-secondary); }
.sitefooter__signoff { margin: 0; margin-inline-start: auto; }
.sitefooter .themetoggle { align-self: center; padding: var(--space-1); }
@media (max-width: 639px) {
  .sitefooter { padding-inline: var(--space-4); }
  .sitefooter__signoff { margin-inline-start: 0; flex-basis: 100%; }
}

/* ==================================================================== */
/* Hero [task 3]                                                         */
/* ==================================================================== */

.hero { position: relative; }
.hero__scene {
  position: relative;
  overflow: hidden;
  aspect-ratio: 12 / 5;          /* reserved up front: no layout shift */
  width: 100%;
  max-height: 28rem;              /* wide screens: the scene stays at most 28rem tall (art is stretched, objects keep their %) so the statement stays near the fold */
  padding: var(--space-2);        /* layers are absolutely placed: the inset only keeps the frame from reading as flush text */
  background: var(--color-bg-sunken);
}
.hero__layer {
  position: absolute;
  top: -12px;
  left: -12px;                   /* overscan so the depth shift never shows an edge */
  width: calc(100% + 24px);
  max-width: none;
  height: calc(100% + 24px);
  transform-origin: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%);
  transition: transform var(--duration-base) var(--ease-standard);
  will-change: transform;
}
img.hero__layer, picture.hero__layer img { object-fit: cover; object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%); }
/* Objects sit in scene coordinates: --ox/--oy position (left/top of the object), --ow its width. */
.hero__object {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: var(--ow);
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero__object:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.hero__object svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero__label {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  translate: -50% 4px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm, 0.875rem);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard), translate var(--duration-base) var(--ease-standard);
}
.hero__object[data-react-state="on"] .hero__label { opacity: 1; translate: -50% 0; }
.hero__object[data-react-state="on"] { --lh-beam: 0.25; --mb-flag: 0deg; }
.hero__object[data-react-state="on"] .lh__lamp { fill: var(--color-accent) !important; }
.hero__text { padding: var(--space-8) var(--space-6); }
.hero__text > * { max-width: 36em; margin-inline: 0; }
/* A wide scene crops around its focal point on a narrow screen: the art is 2.4 x the frame, shifted so
   the focus is centred; objects follow with the same arithmetic (--ox is the object's x in art %). */
@media (max-width: 639px) {
  .hero__scene { aspect-ratio: 1; }
  .hero__layer { left: 50%; width: 240%; translate: calc(var(--hero-focus-x, 50%) * -1); }
  .hero__object {
    left: calc(50% + (var(--ox) - var(--hero-focus-x, 50%)) * 2.4);
    width: calc(var(--ow) * 2.4);
  }
  .hero__text { padding: var(--space-6) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__layer, .hero__label, .hero__object * { transition: none !important; }
}

/* ==================================================================== */
/* Statement                                                             */
/* ==================================================================== */

.statement { margin: 0; padding: var(--space-16) var(--space-6); }
.statement__text {
  max-width: 18em;
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.75rem;               /* stepped, not fluid: fixed sizes at each breakpoint */
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-wrap: balance;
}
.statement--long .statement__text { font-size: 2.25rem; }
.statement__text strong { font-weight: inherit; color: var(--color-accent); }
.statement__original { max-width: 45ch; margin: var(--space-6) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-md); }
.statement__translation { max-width: 45ch; margin: var(--space-1) 0 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
@media (max-width: 1023px) { .statement__text { font-size: 2.25rem; } .statement--long .statement__text { font-size: 1.875rem; } }
@media (max-width: 639px) {
  .statement { padding: var(--space-10) var(--space-4); }
  .statement__text { font-size: 1.75rem; letter-spacing: 0; }
  .statement--long .statement__text { font-size: 1.5rem; }
}

/* ==================================================================== */
/* Link index [task 4]                                                   */
/* ==================================================================== */

.linkindex { margin: 0; padding: var(--space-8) var(--space-6); max-width: 45rem; }
.linkindex__group { margin: var(--space-8) 0 var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); color: var(--color-text-secondary); }
.linkindex__group:first-child { margin-top: 0; }
.linkindex__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-default); }
.linkindex__item { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); }
.linkindex__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); color: var(--color-text-primary); text-decoration: none; }
.linkindex__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
.linkindex__link:hover .linkindex__title, .linkindex__link:focus-visible .linkindex__title { text-decoration: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 0.2em; }
.linkindex__path { color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--font-size-sm); }
.linkindex__desc { flex-basis: 100%; margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); font-style: italic; }
.linkindex__item > .linkindex__desc { display: block; }
.linkindex__lock { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.linkindex__item--private .linkindex__title { color: var(--color-text-secondary); }
/* dot leaders: a dotted rule runs from the title to the path */
.linkindex--leaders .linkindex__link::before { content: ""; order: 1; flex: 1; min-width: var(--space-4); align-self: end; margin-bottom: 0.3em; border-bottom: 2px dotted var(--color-border-strong); }
.linkindex--leaders .linkindex__path { order: 2; white-space: nowrap; }
.linkindex--leaders .linkindex__desc { order: 3; }
@media (max-width: 639px) {
  .linkindex { padding: var(--space-6) var(--space-4); }
}

/* ==================================================================== */
/* Now [task 4]                                                          */
/* ==================================================================== */

.nowline { margin: 0; padding: var(--space-6); max-width: 45rem; color: var(--color-text-primary); }
.nowline time { margin-inline-end: var(--space-3); color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.nowline a { margin-inline-start: var(--space-2); white-space: nowrap; }
.entrylog { margin: 0; padding: var(--space-6); max-width: 45rem; list-style: none; }
.entrylog__entry { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); }
.entrylog__entry:last-child { border-bottom: 1px solid var(--color-border-subtle); }
.entrylog__date { color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.entrylog__body { margin: 0; }
@media (max-width: 639px) {
  .nowline, .entrylog { padding-inline: var(--space-4); }
  .entrylog__entry { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ==================================================================== */
/* CV [task 4]                                                           */
/* ==================================================================== */

.cv { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--space-12); align-items: start; padding: var(--space-8) var(--space-6); max-width: 64rem; }
.cv__id { position: sticky; top: var(--space-6); }
.cv__id > :first-child { margin-top: 0; }
.cv__id p { margin: var(--space-1) 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.cv__main { min-width: 0; }
.cv__role { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-1) var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--color-border-default); break-inside: avoid; }
.cv__role:first-child { border-top: 0; padding-top: 0; }
.cv__role > h3 { grid-column: 2; margin: 0; font-size: var(--font-size-lg); letter-spacing: 0; }
.cv__when { grid-column: 1; grid-row: 1; color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.cv__role > p { grid-column: 2; margin: 0; color: var(--color-text-secondary); }
.cv__tools { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.cv__figures { margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border-default); display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
.cv__figures dt { color: var(--color-text-primary); font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.cv__figures dd { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 639px) {
  .cv { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-inline: var(--space-4); }
  .cv__id { position: static; }
  .cv__role { grid-template-columns: minmax(0, 1fr); }
  .cv__role > h3, .cv__role > p, .cv__tools { grid-column: 1; }
  .cv__when { grid-row: auto; }
}

/* ==================================================================== */
/* Catalog [task 4]                                                      */
/* ==================================================================== */

.catalog { padding: var(--space-8) var(--space-6); max-width: 45rem; }
.catalog__search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.catalog__search[hidden], .catalog__empty[hidden] { display: none; }
.catalog__search label { flex-basis: 100%; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.catalog__filter { flex: 1 1 14rem; width: auto; }
.catalog__count { color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.catalog__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-default); }
.catalog__item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); }
.catalog__item[hidden] { display: none; }
.catalog__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
.catalog__link { color: var(--color-text-primary); text-decoration: none; }
.catalog__link:hover .catalog__title, .catalog__link:focus-visible .catalog__title { text-decoration: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 0.2em; }
.catalog__path { margin-inline-start: var(--space-3); color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--font-size-sm); }
.catalog__item--private .catalog__title { color: var(--color-text-secondary); }
.catalog__desc { grid-column: 1 / -1; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); font-style: italic; }
.catalog__tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.catalog__tags li::before { content: "#"; }
.catalog__stage { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.catalog__stage::before { content: ""; width: 0.7em; height: 0.7em; border: 1.5px solid currentColor; border-radius: var(--radius-full); }
.catalog__stage[data-stage="budding"]::before { background: linear-gradient(to right, currentColor 50%, transparent 50%); }
.catalog__stage[data-stage="evergreen"]::before { background: currentColor; }
.catalog__dates { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.catalog__empty { margin: var(--space-4) 0 0; color: var(--color-text-secondary); font-style: italic; }
@media (max-width: 639px) { .catalog { padding: var(--space-6) var(--space-4); } }

/* Copy handle (inside any section) */
.handle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-6); }
.handle__text { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-sunken); font-family: var(--font-mono); overflow-wrap: anywhere; }
.handle__copy { min-height: var(--control-h-touch); padding: 0 var(--space-3); border: 1px solid var(--color-border-control); border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.handle__copy[hidden] { display: none; }
.handle__copy:hover { background: var(--color-bg-surface); }
.handle__status { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
@media (max-width: 639px) { .handle { padding-inline: var(--space-4); } }

/* ==================================================================== */
/* Prose                                                                 */
/* ==================================================================== */

.prose { max-width: 65ch; padding: var(--space-8) var(--space-6); font-size: var(--font-size-md); line-height: var(--line-height-loose); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose :is(p, ul, ol, blockquote, pre, figure) { margin: 0 0 var(--space-5); }
.prose h2 { margin: var(--space-10) 0 var(--space-3); font-size: var(--font-size-display-xl); }
.prose h3 { margin: var(--space-8) 0 var(--space-2); font-size: var(--font-size-display-lg); }
.prose :is(h2, h3, h4) { break-after: avoid; }
.prose :is(ul, ol) { padding-inline-start: var(--space-6); }
.prose li { margin-bottom: var(--space-1); }
.prose li::marker { color: var(--color-text-tertiary); }
.prose blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}
.prose :not(pre) > code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg-sunken);
  font-size: 0.9em;
}
.prose pre {
  overflow-x: auto;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-sunken);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.prose figure { break-inside: avoid; }
.prose figure img { display: block; height: auto; }
.prose figcaption { margin-top: var(--space-2); color: var(--color-text-tertiary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.prose hr { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--color-border-default); }
@media (max-width: 639px) { .prose { padding-inline: var(--space-4); } }

/* ==================================================================== */
/* Not-found                                                             */
/* ==================================================================== */

.notfound { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-16) var(--space-6); }
.notfound__mascot:empty { display: none; }
.notfound__mascot { max-width: 160px; }
.notfound__line { margin: 0; font-family: var(--font-display); font-size: var(--font-size-display-xl); letter-spacing: var(--letter-spacing-display); line-height: var(--line-height-tight); }
.notfound__back { font-size: var(--font-size-md); }
@media (max-width: 639px) { .notfound { padding: var(--space-10) var(--space-4); } }

/* ==================================================================== */
/* Print                                                                 */
/* ==================================================================== */

@page { size: A4; margin: 18mm 16mm; }

@media print {
  /* Every look prints on light paper: re-resolve the neutral and accent tokens to fixed paper values. */
  :root, [data-theme] {
    color-scheme: light;
    --color-bg-canvas: #fff; --color-bg-surface: #fff; --color-bg-raised: #fff; --color-bg-sunken: #f2f2f2;
    --color-border-subtle: #ddd; --color-border-default: #bbb; --color-border-strong: #999; --color-border-control: #888;
    --color-text-primary: #111; --color-text-secondary: #333; --color-text-tertiary: #555;
    --color-accent: #111; --color-accent-mark: #111; --color-link-underline: #111; --color-ember-bright: #111;
  }
  body { background: #fff; color: #111; font-size: 11pt; }
  .siteheader, .sitefooter, .hero, .themetoggle, .skiplink { display: none; }
  a { color: inherit; text-decoration: underline; }
  .statement__text strong { color: inherit; }
  :is(.prose, .cv, .linkindex) a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .cv__role, .cv__figures { break-inside: avoid; }
  .catalog__search, .handle__copy, .handle__status { display: none; }   /* controls that do nothing on paper */
  .statement, .prose, .notfound { padding-inline: 0; }
}