/* trevware.com, modern mode
   The same page with the game taken out: less, but better. Everything here is
   scoped to :root[data-mode='modern'], which the header switch sets. The layout
   and the content stay where they are, so the swap reads as one page changing
   its clothes rather than a new page. Rams and Braun: white, black, one grey,
   one vermilion; a grotesk; flat cards on hairlines; one easing curve. */

:root {
  --ease-m: cubic-bezier(0.2, 0.7, 0.1, 1);
}

:root[data-mode='modern'] {
  --paper: #ffffff;
  --ink: #111111;
  --dim: #6e6e6e;
  --gone: #b3b3b3;
  --accent: #e2401c;
  /* Selected names stay ink. The vermilion dot carries the selection. */
  --on-accent: #111111;
  --line: #e7e7e4;
  --face: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --name: 34px;
  --hang: 26px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-mode='modern'] {
    --paper: #0f0f0f;
    --ink: #f2f2f0;
    --dim: #8f8f8f;
    --gone: #555555;
    --accent: #f0512c;
    --on-accent: #f2f2f0;
    --line: #262626;
  }
}

@media (min-width: 600px) { :root[data-mode='modern'] { --name: 44px; } }
@media (min-width: 1100px) { :root[data-mode='modern'] { --name: 56px; --hang: 30px; } }

:root[data-mode='modern'] body {
  font: 400 16px/1.5 var(--face);
  -webkit-font-smoothing: antialiased;
}

/* Sentence case everywhere; the few small labels that want capitals ask again. */
:root[data-mode='modern'] * { text-transform: none; }
:root[data-mode='modern'] :is(.doc h2, .joined) * { text-transform: inherit; }

/* Word pairs: the plain word shows, the game word and game-only pieces go. */
:root[data-mode='modern'] .g,
:root[data-mode='modern'] .g-only { display: none !important; }
:root[data-mode='modern'] .m { display: inline; }

/* Header. */
:root[data-mode='modern'] .top { font-size: 15px; line-height: 24px; font-weight: 500; }
:root[data-mode='modern'] .top .here { color: var(--dim); }

/* Small links: no bar. A hairline underline, and vermilion under the pointer. */
:root[data-mode='modern'] :is(.top a, .go, .stats a, .doc p a, .points a) {
  background: none;
  padding: 0;
  margin: 0;
  transition: color 160ms var(--ease-m);
}
:root[data-mode='modern'] .top a { box-shadow: none; }
:root[data-mode='modern'] :is(.go, .stats a, .doc p a, .points a) { box-shadow: inset 0 -1px 0 currentColor; }
:root[data-mode='modern'] :is(.top a, .go, .stats a, .doc p a, .points a):is(:hover, :focus-visible, :active) {
  color: var(--accent);
  box-shadow: inset 0 -1px 0 currentColor;
}
:root[data-mode='modern'] .top a:is(:hover, :focus-visible, :active) { box-shadow: none; }

/* The switch, redrawn round: a grey track that turns vermilion, a white knob. */
:root[data-mode='modern'] .mode-track {
  width: 34px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  transition: background-color 200ms var(--ease-m);
}
:root[data-mode='modern'] .mode-knob {
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 260ms var(--ease-m);
}
:root[data-mode='modern'] .mode[aria-checked='true'] .mode-track { background: var(--accent); }
:root[data-mode='modern'] .mode[aria-checked='true'] .mode-knob { transform: translateX(14px); }
:root[data-mode='modern'] .mode:focus-visible .mode-track { outline-offset: 3px; }

/* The list. Big, tight, sentence case. The selection is a vermilion dot in the
   gutter where the cursor was; the names never move, so the left edge of the list
   stays one clean line. The dot reads --sel, which the shared selected rules
   raise, so the two modes select the same way. */
