/* Accessibility mode.
   Part 1 styles the switch, which is the only thing this sheet adds to the normal site.
   Part 2 applies only under html[data-access="on"]: it wipes the site's own styling off the page
   and sets the content again as one plain, high-contrast, motion-free column. The markup is the
   same in both modes; js/access.js flips the attribute. */

/* ================= Part 1: the switch (normal site) ================= */

/* The switch is a small round button in the page header, beside the theme toggle. It is always in
   view and never sits on top of content. (It used to be a tab on the left edge, which covered text.) */
.access-tab {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #FAF2E5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease;
  --i-access: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.4' r='2' fill='black' stroke='none'/%3E%3Cpath d='M4.6 8.6c2.4.9 4.9 1.3 7.4 1.3s5-.4 7.4-1.3M12 9.9v4.8M12 14.7l-3.1 6.3M12 14.7l3.1 6.3'/%3E%3C/svg%3E");
}
/* The figure is drawn by the stylesheet, so the markup stays a plain button with its name in text. */
.access-tab::after {
  content: '';
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--i-access) center / contain no-repeat;
  mask: var(--i-access) center / contain no-repeat;
}
.access-tab:hover { background: rgba(250, 242, 229, .16); }
.access-tab:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* On a case-study page the header is paper, so the button takes the ink colour. */
.cs-page-header { align-items: center; }
.cs-page-header .access-tab { margin-left: -12px; color: var(--cs-ink, #192B32); }
.cs-page-header .access-tab:hover { background: rgba(25, 43, 50, .08); }
.cs-page-header > a:last-of-type { margin-left: auto; }
.access-tab-text,
.access-live,
.cf-error {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .access-tab { transition: none; } }
@media print { .access-tab { display: none; } }

/* The second switch sits with the skip link: off-screen until it takes keyboard focus.
   It carries its own styling so it also works on the case-study pages, which have no skip link. */
.access-skip {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 10001;
  transform: translate(-50%, -120%);
  padding: .85rem 1.5rem;
  border: 0;
  border-radius: 0 0 12px 12px;
  background: #FFF6EA;
  color: #611E17;
  font: 600 .85rem/1.2 var(--sans, system-ui, sans-serif);
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 3px #611E17;
  cursor: pointer;
  transition: transform .25s ease;
}
.access-skip:focus-visible { transform: translate(-50%, 0); outline: 3px solid #FFF6EA; outline-offset: 0; box-shadow: inset 0 0 0 3px #611E17, 0 8px 22px -10px rgba(27, 26, 23, .7); }
@media (prefers-reduced-motion: reduce) { .access-skip { transition: none; } }
/* Both skip controls read clearly in either theme. */
.skip-link { background: #FFF6EA; color: #611E17; font-weight: 600; box-shadow: inset 0 0 0 3px #611E17; }
.skip-link:focus-visible { outline: 3px solid #FFF6EA; outline-offset: 0; box-shadow: inset 0 0 0 3px #611E17, 0 8px 22px -10px rgba(27, 26, 23, .7); }
.access-bar[hidden],
.access-tab[hidden],
.access-skip[hidden] { display: none; }

/* ================= Part 2: the mode ================= */

/* ---- Clean slate: every site style comes off (the games room keeps its own look) ---- */
:where(html[data-access="on"]) :where(body *:not(svg *, .playroom-dialog, .playroom-dialog *)) { all: revert !important; }
html[data-access="on"] :where(body *:not(.playroom-dialog, .playroom-dialog *))::before,
html[data-access="on"] :where(body *:not(.playroom-dialog, .playroom-dialog *))::after,
html[data-access="on"] body::before,
html[data-access="on"] body::after { all: revert !important; content: none !important; }

/* ---- Palette: near-black on white, or near-white on near-black. Every pair is 7:1 or better. ---- */
html[data-access="on"] {
  --a-bg: #FFFFFF;
  --a-ink: #111111;
  --a-soft: #3D3D3D;
  --a-link: #7A241B;
  --a-panel: #F1F1F1;
  --a-focus: #111111;
  --a-focus-gap: #FFDD00;
  color-scheme: light;
  scroll-behavior: auto !important;
  scroll-padding-block: 5.5rem 2rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[data-access="on"][data-theme="dark"] {
  --a-bg: #0A0A0A;
  --a-ink: #FFFFFF;
  --a-soft: #D9D9D9;
  --a-link: #FFC2B3;
  --a-panel: #1D1D1D;
  --a-focus: #FFDD00;
  --a-focus-gap: #000000;
  color-scheme: dark;
}
html[data-access="on"],
html[data-access="on"] body {
  background: var(--a-bg) !important;
  color: var(--a-ink) !important;
}
html[data-access="on"] body {
  margin: 0 !important;
  padding: 0 !important;
  font: 400 1.1875rem/1.65 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important;
  letter-spacing: .01em !important;
  word-spacing: .05em !important;
  text-align: left !important;
  overflow-wrap: break-word !important;
  cursor: auto !important;
}
html[data-access="on"] body * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ---- What is not shown: decoration, companions, hover-only extras, closed overlays ---- */
html[data-access="on"][data-access] body [aria-hidden="true"]:not(.access-tab *, .playroom-dialog *),
html[data-access="on"][data-access] body :is(
  .jimmy-dock, .music-widget, .edge-blob, .chapter-mark, .chapter-border, .textile-panel, .hero-ribbon,
  .heritage-weave, .portrait-mandala, .writing-pen, .pen-ink, .nav-burger, .mobile-menu, .rail-arrows,
  .gallery-tools button, .brain-map-options, .brain-map-foot, #brainGraph, .brain-tooltip, .visitor-board,
  .board-bottom, .board-palette, .board-tools > :not(#noteOpen), .board-camera, .tile-plate, .test-pullquote,
  .test-flip-button, .test-back-kicker, .test-back-title, .test-back .test-role, .cf-hp, .cf-toast, .cf-submit-ico,
  .access-skip, .quiet-toast, .easter-petal, .cv-bar-fill, .project-discovery img
) { display: none !important; }

/* ---- Text ---- */
html[data-access="on"] body :where(h1, h2, h3, h4):where(:not(.playroom-dialog *)) {
  margin: 0 0 .6em !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}
html[data-access="on"] body :where(h1):where(:not(.playroom-dialog *)) { font-size: 2.5rem !important; }
html[data-access="on"] body :where(h2):where(:not(.playroom-dialog *)) { font-size: 2rem !important; }
html[data-access="on"] body :where(h3):where(:not(.playroom-dialog *)) { font-size: 1.4rem !important; }
html[data-access="on"] body :where(h4):where(:not(.playroom-dialog *)) { font-size: 1.2rem !important; }
html[data-access="on"] body :where(p, li, blockquote, dd, figcaption):where(:not(.playroom-dialog *)) { max-width: 70ch !important; }
html[data-access="on"] body :where(p, ul, ol, blockquote, figure, dl):where(:not(.playroom-dialog *)) { margin: 0 0 1.25em !important; }
html[data-access="on"] body :where(blockquote):where(:not(.playroom-dialog *)) { padding: 0 0 0 1rem !important; border-left: .3rem solid var(--a-ink) !important; }
html[data-access="on"] body :where(em, i, cite):where(:not(.playroom-dialog *)) { font-style: normal !important; font-weight: 600 !important; }
html[data-access="on"] body :where(h1, h2, h3, h4) :where(em, i):where(:not(.playroom-dialog *)) { font-weight: inherit !important; }
html[data-access="on"] body :where(strong, b):where(:not(.playroom-dialog *)) { font-weight: 700 !important; }
html[data-access="on"] body :where(small):where(:not(.playroom-dialog *)) { font-size: 1em !important; }
html[data-access="on"] body :where(img):where(:not(.playroom-dialog *)) { max-width: 100% !important; height: auto !important; }
html[data-access="on"] body :where(mark):where(:not(.playroom-dialog *)) { background: none !important; color: inherit !important; }
/* Labels set in capitals in the markup read as sentences here. */
html[data-access="on"] body :is(.kicker, .notebook-heading > span, .detail-index) { display: block !important; text-transform: lowercase !important; }
html[data-access="on"] body :is(.kicker, .notebook-heading > span, .detail-index)::first-letter { text-transform: uppercase !important; }

/* ---- Links, buttons, fields: underlined or outlined, never smaller than 44px ---- */
html[data-access="on"] body :where(a):where(:not(.playroom-dialog *)) {
  color: var(--a-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: .12em !important;
  text-underline-offset: .2em !important;
}
html[data-access="on"] body :where(a):where(:not(.playroom-dialog *)):hover { text-decoration-thickness: .22em !important; }
html[data-access="on"] body :where(a:not(p a, li a, blockquote a)):where(:not(.playroom-dialog *)) {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: .35em !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
html[data-access="on"] body a[target="_blank"]:where(:not(.playroom-dialog *))::after {
  content: '(opens in a new tab)' !important;
  font-weight: 400 !important;
}
html[data-access="on"] body :where(button, summary, .button-solid, .text-button, .heritage-work, .xp-resume, .writing-link):where(:not(.playroom-dialog *, .access-bar button, .access-tab)) {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 .4em !important;
  box-sizing: border-box !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 .5rem .5rem 0 !important;
  padding: .55rem 1rem !important;
  border: 2px solid var(--a-ink) !important;
  border-radius: 6px !important;
  background: var(--a-bg) !important;
  color: var(--a-ink) !important;
  font: inherit !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
html[data-access="on"] body :where(button, summary, .button-solid, .text-button, .heritage-work, .xp-resume, .writing-link):where(:not(.playroom-dialog *, .access-bar button, .access-tab)):hover {
  background: var(--a-ink) !important;
  color: var(--a-bg) !important;
}
html[data-access="on"] body :where(.cf-submit, .button-solid, #noteOpen, .heritage-work, [aria-pressed="true"]):where(:not(.playroom-dialog *, .access-tab)) {
  background: var(--a-ink) !important;
  color: var(--a-bg) !important;
}
html[data-access="on"] body :where(.cf-submit, .button-solid, #noteOpen, .heritage-work, [aria-pressed="true"]):where(:not(.playroom-dialog *, .access-tab)):hover {
  background: var(--a-bg) !important;
  color: var(--a-ink) !important;
}
html[data-access="on"] body :where(button:disabled):where(:not(.playroom-dialog *)) { border-style: dashed !important; cursor: not-allowed !important; }
html[data-access="on"] body :is(a, button) > svg:where(:not(.playroom-dialog *, .access-tab *)) { display: none !important; }
/* Controls that were an icon alone get their name written out. */
html[data-access="on"] body :is(.contact-links a, #copyEmail, .theme-toggle, .back-to-top, .recruiter-close, .note-close, .lightbox-close, .cv-close)[aria-label]::before {
  content: attr(aria-label) !important;
}
html[data-access="on"] body :is(.recruiter-close, .note-close, .lightbox-close, .cv-close) { font-size: 0 !important; }
html[data-access="on"] body :is(.recruiter-close, .note-close, .lightbox-close, .cv-close)::before { font-size: 1.1875rem !important; }

html[data-access="on"] body :where(label):where(:not(.playroom-dialog *)) { display: block !important; margin: 0 0 .3rem !important; font-weight: 600 !important; }
html[data-access="on"] body :where(input:not([type="radio"], [type="checkbox"], [type="range"], [type="hidden"]), select, textarea):where(:not(.playroom-dialog *)) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 34rem !important;
  min-height: 44px !important;
  margin: 0 0 1rem !important;
  padding: .55rem .75rem !important;
  border: 2px solid var(--a-ink) !important;
  border-radius: 4px !important;
  background: var(--a-bg) !important;
  color: var(--a-ink) !important;
  font: inherit !important;
  line-height: 1.4 !important;
}
html[data-access="on"] body :where(textarea):where(:not(.playroom-dialog *)) { min-height: 9rem !important; resize: vertical !important; }
html[data-access="on"] body :where(:not(.playroom-dialog *))::placeholder { color: var(--a-soft) !important; opacity: 1 !important; }
html[data-access="on"] body :where(input[type="radio"], input[type="checkbox"]):where(:not(.playroom-dialog *)) { width: 1.5rem !important; height: 1.5rem !important; margin: 0 .5rem 0 0 !important; accent-color: var(--a-ink) !important; }
html[data-access="on"] body [aria-invalid="true"] { border-width: 4px !important; }

/* Focus: a thick ring in two colours, so it shows on any ground. */
html[data-access="on"][data-access] body :focus-visible {
  outline: 3px solid var(--a-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px var(--a-focus-gap) !important;
}

/* ---- Page frame ---- */
html[data-access="on"] body :is(header.nav, main > section, main > footer, nav[aria-label="Page shortcuts"]) {
  box-sizing: border-box !important;
  width: min(100%, 76rem) !important;
  margin-inline: auto !important;
  padding: 2.5rem clamp(1rem, 4vw, 3rem) !important;
}
html[data-access="on"] body :is(main > section, main > footer) { border-top: 2px solid var(--a-ink) !important; }
html[data-access="on"] body main > section:first-child { border-top: 0 !important; }

html[data-access="on"] body :is(.cs-page-header, .cs-page-footer),
html[data-access="on"] body.cs-page > main {
  box-sizing: border-box !important;
  width: min(100%, 76rem) !important;
  margin-inline: auto !important;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) !important;
}
html[data-access="on"] body :is(.cs-page-header, .cs-page-footer) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: .25rem 1.5rem !important; }
html[data-access="on"] body .cs-page-header { border-bottom: 2px solid var(--a-ink) !important; }
html[data-access="on"] body .cs-page-header a:first-child { color: var(--a-ink) !important; font-size: 1.35rem !important; font-weight: 700 !important; }
html[data-access="on"] body .cs-page-footer { border-top: 2px solid var(--a-ink) !important; }

/* The bar that says the mode is on. It stays in view where the screen has room for it. */
html[data-access="on"] body .access-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .5rem 1.5rem !important;
  box-sizing: border-box !important;
  padding: .6rem clamp(1rem, 4vw, 3rem) !important;
  background: var(--a-ink) !important;
  color: var(--a-bg) !important;
}
html[data-access="on"] body .access-bar p { flex: 1 1 22rem !important; max-width: none !important; margin: 0 !important; font-size: 1rem !important; line-height: 1.5 !important; }
html[data-access="on"] body .access-bar button {
  box-sizing: border-box !important;
  min-height: 44px !important;
  padding: .45rem 1rem !important;
  border: 2px solid var(--a-bg) !important;
  border-radius: 6px !important;
  background: var(--a-bg) !important;
  color: var(--a-ink) !important;
  font: inherit !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
html[data-access="on"] body .access-bar button:hover { background: var(--a-ink) !important; color: var(--a-bg) !important; }
html[data-access="on"][data-access] body .access-bar button:focus-visible { outline-color: var(--a-focus-gap) !important; box-shadow: 0 0 0 3px var(--a-ink) !important; }
html[data-access="on"][data-access][data-theme="dark"] body .access-bar button:focus-visible { outline-color: #111111 !important; box-shadow: 0 0 0 3px #FFDD00, 0 0 0 9px #111111 !important; }
@media (min-width: 48rem) and (min-height: 34rem) {
  html[data-access="on"] body .access-bar { position: sticky !important; top: 0 !important; z-index: 50 !important; }
}
/* The skip link keeps its show-on-focus behaviour. */
html[data-access="on"] body .skip-link:not(.access-skip) {
  position: absolute !important;
  left: 1rem !important;
  top: .5rem !important;
  z-index: 60 !important;
  padding: .6rem 1rem !important;
  border: 2px solid var(--a-ink) !important;
  background: var(--a-bg) !important;
  color: var(--a-ink) !important;
  font-weight: 700 !important;
}
html[data-access="on"] body .skip-link:not(.access-skip):not(:focus) {
  width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
html[data-access="on"] body .access-live {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
/* The header button becomes an ordinary text button. */
html[data-access="on"] body .access-tab {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
  margin: 0 auto 2.5rem max(clamp(1rem, 4vw, 3rem), calc((100% - 76rem) / 2 + clamp(1rem, 4vw, 3rem))) !important;
  padding: .55rem 1rem !important;
  border: 2px solid var(--a-ink) !important;
  border-radius: 6px !important;
  background: var(--a-ink) !important;
  color: var(--a-bg) !important;
  font: inherit !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
html[data-access="on"] body :is(.nav, .cs-page-header) .access-tab { margin: 0 !important; }
html[data-access="on"] body .access-tab:hover { background: var(--a-bg) !important; color: var(--a-ink) !important; }

/* ---- Header ---- */
html[data-access="on"] body header.nav { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: .25rem 1.25rem !important; padding-block: 1rem !important; border-bottom: 2px solid var(--a-ink) !important; }
html[data-access="on"] body .nav-logo { margin-right: auto !important; color: var(--a-ink) !important; font-size: 1.35rem !important; font-weight: 700 !important; }
html[data-access="on"] body .nav-links { display: flex !important; flex-wrap: wrap !important; gap: 0 1.25rem !important; }
html[data-access="on"] body .nav-links a[aria-current] { color: var(--a-ink) !important; font-weight: 700 !important; text-decoration-thickness: .25em !important; }
html[data-access="on"] body header.nav button { margin: 0 !important; }

/* ---- Hero ---- */
html[data-access="on"] body .heritage-greeting { margin: 0 !important; font-size: 1.3rem !important; }
html[data-access="on"] body .heritage-role { font-size: 1.3rem !important; }
html[data-access="on"] body .heritage-stage { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important; gap: 1.5rem 3rem !important; align-items: start !important; }
html[data-access="on"] body .heritage-photo { margin: 0 !important; order: 3 !important; }
html[data-access="on"] body .heritage-portrait { display: block !important; width: 14rem !important; border: 2px solid var(--a-ink) !important; }
html[data-access="on"] body .heritage-paths a { display: block !important; margin: 0 0 .75rem !important; }
html[data-access="on"] body .heritage-paths a > span { display: block !important; }
html[data-access="on"] body .heritage-path-name { font-size: 1.3rem !important; font-weight: 700 !important; }
html[data-access="on"] body .heritage-path-desc { color: var(--a-ink) !important; }
html[data-access="on"] body .heritage-footer > * { display: block !important; margin: 0 0 .5rem !important; }
html[data-access="on"] body .heritage-footer > a { display: inline-flex !important; }

/* ---- Project cards: a wrapped grid, nothing scrolls sideways ---- */
html[data-access="on"] body .cover-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)) !important; gap: 1.25rem !important; margin: 1.5rem 0 !important; }
html[data-access="on"] body .cover-card { display: block !important; padding: 1rem !important; border: 2px solid var(--a-ink) !important; border-radius: 8px !important; color: var(--a-ink) !important; text-decoration: none !important; }
html[data-access="on"] body .cover-card:hover { background: var(--a-panel) !important; }
html[data-access="on"] body .cover-card img { display: block !important; width: 100% !important; margin: 0 0 .75rem !important; border-radius: 4px !important; }
html[data-access="on"] body .cover-pill { display: block !important; margin: 0 0 .25rem !important; font-weight: 600 !important; }
html[data-access="on"] body .cover-card h3 { margin: 0 0 .35em !important; color: var(--a-link) !important; text-decoration: underline !important; text-decoration-thickness: .1em !important; text-underline-offset: .18em !important; }
html[data-access="on"] body .cover-blurb { margin: 0 0 .5em !important; }
html[data-access="on"] body .cover-tags { margin: 0 0 .5em !important; padding: 0 !important; list-style: none !important; }
html[data-access="on"] body .cover-tags li { display: inline !important; }
html[data-access="on"] body .cover-tags li + li::before { content: ', ' !important; }
html[data-access="on"] body .cover-cta { display: block !important; font-weight: 700 !important; }
html[data-access="on"] body .project-search-field { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: .5rem !important; }
html[data-access="on"] body .project-search-field input { flex: 1 1 14rem !important; margin: 0 !important; }
html[data-access="on"] body .project-search label { margin-top: .75rem !important; }
html[data-access="on"] body .project-results { margin-top: .5rem !important; }

/* ---- Gallery: one still grid ---- */
html[data-access="on"] body .collage { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)) !important; gap: .75rem !important; }
/* (The site's own grid view pins the track with !important, so this is written to out-rank it.) */
html[data-access="on"][data-access] body .collage :is(.collage-row, .collage-track, .collage-set) { display: contents !important; }
html[data-access="on"] body .gi { display: block !important; width: 100% !important; margin: 0 !important; padding: .25rem !important; }
html[data-access="on"] body .gi img { display: block !important; width: 100% !important; aspect-ratio: 1 !important; object-fit: contain !important; }

/* ---- Services, About, Experience ---- */
html[data-access="on"] body .service-tiles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)) !important; gap: 1rem !important; margin: 1.5rem 0 !important; }
html[data-access="on"] body .service-tile { padding: 1rem !important; border: 2px solid var(--a-ink) !important; border-radius: 8px !important; }
html[data-access="on"] body .tile-name { margin: 0 0 .25em !important; }
html[data-access="on"] body .tile-name a { display: block !important; padding-block: .35rem !important; }
html[data-access="on"] body .tile-tag { margin: 0 !important; }
html[data-access="on"] body .stats { display: flex !important; flex-wrap: wrap !important; gap: 1rem 3rem !important; margin: 0 0 1.25rem !important; }
html[data-access="on"] body :is(.stat-num, .stat-plus) { font-size: 2rem !important; font-weight: 700 !important; }
html[data-access="on"] body .stat-label { display: block !important; }
html[data-access="on"] body .showreel { margin: 1.5rem 0 0 !important; padding: 1rem !important; border: 2px solid var(--a-ink) !important; border-radius: 8px !important; }
html[data-access="on"] body .showreel iframe { display: block !important; width: 100% !important; max-width: 48rem !important; height: auto !important; aspect-ratio: 16 / 9 !important; border: 0 !important; }
html[data-access="on"] body .showreel-status { display: block !important; margin: 0 0 .5rem !important; }
html[data-access="on"] body .xp-list { margin: 1rem 0 0 !important; padding: 0 !important; list-style: none !important; }
html[data-access="on"] body .xp-row { max-width: none !important; margin: 0 !important; padding: 1rem 0 !important; border-top: 1px solid var(--a-ink) !important; }
html[data-access="on"] body :is(.xp-row > span, .xp-what > *) { display: block !important; max-width: 70ch !important; }
html[data-access="on"] body .xp-when { font-weight: 700 !important; }
html[data-access="on"] body .xp-what strong { font-size: 1.3rem !important; }

/* ---- Testimonials: the whole note, no flipping ---- */
html[data-access="on"] body .test-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)) !important; gap: 1.5rem !important; }
html[data-access="on"] body .test-item { padding: 1rem !important; border: 2px solid var(--a-ink) !important; border-radius: 8px !important; }
html[data-access="on"] body .test-polaroid img { display: block !important; width: 6rem !important; margin: 0 0 .75rem !important; border: 2px solid var(--a-ink) !important; }
html[data-access="on"] body .test-name { margin: 0 !important; }
html[data-access="on"] body .test-role { display: block !important; margin: 0 0 1rem !important; }

/* ---- Brain: the list view ---- */
html[data-access="on"] body .brain-topics { display: flex !important; flex-wrap: wrap !important; margin: 0 0 1rem !important; }
html[data-access="on"] body .brain-topics button > span { font-weight: 400 !important; }
html[data-access="on"] body .brain-search > div { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: .5rem !important; }
html[data-access="on"] body .brain-search input { flex: 1 1 14rem !important; margin: 0 !important; }
html[data-access="on"] body .brain-trail { display: flex !important; flex-wrap: wrap !important; align-items: center !important; margin: 1rem 0 !important; }
html[data-access="on"] body .brain-list { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) !important; gap: 1rem 2rem !important; align-items: start !important; }
html[data-access="on"] body .brain-list-group h3 span { font-weight: 400 !important; }
html[data-access="on"] body :is(.brain-list-group, .detail-links) button { display: flex !important; width: 100% !important; margin: 0 0 .5rem !important; }
html[data-access="on"] body .brain-section button small { display: block !important; font-weight: 400 !important; }
html[data-access="on"] body .brain-detail { margin: 1.5rem 0 0 !important; padding: 1rem !important; border: 2px solid var(--a-ink) !important; border-radius: 8px !important; }
html[data-access="on"] body .brain-detail a { margin-right: 1rem !important; }

