/* The simple layout's interaction system: one set of tokens, one motion
   vocabulary, and states that respond without shouting. Loaded last. */
[data-mode=simple] {
  --s-ink:#121212;--s-body:#4a4a47;--s-subtle:#666661;--s-line:#e3e3df;--s-line-strong:#c2c2bb;
  --s-surface:#f4f4f2;--s-surface-hover:#ecece8;--s-surface-press:#e2e2dd;--s-paper:#fff;--s-error:#b3261e;
  --s-fast:140ms;--s-base:220ms;--s-slow:420ms;--s-out:cubic-bezier(.2,.7,.2,1);
}
[data-mode=simple][data-theme=dark] {
  --s-ink:#f3f3ed;--s-body:#c4c5be;--s-subtle:#a5a79e;--s-line:#30312c;--s-line-strong:#585952;
  --s-surface:#1d1e1b;--s-surface-hover:#262722;--s-surface-press:#30312b;--s-paper:#141414;--s-error:#ff8a80;
}

/* Focus: one ring everywhere, drawn outside the element so it never hides content. */
[data-mode=simple] :focus-visible { outline:2px solid var(--s-ink);outline-offset:3px;box-shadow:none; }
[data-mode=simple] :focus:not(:focus-visible) { outline:none; }

/* Header: a hairline only appears once the page moves under it. */
[data-mode=simple] .header { background:color-mix(in srgb,var(--s-paper) 92%,transparent);backdrop-filter:blur(12px);border-bottom-color:transparent;transition:border-color var(--s-base) var(--s-out); }
[data-mode=simple] .header.is-scrolled { border-bottom-color:var(--s-line); }
[data-mode=simple] .identity strong { transition:opacity var(--s-fast); }
[data-mode=simple] .header nav { font-size:13px; }
[data-mode=simple] .header nav>a:not(.nav-contact) { padding-block:6px; }
[data-mode=simple] .header nav>a:not(.nav-contact):after { bottom:0;width:100%;height:1px;background:var(--s-ink);transform:scaleX(0);transform-origin:right;transition:transform var(--s-base) var(--s-out); }
[data-mode=simple] .header nav>a[aria-current=true]:after { transform:scaleX(1);height:2px; }
[data-mode=simple] .nav-social { border-left-color:var(--s-line); }
[data-mode=simple] .nav-icon { color:var(--s-subtle);transition:color var(--s-fast),background-color var(--s-fast),transform var(--s-fast); }
[data-mode=simple] .nav-icon:active { transform:translateY(1px);background:var(--s-surface-press); }

/* Quiet controls: outlined, tint on hover, settle on press. */
[data-mode=simple] :is(.mode-switch,.theme-switch) { background:transparent;color:var(--s-ink);border:1px solid var(--s-line-strong);box-shadow:none;transition:background-color var(--s-fast),border-color var(--s-fast),transform var(--s-fast); }
[data-mode=simple] .mode-switch { font-size:12px;min-height:44px; }
[data-mode=simple] .mode-icon i { transition:transform var(--s-base) var(--s-out),height var(--s-base) var(--s-out); }
[data-mode=simple] :is(.mode-switch,.theme-switch):active { transform:translateY(1px);background:var(--s-surface-press); }

/* Primary button. */
[data-mode=simple] .button-dark { background:var(--s-ink);color:var(--s-paper);border-color:var(--s-ink);transition:background-color var(--s-fast),transform var(--s-fast); }
[data-mode=simple] .button span { transition:transform var(--s-base) var(--s-out); }
[data-mode=simple] .button-dark:active { transform:translateY(1px); }