:root[data-mode='modern'] .row {
  padding: 6px 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
:root[data-mode='modern'] .name {
  display: inline-block;
  padding: 0;
  margin: 0;
  background: none;
  transition: color 200ms var(--ease-m);
}
:root[data-mode='modern'] .item.gone .name { color: var(--gone) !important; }
:root[data-mode='modern'] .meta {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transition: color 200ms var(--ease-m);
}
:root[data-mode='modern'] .row::before {
  left: calc(var(--hang) * -1 + 2px);
  top: calc(6px + 0.56em - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  clip-path: none;
  background: var(--accent);
  animation: none !important;
  transform: scale(calc(0.3 + var(--sel, 0) * 0.7));
  transition: opacity 200ms var(--ease-m), transform 280ms var(--ease-m);
}
:root[data-mode='modern'] .item[open] > .row::before { background: var(--accent); }
:root[data-mode='modern'] .item.gone > .row::before { background: var(--gone); }
:root[data-mode='modern'] .item.gone[open] > .row .label { animation: none; }

/* The opened row: a flat card on a hairline, eased in. No window line, no icon,
   no stepped stages; the numbers still count, just smoothly. */
:root[data-mode='modern'] .window {
  border: 1px solid var(--line);
  outline: 0;
  border-radius: 14px;
}
/* OPENING, about 0.45s on one curve:
     0ms    the dot presses in and springs back; the space eases open; the card
            rises into it from a touch smaller
     60ms   the description rises
     140ms  each stat rises in turn, 40ms apart, its hairline drawing across
            from the left as it lands, while the number rolls up (site.js)
     300ms  the link rises last
   CLOSING runs quieter and faster, inside the script's 260ms hold: the contents
   fade (0 to 120ms), the card lifts away (40 to 240ms), and the space shuts
   (60 to 240ms), so it is closed before the row lets go. */
:root[data-mode='modern'] .item::details-content {
  transition: block-size 380ms var(--ease-m), content-visibility 380ms allow-discrete;
}
:root[data-mode='modern'] .item.closing::details-content { transition-delay: 60ms; transition-duration: 180ms; }
:root[data-mode='modern'] .panel { padding: 12px 0 28px; }
:root[data-mode='modern'] .panel::before,
:root[data-mode='modern'] .icon-wrap { display: none; }
:root[data-mode='modern'] .sub {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 22px 24px 24px;
}
:root[data-mode='modern'] .item[open] .sub { transform-origin: 0 0; animation: m-card-in 380ms var(--ease-m) both; }
:root[data-mode='modern'] .item.closing .sub { animation: m-card-out 200ms var(--ease-m) 40ms both; }

:root[data-mode='modern'] .sub > *,
:root[data-mode='modern'] .tally div { animation: none !important; }
:root[data-mode='modern'] .item[open] .sub > :is(.desc, .warn, .go),
:root[data-mode='modern'] .item[open] .tally div { animation: m-rise-sm 360ms var(--ease-m) both !important; }
:root[data-mode='modern'] .item[open] .sub > .warn { animation-delay: 40ms !important; }
:root[data-mode='modern'] .item[open] .sub > .desc { animation-delay: 60ms !important; }
:root[data-mode='modern'] .item[open] .tally div:nth-child(1) { animation-delay: 140ms !important; }
:root[data-mode='modern'] .item[open] .tally div:nth-child(2) { animation-delay: 180ms !important; }
:root[data-mode='modern'] .item[open] .tally div:nth-child(3) { animation-delay: 220ms !important; }
:root[data-mode='modern'] .item[open] .tally div:nth-child(4) { animation-delay: 260ms !important; }
:root[data-mode='modern'] .item[open] .sub > .go { animation-delay: 300ms !important; }
:root[data-mode='modern'] .item.closing .sub > * { opacity: 1; animation: m-fade 120ms var(--ease-m) both !important; }

/* The dot answers the press: in, then a little past full, then settled. */
:root[data-mode='modern'] .item[open]:not(.closing) > .row::before { animation: m-press 420ms var(--ease-m) both !important; }
:root[data-mode='modern'] .desc { font-size: 17px; line-height: 1.5; }
:root[data-mode='modern'] .warn { color: var(--dim); }
:root[data-mode='modern'] .tally { font-size: 15px; line-height: 28px; }
/* The hairline between stats is a drawn line, not a border, so it can draw
   across from the left as its row lands. */
:root[data-mode='modern'] .tally div { position: relative; }
:root[data-mode='modern'] .tally div + div::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 0;
}
:root[data-mode='modern'] .item[open] .tally div + div::before { animation: m-draw 420ms var(--ease-m) both; }
:root[data-mode='modern'] .item[open] .tally div:nth-child(2)::before { animation-delay: 180ms; }
:root[data-mode='modern'] .item[open] .tally div:nth-child(3)::before { animation-delay: 220ms; }
:root[data-mode='modern'] .item[open] .tally div:nth-child(4)::before { animation-delay: 260ms; }
:root[data-mode='modern'] .tally dd { font-variant-numeric: tabular-nums; }
:root[data-mode='modern'] .tally .flash { animation: none; }
:root[data-mode='modern'] .go {
  justify-self: start;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}
:root[data-mode='modern'] .go::before { display: none; }

/* The legend as quiet key hints. */
:root[data-mode='modern'] .legend { gap: 4px 20px; font-size: 13px; line-height: 24px; animation: m-rise 440ms var(--ease-m) 260ms both; }
:root[data-mode='modern'] .legend kbd {
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: 500 12px/1 var(--face);
  color: var(--ink);
}

/* The party window becomes a profile card: a small capital label, then plain rows. */
:root[data-mode='modern'] .party { padding: 20px 22px 22px; }
:root[data-mode='modern'] .joined {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
:root[data-mode='modern'] .stats { margin-top: 10px; font-size: 15px; line-height: 30px; }
:root[data-mode='modern'] .stats .split { position: relative; margin-top: 8px; padding-top: 8px; border-top: 0; }
:root[data-mode='modern'] .stats .split::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 0;
}

/* The profile card enters the way an opened project card does, on page load and
   again inside the reveal when the switch turns modern on: the card rises in from
   a touch smaller (anchored at its foot, where it sits), the label, then each row
   40ms apart, and the rule between the groups drawing across as its row lands. */
:root[data-mode='modern'] .party { transform-origin: 0 100%; animation: m-card-in 420ms var(--ease-m) 160ms both; }
:root[data-mode='modern'] .joined { animation: m-rise-sm 360ms var(--ease-m) 240ms both; }
:root[data-mode='modern'] .stats div { animation: m-rise-sm 360ms var(--ease-m) both; }
:root[data-mode='modern'] .stats div:nth-child(1) { animation-delay: 280ms; }
:root[data-mode='modern'] .stats div:nth-child(2) { animation-delay: 320ms; }
:root[data-mode='modern'] .stats div:nth-child(3) { animation-delay: 360ms; }
:root[data-mode='modern'] .stats div:nth-child(4) { animation-delay: 400ms; }
:root[data-mode='modern'] .stats div:nth-child(5) { animation-delay: 440ms; }
:root[data-mode='modern'] .stats div:nth-child(6) { animation-delay: 480ms; }
:root[data-mode='modern'] .stats div:nth-child(7) { animation-delay: 520ms; }
:root[data-mode='modern'] .stats div:nth-child(8) { animation-delay: 560ms; }
:root[data-mode='modern'] .stats div:nth-child(9) { animation-delay: 600ms; }
:root[data-mode='modern'] .stats .split::before { animation: m-draw 420ms var(--ease-m) 400ms both; }
:root[data-mode='modern'] .stats.swapped dd { transform: none; }
:root[data-mode='modern'] .stats dd { font-variant-numeric: tabular-nums; }

/* Page load: the rows rise into place on the curve instead of landing in frames. */
:root[data-mode='modern'] .list > .item {
  animation-name: m-rise;
  animation-duration: 440ms;
  animation-timing-function: var(--ease-m);
}

/* Pop-ups: a small dark tile, not a window. */
:root[data-mode='modern'] .message {
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
}
:root[data-mode='modern'] .toast,
:root[data-mode='modern'] .continue {
  padding: 10px 16px;
  border: 0;
  outline: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  animation: m-in 240ms var(--ease-m) both;
}
:root[data-mode='modern'] .toast.leaving { animation: m-out 160ms var(--ease-m) both; }

/* Resume. */
:root[data-mode='modern'] .doc h1 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
:root[data-mode='modern'] .dateline { font-size: 15px; line-height: 22px; }
:root[data-mode='modern'] .doc h2 {
  position: relative;
  margin-top: 56px;
  padding-top: 14px;
  border-top: 0;
  view-timeline: --rule block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:root[data-mode='modern'] .doc h2::before { display: none; }

/* Each section's rule draws across from the left as the section scrolls into
   view, driven by the scroll itself where the browser has scroll timelines; a
   rule already on screen at load is simply drawn. Elsewhere it is a plain line. */
:root[data-mode='modern'] .doc h2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 0;
}
@supports (animation-timeline: view()) {
  :root[data-mode='modern'] .doc h2::after {
    animation: m-draw linear both;
    animation-timeline: --rule;
    animation-range: entry 10% cover 35%;
  }
}
:root[data-mode='modern'] .doc h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
:root[data-mode='modern'] .doc h3::before { width: 8px; height: 8px; border-radius: 50%; vertical-align: 0.15em; }
:root[data-mode='modern'] .doc p,
:root[data-mode='modern'] .points li { font-size: 16px; line-height: 1.6; }
:root[data-mode='modern'] .points li::before { top: 11px; width: 5px; height: 5px; border-radius: 50%; }
:root[data-mode='modern'] .classes { font-size: 15px; line-height: 30px; }
:root[data-mode='modern'] .classes li + li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 0;
}