/* ---- Writing ---- */
html[data-access="on"] body .writing-entry { display: block !important; margin: 0 0 1rem !important; padding: 1rem !important; border: 2px solid var(--a-ink) !important; border-radius: 8px !important; color: var(--a-ink) !important; text-decoration: none !important; }
html[data-access="on"] body .writing-entry:hover { background: var(--a-panel) !important; }
html[data-access="on"] body .writing-entry h3 { margin: 0 !important; color: var(--a-link) !important; text-decoration: underline !important; text-decoration-thickness: .1em !important; text-underline-offset: .18em !important; }
html[data-access="on"] body .entry-category { display: block !important; }
html[data-access="on"] body .notebook-heading { margin: 1.5rem 0 .75rem !important; font-size: 1.4rem !important; font-weight: 700 !important; }

/* ---- Visitor board: read as a list, add through the same dialog ---- */
html[data-access="on"] body .access-notes { margin: 1rem 0 !important; }
html[data-access="on"] body .access-notes ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)) !important; gap: 1rem !important; }
html[data-access="on"] body .access-notes li { padding: 1rem !important; border: 2px solid var(--a-ink) !important; border-radius: 8px !important; }
html[data-access="on"] body .access-note-text { margin: 0 0 .5rem !important; white-space: pre-line !important; }
html[data-access="on"] body .access-note-by { margin: 0 !important; font-weight: 600 !important; }
html[data-access="on"] body .access-note-doodle { display: block !important; width: 100% !important; max-width: 16rem !important; height: auto !important; margin: 0 0 .5rem !important; border: 2px solid var(--a-ink) !important; background: #FFFFFF !important; }

/* ---- Contact ---- */
html[data-access="on"] body .contact-direct { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: .5rem 1rem !important; margin: 0 0 1rem !important; }
html[data-access="on"] body .contact-direct button { margin: 0 !important; }
html[data-access="on"] body .brief-heading { margin: 1.5rem 0 .75rem !important; font-size: 1.4rem !important; font-weight: 700 !important; }
html[data-access="on"] body .cf-field:has(:required) > label::after { content: ' (required)' !important; font-weight: 400 !important; }
html[data-access="on"] body .cf-error { display: block !important; box-sizing: border-box !important; max-width: 34rem !important; margin: -.6rem 0 1rem !important; padding: .4rem .75rem !important; border-left: .4rem solid var(--a-ink) !important; background: var(--a-panel) !important; font-weight: 700 !important; }
html[data-access="on"] body :is(.cf-status, .copy-status, .board-status, .note-status, #noteStatus):not(:empty) { margin: .75rem 0 !important; padding: .4rem .75rem !important; border: 2px solid var(--a-ink) !important; font-weight: 600 !important; }
html[data-access="on"] body .contact-links { display: flex !important; flex-wrap: wrap !important; gap: .25rem 1.5rem !important; margin: 1.5rem 0 0 !important; }

/* ---- Footer ---- */
html[data-access="on"] body main > footer > span { display: block !important; margin: 0 0 .5rem !important; }
html[data-access="on"] body .footer-left > * { display: flex !important; }
html[data-access="on"] body nav[aria-label="Page shortcuts"] { padding-block: 0 1rem !important; }

/* ---- Dialogs and overlays ---- */
html[data-access="on"] body dialog[open]:not(.playroom-dialog) {
  box-sizing: border-box !important;
  width: min(100% - 2rem, 44rem) !important;
  max-height: calc(100dvh - 2rem) !important;
  overflow: auto !important;
  padding: 1.5rem !important;
  border: 3px solid var(--a-ink) !important;
  border-radius: 8px !important;
  background: var(--a-bg) !important;
  color: var(--a-ink) !important;
}
html[data-access="on"] body dialog::backdrop { background: rgba(0, 0, 0, .8) !important; }
html[data-access="on"] body .recruiter-person img { display: block !important; width: 6rem !important; border: 2px solid var(--a-ink) !important; }
html[data-access="on"] body :is(.recruiter-person span, .recruiter-person strong, .recruiter-stats span) { display: block !important; }
html[data-access="on"] body .recruiter-stats { display: flex !important; flex-wrap: wrap !important; gap: 1rem 2.5rem !important; margin: 1rem 0 !important; }
html[data-access="on"] body .recruiter-stats strong { font-size: 1.6rem !important; }
html[data-access="on"] body .recruiter-work span { font-weight: 400 !important; }
html[data-access="on"] body #noteCanvas { display: block !important; max-width: 100% !important; height: auto !important; margin: 0 0 .5rem !important; border: 2px solid var(--a-ink) !important; background: #FFFFFF !important; }
html[data-access="on"] body .note-colors { margin: 1rem 0 !important; padding: .75rem 1rem !important; border: 2px solid var(--a-ink) !important; }
html[data-access="on"] body .note-colors label { display: inline-flex !important; align-items: center !important; min-height: 44px !important; margin-right: 1.25rem !important; }
html[data-access="on"] body :is(.lightbox[aria-hidden="false"], .cv.is-open) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  padding: 1rem clamp(1rem, 4vw, 3rem) 2rem !important;
  background: var(--a-bg) !important;
  color: var(--a-ink) !important;
}
html[data-access="on"] body .lightbox img { display: block !important; max-width: 100% !important; max-height: none !important; margin: 0 0 1rem !important; }
html[data-access="on"] body .cv.is-open { display: flex !important; flex-direction: column !important; padding-bottom: 0 !important; }
html[data-access="on"] body .cv-bar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: .5rem 1.5rem !important; padding: 0 0 .75rem !important; border-bottom: 2px solid var(--a-ink) !important; }
html[data-access="on"] body .cv-meta > * { display: block !important; margin: 0 !important; }
html[data-access="on"] body .cv-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: .25rem 1rem !important; }
html[data-access="on"] body .cv-actions button { margin: 0 !important; }
html[data-access="on"] body .cs-eyebrow > * + * { margin-left: .5em !important; }
html[data-access="on"] body :is(.cs-links, .cs-library-nav, .cs-library-downloads) a { margin-right: 1.25rem !important; }
html[data-access="on"] body .cv-scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; padding: 1.5rem 0 3rem !important; }

/* ---- Games room: it keeps its own layout. Its quiet text is darkened and its controls
   (not the cells of the boards themselves) are brought up to 44px. ---- */
html[data-access="on"] body .playroom-dialog { --play-muted: var(--bone); --bone-dim: var(--bone); }
html[data-access="on"] body .playroom-dialog .play-chip[aria-pressed="true"] { background: var(--bone) !important; color: var(--ink) !important; }
html[data-access="on"] body .playroom-dialog .bot-prize span { color: var(--bone) !important; }
html[data-access="on"] body .playroom-dialog :is(button, summary, select, input[type="range"]):not(.chess-board *, .ultimate-board *, .connect-board *, .dots-board *, .memory-board *, .playing-card) {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ---- Whatever is marked hidden stays hidden ---- */
html[data-access="on"][data-access] body [hidden][hidden] { display: none !important; }

@media print {
  html[data-access="on"] body :is(.access-bar, .access-tab) { display: none !important; }
}