/* Project cards. The whole card is the target; the image, title and chip answer together. */
[data-mode=simple] .project-link,[data-mode=simple] .featured .project-link { border:1px solid var(--s-line);background:var(--s-paper);outline:none;transition:border-color var(--s-base) var(--s-out),transform var(--s-fast); }
[data-mode=simple] .project-art,[data-mode=simple] .featured .project-art { background:var(--s-surface);border-bottom-color:var(--s-line);transition:background-color var(--s-slow) var(--s-out); }
[data-mode=simple] .project-art img { transition:transform var(--s-slow) var(--s-out); }
[data-mode=simple] .project-info>.mono { font-size:11px;color:var(--s-subtle);line-height:1.6; }
[data-mode=simple] .project-info h3,[data-mode=simple] .featured .project-info h3 { text-decoration:underline 1px transparent;text-underline-offset:5px;transition:text-decoration-color var(--s-base); }
[data-mode=simple] .project-info p { font-size:15px;line-height:1.6;color:var(--s-body);max-width:46ch; }
[data-mode=simple] .project-info .text-link { font-size:14px;color:var(--s-ink); }
[data-mode=simple] .project-info .text-link span { display:grid;place-items:center;width:36px;height:36px;margin-left:auto;background:var(--yellow);color:#111;overflow:hidden;transition:background-color var(--s-base),color var(--s-base); }
[data-mode=simple] .project-link:active { transform:scale(.995); }
[data-mode=simple] .project-link:focus-visible { outline:2px solid var(--s-ink);outline-offset:4px; }

/* Journal rows: a rule draws across the top instead of flooding the row. */
[data-mode=simple] .note-row,[data-mode=simple] .note-row:hover { background:transparent;padding-inline:0;border-top-color:var(--s-line);transition:opacity var(--s-fast); }
[data-mode=simple] .note-row:last-child { border-bottom-color:var(--s-line); }
[data-mode=simple] .note-row:before { content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--s-ink);transform:scaleX(0);transform-origin:left;transition:transform var(--s-slow) var(--s-out); }
[data-mode=simple] .note-row>.mono,[data-mode=simple] .note-topic { font-size:11px;color:var(--s-subtle);transition:color var(--s-base); }
[data-mode=simple] .note-row h3 { text-decoration:underline 1px transparent;text-underline-offset:5px;transition:text-decoration-color var(--s-base); }
[data-mode=simple] .note-arrow { transition:transform var(--s-base) var(--s-out); }
[data-mode=simple] .note-row:active { opacity:.7; }

/* Inline links share one underline treatment. */
[data-mode=simple] .text-link:not(.project-info .text-link) { border-bottom-color:var(--s-line-strong);transition:border-color var(--s-base); }
[data-mode=simple] .text-link:not(.project-info .text-link) span { transition:transform var(--s-base) var(--s-out); }
[data-mode=simple] :is(.to-top,.back-link) { text-decoration:underline 1px transparent;text-underline-offset:5px;transition:text-decoration-color var(--s-base),color var(--s-base); }
[data-mode=simple] .back-link { color:var(--s-subtle); }

/* Form: hover previews focus, focus never shifts layout, errors wait for the visitor. */
[data-mode=simple] .contact-form label { font-size:13px;color:var(--s-ink); }
[data-mode=simple] .contact-form :is(input,textarea) { font-size:17px;color:var(--s-ink);border-bottom:1px solid var(--s-line-strong);background:none;transition:border-color var(--s-fast),box-shadow var(--s-fast); }
[data-mode=simple] .contact-form :is(input,textarea)::placeholder { color:var(--s-subtle);opacity:.8; }
[data-mode=simple] .contact-form :is(input,textarea):focus { border-bottom:1px solid var(--s-ink);box-shadow:0 1px 0 var(--s-ink);background:none;outline:none; }
[data-mode=simple] .contact-form :is(input,textarea):user-invalid { border-bottom-color:var(--s-error);box-shadow:0 1px 0 var(--s-error); }
[data-mode=simple] :is(.form-help,.form-status) { font-size:13px;color:var(--s-subtle); }

/* Readability: larger body sizes, measured line lengths, legible labels. */
[data-mode=simple] .hero-intro p { font-size:17px;line-height:1.55;color:var(--s-body);max-width:44ch; }
[data-mode=simple] .about-section { background:var(--s-surface);border-top-color:var(--s-line); }
[data-mode=simple] .about-top { font-size:11px;color:var(--s-subtle); }
/* With no heading, the About copy reads as one column under its label. */
[data-mode=simple] .about-title { display:none; }
[data-mode=simple] .about-main { display:block; }
[data-mode=simple] .about-copy p { font-size:16px;line-height:1.7;color:var(--s-body);max-width:60ch; }
[data-mode=simple] .about-copy .large-copy { font-size:21px;line-height:1.45;color:var(--s-ink); }
[data-mode=simple] .journal-heading p,[data-mode=simple] .contact-intro>p { font-size:16px;color:var(--s-body); }
[data-mode=simple] .eyebrow { font-size:11px; }
[data-mode=simple] footer { border-top-color:var(--s-line); }
[data-mode=simple] .to-top { font-size:11px; }
[data-mode=simple] .copyright { font-size:11px;color:var(--s-subtle); }
[data-mode=simple] .note-placeholder h3 { color:var(--s-subtle); }
[data-mode=simple] .case-deck { color:var(--s-body); }
[data-mode=simple] .case-meta p { font-size:15px; }
[data-mode=simple] .case-section p { font-size:17px;line-height:1.7;color:var(--s-body);max-width:62ch; }
[data-mode=simple] .case-section figcaption,[data-mode=simple] .note-byline { font-size:11px;color:var(--s-subtle); }
[data-mode=simple] .next-project h2 span { transition:transform var(--s-base) var(--s-out); }
[data-mode=simple] .next-project h2 { transition:color var(--s-base); }