/* Career rises in on load, a row at a time with its rule drawing, and then the dot
   presses into the current job, the same press a row gives when it opens. */
:root[data-mode='modern'] .classes li { animation: m-rise-sm 360ms var(--ease-m) both; }
:root[data-mode='modern'] .classes li:nth-child(1) { animation-delay: 120ms; }
:root[data-mode='modern'] .classes li:nth-child(2) { animation-delay: 160ms; }
:root[data-mode='modern'] .classes li:nth-child(3) { animation-delay: 200ms; }
:root[data-mode='modern'] .classes li:nth-child(4) { animation-delay: 240ms; }
:root[data-mode='modern'] .classes li:nth-child(5) { animation-delay: 280ms; }
:root[data-mode='modern'] .classes li:nth-child(6) { animation-delay: 320ms; }
:root[data-mode='modern'] .classes li:nth-child(2)::after { animation: m-draw 420ms var(--ease-m) 160ms both; }
:root[data-mode='modern'] .classes li:nth-child(3)::after { animation: m-draw 420ms var(--ease-m) 200ms both; }
:root[data-mode='modern'] .classes li:nth-child(4)::after { animation: m-draw 420ms var(--ease-m) 240ms both; }
:root[data-mode='modern'] .classes li:nth-child(5)::after { animation: m-draw 420ms var(--ease-m) 280ms both; }
:root[data-mode='modern'] .classes li:nth-child(6)::after { animation: m-draw 420ms var(--ease-m) 320ms both; }