/* Hover only where a pointer can actually hover, so taps never leave states stuck on. */
@media (hover:hover) {
  [data-mode=simple] .identity:hover strong { opacity:.65; }
  [data-mode=simple] .header nav>a:not(.nav-contact):hover:after { transform:scaleX(1);transform-origin:left; }
  [data-mode=simple] .nav-icon:hover { color:var(--s-ink);background:var(--s-surface); }
  [data-mode=simple] :is(.mode-switch,.theme-switch):hover { background:var(--s-surface);border-color:var(--s-ink);color:var(--s-ink); }
  [data-mode=simple] .mode-switch:hover .mode-icon i { height:12px;transform:translateY(-2px); }
  [data-mode=simple] .mode-switch:hover .mode-icon i:nth-child(2) { height:8px;transform:translateY(3px); }
  [data-mode=simple] .mode-switch:hover .mode-icon i:nth-child(3) { height:5px;transform:translateY(-1px); }
  [data-mode=simple] .button-dark:hover { background:color-mix(in srgb,var(--s-ink) 82%,var(--s-paper));color:var(--s-paper);transform:none; }
  [data-mode=simple] .button:hover span { transform:translate(2px,-2px); }
  [data-mode=simple] .project-link:hover { border-color:var(--s-ink);outline:none; }
  [data-mode=simple] .project-link:hover .project-art { background:var(--s-surface-hover); }
  [data-mode=simple] .project-link:hover .project-art img { transform:scale(1.025); }
  [data-mode=simple] .project-link:hover h3 { text-decoration-color:currentColor; }
  [data-mode=simple] .project-link:hover .text-link span { background:#111;color:var(--yellow); }
  [data-mode=simple][data-theme=dark] .project-link:hover .text-link span { background:var(--s-ink);color:#111; }
  [data-mode=simple] .note-row:hover:before { transform:scaleX(1); }
  [data-mode=simple] .note-row:hover :is(.mono,.note-topic) { color:var(--s-ink); }
  [data-mode=simple] .note-row:hover h3 { text-decoration-color:currentColor; }
  [data-mode=simple] .note-row:hover .note-arrow { transform:translate(3px,-3px); }
  [data-mode=simple] .text-link:not(.project-info .text-link):hover { border-bottom-color:var(--s-ink); }
  [data-mode=simple] .text-link:not(.project-info .text-link):hover span { transform:translateX(4px); }
  [data-mode=simple] :is(.to-top,.back-link):hover { text-decoration-color:currentColor;color:var(--s-ink); }
  [data-mode=simple] .contact-form :is(input,textarea):hover:not(:focus) { border-bottom-color:var(--s-subtle); }
  [data-mode=simple] .next-project:hover h2 { color:var(--s-body); }
  [data-mode=simple] .next-project:hover h2 span { transform:translate(4px,-4px); }
}
/* Keyboard users get the same answers as pointer users. */
[data-mode=simple] .project-link:focus-visible .project-art { background:var(--s-surface-hover); }
[data-mode=simple] .project-link:focus-visible h3,[data-mode=simple] .note-row:focus-visible h3 { text-decoration-color:currentColor; }
[data-mode=simple] .note-row:focus-visible:before { transform:scaleX(1); }
[data-mode=simple] .note-row:focus-visible { outline-offset:6px; }
/* Touch: a brief tint confirms the tap. */
@media (hover:none) {
  [data-mode=simple] .project-link:active .project-art { background:var(--s-surface-press); }
  [data-mode=simple] .note-row:active:before { transform:scaleX(1);transition-duration:var(--s-fast); }
}
@media (max-width:760px) {
  [data-mode=simple] .header nav { font-size:13px; }
  [data-mode=simple] .hero-intro p { font-size:16px; }
  [data-mode=simple] .project-info p { font-size:15px; }
  [data-mode=simple] .about-copy .large-copy { font-size:19px; }
  [data-mode=simple] .note-row h3 { font-size:21px; }
  [data-mode=simple] .mode-switch { min-height:36px;font-size:11px; }
}