:root[data-mode='modern'] .classes .now .name {
  padding: 0;
  margin: 0;
  background: none;
  color: var(--ink);
  font-weight: 600;
  transform: none;
}
:root[data-mode='modern'] .classes .now::before {
  left: calc(var(--hang) * -1 + 2px);
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  clip-path: none;
  animation: m-press 420ms var(--ease-m) 460ms both;
}
:root[data-mode='modern'] .skills .slot { display: none; }
:root[data-mode='modern'] .skills dt { font-size: 15px; font-weight: 600; }
:root[data-mode='modern'] .skills dd { font-size: 16px; }

/* 404: a plain heading and two plain choices. */
:root[data-mode='modern'] .encounter .message { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
:root[data-mode='modern'] .encounter .meta { display: none; }

@keyframes m-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes m-card-in { from { opacity: 0; transform: translateY(-8px) scale(0.985); } }
@keyframes m-card-out { to { opacity: 0; transform: translateY(-6px) scale(0.985); } }
@keyframes m-rise-sm { from { opacity: 0; transform: translateY(6px); } }
@keyframes m-fade { to { opacity: 0; } }
@keyframes m-draw { from { transform: scaleX(0); } }
@keyframes m-press {
  0% { transform: scale(1); }
  30% { transform: scale(0.55); }
  65% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes m-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes m-rise { from { opacity: 0; transform: translateY(10px); } }

/* THE SWITCH TRANSITION. Each direction speaks its own language. Into modern, the
   new page opens as a circle that grows smoothly out of the switch knob. Back to
   retro, it opens as a square out of the same point in seven hard frames, so the
   page seems to break back into pixels. site.js sets --vt-x, --vt-y and --vt-r
   (the distance to the farthest corner) and the direction class. Scoped to the
   switch only, so ordinary page-to-page navigation keeps its default crossfade. */
html:is(.to-modern, .to-retro)::view-transition-old(root) { animation: none; }
html.to-modern::view-transition-new(root) {
  animation: reveal-round 480ms var(--ease-m) both;
  mix-blend-mode: normal;
}
html.to-retro::view-transition-new(root) {
  animation: reveal-block 420ms steps(7, end) both;
  mix-blend-mode: normal;
}
@keyframes reveal-round {
  from { clip-path: circle(0 at var(--vt-x) var(--vt-y)); }
  to { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); }
}
@keyframes reveal-block {
  from { clip-path: inset(var(--vt-y) calc(100% - var(--vt-x)) calc(100% - var(--vt-y)) var(--vt-x)); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-mode='modern'] *,
  :root[data-mode='modern'] *::before,
  :root[data-mode='modern'] *::after,
  :root[data-mode='modern'] .item::details-content {
    animation: none !important;
    transition: none !important;
  }
}