/* ============================================================
   atelier.css
   The current design system: this is what the site actually looks like.
   
   Owns the design tokens in :root and the dark palette, and overrides
   base.css almost everywhere -- which is why it carries the bulk of the
   codebase's !important declarations.
   
   Was polish.css + atelier.css. Concatenated in load order, so the cascade
   is unchanged.
   ============================================================ */

/* Layout, safe areas, touch-friendly cards, subtle motion — loads after base.css */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
}

/* Fluid container + notched devices */
.container {
  width: min(94vw, 1100px) !important;
  max-width: min(94vw, 1100px) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}

.navbar {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Anchor scroll under fixed navbar */
main .section,
.footer-section {
  scroll-margin-top: calc(4.75rem + env(safe-area-inset-top, 0px));
}

#home.home-section {
  scroll-margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.portfolio-is-locked {
  overflow: hidden;
}

.portfolio-lock .unlock-btn .btn-loader {
  display: none;
}

.portfolio-lock .unlock-btn:disabled .btn-text {
  display: none;
}

/* —— Project cards only: bottom slide-up reveal —— */
@media (max-width: 992px) {
  .interactive-card {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 0.25rem;
  }

  .interactive-card .project-front {
    transform: none !important;
    height: auto;
  }

  .interactive-card .project-actions {
    position: relative;
    inset: auto;
    transform: none !important;
    margin-top: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  }

  .interactive-card .project-btn {
    opacity: 1 !important;
    transform: none !important;
  }

  .interactive-card:hover {
    transform: translateY(-4px);
  }

  .interactive-card:hover .project-front {
    transform: none !important;
  }

  .interactive-card:hover .project-actions {
    transform: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {.interactive-card:hover .project-front {
    transform: none !important;
  }

  .interactive-card:hover .project-actions {
    transform: none !important;
  }
}

/* Micro-polish */
a {
  text-underline-offset: 0.2em;
}

.btn,
.btn-primary,
.btn-outline {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.btn:active,
.btn-primary:active,
.btn-outline:active {
  transform: scale(0.98);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.project-btn:focus-visible,
.menu-toggle:focus-visible,
.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body.dark-theme .btn:focus-visible,
body.dark-theme .btn-primary:focus-visible,
body.dark-theme .btn-outline:focus-visible,
body.dark-theme .project-btn:focus-visible,
body.dark-theme .menu-toggle:focus-visible,
body.dark-theme .theme-toggle-btn:focus-visible {
  outline-color: var(--accent);
}

/* Read My Story hover hint */
.story-btn-wrap {
  position: relative;
  display: inline-block;
}

.story-btn-hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(8px) scale(0.94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: max-content;
  max-width: min(240px, 78vw);
  padding: 0.6rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 5px 6px 0 var(--ink);
  transition:
    opacity 0.32s ease,
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.32s;
  z-index: 30;
}

.story-btn-hint::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--card);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.story-btn-wrap:hover .story-btn,
.story-btn-wrap:focus-within .story-btn {
  transform: translateY(-2px);
  box-shadow: none;
}

.story-btn-wrap:hover .story-btn-hint,
.story-btn-wrap:focus-within .story-btn-hint {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

@media (hover: none) {.story-btn-wrap:focus-within .story-btn-hint {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.projects-section .project-card,
.case-studies-section .project-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}

/* Project cards: same category colour on every card.
   Was a hardcoded #2a7ae2 with a #7eb6ff dark twin. Both sat at specificity
   0-4-2 with !important, which outranks every atelier.css rule for this
   element regardless of load order -- so the category colour was the one place
   in the site that ignored the palette outright. The token supplies both
   themes, so the dark rule is no longer needed. */
.project-card.interactive-card .project-category {
  color: var(--accent) !important;
}

/* Unlock toast */
.lock-notification {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 0px));
  right: max(20px, env(safe-area-inset-right, 0px));
  padding: 0.9rem 1.4rem;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  z-index: 10002;
  transform: translateX(calc(100% + 28px));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

.lock-notification.is-visible {
  transform: translateX(0);
}

/* —— Mobile polish (loads last) —— */
@media (max-width: 767px) {.home-container {
    padding-bottom: 3rem;
    gap: 1.5rem;
  }

  .home-left {
    min-width: 0;
    width: 100%;
  }

  

  .projects-cards-row {
    padding-left: 0;
    padding-right: 0;
  }

  .interactive-card {
    height: auto;
    min-height: 280px;
  }

  

  

  
}

@media (max-width: 480px) {.container {
    width: min(96vw, 1100px) !important;
    max-width: min(96vw, 1100px) !important;
  }

  .home-btns .btn-outline {
    font-size: 0.92rem;
    padding: 0.7rem 1rem !important;
  }
}

/* ============================================================
   was atelier.css
   The design system proper. Everything above this line was polish.css, a
   later patch layer that loaded first and therefore sits underneath it.
   ============================================================ */

/* Atelier — Sam-inspired personal site, built for Deepika.
   Loaded last so it can win the old card-portfolio styles. */

/* Design tokens — the single source of truth for the palette.
   Every value below is unchanged from when these lived on `html.atelier`;
   only the selector moved. `html.atelier` IS the root element, so this is
   visually identical today. The point is to decouple the theme from that
   class, so the `html.atelier` prefixes can be removed when the stylesheets
   are collapsed without taking the palette down with them.

   Accent roles: --accent (blue) is for anything you can act on or that
   labels a section -- links, kickers, focus rings, the open row. --spin
   (terracotta, gold in dark) is editorial emphasis only -- pull quotes,
   stamps, tape, hand-drawn marks. Neither is used for body text. */
:root {
  --paper: #f3eee4;
  --ink: #1a1713;
  --muted: #6b645b;
  --line: rgba(26, 23, 19, 0.12);
  --accent: #2457d6;
  --spin: #c45c26;
  --card: #fffaf3;
  --shadow: 10px 14px 0 #1a1713;
  --sans: 'Outfit', sans-serif;
  --serif: 'Fraunces', serif;
}

/* Dark palette. Declared twice on purpose, matching the previous behaviour:
   the `:root` variant reaches elements outside `<body>` (the page background
   itself), while `body.dark-theme` covers everything inside it and still works
   in browsers without `:has()`. Only the eight colour tokens flip -- the two
   font tokens are intentionally inherited from `:root`. */
:root:has(body.dark-theme),
body.dark-theme {
  --paper: #161310;
  --ink: #f3eee4;
  --muted: #b7aea3;
  --line: rgba(243, 238, 228, 0.12);
  --accent: #8bb0ff;
  --spin: #f0c36a;
  --card: #221c18;
  --shadow: 10px 14px 0 #000;
}

html.atelier,
html.atelier body {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink);
  font-family: var(--sans);
}

html.atelier *,
html.atelier *::before,
html.atelier *::after {
  font-family: inherit;
  text-rendering: auto;
}

html.atelier h1,
html.atelier h2,
html.atelier h3,
html.atelier h4,
html.atelier .logo,
html.atelier .home-title,
html.atelier .about-title,
html.atelier .skills-title,
html.atelier .projects-title,
html.atelier .education-title,
html.atelier .experience-title,
html.atelier .contact-title,
html.atelier .fun-facts-title,
html.atelier .writing-title,
html.atelier .case-study-title {
  font-family: var(--serif) !important;
  letter-spacing: -0.03em;
}

html.atelier .navbar {
  background: color-mix(in srgb, var(--paper) 78%, #fff) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(18px);
  box-shadow: none !important;
}

html.atelier body.dark-theme .navbar {
  background: rgba(22, 19, 16, 0.82) !important;
}

html.atelier .logo {
  font-size: 1.35rem !important;
  color: var(--ink) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

html.is-unlocked #portfolio-lock {
  display: none !important;
}

html.is-unlocked #site-shell {
  display: block !important;
}

/* Out of sight until a keyboard user tabs to it. */
html.atelier .skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10000;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -200%;
}

html.atelier .skip-link:focus-visible {
  translate: 0 0;
}

html.atelier .logo-brace {
  color: var(--accent);
  font-weight: 700;
}

html.atelier .nav-links a,
html.atelier .dropbtn {
  color: var(--ink) !important;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.82rem;
}

html.atelier .container {
  width: min(92vw, 1120px) !important;
  max-width: min(92vw, 1120px) !important;
}

html.atelier .home-section {
  background: transparent !important;
}

html.atelier .home-container {
  min-height: calc(100vh - 4.5rem);
  align-items: center;
  gap: 4rem;
  padding: 3rem 0 5rem !important;
}

html.atelier .home-kicker {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

html.atelier .home-title {
  font-size: clamp(3.2rem, 8vw, 6.4rem) !important;
  line-height: 0.92 !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 1.2rem !important;
}

html.atelier .home-subtitle {
  position: relative;
  font-family: var(--serif) !important;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-top: 0 !important;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem) !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  max-width: 34rem;
  line-height: 1.45;
  margin-bottom: 1.25rem !important;
  text-align: left !important;
}

html.atelier .home-rotate {
  display: block;
  width: fit-content;
  margin-top: 0.15em;
  overflow: hidden;
  height: 1.4em;
  vertical-align: bottom;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
  font-weight: 600;
  font-style: normal;
}

html.atelier .home-rotate-track {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  animation: homeWordSpin 28s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

html.atelier .home-rotate-track span {
  display: block;
  height: 1.4em;
  line-height: 1.4;
  white-space: nowrap;
  font-style: normal;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

/* Ten phrases, each held ~2.1s then rolled up over ~0.7s; the last span
   repeats the first so the loop restarts without a jump. */
@keyframes homeWordSpin {
  0%, 7.5% { transform: translateY(0); }
  10%, 17.5% { transform: translateY(-1.4em); }
  20%, 27.5% { transform: translateY(-2.8em); }
  30%, 37.5% { transform: translateY(-4.2em); }
  40%, 47.5% { transform: translateY(-5.6em); }
  50%, 57.5% { transform: translateY(-7em); }
  60%, 67.5% { transform: translateY(-8.4em); }
  70%, 77.5% { transform: translateY(-9.8em); }
  80%, 87.5% { transform: translateY(-11.2em); }
  90%, 97.5% { transform: translateY(-12.6em); }
  100% { transform: translateY(-14em); }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .home-rotate-track {
    animation: none;
  }
}

@media (max-width: 640px) {
  html.atelier .home-rotate {
    display: block;
    margin-top: 0.2em;
  }
}

html.atelier .home-desc {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 36rem;
  font-size: 1.08rem !important;
  line-height: 1.65;
  color: var(--ink) !important;
  animation: none !important;
}

html.atelier .home-btns {
  margin-top: 1.9rem;
}

html.atelier .home-btns .btn-outline {
  border-radius: 999px;
  border: 1.5px solid var(--ink) !important;
  color: var(--ink) !important;
  background: transparent !important;
  font-family: var(--sans);
  font-size: 0.95rem !important;
  padding: 0.78rem 1.4rem;
  margin: 0 !important;
  box-shadow: none;
}

html.atelier .home-btns .btn-outline:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

html.atelier .home-right {
  overflow: visible;
}

/* The mascot is the hero's picture. Her thought cloud opens to her left,
   over the gap beside the copy, so it never runs off the right edge. */
html.atelier .home-mascot {
  width: 372px;
  max-width: 100%;
}

/* A little larger than she was in About, at the sheet's 340:400 shape. */
html.atelier .home-mascot .atelier-mascot {
  --cloud-tail: right;
  max-width: 372px;
  height: 438px;
}

html.atelier .home-mascot .atelier-mascot-bubble {
  left: auto;
  right: 62%;
  transform-origin: 100% 100%;
}

html.atelier .home-photo {
  width: 300px !important;
  height: 380px !important;
  border-radius: 1.6rem !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: cover;
  transform: rotate(-3.5deg) scale(1);
  transform-origin: center center;
  box-shadow: var(--shadow) !important;
  background: var(--card) !important;
  animation: none !important;
  cursor: pointer;
  transition: transform 0.45s ease;
}

html.atelier .home-photo:hover {
  transform: rotate(-3.5deg) scale(1.08);
  filter: none !important;
}

html.atelier .atelier-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.8rem;
}

html.atelier .atelier-do-lead {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 560;
  line-height: 1.2;
  color: var(--ink) !important;
  max-width: 46rem;
  margin: 0 0 2.5rem !important;
  text-align: left !important;
}

/* One centred column: the mascot that used to sit beside it leads the hero.
   Centred on the copy, since .container's width is fixed with !important. */
html.atelier .atelier-about {
  display: block;
}

html.atelier .atelier-about .atelier-about-copy {
  max-width: 64rem;
  margin-inline: auto;
  text-align: center;
}

html.atelier .atelier-about h2.about-title.atelier-do-lead {
  margin: 0 auto 1.15rem !important;
  text-align: center !important;
}

html.atelier .atelier-about-lede {
  max-width: 34rem;
  margin: 0 auto 1.1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted);
}

/* The working loop as a row of chips; the last one is the question that matters. */
html.atelier .atelier-about-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem 1.7rem;
  list-style: none;
  margin: 0 auto 2.1rem;
  padding: 0;
}

html.atelier .atelier-about-flow li {
  position: relative;
  padding: 0.42rem 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

html.atelier .atelier-about-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -1.32rem;
  translate: 0 -52%;
  font-size: 0.95rem;
  color: var(--muted);
  pointer-events: none;
}

html.atelier .atelier-about-flow li:hover {
  translate: 0 -2px;
  box-shadow: 3px 4px 0 var(--ink);
}

html.atelier .atelier-about-flow li.is-ask {
  border-color: var(--spin);
  background: var(--spin);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 560;
}

html.atelier .atelier-about-pull {
  margin: 0 auto 2.8rem;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

html.atelier .atelier-about-keep {
  white-space: nowrap;
}

html.atelier .atelier-about-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

html.atelier .atelier-about-mark svg {
  position: absolute;
  left: -2%;
  bottom: -0.32em;
  width: 104%;
  height: 0.5em;
  overflow: visible;
  pointer-events: none;
}

html.atelier .atelier-about-mark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Cued pieces are only hidden once the observer that reveals them is running. */
html.atelier.has-cues .atelier-about-mark path {
  stroke-dashoffset: 1;
}

html.atelier.has-cues .atelier-about-mark.is-cued path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}

/* The loop keeps moving: each arrow nudges forward in turn. */
html.atelier .atelier-about-flow li:not(:last-child)::after {
  animation: about-march 2.8s ease-in-out infinite;
}

html.atelier .atelier-about-flow li:nth-child(2)::after {
  animation-delay: 0.35s;
}

html.atelier .atelier-about-flow li:nth-child(3)::after {
  animation-delay: 0.7s;
}

@keyframes about-march {
  0%, 55%, 100% {
    translate: 0 -52%;
    color: var(--muted);
  }
  22% {
    translate: 4px -52%;
    color: var(--spin);
  }
}

/* ...and the question it ends on catches the light now and then. */
html.atelier .atelier-about-flow li.is-ask {
  overflow: hidden;
  isolation: isolate;
}

html.atelier .atelier-about-flow li.is-ask::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  translate: -120% 0;
  animation: about-shine 5s ease-in-out 1.6s infinite;
  pointer-events: none;
}

@keyframes about-shine {
  0% {
    translate: -120% 0;
  }
  28%, 100% {
    translate: 120% 0;
  }
}

/* Once the cards land, their icons pop in and the stamp is slapped on. */
html.atelier.has-cues .atelier-about-notes:not(.is-cued) .atelier-about-icon,
html.atelier.has-cues .atelier-about-notes:not(.is-cued) .atelier-about-stamp {
  opacity: 0;
}

html.atelier .atelier-about-notes.is-cued .atelier-about-icon {
  animation: about-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s backwards;
}

html.atelier .atelier-about-notes.is-cued li:nth-child(2) .atelier-about-icon {
  animation-delay: 0.86s;
}

html.atelier .atelier-about-notes.is-cued li:nth-child(3) .atelier-about-icon {
  animation-delay: 1.02s;
}

html.atelier .atelier-about-notes.is-cued .atelier-about-stamp {
  animation: about-stamp 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 1.45s backwards;
}

@keyframes about-pop {
  from {
    opacity: 0;
    scale: 0.2;
    rotate: -40deg;
  }
}

@keyframes about-stamp {
  from {
    opacity: 0;
    scale: 2.4;
    rotate: 22deg;
  }
  70% {
    opacity: 1;
    scale: 0.92;
    rotate: 5deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier.has-cues .atelier-about-mark path {
    stroke-dashoffset: 0;
    transition: none;
  }

  html.atelier .atelier-about .atelier-about-flow li::after,
  html.atelier .atelier-about .atelier-about-flow li::before,
  html.atelier .atelier-about .atelier-about-notes .atelier-about-icon,
  html.atelier .atelier-about .atelier-about-notes .atelier-about-stamp {
    animation: none;
    opacity: 1;
  }

  html.atelier .atelier-about .atelier-about-flow li.is-ask::before {
    display: none;
  }

  html.atelier .atelier-about .atelier-about-flow li,
  html.atelier .atelier-about .atelier-about-notes li,
  html.atelier .atelier-about .atelier-about-icon,
  html.atelier .atelier-about .atelier-about-stamp {
    transition: none;
  }
}

/* Numbered like the chapters of My Story, so the two pages read as one.
   Tilt and lift use `rotate`/`translate`: scroll reveals own `transform`. */
html.atelier .atelier-about-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: about-note;
  text-align: left;
}

html.atelier .atelier-about-notes li {
  position: relative;
  padding: 1.35rem 1.35rem 1.5rem;
  border: 1.5px solid var(--line);
  border-radius: 1.2rem;
  background: var(--card);
  rotate: -1.2deg;
  transition: rotate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease, box-shadow 0.25s ease;
}

html.atelier .atelier-about-notes li:nth-child(2) {
  rotate: 0.9deg;
  translate: 0 0.7rem;
}

html.atelier .atelier-about-notes li:nth-child(3) {
  rotate: -0.6deg;
}

html.atelier .atelier-about-notes li:hover {
  rotate: 0deg;
  translate: 0 -4px;
  border-color: var(--ink);
  box-shadow: 6px 8px 0 var(--ink);
}

html.atelier .atelier-about-notes li::before {
  counter-increment: about-note;
  content: counter(about-note, decimal-leading-zero);
  display: block;
  margin-bottom: 1.6rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}

html.atelier .atelier-about-icon {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

html.atelier .atelier-about-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.atelier .atelier-about-notes li:hover .atelier-about-icon {
  rotate: -12deg;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

html.atelier .atelier-about-stamp {
  position: absolute;
  top: -0.85rem;
  right: 3.9rem;
  padding: 0.2rem 0.6rem;
  border: 1.5px solid var(--spin);
  border-radius: 0.4rem;
  background: var(--card);
  rotate: 7deg;
  font-family: var(--serif);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--spin);
  transition: rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier .atelier-about-notes li:hover .atelier-about-stamp {
  rotate: -4deg;
  scale: 1.08;
}

html.atelier .atelier-about-notes h3 {
  margin: 0 0 0.45rem;
  font-family: var(--sans) !important;
  font-size: 1.02rem !important;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

html.atelier .atelier-about-notes p {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

html.atelier .atelier-about-notes em {
  font-style: normal;
  color: var(--spin);
  font-family: inherit;
}

html.atelier .atelier-about-more-wrap {
  display: inline-block;
  position: relative;
  margin-top: 2.8rem;
}

html.atelier .atelier-about-more {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  border-radius: 999px;
  border: 1.5px solid var(--ink) !important;
  color: var(--ink) !important;
  background: transparent !important;
  font-family: var(--sans);
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  padding: 0.78rem 1.4rem !important;
  text-decoration: none;
  box-shadow: none !important;
}

html.atelier .atelier-about-more:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  text-decoration: none;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

html.atelier .atelier-about-copy {
  grid-area: copy;
  overflow: visible;
}

html.atelier .atelier-about-side {
  grid-area: side;
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

html.atelier .atelier-about-frame {
  margin: 0;
}

html.atelier .atelier-about-photo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 400px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 1.4rem;
  border: 0;
  background: var(--card);
  box-shadow: var(--shadow);
  transform: rotate(2.5deg);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

html.atelier .atelier-about-frame:hover .atelier-about-photo {
  transform: rotate(0.5deg) scale(1.06);
}

/* The mascot stands on the page by itself: transparent sheets, no card, no
   tilt, no shadow. It takes the photo's footprint so the layout is unchanged. */
html.atelier .atelier-mascot {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  height: 400px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 1.4rem;
}

html.atelier .atelier-mascot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* mascot.js drives a spring towards the pointer and writes the result to
   --mascot-tx/-ty/-tilt every frame, so there is deliberately no transition
   here: one would restart on every write and stutter. The tilt pivots at the
   base of the bust, like a person turning from the shoulders, and is only
   non-zero while she is moving, so the picture is never left rotated.
   The bottom edge softens over its last few pixels only, so the cut-off
   sweater ends clean but not razor-sharp. Any longer fade washed the cream
   stripes into the page, which read as a hazy glow under her on the light
   theme. */
html.atelier .atelier-mascot-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 50% 50%;
  pointer-events: none;
  transform-origin: 50% 64%;
  transform: translate(var(--mascot-tx, 0px), var(--mascot-ty, 0px)) rotate(var(--mascot-tilt, 0deg));
  /* Kept on their own layers for good. Promoted only while a fade ran, the
     picture was redrawn a different way at the start and end of every fade
     and visibly shimmered. */
  will-change: opacity, transform;
  -webkit-mask-image: linear-gradient(to bottom, #000 97%, rgba(0, 0, 0, 0.55) 98.6%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 97%, rgba(0, 0, 0, 0.55) 98.6%, transparent 100%);
}

/* Near-black hair against the near-black dark page loses its silhouette, so a
   soft light sits behind her. It is a fixed backdrop, not a drop-shadow on the
   layers: a filter there was re-rendered each time a layer faded, so every
   expression made the whole figure and its glow visibly flicker. */
html.atelier body.dark-theme .atelier-mascot::before {
  content: '';
  position: absolute;
  inset: 2% -4% 6%;
  background: radial-gradient(ellipse 46% 50% at 50% 46%, rgba(243, 238, 228, 0.11), rgba(243, 238, 228, 0.04) 62%, transparent 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-mascot-layer {
    transform: none;
  }
}

/* The welcome. A warm flush over her cheeks (positions are fractions of the
   mascot box, like the face itself), moving with her as the layers do. */
html.atelier .atelier-mascot-blush {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(7% 3.8% at 40% 47.5%, rgba(255, 92, 122, 0.5), rgba(255, 92, 122, 0) 100%),
    radial-gradient(7% 3.8% at 67% 47.5%, rgba(255, 92, 122, 0.5), rgba(255, 92, 122, 0) 100%);
  mix-blend-mode: multiply;
  transform-origin: 50% 64%;
  /* --face-dx/dy follow her cheeks when she has turned her head. */
  translate: var(--face-dx, 0%) var(--face-dy, 0%);
  transform: translate(var(--mascot-tx, 0px), var(--mascot-ty, 0px)) rotate(var(--mascot-tilt, 0deg));
  transition: opacity 0.8s ease, translate 0.12s ease-out;
}

html.atelier .atelier-mascot.is-blushing .atelier-mascot-blush {
  opacity: 1;
  animation: mascot-blush 1.4s ease-in-out 0.8s infinite alternate;
}

@keyframes mascot-blush {
  to { opacity: 0.65; }
}

html.atelier .atelier-mascot-burst {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

html.atelier .atelier-mascot-burst > span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  opacity: 0;
}

html.atelier .atelier-mascot-burst svg {
  display: block;
  width: 100%;
  height: 100%;
}

html.atelier .atelier-mascot-burst.is-heart svg {
  fill: #ff5c7a;
  filter: drop-shadow(0 2px 4px rgba(255, 92, 122, 0.35));
}

/* Glints: warm gold hairline rays round a white-hot core, with a soft bloom,
   the way light catches on hair or in an eye. */
html.atelier .atelier-mascot-burst.is-spark svg {
  overflow: visible;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 244, 214, 0.95))
    drop-shadow(0 0 5px rgba(255, 196, 92, 0.55));
}

html.atelier .atelier-mascot-burst.is-spark .g-ray {
  fill: #f4bf55;
}

html.atelier .atelier-mascot-burst.is-spark .g-ray.is-short {
  opacity: 0.7;
}

html.atelier .atelier-mascot-burst.is-spark .g-core {
  fill: #fffdf6;
}

/* Bursts move with her lean, so a glint stays on the hair it caught. */
html.atelier .atelier-mascot-burst.is-spark {
  transform-origin: 50% 64%;
  transform: translate(var(--mascot-tx, 0px), var(--mascot-ty, 0px)) rotate(var(--mascot-tilt, 0deg));
}

html.atelier .atelier-mascot-burst.is-spark > .is-eye {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  animation: mascot-eye-glint 1.9s ease-in-out var(--d) forwards;
}

html.atelier .atelier-mascot-burst.is-spark > .is-eye .g-ray {
  fill: #fff;
}

html.atelier .atelier-mascot-burst.is-heart > span {
  animation: mascot-heart 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d) forwards;
}

html.atelier .atelier-mascot-burst.is-spark > span {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  animation: mascot-spark 1.9s ease-in-out var(--d) forwards;
}

@keyframes mascot-heart {
  0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0deg); }
  15% { opacity: 1; transform: translate(calc(var(--dx) * 0.2), -14px) scale(var(--s)) rotate(var(--r)); }
  55% { transform: translate(calc(var(--dx) * 0.7), calc(var(--rise) * 0.6)) scale(var(--s)) rotate(calc(var(--r) * -1)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--rise)) scale(calc(var(--s) * 0.8)) rotate(var(--r)); }
}

/* The theme switch. Lights on: a sun rises beside her head, rays turning,
   and a warm wash of light falls over her. Lights off: a crescent moon
   drifts in and a few stars twinkle round her. */
html.atelier .atelier-mascot-burst > .atelier-mascot-sky {
  left: 82%;
  top: 9%;
  width: 3.6rem;
  height: 3.6rem;
  margin: -1.8rem 0 0 -1.8rem;
}

html.atelier .atelier-mascot-burst.is-sun > .atelier-mascot-sky {
  animation: mascot-sun 3.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 10px rgba(255, 196, 70, 0.75)) drop-shadow(0 0 26px rgba(255, 170, 60, 0.45));
}

html.atelier .atelier-mascot-sky .s-core {
  fill: #ffd25e;
}

html.atelier .atelier-mascot-sky .s-rays {
  fill: #ffb83b;
  transform-origin: 32px 32px;
  animation: mascot-sun-rays 3.2s linear forwards;
}

html.atelier .atelier-mascot-burst.is-moon > .atelier-mascot-sky {
  animation: mascot-moon 3.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 8px rgba(220, 228, 255, 0.7)) drop-shadow(0 0 22px rgba(160, 180, 255, 0.35));
}

html.atelier .atelier-mascot-sky .m-body {
  fill: #f4efd9;
}

html.atelier .atelier-mascot-burst > .atelier-mascot-glare {
  /* Larger than her box and faded out well inside its own edges, so the
     light has no visible border. */
  left: -40%;
  top: -40%;
  width: 180%;
  height: 180%;
  margin: 0;
  background: radial-gradient(42% 40% at 67.8% 27.2%, rgba(255, 214, 120, 0.5), rgba(255, 214, 120, 0.18) 55%, rgba(255, 214, 120, 0) 100%);
  mix-blend-mode: soft-light;
  animation: mascot-glare 2.2s ease-out forwards;
}

html.atelier .atelier-mascot-burst > .atelier-mascot-star {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  animation: mascot-spark 2.4s ease-in-out var(--d) forwards;
}

html.atelier .atelier-mascot-star svg {
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(225, 232, 255, 0.9));
}

html.atelier .atelier-mascot-star .g-ray,
html.atelier .atelier-mascot-star .g-core {
  fill: #eef1ff;
}

html.atelier .atelier-mascot-star .g-ray.is-short {
  opacity: 0.6;
}

@keyframes mascot-sun {
  0% { opacity: 0; transform: translateY(1.4rem) scale(0.4); }
  22% { opacity: 1; transform: translateY(0) scale(1.08); }
  34% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-0.4rem) scale(0.92); }
}

@keyframes mascot-sun-rays {
  to { transform: rotate(80deg); }
}

@keyframes mascot-moon {
  0% { opacity: 0; transform: translate(0.8rem, -0.6rem) rotate(-20deg) scale(0.6); }
  28% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  80% { opacity: 1; transform: rotate(4deg); }
  100% { opacity: 0; transform: translate(-0.2rem, -0.3rem) rotate(6deg) scale(0.95); }
}

@keyframes mascot-glare {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* A twinkle, not a pop: it flares, dims, flares again and fades, turning
   only a few degrees, as a glint does when the light shifts. */
@keyframes mascot-spark {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  22% { opacity: 1; transform: scale(var(--s)) rotate(calc(var(--r) * 0.5)); }
  42% { opacity: 0.55; transform: scale(calc(var(--s) * 0.45)) rotate(calc(var(--r) * 0.7)); }
  62% { opacity: 1; transform: scale(calc(var(--s) * 0.9)) rotate(var(--r)); }
  100% { opacity: 0; transform: scale(0) rotate(calc(var(--r) * 1.4)); }
}

@keyframes mascot-eye-glint {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  25% { opacity: 1; transform: scale(1) rotate(10deg); }
  45% { opacity: 0.6; transform: scale(0.5) rotate(14deg); }
  65% { opacity: 1; transform: scale(0.9) rotate(18deg); }
  100% { opacity: 0; transform: scale(0) rotate(24deg); }
}

/* Marks beside her head for her little moments: notes, ?, !, zzz, a drop
   of sweat, a lightbulb. */
html.atelier .atelier-mascot-mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  width: 1.6rem;
  margin-left: -0.8rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--spin);
  opacity: 0;
  animation: mascot-mark-pop 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) forwards;
}

html.atelier .atelier-mascot-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

html.atelier .atelier-mascot-burst.is-note .atelier-mascot-mark {
  animation: mascot-mark-float 2.4s ease-out var(--d) forwards;
}

html.atelier .atelier-mascot-burst.is-zzz .atelier-mascot-mark {
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  animation: mascot-mark-drift 2.2s ease-out var(--d) forwards;
}

html.atelier .atelier-mascot-burst.is-sweat .atelier-mascot-mark {
  width: 0.9rem;
  margin-left: -0.45rem;
  animation: mascot-mark-drip 1.9s ease-in var(--d) forwards;
}

html.atelier .atelier-mascot-burst.is-sweat svg {
  fill: #8cc4f0;
  stroke: #3d6f99;
  stroke-width: 1.4;
}

html.atelier .atelier-mascot-burst.is-bulb .atelier-mascot-mark {
  width: 2.7rem;
  margin-left: -1.35rem;
}

html.atelier .atelier-mascot-burst.is-bulb .b-glass {
  fill: #ffd66b;
  stroke: #1a1713;
  stroke-width: 1.3;
  filter: drop-shadow(0 0 6px rgba(255, 196, 64, 0.8));
}

html.atelier .atelier-mascot-burst.is-bulb .b-base {
  fill: none;
  stroke: #1a1713;
  stroke-width: 1.5;
  stroke-linecap: round;
}

@keyframes mascot-mark-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  14% { opacity: 1; transform: scale(1.25) rotate(var(--r)); }
  24% { transform: scale(0.95) rotate(calc(var(--r) * -0.5)); }
  34%, 80% { opacity: 1; transform: scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: scale(0.9) translateY(-6px) rotate(var(--r)); }
}

@keyframes mascot-mark-float {
  0% { opacity: 0; transform: translate(0, 8px) scale(0.5) rotate(0deg); }
  20% { opacity: 1; transform: translate(-4px, -6px) scale(1) rotate(var(--r)); }
  60% { opacity: 1; transform: translate(6px, -26px) scale(1) rotate(calc(var(--r) * -1)); }
  100% { opacity: 0; transform: translate(-2px, -48px) scale(0.9) rotate(var(--r)); }
}

@keyframes mascot-mark-drift {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25% { opacity: 1; transform: translate(4px, -6px) scale(0.85); }
  100% { opacity: 0; transform: translate(16px, -30px) scale(1.15); }
}

@keyframes mascot-mark-drip {
  0% { opacity: 0; transform: translateY(-4px) scale(0.4); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  70% { opacity: 1; transform: translateY(10px) scale(1, 1.05); }
  100% { opacity: 0; transform: translateY(18px) scale(0.9); }
}

/* Body moves for the moments. They run on the picture layers (and the
   blush that follows them), not her box, so the speech bubble stays put;
   individual translate/rotate/scale compose with the spring's transform. */
html.atelier .atelier-mascot.is-m-hop :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-hop 1s cubic-bezier(0.33, 0, 0.3, 1); }
html.atelier .atelier-mascot.is-m-jump :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-jump 0.75s cubic-bezier(0.33, 0, 0.3, 1); }
html.atelier .atelier-mascot.is-m-bounce :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-bounce 1.3s ease-in-out; }
html.atelier .atelier-mascot.is-m-dance :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-dance 2.3s ease-in-out; }
html.atelier .atelier-mascot.is-m-tilt :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-tilt 2.3s cubic-bezier(0.45, 0, 0.3, 1); }
html.atelier .atelier-mascot.is-m-lean :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-lean 2.1s cubic-bezier(0.45, 0, 0.3, 1); }
html.atelier .atelier-mascot.is-m-shake :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-shake 0.8s ease-in-out; }
html.atelier .atelier-mascot.is-m-nod :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-nod 1.1s ease-in-out; }
html.atelier .atelier-mascot.is-m-squish :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-squish 1.1s ease-in-out; }
html.atelier .atelier-mascot.is-m-shiver :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-shiver 0.9s linear; }
html.atelier .atelier-mascot.is-m-dizzy :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-dizzy 1.8s ease-in-out; }
html.atelier .atelier-mascot.is-m-doze :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-doze 2.5s ease-in-out; }
html.atelier .atelier-mascot.is-m-sneeze :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-sneeze 1.5s ease-in-out; }
html.atelier .atelier-mascot.is-m-stretch :is(.atelier-mascot-layer, .atelier-mascot-blush) { animation: m-stretch 2.4s ease-in-out; }

/* Kept small and pivoting at her neck (transform-origin on the layers):
   swung from the bottom edge, by degrees, she rocked like a cut-out pinned
   at the base. A person moves a few pixels and a degree or two. */
@keyframes m-hop {
  0%, 100% { translate: 0 0; }
  18% { translate: 0 1.5px; }
  45% { translate: 0 -9px; }
  72% { translate: 0 0.5px; }
}

@keyframes m-jump {
  0%, 100% { translate: 0 0; }
  15% { translate: 0 2px; }
  42% { translate: 0 -13px; }
  74% { translate: 0 0.5px; }
}

@keyframes m-bounce {
  0%, 50%, 100% { translate: 0 0; }
  25%, 75% { translate: 0 -6px; }
}

@keyframes m-dance {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  20% { rotate: -1.4deg; translate: -2px -1px; }
  45% { rotate: 1.4deg; translate: 2px 0; }
  70% { rotate: -1deg; translate: -1.5px -1px; }
  88% { rotate: 0.4deg; translate: 0.5px 0; }
}

@keyframes m-tilt {
  0%, 100% { rotate: 0deg; }
  30%, 70% { rotate: -2.2deg; }
}

@keyframes m-lean {
  0%, 100% { translate: 0 0; }
  30%, 70% { translate: 0 -3px; }
}

@keyframes m-shake {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -1.1deg; }
  45% { rotate: 1deg; }
  70% { rotate: -0.6deg; }
  88% { rotate: 0.2deg; }
}

@keyframes m-nod {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25%, 65% { translate: 0 3px; rotate: 0.4deg; }
  45% { translate: 0 0; rotate: 0deg; }
}

@keyframes m-squish {
  0%, 100% { translate: 0 0; }
  25%, 65% { translate: 0 2px; }
  45%, 85% { translate: 0 -2px; }
}

@keyframes m-shiver {
  0%, 100% { translate: 0 0; }
  12%, 37%, 62%, 87% { translate: -1px 0; }
  25%, 50%, 75% { translate: 1px 0; }
}

@keyframes m-dizzy {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  25% { rotate: 1.6deg; translate: 2px -1px; }
  50% { rotate: -1.6deg; translate: -2px 0; }
  75% { rotate: 0.8deg; translate: 1px -0.5px; }
}

@keyframes m-doze {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  55%, 64% { translate: 0 4px; rotate: 1.2deg; }
  74% { translate: 0 -3px; rotate: -0.4deg; }
  86% { translate: 0 0; rotate: 0deg; }
}

/* Asleep (mascot.js .is-asleep): head drooped a little to one side, rising
   and settling with slow breaths. Eases in from upright so it never jumps. */
html.atelier .atelier-mascot.is-asleep :is(.atelier-mascot-layer, .atelier-mascot-blush) {
  animation: m-nap-in 1.2s ease-out, m-nap 4.2s ease-in-out 1.2s infinite;
}

html.atelier .atelier-mascot.is-asleep .atelier-mascot-burst.is-zzz .atelier-mascot-mark {
  font-size: 1.8rem;
  animation-duration: 2.8s;
}

@keyframes m-nap-in {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 2.5px; rotate: 1.4deg; }
}

@keyframes m-nap {
  0%, 100% { translate: 0 2.5px; rotate: 1.4deg; }
  45% { translate: 0 0.5px; rotate: 0.9deg; }
}

@keyframes m-sneeze {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  45% { translate: 0 -3px; rotate: -1deg; }
  55% { translate: 0 4px; rotate: 0.6deg; }
  72% { translate: 0 -0.5px; rotate: 0deg; }
}

@keyframes m-stretch {
  0%, 100% { translate: 0 0; }
  35%, 62% { translate: 0 -4px; }
}
  75% { translate: 0 1px; scale: 1.01 0.99; }
}

@media (max-width: 760px) {
  html.atelier .atelier-mascot-mark {
    width: 1.2rem;
    margin-left: -0.6rem;
    font-size: 1.15rem;
  }

  html.atelier .atelier-mascot-burst.is-bulb .atelier-mascot-mark {
    width: 1.6rem;
    margin-left: -0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-mascot-blush {
    transform: none;
  }

  html.atelier .atelier-mascot.is-blushing .atelier-mascot-blush {
    animation: none;
  }
}

@media (max-width: 760px) {
  html.atelier .atelier-mascot {
    max-width: 220px;
    height: 270px;
    margin: 0 auto;
  }
}

/* Without JavaScript the first layer shows the centre direction frame and the
   second stays hidden. mascot.js then treats both as interchangeable layers
   and swaps the sheet on each with .is-look / .is-react, cross-fading between
   them; it owns their opacity from then on. There is no breathing animation:
   scaling the picture continuously kept it permanently resampled and soft. */
html.atelier .atelier-mascot-look,
html.atelier .atelier-mascot-layer.is-look {
  background-image: var(--mascot-look);
}

/* Phones get a lighter copy of the direction sheet: the mascot is drawn at
   about 240px there, so the full-size cells are wasted bytes on slow links. */
html.atelier {
  --mascot-look: url('mascots/deepika-directions.webp?v=20261201');
}

@media (max-width: 760px) {
  html.atelier {
    --mascot-look: url('mascots/deepika-directions-sm.webp?v=20261201');
  }
}

/* The reaction sheet and face masks are only needed once she reacts, so they
   stay off the first-paint path: mascot.js fetches the sheet after the page
   has loaded (it reads the URL from --mascot-react) and sets .has-reactions
   on <html> once it has decoded. */
html.atelier {
  --mascot-react: url('mascots/deepika-reactions.webp?v=20261201');
}

/* mascot.js uses the second layer for direction frames too (.is-look), and
   then it must keep the direction sheet: this rule comes later in the file
   with the same specificity, so without :not(.is-look) it painted reaction
   cells (cell 0 is the closed-eyes blink) in place of where she looks. */
html.atelier.has-reactions .atelier-mascot-react:not(.is-look),
html.atelier.has-reactions .atelier-mascot-layer.is-react {
  background-image: var(--mascot-react);
}

/* Closed lids for every direction frame, for blinking while turned. mascot.js
   sweeps --lid-y down over the eyes and back, a soft-edged lid falling and
   lifting. */
@property --lid-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

html.atelier.has-reactions .atelier-mascot-lids {
  background-image: url('mascots/deepika-blinks.webp?v=20261201');
}

html.atelier .atelier-mascot-lids {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--lid-y) - 1.4%), transparent calc(var(--lid-y) + 0.6%));
  mask-image: linear-gradient(to bottom, #000 calc(var(--lid-y) - 1.4%), transparent calc(var(--lid-y) + 0.6%));
}

/* Swinging earrings (tools/build-earrings.mjs). Inside each body layer a
   cover paints the drawn earrings out and two drops hang in their place,
   turned about the stud by --ear-a / --ear-b. mascot.js places them per
   frame and sets .has-earrings once both sheets have decoded; reaction
   frames draw their own earrings, so they show on direction frames only. */
html.atelier .atelier-mascot-ear {
  display: none;
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
}

html.atelier .atelier-mascot.has-earrings .atelier-mascot-layer.is-look > .atelier-mascot-ear {
  display: block;
}

html.atelier .atelier-mascot-ear.is-cover {
  inset: 0;
  background-image: url('mascots/deepika-earcover.webp?v=20261201');
  background-size: 300% 300%;
}

html.atelier .atelier-mascot-ear.is-drop {
  background-image: url('mascots/deepika-eardrops.webp?v=20261201');
}

html.atelier .atelier-mascot-ear.is-left {
  transform: rotate(var(--ear-a, 0deg));
}

html.atelier .atelier-mascot-ear.is-right {
  transform: rotate(var(--ear-b, 0deg));
}

html.atelier .atelier-mascot-react {
  opacity: 0;
}

/* Expressions: the reaction sheet seen only through the inside of her face,
   from the brows down to just above the chin, kept clear of every outline.
   tools/build-mascot.mjs traces one mask per reaction from the faces
   themselves, in the same 3x3 layout as the sheet, and mascot.js moves the
   mask with the frame. Her hair, jaw and outline always come from the frame
   underneath; an oval reached the jaw and showed a second chin. */
html.atelier.has-reactions .atelier-mascot-face {
  -webkit-mask-image: url('mascots/deepika-face-mask.png?v=20261201');
  mask-image: url('mascots/deepika-face-mask.png?v=20261201');
}

/* The second reaction sheet (love, laugh, sleepy…), fetched after the first;
   mascot.js marks its cells .is-react2. */
html.atelier {
  --mascot-react-2: url('mascots/deepika-reactions-2.webp?v=20261201');
}

html.atelier.has-reactions-2 .atelier-mascot-layer.is-react2 {
  background-image: var(--mascot-react-2);
}

html.atelier.has-reactions-2 .atelier-mascot-face.is-react2 {
  -webkit-mask-image: url('mascots/deepika-face-mask-2.png?v=20261201');
  mask-image: url('mascots/deepika-face-mask-2.png?v=20261201');
}

/* The third: pleading, teary, a cute guilt trip (.is-react3). */
html.atelier {
  --mascot-react-3: url('mascots/deepika-reactions-3.webp?v=20261201');
}

html.atelier.has-reactions-3 .atelier-mascot-layer.is-react3 {
  background-image: var(--mascot-react-3);
}

html.atelier.has-reactions-3 .atelier-mascot-face.is-react3 {
  -webkit-mask-image: url('mascots/deepika-face-mask-3.png?v=20261201');
  mask-image: url('mascots/deepika-face-mask-3.png?v=20261201');
}

html.atelier .atelier-mascot-face {
  opacity: 0;
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The SVG filter mascot.js injects; it displaces only the side hair. It goes
   on the body layers, not her box: on the box it also took in the thought
   cloud and the hearts and marks, which reach past it, and the filter region
   (10% beyond the box) sliced the cloud in two with the outer part shifted.
   The face and lids sit inside her face, where the breeze never reaches. */
html.atelier .atelier-mascot.is-breezy .atelier-mascot-layer:not(.atelier-mascot-face, .atelier-mascot-lids) {
  filter: url(#mascot-breeze);
}

/* What she says when poked repeatedly: a thought cloud that grows out from
   above her head with a gentle overshoot, its trail of puffs popping first,
   its words drifting in one by one, and floats up and away when she is done.
   mascot.js draws the cloud's outline around each line. Never a pop-up. */
html.atelier .atelier-mascot-bubble {
  position: absolute;
  z-index: 6;
  top: 6%;
  left: 66%;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  width: max-content;
  max-width: 14rem;
  pointer-events: none;
  opacity: 0;
  transform: translate(-10px, 12px) scale(0.8) rotate(-4deg);
  transform-origin: 0% 100%;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.34, 1.5, 0.5, 1);
}

html.atelier .atelier-mascot-bubble.is-in {
  opacity: 1;
  transform: none;
}

html.atelier .atelier-mascot-bubble.is-out {
  opacity: 0;
  transform: translate(6px, -14px) scale(0.96) rotate(1.5deg);
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

html.atelier .atelier-mascot-bubble.is-in.is-swap {
  opacity: 0;
  transform: translate(-4px, 6px) scale(0.9) rotate(-2deg);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}

html.atelier .atelier-mascot-cloud {
  position: relative;
  display: block;
  padding: 0.7rem 1.25rem 0.75rem;
}

html.atelier .atelier-mascot-bubble.is-in .atelier-mascot-cloud {
  animation: atelier-mascot-float 3.4s ease-in-out 0.7s infinite;
}

@keyframes atelier-mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

html.atelier .atelier-mascot-cloud-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

html.atelier .atelier-mascot-cloud-shade {
  fill: var(--ink);
  opacity: 0.9;
  transform: translate(2.5px, 3.5px);
}

html.atelier .atelier-mascot-cloud-line {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

html.atelier .atelier-mascot-bubble-text {
  position: relative;
}

/* The puff nearest her pops first, then the next, then the cloud settles. */
html.atelier .atelier-mascot-puff {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.7, 0.5, 1);
}

html.atelier .atelier-mascot-bubble.is-in .atelier-mascot-puff {
  transform: none;
}

html.atelier .atelier-mascot-bubble.is-in .atelier-mascot-puff.is-near {
  transition-delay: 0.08s;
}

html.atelier .atelier-mascot-word {
  display: inline-block;
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease;
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}

html.atelier .atelier-mascot-word.is-pre {
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(3px);
  transition: none;
}

@media (max-width: 760px) {
  html.atelier .atelier-mascot-bubble {
    top: -4%;
    left: auto;
    right: -0.5rem;
    width: max-content;
    max-width: 12.75rem;
    white-space: normal;
    transform-origin: 100% 100%;
  }

  html.atelier .home-mascot {
    width: 240px;
  }

  html.atelier .home-mascot .atelier-mascot {
    --cloud-tail: left;
    max-width: 240px;
    height: 282px;
  }

  html.atelier .home-mascot .atelier-mascot-bubble {
    right: -0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-mascot-bubble,
  html.atelier .atelier-mascot-bubble.is-out {
    transition: opacity 0.2s linear;
    transform: none;
  }

  html.atelier .atelier-mascot-word,
  html.atelier .atelier-mascot-word.is-pre {
    transform: none;
    filter: none;
    transition: opacity 0.2s linear;
  }

  html.atelier .atelier-mascot-bubble.is-in .atelier-mascot-cloud {
    animation: none;
  }

  html.atelier .atelier-mascot-puff {
    transform: none;
    transition: none;
  }
}

html.atelier .atelier-about-frame figcaption {
  margin-top: 1rem;
  padding-left: 0.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
}

html.atelier .atelier-about-index {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  max-width: 340px;
}

html.atelier .atelier-about-index li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

html.atelier .atelier-about-index li:last-child {
  border-bottom: 1px solid var(--line);
}

html.atelier .atelier-about-index li > span:first-child {
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
}

html.atelier .atelier-about-index li > span:last-child {
  flex: 0 1 auto;
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

html.atelier h2.about-title.atelier-do-lead,
html.atelier h2.skills-title.atelier-do-lead,
html.atelier h2.certifications-title.atelier-do-lead,
html.atelier h2.education-title.atelier-do-lead,
html.atelier h2.experience-title.atelier-do-lead,
html.atelier h2.fun-facts-title.atelier-do-lead,
html.atelier h2.contact-title.atelier-do-lead {
  left: auto !important;
  transform: none !important;
  display: block !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 560;
  max-width: 40rem;
  margin: 0 0 2.5rem !important;
}

html.atelier .atelier-skills {
  display: grid;
  grid-template-columns: minmax(15rem, 0.82fr) minmax(0, 1.35fr);
  gap: 2.6rem 3.4rem;
  align-items: start;
}

html.atelier .atelier-skills-intro {
  position: sticky;
  top: 5.5rem;
  padding-top: 0.2rem;
}

html.atelier .atelier-skills-intro .skills-title {
  position: static !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  max-width: 9.2em;
  margin: 0 0 1.25rem !important;
  font-size: clamp(2.15rem, 4.6vw, 3.45rem) !important;
  line-height: 1.05 !important;
  font-weight: 600;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
}

html.atelier .atelier-skills-blurb {
  margin: 0;
  max-width: 21rem;
  padding-left: 1.05rem;
  border-left: 2px solid var(--accent);
  color: var(--muted) !important;
  font-size: 1.02rem;
  line-height: 1.65;
}

html.atelier .atelier-skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

html.atelier .atelier-skill-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 1.2rem;
  padding: 1.35rem 1.3rem 1.4rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html.atelier .atelier-skill-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 8px 0 var(--ink);
  border-color: var(--ink);
}

html.atelier .atelier-skill-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin: 0 0 1rem;
  border: 1.5px solid var(--line);
  border-radius: 0.8rem;
  background: var(--paper);
  color: var(--ink);
}

html.atelier .atelier-skill-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

html.atelier .atelier-skill-card h3 {
  margin: 0 0 0.9rem;
  font-size: 1.32rem !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  letter-spacing: -0.03em;
}

html.atelier .atelier-skill-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--line);
}

html.atelier .atelier-skill-tags li {
  margin: 0;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted) !important;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  font-family: var(--sans);
}

@media (max-width: 860px) {
  html.atelier .atelier-skills {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  html.atelier .atelier-skills-intro {
    position: static;
  }
}

@media (max-width: 620px) {
  html.atelier .atelier-skills-grid {
    grid-template-columns: 1fr;
  }
}

html.atelier .atelier-cert-gallery {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(14rem, 1fr);
  gap: 1.6rem 2.8rem;
  align-items: start;
  justify-content: start;
}

html.atelier .atelier-cert-pile {
  position: relative;
  aspect-ratio: 16 / 11;
  max-width: 22rem;
  margin: 0 0 0.9rem;
}

html.atelier .atelier-cert-sheet {
  position: absolute;
  inset: 11% 13%;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 0.7rem;
  background: var(--card);
  box-shadow: 7px 9px 0 var(--ink);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .atelier-cert-sheet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

html.atelier .atelier-cert-sheet:nth-child(1) { transform: rotate(-8deg) translate(-14px, 10px); z-index: 1; }
html.atelier .atelier-cert-sheet:nth-child(2) { transform: rotate(7deg) translate(20px, -8px); z-index: 2; }
html.atelier .atelier-cert-sheet:nth-child(3) { transform: rotate(-5deg) translate(10px, 16px); z-index: 3; }
html.atelier .atelier-cert-sheet:nth-child(4) { transform: rotate(4deg) translate(-8px, -6px); z-index: 4; }

html.atelier .atelier-cert-sheet.is-active {
  transform: rotate(-1.4deg) translate(0, 0) scale(1.02);
  z-index: 8;
  box-shadow: 9px 11px 0 var(--ink);
}

/* On touch screens the slivers of the sheets behind are too thin to tap
   reliably; the index below the pile switches certificates there. */
@media (hover: none) {
  html.atelier .atelier-cert-sheet:not(.is-active) {
    pointer-events: none;
  }
}

html.atelier .atelier-cert-caption h3 {
  margin: 0 0 0.45rem;
  font-size: 1.35rem !important;
  color: var(--ink) !important;
  line-height: 1.15;
}

html.atelier .atelier-cert-issuer {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}

html.atelier .atelier-cert-cta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
}

html.atelier .atelier-cert-cta:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

html.atelier .atelier-cert-index {
  display: flex;
  flex-direction: column;
}

html.atelier .atelier-cert-index button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.95rem 0.2rem 0.95rem 0.9rem;
  border: 0;
  border-left: 2px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.18rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

html.atelier .atelier-cert-index button span {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

html.atelier .atelier-cert-index button:hover,
html.atelier .atelier-cert-index button.is-active {
  border-left-color: var(--ink);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

html.atelier .atelier-cert-index button.is-active span {
  color: var(--accent);
}

@media (max-width: 800px) {
  html.atelier .atelier-cert-gallery {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}

html.atelier .atelier-edu {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.8rem 2.4rem;
  align-items: start;
  margin-bottom: 2.2rem;
}

html.atelier .atelier-edu-main h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.6rem, 3vw, 2.15rem) !important;
  color: var(--ink) !important;
  line-height: 1.15;
}

html.atelier .atelier-edu-spec {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  color: var(--accent);
  font-weight: 600;
}

html.atelier .atelier-edu-meta {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

html.atelier .atelier-edu-note {
  margin: 0;
  max-width: 28rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

html.atelier .atelier-edu-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

html.atelier .atelier-edu-stat {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 1.15rem;
  padding: 1.2rem 1.15rem 1.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html.atelier .atelier-edu-stat:hover {
  transform: translateY(-4px);
  box-shadow: 6px 8px 0 var(--ink);
  border-color: var(--ink);
}

html.atelier .atelier-edu-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 560;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

html.atelier .atelier-edu-stat span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

/* The degree's distinction, kept to the meta line: a pen rings "with
   Distinction" as it scrolls in (motion.js cues it), and the line opens the
   certificate in #degree-viewer, which grows out of it (script.js). */
html.atelier .atelier-edu-distinction {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

html.atelier .atelier-edu-distinction-ring {
  position: relative;
  margin-left: 0.45em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08em;
  color: var(--accent);
  white-space: nowrap;
}

html.atelier .atelier-edu-distinction-ring svg {
  position: absolute;
  inset: -0.42em -0.5em -0.38em;
  width: calc(100% + 1em);
  height: calc(100% + 0.8em);
  overflow: visible;
  pointer-events: none;
}

html.atelier .atelier-edu-distinction-hint {
  margin-left: 0.85em;
  font-size: 0.82em;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}

html.atelier .atelier-edu-distinction:hover .atelier-edu-distinction-hint,
html.atelier .atelier-edu-distinction:focus-visible .atelier-edu-distinction-hint {
  color: var(--accent);
}

html.atelier .atelier-edu-distinction:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* The pen's ring, here and round the line on the certificate. */
html.atelier .atelier-edu-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

html.atelier .atelier-edu-ring path,
html.atelier .atelier-edu-distinction-ring path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

html.atelier.has-cues .atelier-edu-distinction:not(.is-cued) .atelier-edu-distinction-ring path {
  stroke-dashoffset: 1;
}

html.atelier .atelier-edu-distinction.is-cued .atelier-edu-distinction-ring path {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.6, 0, 0.3, 1) 0.4s;
}

html.atelier .atelier-edu-distinction:hover .atelier-edu-distinction-ring path {
  stroke-width: 2.2;
}

/* The certificate, up close. */
html.atelier.is-dialog-open {
  overflow: hidden;
}

html.atelier .atelier-degree {
  width: min(90vw, 36rem);
  max-width: none;
  max-height: none;
  padding: 1rem 0 0;
  border: 0;
  background: none;
  overflow: visible;
}

html.atelier .atelier-degree[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

html.atelier .atelier-degree::backdrop {
  background: rgba(22, 17, 12, 0.6);
  backdrop-filter: blur(6px);
  animation: degree-dim 0.4s ease both;
}

html.atelier .atelier-degree.is-closing::backdrop {
  animation: degree-undim 0.4s ease both;
}

@keyframes degree-dim {
  from { opacity: 0; }
}

@keyframes degree-undim {
  to { opacity: 0; }
}

html.atelier .atelier-degree-sheet {
  position: relative;
  display: block;
  width: min(100%, calc((100vh - 11rem) * 886 / 878));
  width: min(100%, calc((100dvh - 11rem) * 886 / 878));
  margin: 0;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: #fff;
  box-shadow: 8px 10px 0 var(--ink);
}

html.atelier .atelier-degree-sheet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

html.atelier .atelier-degree-sheet .atelier-edu-ring path {
  stroke-width: 3;
  stroke-dashoffset: 1;
}

html.atelier .atelier-degree.is-shown .atelier-degree-sheet .atelier-edu-ring path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.6, 0, 0.3, 1) 0.1s;
}

html.atelier .atelier-degree-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem 1.2rem;
  text-align: center;
}

html.atelier .atelier-degree-caption {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 250, 243, 0.78);
}

html.atelier .atelier-degree-caption em {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: #fffaf3;
}

html.atelier .atelier-degree-done {
  padding: 0.55rem 1.15rem;
  border: 1.5px solid #fffaf3;
  border-radius: 999px;
  background: transparent;
  color: #fffaf3;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

html.atelier .atelier-degree-done:hover,
html.atelier .atelier-degree-done:focus-visible {
  background: #fffaf3;
  color: #1a1713;
  outline: none;
}

html.atelier .atelier-degree-close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1.5px solid #1a1713;
  border-radius: 50%;
  background: #fffaf3;
  color: #1a1713;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
}

html.atelier .atelier-degree-close:hover,
html.atelier .atelier-degree-close:focus-visible {
  transform: rotate(90deg);
}

@media (max-width: 520px) {
  html.atelier .atelier-edu-meta-dot {
    display: none;
  }

  html.atelier .atelier-edu-distinction {
    display: block;
    margin-top: 0.45rem;
  }

  html.atelier .atelier-degree-close {
    right: -0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-degree::backdrop,
  html.atelier .atelier-degree.is-closing::backdrop {
    animation: none;
  }
}

html.atelier .atelier-edu-course-label {
  margin: 0 0 0.75rem;
  font-family: var(--sans) !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent) !important;
}

html.atelier .atelier-edu-courses {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 1.4rem;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
}

html.atelier .atelier-edu-courses li {
  margin: 0;
  padding: 0.15rem 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}

@media (max-width: 800px) {
  html.atelier .atelier-edu {
    grid-template-columns: 1fr;
  }

  html.atelier .atelier-edu-courses {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  html.atelier .atelier-edu-stats,
  html.atelier .atelier-edu-courses {
    grid-template-columns: 1fr;
  }
}

html.atelier .atelier-exp {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

html.atelier .atelier-exp-item {
  border-top: 1px solid var(--line);
}

html.atelier .atelier-exp-item:last-child {
  border-bottom: 1px solid var(--line);
}

html.atelier .atelier-exp-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 1.15rem 0.15rem;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

html.atelier .atelier-exp-year {
  flex: 0 0 4.2rem;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}

html.atelier .atelier-exp-role {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

html.atelier .atelier-exp-leader {
  flex: 1 1 auto;
  min-width: 2.2rem;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 28%, transparent);
  transform: translateY(-0.28rem);
}

html.atelier .atelier-exp-co {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

html.atelier .atelier-exp-toggle {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.15rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  position: relative;
}

html.atelier .atelier-exp-toggle::before,
html.atelier .atelier-exp-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

html.atelier .atelier-exp-toggle::before {
  width: 8px;
  height: 1.5px;
}

html.atelier .atelier-exp-toggle::after {
  width: 1.5px;
  height: 8px;
}

html.atelier .atelier-exp-item.is-open .atelier-exp-toggle {
  border-color: var(--ink);
  background: var(--ink);
}

html.atelier .atelier-exp-item.is-open .atelier-exp-toggle::before,
html.atelier .atelier-exp-item.is-open .atelier-exp-toggle::after {
  background: var(--paper);
}

html.atelier .atelier-exp-item.is-open .atelier-exp-toggle::after {
  display: none;
}

html.atelier .atelier-exp-row:hover .atelier-exp-role,
html.atelier .atelier-exp-item.is-open .atelier-exp-role {
  color: var(--accent);
}

html.atelier .atelier-exp-item.is-open .atelier-exp-co {
  color: var(--ink);
}

html.atelier .atelier-exp-paper {
  display: none;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 1.15rem;
  padding: 1.35rem 1.4rem 1.45rem;
  margin: 0 0 1.15rem;
  position: relative;
  overflow: hidden;
}

html.atelier .atelier-exp-item.is-open .atelier-exp-paper {
  display: block;
  box-shadow: 6px 8px 0 var(--ink);
  border-color: var(--ink);
}

html.atelier .atelier-exp-paper::before {
  content: attr(data-year);
  position: absolute;
  right: 0.7rem;
  top: -0.35rem;
  font-family: var(--serif);
  font-size: clamp(4rem, 8vw, 6.2rem);
  font-weight: 560;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--ink);
  opacity: 0.06;
  pointer-events: none;
}

html.atelier .atelier-exp-period {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

html.atelier .atelier-exp-hook {
  margin: 0 0 0.85rem;
  max-width: 36rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 560;
  font-style: normal;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

html.atelier .atelier-exp-summary {
  margin: 0 0 1.1rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

html.atelier .atelier-exp-body ul {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0 0;
  border-top: 1px solid var(--line);
}

html.atelier .atelier-exp-body li {
  margin: 0;
  padding: 0.7rem 0 0.7rem 1.05rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
  position: relative;
}

html.atelier .atelier-exp-body li:last-child {
  border-bottom: 0;
}

html.atelier .atelier-exp-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

html.atelier .atelier-exp-body strong {
  font-weight: 650;
  color: var(--ink);
}

html.atelier .atelier-exp-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.05rem 0 0;
  padding: 0;
}

html.atelier .atelier-exp-tags li {
  margin: 0;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

@media (max-width: 720px) {
  html.atelier .atelier-exp-row {
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    padding: 1rem 0.1rem;
  }

  html.atelier .atelier-exp-year {
    flex-basis: 100%;
    font-size: 1.2rem;
  }

  html.atelier .atelier-exp-leader {
    display: none;
  }

  html.atelier .atelier-exp-role {
    flex: 1 1 auto;
  }
}

html.atelier .atelier-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

html.atelier .atelier-note {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 1.15rem;
  padding: 1.35rem 1.35rem 1.5rem;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html.atelier .atelier-note--wide {
  grid-column: span 2;
}

html.atelier .atelier-note:hover {
  transform: translateY(-4px);
  box-shadow: 6px 8px 0 var(--ink);
  border-color: var(--ink);
}

html.atelier .atelier-note-kicker {
  display: block;
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

html.atelier .atelier-note-kicker::after {
  content: '';
  display: block;
  width: 1.35rem;
  height: 1.5px;
  background: var(--ink);
  margin-top: 0.55rem;
  opacity: 0.22;
}

html.atelier .atelier-note h3 {
  margin: 0 0 0.7rem;
  font-family: var(--serif) !important;
  font-size: 1.4rem !important;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-align: left !important;
}

html.atelier .atelier-note--wide h3 {
  font-size: clamp(1.65rem, 3vw, 2.1rem) !important;
}

html.atelier .atelier-note p {
  margin: 0;
  max-width: 36rem;
  color: var(--muted) !important;
  font-size: 0.98rem;
  line-height: 1.6;
  text-align: left !important;
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  line-clamp: none !important;
}

@media (max-width: 800px) {
  html.atelier .atelier-notes {
    grid-template-columns: 1fr 1fr;
  }

  html.atelier .atelier-note,
  html.atelier .atelier-note--wide {
    grid-column: auto;
    min-height: 0;
  }
}

@media (max-width: 560px) {
  html.atelier .atelier-notes {
    grid-template-columns: 1fr;
  }
}

html.atelier .atelier-writing {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
  gap: 3rem 4rem;
  align-items: start;
}

html.atelier .atelier-writing .writing-title {
  margin: 0 0 1.15rem !important;
}

html.atelier .atelier-writing-lede {
  margin: 0;
  max-width: 28rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted);
}

html.atelier .atelier-essay {
  position: relative;
  display: block;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 1.15rem;
  padding: 1.7rem 1.65rem 1.55rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 8px 10px 0 var(--ink);
  transform: rotate(1.4deg);
  transform-origin: center center;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
}

html.atelier .atelier-essay:hover,
html.atelier .atelier-essay:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 10px 14px 0 var(--ink);
}

html.atelier .atelier-essay:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

html.atelier .atelier-essay-num {
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
  opacity: 0.1;
  pointer-events: none;
}

/* Drawn from an attribute: it's a watermark, not text to read. */
html.atelier .atelier-essay-num::before {
  content: attr(data-num);
}

html.atelier .atelier-essay-meta {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  padding-right: 3.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

html.atelier .atelier-essay-leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 28%, transparent);
  transform: translateY(-0.22rem);
}

html.atelier .atelier-essay h3 {
  margin: 0 0 0.85rem;
  max-width: 18ch;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

html.atelier .atelier-essay-pull {
  margin: 0 0 1rem;
  max-width: 28rem;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--spin);
}

html.atelier .atelier-essay-excerpt {
  margin: 0 0 1.4rem;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--muted);
}

html.atelier .atelier-essay-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  padding: 0.62rem 1.15rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  background: transparent;
}

html.atelier .atelier-essay:hover .atelier-essay-cta,
html.atelier .atelier-essay:focus-visible .atelier-essay-cta {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 900px) {
  html.atelier .atelier-writing {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  html.atelier .atelier-essay {
    transform: none;
  }

  html.atelier .atelier-essay:hover,
  html.atelier .atelier-essay:focus-visible {
    transform: translateY(-4px);
  }

  html.atelier .atelier-writing-lede {
    max-width: none;
  }
}

html.atelier main .section:not(.home-section) {
  padding-top: 4.5rem;
  padding-bottom: 3.5rem;
}

html.atelier h2.about-title,
html.atelier h2.skills-title,
html.atelier h2.projects-title,
html.atelier h2.education-title,
html.atelier h2.experience-title,
html.atelier h2.contact-title,
html.atelier .fun-facts-title,
html.atelier .writing-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
  text-align: left !important;
  margin-bottom: 0.6rem !important;
}

html.atelier .projects-subtitle {
  text-align: left !important;
  margin-left: 0 !important;
  color: var(--muted) !important;
  max-width: 40rem;
}

html.atelier .project-category,
html.atelier .case-study-title {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
}

html.atelier .contact-section {
  background: transparent !important;
  color: var(--ink) !important;
  border-radius: 0;
  margin: 0 auto;
  width: auto;
  padding-top: 4.5rem;
  padding-bottom: 3.5rem;
}

html.atelier .contact-title {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

html.atelier .atelier-contact {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 2.4rem 3rem;
  align-items: start;
}

html.atelier .atelier-contact-copy > p:not(.atelier-contact-status) {
  margin: 0 0 1.6rem;
  max-width: 28rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

html.atelier .atelier-contact-status {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.28rem 0.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

html.atelier .atelier-contact-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

html.atelier .atelier-contact-links a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 0.05rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}

html.atelier .atelier-contact-links a > span:first-child {
  flex: 0 0 auto;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent);
}

html.atelier .atelier-contact-leader {
  flex: 1 1 auto;
  min-width: 1.4rem;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 28%, transparent);
  transform: translateY(-0.22rem);
}

html.atelier .atelier-contact-links a > span:last-child {
  color: var(--muted);
  font-size: 0.9rem;
}

html.atelier .atelier-contact-links a:hover > span:last-child {
  color: var(--ink);
}

html.atelier .atelier-contact-form {
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 1.15rem;
  padding: 1.45rem 1.45rem 1.5rem;
  max-width: none;
  width: 100%;
  box-shadow: 6px 8px 0 var(--ink);
  transition: none;
}

html.atelier .atelier-contact-form h3 {
  margin: 0 0 1.1rem;
  font-family: var(--serif) !important;
  font-size: 1.55rem !important;
  font-weight: 560;
  letter-spacing: -0.03em;
  color: var(--ink) !important;
}

html.atelier .atelier-contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

html.atelier .atelier-contact-form .form-group {
  margin-bottom: 0.9rem;
}

html.atelier .atelier-contact-form label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

html.atelier .contact-section input,
html.atelier .contact-section textarea {
  width: 100%;
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 0.85rem;
  padding: 0.72rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  box-shadow: none !important;
  outline: none !important;
}

html.atelier .contact-section input::placeholder,
html.atelier .contact-section textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

html.atelier .contact-section input:focus,
html.atelier .contact-section textarea:focus {
  outline: none !important;
  border-color: var(--ink) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

html.atelier .contact-section textarea {
  min-height: 8.5rem;
  max-height: none !important;
  resize: vertical;
}

html.atelier .contact-section .btn,
html.atelier .contact-section button[type="submit"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 0.78rem 1.35rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

html.atelier .contact-section button[type="submit"]:hover {
  transform: translateY(-1px);
}

html.atelier .contact-section .success-message,
html.atelier .contact-section .pending-message,
html.atelier .contact-section .error-message {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

html.atelier .contact-section .pending-message {
  border: 1.5px dashed var(--line);
  color: var(--muted);
}

/* Off screen rather than display:none, which form bots know to skip. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html.atelier .contact-section .success-message {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--ink);
}

html.atelier .contact-section .error-message {
  border: 1.5px solid var(--line);
  color: var(--ink);
}

html.atelier .contact-section .error-message a {
  color: var(--accent);
}

@media (max-width: 800px) {
  html.atelier .atelier-contact {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  html.atelier .atelier-contact-form .form-row {
    grid-template-columns: 1fr;
  }

  html.atelier .atelier-contact-leader {
    display: none;
  }
}

html.atelier .footer-section,
html.atelier .atelier-footer {
  background: transparent !important;
  color: var(--ink) !important;
  border-top: 1.5px solid var(--line);
  margin-top: 1.5rem;
  padding: 3rem 0 1.5rem !important;
}

html.atelier .atelier-footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.7fr 0.7fr 0.85fr;
  gap: 2rem 1.6rem;
  align-items: start;
}

html.atelier .atelier-footer-logo {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

html.atelier .atelier-footer-brand p {
  margin: 0.85rem 0 0;
  max-width: 22rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

html.atelier .atelier-footer-label {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

html.atelier .atelier-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

html.atelier .atelier-footer li {
  margin: 0 0 0.42rem;
}

html.atelier .atelier-footer a {
  color: var(--ink) !important;
  text-decoration: none;
  font-size: 0.95rem;
}

html.atelier .atelier-footer .logo-brace {
  color: var(--accent) !important;
}

html.atelier .atelier-footer a:hover {
  color: var(--accent) !important;
}

html.atelier .atelier-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--muted) !important;
  font-size: 0.88rem;
}

html.atelier .atelier-footer-bottom p {
  margin: 0;
  color: var(--muted) !important;
}

html.atelier .atelier-footer-bottom a {
  color: var(--muted) !important;
}

html.atelier .atelier-footer-bottom a:hover {
  color: var(--ink) !important;
}

@media (max-width: 760px) {
  html.atelier .atelier-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  html.atelier .atelier-footer-brand {
    grid-column: 1 / -1;
  }

  html.atelier .atelier-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

html.atelier .scroll-top-btn {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

html.atelier .story-btn-hint {
  font-family: var(--sans);
  color: var(--ink) !important;
  background: var(--card) !important;
  background-image: none !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 1rem !important;
  box-shadow: 5px 6px 0 var(--ink) !important;
  padding: 0.7rem 0.95rem 0.75rem !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  max-width: min(220px, 78vw);
  transform: translateX(-50%) translateY(10px);
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s;
}

html.atelier .story-btn-hint-kicker {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

html.atelier .scroll-progress {
  background: var(--accent) !important;
  height: 2px;
}

html.atelier .story-btn-hint::after {
  background: var(--card) !important;
  border-right: 1.5px solid var(--ink) !important;
  border-bottom: 1.5px solid var(--ink) !important;
}

html.atelier .story-btn-wrap:hover .story-btn-hint,
html.atelier .story-btn-wrap:focus-within .story-btn-hint {
  transform: translateX(-50%) translateY(0);
}

html.atelier .story-btn-wrap:hover .story-btn,
html.atelier .story-btn-wrap:focus-within .story-btn {
  box-shadow: none !important;
}

html.atelier .navbar-container {
  max-width: min(96vw, 1280px) !important;
  gap: 0.75rem;
}

html.atelier .nav-links {
  flex-wrap: wrap;
  row-gap: 0.2rem;
}

html.atelier .dropdown-content {
  background: var(--card) !important;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: 6px 8px 0 var(--ink);
}

html.atelier .dropdown-content a {
  color: var(--ink) !important;
}

html.atelier .dropdown-content a:hover,
html.atelier .dropdown-content a:focus-visible {
  background: var(--paper) !important;
}

html.atelier .theme-toggle-btn {
  background: var(--card) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink) !important;
}

html.atelier .menu-icon,
html.atelier .menu-icon::before,
html.atelier .menu-icon::after {
  background: var(--ink) !important;
}

html.atelier .skills-section,
html.atelier .experience-section,
html.atelier .fun-facts-section,
html.atelier .writing-section,
html.atelier .certifications-section,
html.atelier .education-section,
html.atelier .about-section,
html.atelier .case-studies-section,
html.atelier .contact-section {
  background: transparent !important;
  overflow: visible !important;
}

html.atelier .case-studies-section,
html.atelier .projects-section,
html.atelier .skills-section,
html.atelier .education-section,
html.atelier .fun-facts-section,
html.atelier .contact-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

html.atelier .skills-section::before,
html.atelier .skills-section::after {
  display: none !important;
}

html.atelier .project-title,
html.atelier .certifications-title,
html.atelier .experience-title,
html.atelier .fun-facts-title,
html.atelier .writing-title,
html.atelier .contact-title,
html.atelier .skills-title {
  font-family: var(--serif) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
}

html.atelier .project-card {
  overflow: visible !important;
  height: auto !important;
}

html.atelier .project-desc,
html.atelier .project-desc ul,
html.atelier .project-desc li {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  -webkit-line-clamp: unset !important;
  line-clamp: none !important;
  color: var(--muted) !important;
  max-height: none !important;
}

html.atelier .atelier-note {
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-cert-sheet,
  html.atelier .atelier-cert-sheet.is-active {
    transform: none !important;
  }

  html.atelier .home-photo,
  html.atelier .atelier-about-photo,
  html.atelier .atelier-essay {
    transition: none !important;
  }

  html.atelier .atelier-essay,
  html.atelier .atelier-essay:hover,
  html.atelier .atelier-essay:focus-visible {
    transform: none !important;
  }

  html.atelier .home-photo:hover {
    transform: rotate(-3.5deg) !important;
  }

  html.atelier .atelier-about-frame:hover .atelier-about-photo {
    transform: rotate(2.5deg) !important;
  }
}

@media (max-width: 900px) {
  html.atelier .atelier-about {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "side";
    gap: 2.2rem;
  }

  html.atelier .atelier-about-side {
    position: static;
    max-width: 22rem;
  }

  html.atelier .story-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  html.atelier .home-photo {
    width: 240px !important;
    height: 300px !important;
  }

  html.atelier .home-title {
    font-size: clamp(2.7rem, 8vw, 3.8rem) !important;
  }

  html.atelier h2.about-title,
  html.atelier h2.projects-title,
  html.atelier h2.contact-title {
    text-align: left !important;
  }
}

/* —— Unify leftover old-portfolio cards to atelier —— */
html.atelier .project-card,
html.atelier .interactive-card {
  background: var(--card) !important;
  background-image: none !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 1.15rem !important;
  box-shadow: none !important;
  padding: 1.35rem 1.3rem 1.4rem !important;
}

html.atelier .project-card:nth-child(n):hover,
html.atelier .interactive-card:nth-child(n):hover {
  background: var(--card) !important;
  background-image: none !important;
  transform: translateY(-4px) !important;
  box-shadow: 7px 9px 0 var(--ink) !important;
  border-color: var(--ink) !important;
  filter: none !important;
}

html.atelier .interactive-card .project-front {
  transform: none !important;
}

html.atelier .interactive-card .project-actions {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0.85rem 0 0 !important;
  color: var(--ink) !important;
}

html.atelier .project-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start !important;
}

html.atelier .project-btn {
  border: 1.5px solid var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
  padding: 0.42rem 0.95rem !important;
  font-family: var(--sans) !important;
  font-size: 0.82rem !important;
  box-shadow: none !important;
}

html.atelier .project-btn:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  text-decoration: none !important;
}

html.atelier .interactive-card::after,
html.atelier .project-card::before,
html.atelier .project-card::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

html.atelier .project-category,
html.atelier .project-tag {
  background: var(--paper) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 0.2rem 0.65rem !important;
  font-size: 0.72rem !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

html.atelier .projects-cards-row {
  gap: 1.1rem !important;
}

html.atelier .case-studies-section::before,
html.atelier .case-studies-section::after,
html.atelier .projects-section::before,
html.atelier .projects-section {
  background: transparent !important;
}

/* The legacy glow reaches up over About's cards and would swallow their hover. */
html.atelier .case-studies-section::before,
html.atelier .case-studies-section::after,
html.atelier .projects-section::before {
  pointer-events: none;
}

html.atelier body.dark-theme .skills-section,
html.atelier body.dark-theme .case-studies-section,
html.atelier body.dark-theme .projects-section,
html.atelier body.dark-theme .fun-facts-section,
html.atelier body.dark-theme .experience-section,
html.atelier body.dark-theme .contact-section {
  background: transparent !important;
}

/* Story page — same paper system */
html.atelier .my-story-page,
html.atelier body.my-story-page {
  background: var(--paper) !important;
}

html.atelier .story-hero {
  padding: 4.5rem 0 2.5rem;
}

html.atelier .story-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(14rem, 0.75fr);
  gap: 3.5rem;
  align-items: start;
}

html.atelier .story-hero-title {
  font-family: var(--serif) !important;
  font-size: clamp(2.8rem, 7vw, 5.2rem) !important;
  line-height: 0.94 !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  margin: 0 0 1rem !important;
  max-width: 12ch;
}

html.atelier .story-body {
  padding-bottom: 4.5rem;
  max-width: 46rem;
}

html.atelier .story-chapter {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 2.4rem 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 5.5rem;
}

html.atelier .story-chapter:last-of-type {
  border-bottom: 1px solid var(--line);
}

html.atelier .story-num {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 560;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1.2;
  padding-top: 0.2rem;
}

html.atelier .story-chapter h2 {
  margin: 0 0 0.9rem;
  font-family: var(--serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.05rem) !important;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

html.atelier .story-chapter p {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted);
}

html.atelier .story-chapter p:last-child {
  margin-bottom: 0;
}

html.atelier .story-chapter em {
  font-family: inherit;
  font-style: normal;
  color: var(--spin);
}

html.atelier .story-pull {
  margin: 1.3rem 0 1.1rem;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-style: normal;
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

html.atelier .story-clock {
  font-family: var(--serif) !important;
  font-size: clamp(2.6rem, 8vw, 4.2rem) !important;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
  margin: 0 0 1rem !important;
}

html.atelier .story-close-line {
  font-family: var(--serif);
  font-size: 1.35rem !important;
  font-style: normal;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

html.atelier .story-pull-tag {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}

html.atelier .story-emphasis {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

html.atelier .story-beats {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}

html.atelier .story-beats li {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: normal;
  color: var(--spin);
  padding: 0.15rem 0;
}

html.atelier .story-aside {
  margin: 1.2rem 0 1.4rem;
  padding: 1.2rem 1.25rem 1.15rem;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 1.15rem;
  box-shadow: 6px 8px 0 var(--ink);
}

html.atelier .story-aside p {
  font-size: 0.98rem !important;
}

html.atelier .story-act {
  margin: 1.2rem 0 0.4rem;
  padding: 2rem 0 1.4rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 5.5rem;
}

html.atelier .story-act h2 {
  margin: 0 0 0.9rem;
  font-family: var(--serif) !important;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem) !important;
  font-weight: 560;
  letter-spacing: -0.03em;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

html.atelier .story-act p {
  margin: 0 0 0.8rem;
  max-width: 38rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.05rem;
}

html.atelier .story-clock-label {
  margin: -0.4rem 0 1.1rem !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

html.atelier .story-back {
  display: inline-flex;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

html.atelier .story-back:hover {
  text-decoration: underline;
}

html.atelier .case-studies-section .projects-cards-row,
html.atelier .projects-section .projects-cards-row {
  counter-reset: cs;
  align-items: stretch;
  gap: 1.1rem !important;
}

html.atelier .case-studies-section .project-card,
html.atelier .projects-section .project-card {
  counter-increment: cs;
  position: relative;
  display: flex !important;
  flex-direction: column;
  height: 100% !important;
  min-height: 20.5rem;
  padding: 1.2rem 1.2rem 1.15rem !important;
  cursor: pointer;
}

html.atelier .case-studies-section .project-card::after,
html.atelier .projects-section .project-card::after {
  display: block !important;
  content: counter(cs, decimal-leading-zero) !important;
  position: absolute;
  top: 0.55rem;
  right: 0.85rem;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.12;
  pointer-events: none;
  line-height: 1;
}

html.atelier .case-studies-section .project-front,
html.atelier .projects-section .project-front {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

html.atelier .case-studies-section .project-meta,
html.atelier .projects-section .project-meta {
  padding-right: 2.6rem;
}

html.atelier .case-studies-section .case-study-title,
html.atelier .projects-section .project-title {
  font-size: 1.28rem !important;
  line-height: 1.28 !important;
  margin: 0.55rem 0 0 !important;
  min-height: 2.56em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.atelier .case-studies-section .project-hook,
html.atelier .projects-section .project-hook {
  margin: 0.55rem 0 0.7rem !important;
  color: var(--muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  min-height: 2.9em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

html.atelier .case-studies-section .project-readmore,
html.atelier .projects-section .project-readmore {
  margin: 0 0 0.15rem;
  padding: 0;
  border: 0;
  background: none;
  width: fit-content;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

html.atelier .case-studies-section .project-readmore:hover,
html.atelier .projects-section .project-readmore:hover {
  text-decoration: underline;
}

html.atelier .case-studies-section .project-more-content,
html.atelier .projects-section .project-more-content {
  display: none !important;
}

html.atelier .case-studies-section .project-actions,
html.atelier .projects-section .project-actions {
  padding-top: 0.85rem !important;
  margin-top: auto;
}

html.atelier .case-studies-section .project-buttons,
html.atelier .projects-section .project-buttons {
  min-height: 2.35rem;
  align-items: center;
}

@media (max-width: 900px) {
  html.atelier .case-studies-section .projects-cards-row,
  html.atelier .projects-section .projects-cards-row {
    grid-template-columns: 1fr 1fr;
  }

  html.atelier .case-studies-section .project-card,
  html.atelier .projects-section .project-card {
    min-height: 0;
  }
}

body.work-modal-open {
  overflow: hidden;
}

.work-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
}

.work-modal[hidden] {
  display: none !important;
}

.work-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 14, 12, 0.42);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.work-modal-panel {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(84vh, 740px);
  overflow: auto;
  padding: 2rem 1.85rem 1.6rem;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  animation: workModalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier:has(body.dark-theme) .work-modal-panel,
html.atelier body.dark-theme .work-modal-panel,
body.dark-theme .work-modal-panel {
  background: rgba(28, 24, 20, 0.78);
  border-color: rgba(243, 238, 228, 0.14);
  color: #f3eee4;
}

@keyframes workModalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.work-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

body.dark-theme .work-modal-close {
  border-color: rgba(243, 238, 228, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.work-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-right: 2.4rem;
  margin-bottom: 0.7rem;
}

.work-modal-title {
  margin: 0 0 0.45rem;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.work-modal-hook {
  margin: 0 0 1.1rem;
  color: var(--muted, #6b645b);
  font-size: 1.02rem;
  line-height: 1.5;
}

.work-modal-body ul {
  margin: 0;
  padding-left: 1.1rem;
}

.work-modal-body li {
  margin-bottom: 0.65rem;
  line-height: 1.55;
  color: inherit;
}

.work-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  /* Was rgba(26, 23, 19, 0.1) with a dark-mode twin at 0.12. The 0.02 alpha
     difference between the two looked like an oversight rather than intent,
     so both collapse into the token. */
  border-top: 1px solid var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .work-modal-panel {
    animation: none;
  }
}

html.atelier body.dark-theme h1,
html.atelier body.dark-theme h2,
html.atelier body.dark-theme h3,
html.atelier body.dark-theme h4,
html.atelier body.dark-theme .home-title,
html.atelier body.dark-theme .about-title,
html.atelier body.dark-theme .skills-title,
html.atelier body.dark-theme .projects-title,
html.atelier body.dark-theme .education-title,
html.atelier body.dark-theme .experience-title,
html.atelier body.dark-theme .fun-facts-title,
html.atelier body.dark-theme .writing-title,
html.atelier body.dark-theme .certifications-title,
html.atelier body.dark-theme .contact-title,
html.atelier body.dark-theme .atelier-do-lead,
html.atelier body.dark-theme .case-study-title,
html.atelier body.dark-theme .project-title,
html.atelier body.dark-theme .atelier-skill-card h3,
html.atelier body.dark-theme .atelier-note h3,
html.atelier body.dark-theme .atelier-essay h3,
html.atelier body.dark-theme .atelier-exp-role,
html.atelier body.dark-theme .atelier-edu-main h3 {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
}

html.atelier body.dark-theme .atelier-label,
html.atelier body.dark-theme .home-kicker,
html.atelier body.dark-theme .atelier-note-kicker,
html.atelier body.dark-theme .atelier-edu-spec,
html.atelier body.dark-theme .atelier-edu-course-label,
html.atelier body.dark-theme .atelier-exp-period,
html.atelier body.dark-theme .atelier-contact-status,
html.atelier body.dark-theme .atelier-contact-form label,
html.atelier body.dark-theme .atelier-footer-label {
  color: var(--accent) !important;
}

html.atelier body.dark-theme .atelier-skills-blurb,
html.atelier body.dark-theme .atelier-writing-lede,
html.atelier body.dark-theme .atelier-essay-excerpt,
html.atelier body.dark-theme .atelier-note p,
html.atelier body.dark-theme .atelier-skill-tags li,
html.atelier body.dark-theme .atelier-exp-summary,
html.atelier body.dark-theme .atelier-exp-co,
html.atelier body.dark-theme .atelier-contact-copy > p:not(.atelier-contact-status),
html.atelier body.dark-theme .atelier-contact-links a > span:last-child,
html.atelier body.dark-theme .story-chapter p:not(.story-clock):not(.story-close-line):not(.story-emphasis),
html.atelier body.dark-theme .story-act p,
html.atelier body.dark-theme .story-aside p,
html.atelier body.dark-theme .story-pull-tag,
html.atelier body.dark-theme .story-clock-label,
html.atelier body.dark-theme .home-subtitle,
html.atelier body.dark-theme .atelier-about-lede,
html.atelier body.dark-theme .atelier-about-notes p,
html.atelier body.dark-theme .atelier-about-frame figcaption,
html.atelier body.dark-theme .projects-subtitle,
html.atelier body.dark-theme .atelier-footer-brand p,
html.atelier body.dark-theme .atelier-footer-bottom,
html.atelier body.dark-theme .atelier-footer-bottom p {
  color: var(--muted) !important;
}

html.atelier,
html.atelier body {
  overflow-x: clip;
}

html.atelier .portfolio-lock {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink);
  padding: max(4.2rem, env(safe-area-inset-top)) 1.5rem max(1.5rem, env(safe-area-inset-bottom));
  align-items: flex-start !important;
  overflow-y: auto !important;
}

html.atelier .portfolio-lock .atelier-gate {
  position: relative;
  z-index: 1;
}

html.atelier .lock-scene {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 27rem);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
  margin: auto;
}

/* The porch: a front door with a round window she looks out of, a brass
   plate that takes the visitor's name and a lamp that comes on for them. */
html.atelier .lock-porch {
  --door: #b0501f;
  --door-deep: #8a3c16;
  --brass: #d9a441;
  --light: #ffd98a;
  position: relative;
  width: 15.5rem;
  padding-bottom: 1.6rem;
  animation: lockRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.atelier body.dark-theme .lock-porch {
  --door: #9c4719;
  --door-deep: #6f3010;
}

html.atelier .lock-frame {
  position: relative;
  aspect-ratio: 5 / 8;
  padding: 0.55rem 0.55rem 0;
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(80% 60% at 50% 70%, #fff4d6, var(--light) 45%, color-mix(in srgb, var(--light) 60%, var(--door)) 100%);
  box-shadow: 9px 0 0 var(--ink);
  perspective: 900px;
}

html.atelier .lock-door {
  position: absolute;
  inset: 0.55rem 0.55rem 0;
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 40%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 7px, rgba(255, 255, 255, 0.03) 7px 8px, transparent 8px 13px),
    var(--door);
  box-shadow: inset -12px 0 18px rgba(0, 0, 0, 0.18), inset 6px 0 10px rgba(255, 255, 255, 0.06);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1);
  backface-visibility: hidden;
}

html.atelier .lock-door::before {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 6%;
  height: 32%;
  border: 1.5px solid var(--door-deep);
  border-radius: 0.35rem;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.12), 1px 1px 0 rgba(255, 255, 255, 0.08);
}

html.atelier .lock-window {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% 0;
  overflow: hidden;
  border: 3px solid var(--brass);
  border-radius: 50%;
  background:
    radial-gradient(70% 60% at 50% 45%, #fff1c9, var(--light) 60%, #f0b860);
  box-shadow:
    0 0 0 1.5px var(--ink),
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.12),
    0 0 calc(var(--glow, 0) * 1.6rem) calc(var(--glow, 0) * 0.3rem) rgba(255, 196, 102, 0.55);
  transition: box-shadow 0.4s ease;
}

/* Someone is home, but the door only shows the curtains: the face is kept
   for the hero, so opening the door is the reveal. */
html.atelier .lock-window::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 17%;
  left: 4%;
  right: 4%;
  height: 3px;
  border-radius: 2px;
  background: var(--door-deep);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

html.atelier .lock-bulb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 46%;
  translate: -50% 0;
  background: #3b2a1a;
  transform-origin: 50% 0;
}

html.atelier .lock-bulb::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: max(0.5rem, 26%);
  aspect-ratio: 1;
  translate: -50% -20%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffaf0, #ffe3a3 60%, #f3b75a);
  box-shadow: 0 0 calc(0.5rem + var(--glow, 0) * 1rem) calc(0.15rem + var(--glow, 0) * 0.35rem) rgba(255, 210, 120, 0.75);
  transition: box-shadow 0.4s ease;
}

html.atelier .lock-curtain {
  position: absolute;
  z-index: 1;
  top: 17%;
  bottom: 0;
  left: 0;
  width: 51%;
  border-radius: 0 0 40% 0 / 0 0 12% 0;
  background:
    repeating-linear-gradient(90deg, rgba(140, 86, 34, 0.16) 0 2px, transparent 2px 6px, rgba(255, 255, 255, 0.22) 6px 7px, transparent 7px 9px),
    linear-gradient(180deg, #fcecc8, #efd29a);
  box-shadow: inset -2px 0 3px rgba(120, 70, 20, 0.18);
  transform-origin: 0 0;
  transition: scale 0.7s cubic-bezier(0.34, 1.3, 0.5, 1);
}

html.atelier .lock-curtain.is-r {
  left: auto;
  right: 0;
  border-radius: 0 0 0 40% / 0 0 0 12%;
  box-shadow: inset 2px 0 3px rgba(120, 70, 20, 0.18);
  transform-origin: 100% 0;
}

html.atelier body.dark-theme .lock-curtain {
  background:
    repeating-linear-gradient(90deg, rgba(110, 60, 20, 0.2) 0 2px, transparent 2px 6px, rgba(255, 240, 200, 0.18) 6px 7px, transparent 7px 9px),
    linear-gradient(180deg, #f4d18e, #e2ab5a);
}

/* A name in the box draws the curtains back a little. */
html.atelier .lock-porch.is-lit .lock-curtain {
  scale: 0.72 1;
}

/* A knock: one curtain twitches aside, the bulb sways, nobody shows. */
html.atelier .lock-porch.is-peek .lock-curtain.is-r {
  scale: 0.4 1;
  transition-duration: 0.35s;
}

html.atelier .lock-porch.is-peek .lock-bulb {
  animation: lockSway 1.4s ease-in-out;
}

@keyframes lockSway {
  20% { rotate: 9deg; }
  45% { rotate: -6deg; }
  70% { rotate: 3deg; }
  100% { rotate: 0deg; }
}

html.atelier .lock-plate {
  position: absolute;
  top: 52%;
  left: 50%;
  translate: -50% 0;
  min-width: 62%;
  max-width: 84%;
  padding: 0.3rem 0.7rem 0.34rem;
  border: 1.5px solid var(--ink);
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #f1cf7e, var(--brass));
  box-shadow: 0 2px 0 var(--ink);
  text-align: center;
}

html.atelier .lock-plate-name {
  display: block;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #2b1d0e;
  transition: opacity 0.2s;
}

html.atelier .lock-plate-name.is-empty {
  opacity: 0.45;
}

html.atelier .lock-plate.is-stamp {
  animation: lockStamp 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes lockStamp {
  40% { scale: 1.08; }
}

html.atelier .lock-knob {
  position: absolute;
  right: 11%;
  top: 60%;
  width: 0.85rem;
  aspect-ratio: 1;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbe3a2, var(--brass) 60%);
}

html.atelier .lock-frame::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -0.55rem;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--light) 90%, transparent), transparent);
  opacity: calc(0.25 + var(--glow) * 0.75);
  transition: opacity 0.5s ease;
  filter: blur(2px);
}

/* Wall lantern: cap, glass and a flame that lights up for a name. */
html.atelier .lock-lamp {
  position: absolute;
  top: 30%;
  right: -2.7rem;
  width: 1.25rem;
  height: 1.8rem;
  border: 1.5px solid var(--ink);
  border-radius: 0.2rem 0.2rem 0.45rem 0.45rem;
  background:
    linear-gradient(90deg, transparent 47%, var(--ink) 47% 53%, transparent 53%),
    color-mix(in srgb, var(--light) calc(18% + var(--glow) * 70%), var(--paper));
  box-shadow: 0 0 calc(0.4rem + var(--glow) * 2.6rem) calc(var(--glow) * 1rem) color-mix(in srgb, var(--light) 65%, transparent);
  transition: background 0.4s, box-shadow 0.5s;
}

html.atelier .lock-lamp::before {
  content: '';
  position: absolute;
  left: -0.28rem;
  right: -0.28rem;
  top: -0.5rem;
  height: 0.45rem;
  background: var(--ink);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

html.atelier .lock-lamp::after {
  content: '';
  position: absolute;
  top: 0.35rem;
  left: -0.85rem;
  width: 0.85rem;
  height: 0.5rem;
  border: 1.5px solid var(--ink);
  border-right: 0;
  border-bottom: 0;
  border-radius: 0.4rem 0 0 0;
}

html.atelier .lock-lamp i {
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  width: 0.36rem;
  height: 0.6rem;
  translate: -50% 0;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(circle at 50% 70%, #fff6dc, #ffbe55 70%);
  opacity: calc(0.25 + var(--glow) * 0.75);
  transform-origin: 50% 100%;
}

html.atelier .lock-porch.is-lit .lock-lamp i {
  animation: lockFlame 1.6s ease-in-out infinite alternate;
}

@keyframes lockFlame {
  0% { scale: 1 1; }
  35% { scale: 0.9 1.08; }
  70% { scale: 1.05 0.94; }
  100% { scale: 0.96 1.04; }
}

/* A snake plant by the door; each leaf sways on its own clock. */
html.atelier .lock-plant {
  position: absolute;
  right: -3.4rem;
  bottom: 1.95rem;
  width: 2.5rem;
  height: auto;
  overflow: visible;
}

html.atelier .lock-leaf {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: lockSway 4.2s ease-in-out infinite;
}

html.atelier .lock-leaf path:first-child {
  fill: url(#lock-leaf);
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

html.atelier .lock-vein {
  fill: none;
  stroke: #b9c27a;
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.7;
}

html.atelier .lock-leaf:nth-of-type(2) { animation-duration: 5.1s; animation-delay: -1.3s; }
html.atelier .lock-leaf:nth-of-type(3) { animation-duration: 4.6s; animation-delay: -2.2s; }
html.atelier .lock-leaf:nth-of-type(4) { animation-duration: 5.6s; animation-delay: -0.6s; }
html.atelier .lock-leaf:nth-of-type(5) { animation-duration: 3.9s; animation-delay: -3s; }

html.atelier .lock-pot,
html.atelier .lock-pot-rim {
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

html.atelier .lock-pot {
  fill: #a9542a;
}

html.atelier .lock-pot-rim {
  fill: #c8693a;
}

@keyframes lockSway {
  0%, 100% { rotate: -2.5deg; }
  50% { rotate: 3deg; }
}

/* Sky over the porch: a day scene in the light theme (sun, drifting
   clouds, a pair of birds) and a night scene in the dark one (moon,
   twinkling stars, the odd shooting star and fireflies by the plant). */
html.atelier .lock-sky {
  position: absolute;
  inset: -5.5rem -9rem auto;
  height: 11rem;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(transparent, #000 2.2rem);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(transparent, #000 2.2rem);
  mask-composite: intersect;
}

html.atelier .lock-fx {
  position: absolute;
}

html.atelier .lock-sky i {
  position: absolute;
  display: block;
}

html.atelier .lock-sun {
  top: 2.2rem;
  right: 4.2rem;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fffdf2 0 22%, #fff2b8 40%, #ffd66b 68%, #f7a83a 100%);
  box-shadow:
    0 0 0.35rem 0.1rem #fff4c4,
    0 0 1rem 0.3rem color-mix(in srgb, #ffc94d 60%, transparent),
    0 0 1.8rem 0.6rem color-mix(in srgb, #ffb03a 22%, transparent);
  animation: lockSun 4s ease-in-out infinite alternate;
}

html.atelier .lock-sun::before {
  content: '';
  position: absolute;
  inset: -1.6rem;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, #ffe08a 55%, transparent) 0 4deg, transparent 4deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 32%, #000 40%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 32%, #000 40%, transparent 72%);
  filter: blur(2px);
  opacity: 0.7;
  animation: lockRays 60s linear infinite;
}

@keyframes lockSun {
  to {
    box-shadow:
      0 0 0.45rem 0.15rem #fff4c4,
      0 0 1.2rem 0.4rem color-mix(in srgb, #ffc94d 68%, transparent),
      0 0 2.1rem 0.8rem color-mix(in srgb, #ffb03a 20%, transparent);
  }
}

@keyframes lockRays {
  to { rotate: 1turn; }
}

/* Soft cumulus: a flat-bottomed base with two domed puffs, lit from
   above and shaded underneath, no outline. */
html.atelier .lock-cloud {
  top: 2.6rem;
  left: 0;
  width: 4.6rem;
  height: 1.35rem;
  border-radius: 1rem 1rem 0.7rem 0.7rem;
  background: linear-gradient(#fbfcfe 0%, #e3e9f2 45%, #c2cbdb 100%);
  filter: url(#lock-fluff) drop-shadow(0 0.35rem 0.55rem rgba(80, 96, 128, 0.22));
  opacity: 0.95;
  animation: lockDrift 38s linear infinite;
  animation-delay: -9s;
}

html.atelier .lock-cloud::before,
html.atelier .lock-cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 26%, #ffffff 12%, #eef2f8 40%, #d6dde9 72%, #c3ccdc);
}

html.atelier .lock-cloud::before {
  left: 0.8rem;
  bottom: 0.45rem;
  width: 2.2rem;
  height: 2rem;
}

html.atelier .lock-cloud::after {
  left: 2.35rem;
  bottom: 0.4rem;
  width: 1.6rem;
  height: 1.45rem;
}

html.atelier .lock-cloud.is-b {
  top: 5.2rem;
  scale: 0.75;
  animation-duration: 52s;
  animation-delay: -34s;
}

@keyframes lockDrift {
  from { translate: -4rem 0; }
  to { translate: 36rem 0; }
}

html.atelier .lock-moon {
  display: none !important;
}

html.atelier body.dark-theme .lock-sun,
html.atelier body.dark-theme .lock-cloud {
  display: none !important;
}

html.atelier .lock-star {
  position: absolute;
  display: none;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff8e6;
  box-shadow: 0 0 4px 1px rgba(255, 240, 200, 0.55);
  scale: var(--s, 1);
  animation: lockTwinkle var(--d, 3s) ease-in-out var(--w, 0s) infinite;
}

html.atelier body.dark-theme .lock-star {
  display: block;
}

/* A few bright ones get a four-point glint. */
html.atelier .lock-star.is-big {
  width: 3px;
  height: 3px;
  background: #ffe9b0;
}

html.atelier .lock-star.is-big::before,
html.atelier .lock-star.is-big::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1px;
  translate: -50% -50%;
  background: linear-gradient(90deg, transparent, #ffe9b0, transparent);
}

html.atelier .lock-star.is-big::after {
  rotate: 90deg;
}

@keyframes lockTwinkle {
  0%, 100% { opacity: 0.25; scale: calc(var(--s, 1) * 0.7); }
  50% { opacity: 1; scale: calc(var(--s, 1) * 1.15); }
}

/* The moon: a cratered disc, its dark side cut by a soft shadow. */
html.atelier body.dark-theme .lock-moon {
  display: block !important;
  top: 1.1rem;
  right: 4.4rem;
  width: 2.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(160, 140, 100, 0.45) 0 9%, transparent 11%),
    radial-gradient(circle at 74% 62%, rgba(160, 140, 100, 0.4) 0 7%, transparent 9%),
    radial-gradient(circle at 52% 74%, rgba(160, 140, 100, 0.3) 0 5%, transparent 7%),
    radial-gradient(circle at 84% 42%, rgba(160, 140, 100, 0.3) 0 4%, transparent 6%),
    radial-gradient(circle at 40% 35%, #fffaf0, #efe2bf 55%, #d9c79a);
  box-shadow: 0 0 1.2rem 0.3rem rgba(243, 227, 180, 0.28), 0 0 3rem 1rem rgba(243, 227, 180, 0.12);
  rotate: -20deg;
}

html.atelier body.dark-theme .lock-moon::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--paper) 96%, transparent) 0 46%, color-mix(in srgb, var(--paper) 55%, transparent) 54%, transparent 62%);
}

html.atelier .lock-sun,
html.atelier body.dark-theme .lock-moon {
  pointer-events: auto;
  cursor: pointer;
  transition: translate 0.45s cubic-bezier(0.55, 0, 0.8, 0.3), opacity 0.4s ease, scale 0.3s;
}

html.atelier .lock-sun:hover,
html.atelier body.dark-theme .lock-moon:hover {
  scale: 1.1;
}

html.atelier .lock-porch.is-setting .lock-sun,
html.atelier body.dark-theme .lock-porch.is-setting .lock-moon {
  translate: 0 5.5rem;
  opacity: 0;
}

html.atelier .lock-porch.is-rising .lock-sun,
html.atelier body.dark-theme .lock-porch.is-rising .lock-moon {
  animation: lockRiseOrb 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

@keyframes lockRiseOrb {
  from { translate: 0 5.5rem; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}

html.is-sky-flip::view-transition-old(root),
html.is-sky-flip::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.is-sky-flip::view-transition-new(root) {
  animation: lockSkyWash 0.85s cubic-bezier(0.7, 0, 0.25, 1) both;
}

@keyframes lockSkyWash {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 30%)); }
  to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 30%)); }
}

/* Footprints up to the mat, one per letter. */
html.atelier .lock-steps {
  position: absolute;
  right: 89%;
  bottom: 0.45rem;
  width: 12rem;
  height: 1.2rem;
  pointer-events: none;
}

html.atelier .lock-steps i {
  position: absolute;
  left: calc(var(--i) * 12.5%);
  width: 0.62rem;
  height: 0.36rem;
  border-radius: 60% 45% 45% 60%;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

html.atelier .lock-steps i:nth-child(odd) {
  top: 0.55rem;
}

html.atelier .lock-steps i:nth-child(even) {
  top: 0;
}

html.atelier .lock-steps i.is-on {
  opacity: 1;
  scale: 1;
}

html.atelier .lock-slot {
  position: absolute;
  left: 50%;
  top: 72%;
  width: 34%;
  height: 0.42rem;
  translate: -50% 0;
  border: 1.5px solid var(--ink);
  border-radius: 0.15rem;
  background: linear-gradient(180deg, #f1cf7e, var(--brass));
}

@media (hover: hover) {
  html.atelier .lock-porch {
    cursor: pointer;
  }

  html.atelier .lock-porch:not(.is-ajar):hover .lock-knob {
    box-shadow: 0 0 0.6rem 0.15rem color-mix(in srgb, var(--brass) 70%, transparent);
  }
}

html.atelier .lock-knob {
  transition: box-shadow 0.3s;
}

html.atelier .lock-knock {
  position: absolute;
  top: 8%;
  right: calc(100% + 0.5rem);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  white-space: nowrap;
  color: var(--spin);
  rotate: -8deg;
  opacity: 0;
  pointer-events: none;
}

html.atelier .lock-porch:not(.has-knocked) .lock-knock {
  animation: lockHint 2.6s ease-in-out 1.4s infinite;
}

html.atelier .lock-knock::after {
  content: '↘';
  margin-left: 0.25rem;
  font-style: normal;
}

@keyframes lockHint {
  0%, 100% { opacity: 1; translate: 0 0; }
  50% { opacity: 1; translate: 3px 3px; }
}

html.atelier .lock-porch.is-knocking .lock-door {
  animation: lockDoorKnock 0.6s ease-in-out;
}

/* A knock opens the door a crack, then it swings shut again. */
html.atelier .lock-porch.is-ajar .lock-door {
  transform: rotateY(26deg);
  transition-duration: 0.6s;
}

html.atelier .lock-porch.is-ajar .lock-frame::after {
  opacity: 1;
}

html.atelier .lock-say {
  position: absolute;
  z-index: 3;
  bottom: calc(100% - 1.4rem);
  right: 62%;
  bottom: calc(100% - 0.6rem);
  width: max-content;
  max-width: 9.6rem;
  padding: 0.6rem 0.95rem 0.65rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  scale: 0.85;
  translate: 8px 10px;
  transform-origin: 100% 100%;
  transition: opacity 0.25s ease, scale 0.5s cubic-bezier(0.34, 1.5, 0.5, 1), translate 0.5s cubic-bezier(0.34, 1.5, 0.5, 1);
}

html.atelier .lock-say.is-in {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}

html.atelier .lock-say-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

html.atelier .lock-say-text {
  position: relative;
  display: block;
}

html.atelier .lock-say.is-in .lock-say-text {
  animation: lockBob 3.4s ease-in-out 0.6s infinite;
}

@keyframes lockBob {
  50% { translate: 0 -2px; }
}

@keyframes lockDoorKnock {
  12%, 42% { translate: 1.5px 0; }
  26%, 56% { translate: -1px 0; }
  0%, 70%, 100% { translate: 0 0; }
}

html.atelier .portfolio-lock.is-opening .lock-door {
  transform: rotateY(84deg);
}

html.atelier .portfolio-lock.is-opening .lock-frame::after {
  opacity: 1;
}

@media (max-width: 860px) {
  html.atelier .lock-scene {
    grid-template-columns: minmax(0, 27rem);
    justify-items: center;
    gap: 2rem;
  }

  html.atelier .lock-porch {
    width: 9.5rem;
    padding-bottom: 1.3rem;
  }

  html.atelier .lock-plate-name {
    font-size: 0.72rem;
  }

  html.atelier .lock-knock {
    width: min(5.6rem, calc(50vw - 6.4rem));
    font-size: 0.85rem;
    line-height: 1.15;
    white-space: normal;
    text-align: right;
  }

  html.atelier .lock-say {
    right: auto;
    left: 50%;
    bottom: calc(100% - 0.6rem);
    --tail: centre;
    bottom: calc(100% + 0.6rem);
    max-width: min(10.5rem, 70vw);
    translate: -50% 10px;
    transform-origin: 50% 100%;
  }

  html.atelier .lock-say.is-in {
    translate: -50% 0;
  }

  html.atelier .lock-steps {
    width: 6rem;
    bottom: 0.3rem;
  }

  html.atelier .lock-steps i:nth-child(n + 5) {
    display: none;
  }

  html.atelier .lock-steps i {
    left: calc(var(--i) * 25%);
  }

  html.atelier .lock-plant {
    right: -2.6rem;
    bottom: 1.6rem;
    scale: 0.75;
    transform-origin: 50% 100%;
  }

  html.atelier .lock-lamp {
    scale: 0.75;
  }

  html.atelier .lock-sky {
    inset: -3.2rem -5rem auto;
    height: 7rem;
  }

  html.atelier .lock-sun,
  html.atelier body.dark-theme .lock-moon {
    top: 0.6rem;
    right: 2.2rem;
    scale: 0.65;
  }

  html.atelier .lock-cloud {
    top: 1.4rem;
    scale: 0.7;
  }

  html.atelier .lock-cloud.is-b {
    top: 3.4rem;
    scale: 0.55;
  }

  html.atelier .portfolio-lock {
    padding-top: max(5.5rem, env(safe-area-inset-top)) !important;
  }

}

@media (max-height: 520px) and (orientation: landscape) {
  html.atelier .lock-scene {
    grid-template-columns: auto minmax(0, 24rem);
    gap: 3rem;
  }

  html.atelier .lock-porch {
    width: 8rem;
  }

  html.atelier .portfolio-lock {
    padding-top: max(3.2rem, env(safe-area-inset-top)) !important;
  }

  html.atelier .portfolio-lock .lock-title {
    font-size: 2.3rem !important;
    margin-bottom: 0.8rem !important;
  }

  html.atelier .portfolio-lock .lock-subtitle {
    margin-bottom: 1rem !important;
    font-size: 0.95rem !important;
  }

  html.atelier .portfolio-lock .lock-stop {
    margin-bottom: 0.6rem !important;
  }

  html.atelier .portfolio-lock form.unlock-form {
    gap: 1rem;
  }
}

html.atelier .portfolio-lock {
  --glow: 0;
}

html.atelier .lock-glow {
  position: fixed;
  top: 55%;
  left: 50%;
  width: min(72rem, 150vw);
  height: min(52rem, 110vh);
  translate: -50% -50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--spin) 26%, transparent), color-mix(in srgb, var(--spin) 9%, transparent) 55%, transparent);
  opacity: calc(0.28 + var(--glow) * 0.72);
  transition: opacity 0.6s ease;
  animation: lockBreathe 6s ease-in-out infinite;
}

@keyframes lockBreathe {
  50% { scale: 1.06; }
}

html.atelier .portfolio-lock.is-opening .lock-glow {
  opacity: 1;
  scale: 1.5;
  transition: opacity 0.3s ease, scale 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  animation: none;
}

html.atelier .lock-content > :not(.lock-title) {
  animation: lockRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.atelier .lock-content > .lock-stop { animation-delay: 0.15s; }
html.atelier .lock-content > .lock-subtitle { animation-delay: 0.55s; }
html.atelier .lock-content > .unlock-form { animation-delay: 0.68s; }

html.atelier .lock-stop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem !important;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-style: italic;
  color: var(--muted) !important;
}

html.atelier .lock-stop span {
  padding: 0.22rem 0.6rem 0.26rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--spin) 18%, transparent);
}

/* The name field matches the site's other fields: accent label, rounded
   paper input, ink border once it has focus. */
html.atelier .portfolio-lock .lock-field .lock-input-label {
  display: block;
  margin: 0 0 0.5rem !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--accent) !important;
}

html.atelier .portfolio-lock .lock-owner {
  display: block;
  margin: 0.9rem auto 0;
  padding: 0.2rem 0.4rem;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-soft, currentColor);
  opacity: 0.55;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.25s ease, color 0.25s ease;
}

html.atelier .portfolio-lock .lock-owner:hover,
html.atelier .portfolio-lock .lock-owner:focus-visible,
html.atelier .portfolio-lock .lock-owner[aria-pressed="true"] {
  opacity: 1;
  color: var(--accent);
}

html.atelier .portfolio-lock .lock-field #visitor-name {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 0.85rem !important;
  background: var(--card) !important;
  font-family: var(--sans) !important;
  font-size: 1.05rem !important;
  font-style: normal;
  font-weight: 500;
  color: var(--ink) !important;
  caret-color: var(--spin);
  box-shadow: none !important;
  transition: border-color 0.25s, box-shadow 0.3s;
}

html.atelier .portfolio-lock .lock-field #visitor-name::placeholder {
  font-style: normal;
  color: var(--muted) !important;
  opacity: 0.8;
}

html.atelier .portfolio-lock .lock-field #visitor-name:focus {
  border-color: var(--ink) !important;
  box-shadow: 3px 4px 0 var(--ink) !important;
}

html.atelier .portfolio-lock .unlock-form {
  display: grid;
  gap: 1.1rem;
}

@keyframes lockRise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

html.atelier .lock-input-group {
  position: relative;
}

html.atelier .lock-input-group::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--spin);
  scale: 0 1;
  transform-origin: left center;
  transition: scale 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .lock-input-group:focus-within::after {
  scale: 1 1;
}

html.atelier .lock-title .fx-ch {
  padding: 0 0.12em 0.26em;
  margin: 0 -0.12em -0.26em;
}

html.atelier .lock-title.is-set .fx-ch {
  overflow: visible;
}

/* The title arrives split into letters in the HTML and rises in CSS from
   first paint, so it never waits on the deferred scripts (it is the lock
   screen's largest paint). */
html.atelier .lock-title .fx-ch > span {
  animation: lockCharIn 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}

@keyframes lockCharIn {
  from { transform: perspective(600px) translateY(130%) rotateX(70deg); }
  to { transform: none; }
}

html.atelier .lock-mast {
  position: absolute;
  top: max(1.4rem, env(safe-area-inset-top));
  left: max(1.5rem, env(safe-area-inset-left));
}

html.atelier .lock-mast .logo {
  font-size: 1.35rem !important;
  color: var(--ink) !important;
  text-decoration: none;
  pointer-events: none;
}

html.atelier .atelier-gate {
  width: min(100%, 27rem) !important;
  max-width: 27rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-height: none !important;
}

html.atelier .atelier-gate::before,
html.atelier .atelier-gate::after {
  display: none !important;
}

html.atelier .lock-content {
  text-align: left !important;
  color: var(--ink) !important;
}

html.atelier .lock-title {
  font-family: var(--serif) !important;
  font-size: clamp(2.6rem, 6vw, 3.8rem) !important;
  font-weight: 600 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.04em;
  margin: 0 0 1.15rem !important;
  max-width: 10ch;
  text-align: left !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  background-image: none !important;
}

html.atelier .lock-title .lock-ink {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
  white-space: nowrap;
}

html.atelier .lock-ink-line {
  position: absolute;
  left: 0;
  right: 0.15em;
  bottom: -0.16em;
  width: calc(100% - 0.15em);
  height: 0.22em;
  overflow: visible;
  pointer-events: none;
}

html.atelier .lock-ink-line path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: lockInk 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.75s forwards;
}

@keyframes lockInk {
  to { stroke-dashoffset: 0; }
}

html.atelier .portfolio-lock .btn-arrow {
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  vertical-align: bottom;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s, translate 0.3s;
}

html.atelier .portfolio-lock .unlock-form.has-name .btn-arrow {
  width: 1.4em;
  opacity: 1;
}

html.atelier .portfolio-lock .unlock-form.has-name .unlock-btn:hover .btn-arrow {
  translate: 0.2em 0;
}

html.atelier .portfolio-lock .unlock-form.has-name .unlock-btn:not(:hover) {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

html.atelier .lock-subtitle {
  font-size: 1.12rem !important;
  color: var(--muted) !important;
  max-width: 22rem;
  margin: 0 0 2.1rem !important;
  opacity: 1 !important;
  line-height: 1.55;
  text-wrap: pretty;
}

html.atelier .unlock-form {
  gap: 1.25rem;
}

html.atelier .lock-input-label {
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent) !important;
  margin-bottom: 0.45rem !important;
}

html.atelier .portfolio-lock .form-group input,
html.atelier .portfolio-lock #visitor-name {
  width: 100%;
  padding: 0.55rem 0 0.7rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 1.35rem !important;
  box-shadow: none !important;
}

html.atelier .portfolio-lock .form-group input::placeholder,
html.atelier .portfolio-lock #visitor-name::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent) !important;
  font-style: italic;
}

html.atelier .portfolio-lock .form-group input:focus,
html.atelier .portfolio-lock #visitor-name:focus {
  outline: none !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.atelier .portfolio-lock .unlock-btn {
  margin-top: 0.4rem;
  width: 100%;
  border-radius: 999px !important;
  border: 1.5px solid var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 0.78rem 1.4rem !important;
  box-shadow: none !important;
  letter-spacing: 0.02em;
}

html.atelier .portfolio-lock .unlock-btn:hover:not(:disabled) {
  background: var(--ink) !important;
  color: var(--paper) !important;
  transform: translateY(-2px);
}

html.atelier .portfolio-lock .unlock-btn:disabled {
  opacity: 0.55;
  transform: none;
}

html.atelier .lock-note {
  display: block;
  margin: 1.35rem 0 0;
  font-size: 0.88rem;
  color: var(--muted) !important;
  line-height: 1.5;
}

html.atelier .atelier-gate.is-opening {
  animation: lockSheetOut 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

html.atelier .portfolio-lock.is-opening {
  animation: lockPaperFade 0.4s ease 0.5s forwards;
}

@keyframes lockSheetIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lockSheetOut {
  to {
    opacity: 0;
    transform: translateX(14px);
  }
}

@keyframes lockPaperFade {
  to { opacity: 0; }
}

html.atelier #site-shell.is-revealing {
  animation: lockSiteIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lockSiteIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html.atelier .lock-notification {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0.9rem !important;
  box-shadow: 5px 6px 0 var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

html.atelier .lock-notification--success,
html.atelier .lock-notification--error {
  background: var(--card) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-gate,
  html.atelier .atelier-gate.is-opening,
  html.atelier .portfolio-lock.is-opening,
  html.atelier #site-shell.is-revealing,
  html.atelier .lock-ink-line path {
    animation: none !important;
    stroke-dashoffset: 0;
  }

  html.atelier .lock-title .fx-ch {
    overflow: visible;
  }

  html.atelier .lock-title .fx-ch > span {
    animation: none;
  }

  html.atelier .lock-glow,
  html.atelier .lock-content > *,
  html.atelier .lock-porch,
  html.atelier .lock-door,
  html.atelier .lock-plate {
    animation: none !important;
  }
}

@media (hover: none) {
  html.atelier .atelier-skill-card:hover,
  html.atelier .atelier-note:hover,
  html.atelier .atelier-edu-stat:hover,
  html.atelier .project-card:nth-child(n):hover,
  html.atelier .interactive-card:nth-child(n):hover,
  html.atelier .home-photo:hover,
  html.atelier .atelier-about-frame:hover .atelier-about-photo {
    transform: none !important;
    box-shadow: none !important;
  }

  html.atelier .home-photo:hover {
    transform: rotate(-3.5deg) !important;
  }

  html.atelier .atelier-about-frame:hover .atelier-about-photo {
    transform: rotate(2.5deg) !important;
  }
}

@media (max-width: 760px) {
  html.atelier {
    font-size: 16px !important;
  }

  html.atelier .container {
    width: min(100% - 2rem, 1120px) !important;
    max-width: min(100% - 2rem, 1120px) !important;
  }

  html.atelier .lock-title {
    font-size: clamp(2.4rem, 12vw, 3.2rem) !important;
  }

  html.atelier .lock-mast {
    top: max(1.1rem, env(safe-area-inset-top));
    left: max(1.15rem, env(safe-area-inset-left));
  }

  html.atelier main .section:not(.home-section) {
    padding-top: 3.2rem !important;
    padding-bottom: 2.4rem !important;
  }

  html.atelier .home-container {
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start;
    gap: 1.5rem;
    min-height: 0;
    padding: 1.1rem 0 2.2rem !important;
    text-align: left !important;
  }

  html.atelier .home-left,
  html.atelier .home-right {
    width: 100%;
    min-width: 0 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html.atelier .home-right {
    order: -1;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center;
    flex: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
  }

  html.atelier .home-container .home-photo {
    width: 168px !important;
    height: 214px !important;
    max-width: 168px !important;
    margin: 0 auto !important;
    transform: rotate(-2deg) !important;
  }

  html.atelier .home-container .home-photo:hover {
    transform: rotate(-2deg) !important;
  }

  html.atelier .home-title {
    font-size: clamp(2.7rem, 12vw, 3.4rem) !important;
    line-height: 0.94 !important;
    text-align: left !important;
  }

  html.atelier .home-subtitle,
  html.atelier .home-kicker,
  html.atelier .home-desc {
    text-align: left !important;
  }

  html.atelier .home-subtitle {
    font-size: 1.12rem !important;
    max-width: none;
  }

  html.atelier .home-desc {
    font-size: 1.02rem !important;
    max-width: none;
  }

  html.atelier .home-desc br {
    display: none;
  }

  html.atelier .home-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: auto;
    margin-top: 0.35rem;
  }

  html.atelier .home-btns .btn,
  html.atelier .home-btns .btn-outline,
  html.atelier .atelier-about-more {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.45rem 0.95rem !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
  }

  html.atelier .story-btn-hint {
    display: none !important;
  }

  html.atelier h2.about-title,
  html.atelier h2.skills-title,
  html.atelier h2.projects-title,
  html.atelier h2.education-title,
  html.atelier h2.experience-title,
  html.atelier h2.contact-title,
  html.atelier h2.fun-facts-title,
  html.atelier .fun-facts-title,
  html.atelier h2.writing-title,
  html.atelier .writing-title,
  html.atelier .atelier-do-lead,
  html.atelier h2.atelier-do-lead,
  html.atelier .atelier-skills-intro .skills-title {
    font-size: clamp(1.9rem, 8.2vw, 2.45rem) !important;
    line-height: 1.15 !important;
    max-width: none;
    left: auto !important;
    transform: none !important;
    text-align: left !important;
  }

  html.atelier .atelier-skills-grid,
  html.atelier .atelier-notes,
  html.atelier .atelier-edu-courses,
  html.atelier .case-studies-section .projects-cards-row,
  html.atelier .projects-section .projects-cards-row {
    grid-template-columns: 1fr !important;
  }

  html.atelier .atelier-note,
  html.atelier .atelier-note--wide {
    grid-column: auto !important;
  }

  html.atelier .atelier-skill-card,
  html.atelier .atelier-note {
    min-height: 0;
    padding: 1.2rem 1.15rem 1.25rem;
  }

  html.atelier .case-studies-section .project-card,
  html.atelier .projects-section .project-card,
  html.atelier .interactive-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 1.15rem 1.15rem 1.1rem !important;
  }

  html.atelier .case-studies-section .case-study-title,
  html.atelier .projects-section .project-title {
    font-size: 1.22rem !important;
    min-height: 0;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    display: block;
  }

  html.atelier .case-studies-section .project-hook,
  html.atelier .projects-section .project-hook {
    min-height: 0;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    display: block;
  }

  html.atelier .atelier-about {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "side";
    gap: 1.8rem;
  }

  html.atelier .atelier-about-side {
    position: static;
    max-width: none;
  }

  html.atelier .atelier-about-photo {
    max-width: 220px;
    height: 270px;
    margin: 0 auto;
  }

  html.atelier .atelier-about-frame {
    text-align: center;
  }

  html.atelier .atelier-about-frame figcaption {
    padding-left: 0;
  }

  html.atelier .atelier-about-index {
    max-width: none;
  }

  html.atelier .atelier-about-pull {
    max-width: none;
    font-size: 1.35rem;
  }

  html.atelier .atelier-about-flow {
    gap: 0.5rem 1.5rem;
  }

  html.atelier .atelier-about-flow li {
    font-size: 0.8rem;
    padding: 0.38rem 0.8rem;
  }

  html.atelier .atelier-about-flow li:nth-child(3)::after {
    content: none;
  }

  html.atelier .atelier-about-pull {
    text-wrap: balance;
  }

  html.atelier .atelier-about-notes {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.3rem;
  }

  html.atelier .atelier-about-notes li {
    padding: 1.15rem 1.15rem 1.25rem;
  }

  html.atelier .atelier-about-notes li {
    rotate: -0.6deg;
  }

  html.atelier .atelier-about-notes li:nth-child(2) {
    rotate: 0.5deg;
    translate: none;
  }

  html.atelier .atelier-about-notes li:nth-child(3) {
    rotate: -0.3deg;
  }

  html.atelier .atelier-about-notes li::before {
    margin-bottom: 1.1rem;
  }

  html.atelier .story-hero {
    padding: 1.3rem 0 0.6rem;
  }

  html.atelier .story-chapter {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.7rem;
    padding: 1.6rem 0;
  }

  html.atelier .story-body {
    padding-bottom: 3rem;
  }

  html.atelier .atelier-cert-gallery {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  html.atelier .atelier-cert-pile {
    max-width: none;
    width: 100%;
  }

  html.atelier .atelier-edu,
  html.atelier .atelier-edu-stats,
  html.atelier .atelier-contact {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
  }

  html.atelier .atelier-contact-form .form-row {
    grid-template-columns: 1fr;
  }

  html.atelier .atelier-contact-links a {
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
  }

  html.atelier .atelier-contact-links a > span:last-child {
    flex-basis: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html.atelier .atelier-exp-paper {
    padding: 1.15rem 1.1rem 1.2rem;
  }

  html.atelier .atelier-exp-paper::before {
    font-size: 3.4rem;
  }

  html.atelier .navbar-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  html.atelier .nav-links {
    background: var(--paper) !important;
    color: var(--ink);
    width: min(86vw, 22rem);
    max-width: 22rem;
    border-right: none !important;
    border-left: 1.5px solid var(--line);
    box-shadow: -16px 0 40px color-mix(in srgb, var(--ink) 14%, transparent) !important;
    backdrop-filter: none;
  }

  html.atelier .nav-links a,
  html.atelier .dropbtn {
    color: var(--ink) !important;
    border-bottom-color: var(--line) !important;
    padding: 0.9rem 0;
  }

  html.atelier body.dark-theme .nav-links,
  html.atelier body.dark-theme .nav-links.open {
    background: var(--card) !important;
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.55) !important;
    border-left-color: color-mix(in srgb, var(--spin) 55%, transparent);
  }

  html.atelier body.dark-theme .nav-links > li > a:hover,
  html.atelier body.dark-theme .nav-links > li > a:focus,
  html.atelier body.dark-theme .nav-links > li > a[aria-expanded="true"] {
    background: color-mix(in srgb, var(--spin) 14%, transparent) !important;
    color: var(--spin) !important;
  }

  html.atelier .dropdown-content {
    background: var(--card) !important;
  }

  html.atelier .work-modal {
    padding: 0.7rem;
    align-items: flex-end;
  }

  html.atelier .work-modal-panel {
    width: 100%;
    max-height: min(88dvh, 780px);
    padding: 1.35rem 1.15rem 1.2rem;
    border-radius: 1.2rem 1.2rem 0.6rem 0.6rem;
  }

  html.atelier .scroll-top-btn {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 42px;
    height: 42px;
  }

  html.atelier.is-book-bar-in .scroll-top-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 800px) {
  html.atelier .nav-links,
  html.atelier .nav-links.open {
    background: var(--paper) !important;
    box-shadow: -16px 0 40px color-mix(in srgb, var(--ink) 14%, transparent) !important;
    border-right: none !important;
    border-left: 1.5px solid var(--line);
    backdrop-filter: none;
    flex-wrap: nowrap;
  }

  html.atelier body.dark-theme .nav-links,
  html.atelier body.dark-theme .nav-links.open {
    background: var(--card) !important;
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.55) !important;
    border-left-color: color-mix(in srgb, var(--spin) 55%, transparent);
  }

  html.atelier .nav-links > li > a,
  html.atelier .nav-links .dropbtn {
    color: var(--ink) !important;
  }

  html.atelier .nav-links > li > a:hover,
  html.atelier .nav-links > li > a:focus,
  html.atelier .nav-links li a:hover,
  html.atelier .nav-links li a:focus {
    background: color-mix(in srgb, var(--spin) 12%, transparent) !important;
    color: var(--spin) !important;
    transform: none;
  }

  html.atelier body.dark-theme .nav-links > li > a:hover,
  html.atelier body.dark-theme .nav-links > li > a:focus,
  html.atelier body.dark-theme .nav-links > li > a[aria-expanded="true"] {
    background: color-mix(in srgb, var(--spin) 14%, transparent) !important;
    color: var(--spin) !important;
  }

  html.atelier .drawer-close-btn {
    background: var(--card) !important;
    color: var(--ink) !important;
    border: 1.5px solid var(--line) !important;
    box-shadow: none !important;
    border-radius: 10px;
  }

  html.atelier .drawer-close-btn:hover,
  html.atelier .drawer-close-btn:focus {
    background: var(--spin) !important;
    color: var(--paper) !important;
    box-shadow: none !important;
    outline: 2px solid var(--spin);
  }

  html.atelier .drawer-theme-toggle-li .theme-toggle-btn,
  html.atelier .drawer-theme-toggle-li .theme-toggle-btn:hover,
  html.atelier .drawer-theme-toggle-li .theme-toggle-btn:focus,
  html.atelier .drawer-theme-toggle-li .theme-toggle-btn:active {
    background: var(--card) !important;
    color: var(--ink) !important;
    border: 1.5px solid var(--line) !important;
    box-shadow: none !important;
  }

  html.atelier body.dark-theme .menu-toggle {
    background: var(--card) !important;
    box-shadow: none;
  }

  html.atelier body.dark-theme .dropdown-content {
    background: var(--paper) !important;
  }

  html.atelier body.dark-theme .dropdown-content a:hover,
  html.atelier body.dark-theme .dropdown-content a:focus {
    background: color-mix(in srgb, var(--spin) 14%, transparent) !important;
    color: var(--spin) !important;
  }
}

@media (max-width: 420px) {
  html.atelier .atelier-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Small delights: one quiet gesture per section, never more —— */

/* Fun facts: the kicker's hairline stretches into an accent as the card lifts. */
html.atelier .atelier-note-kicker::after {
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, opacity 0.25s ease;
}

html.atelier .atelier-note:hover .atelier-note-kicker::after {
  width: 3.2rem;
  background: var(--spin);
  opacity: 1;
}

/* Each hobby has a line icon with one habit of its own: the coffee steams,
   the music plays (quietly, always), the lens searches, the video pulses, the
   lid rattles, the hanger swings. Individual transform properties throughout,
   since the card itself is moved with `transform`. */
html.atelier .atelier-note-icon {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier .atelier-note:hover .atelier-note-icon {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  scale: 1.08;
}

html.atelier .atelier-note-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.atelier .atelier-note-icon svg * {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

html.atelier .atelier-note:hover .note-steam {
  animation: note-steam 1.6s ease-in-out infinite;
}

html.atelier .atelier-note:hover .note-steam:nth-child(2) {
  animation-delay: 0.25s;
}

html.atelier .atelier-note:hover .note-steam:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes note-steam {
  0% {
    translate: 0 1.5px;
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    translate: 0 -2.5px;
    opacity: 0;
  }
}

html.atelier .note-bar {
  animation: note-bar 1.1s ease-in-out infinite alternate;
  scale: 1 0.55;
}

html.atelier .note-bar:nth-child(2) {
  animation-duration: 0.8s;
  animation-delay: -0.3s;
}

html.atelier .note-bar:nth-child(3) {
  animation-duration: 1.3s;
  animation-delay: -0.6s;
}

html.atelier .note-bar:nth-child(4) {
  animation-duration: 0.95s;
  animation-delay: -0.15s;
}

html.atelier .atelier-note:hover .note-bar {
  animation-name: note-bar-loud;
}

@keyframes note-bar {
  from {
    scale: 1 0.45;
  }
  to {
    scale: 1 0.85;
  }
}

@keyframes note-bar-loud {
  from {
    scale: 1 0.3;
  }
  to {
    scale: 1 1.15;
  }
}

html.atelier .atelier-note:hover .note-lens {
  animation: note-lens 2.2s ease-in-out infinite;
}

@keyframes note-lens {
  0%, 100% {
    translate: 0 0;
  }
  25% {
    translate: -2px -1.5px;
  }
  50% {
    translate: 2px -1px;
  }
  75% {
    translate: 0.5px 1.5px;
  }
}

html.atelier .atelier-note:hover .note-play {
  animation: note-play 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
  fill: currentColor;
}

@keyframes note-play {
  from {
    scale: 1;
  }
  to {
    scale: 1.3;
  }
}

html.atelier .note-lid {
  transform-origin: 50% 100%;
}

html.atelier .atelier-note:hover .note-lid {
  animation: note-lid 0.9s ease-in-out infinite;
}

@keyframes note-lid {
  0%, 60%, 100% {
    translate: 0 0;
    rotate: 0deg;
  }
  15% {
    translate: 0 -2px;
    rotate: -9deg;
  }
  32% {
    translate: 0 -1px;
    rotate: 7deg;
  }
  46% {
    translate: 0 -0.5px;
    rotate: -3deg;
  }
}

html.atelier .note-hanger {
  transform-origin: 50% 0;
}

html.atelier .atelier-note:hover .note-hanger {
  animation: note-hanger 1.8s ease-in-out infinite;
}

@keyframes note-hanger {
  0%, 100% {
    rotate: 0deg;
  }
  25% {
    rotate: 12deg;
  }
  75% {
    rotate: -12deg;
  }
}

/* Fun facts as a pinboard: each card is taped up slightly askew, with a
   margin note in pen pointing at its icon, and one aside by the heading.
   Tilt uses `rotate` so it survives the scroll reveal's `transform`. */
html.atelier .fun-facts-section .container {
  position: relative;
}

html.atelier .fun-facts-section .atelier-notes {
  gap: 1.5rem 1.3rem;
}

html.atelier .fun-facts-section .atelier-note {
  rotate: var(--note-tilt, 0deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease,
    rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier .fun-facts-section .atelier-note:nth-child(1) { --tape-x: 9%; --tape-r: -5deg; }
html.atelier .fun-facts-section .atelier-note:nth-child(2) { --tape-x: 38%; --tape-r: 4deg; }
html.atelier .fun-facts-section .atelier-note:nth-child(3) { --tape-x: 30%; --tape-r: -3deg; }
html.atelier .fun-facts-section .atelier-note:nth-child(4) { --tape-x: 44%; --tape-r: 3deg; }
html.atelier .fun-facts-section .atelier-note:nth-child(5) { --tape-x: 14%; --tape-r: 5deg; }
html.atelier .fun-facts-section .atelier-note:nth-child(6) { --tape-x: 34%; --tape-r: -4deg; }

html.atelier .fun-facts-section .atelier-note:hover {
  rotate: 0deg;
}

/* Washi tape: translucent, faintly striped, with torn ends. */
html.atelier .fun-facts-section .atelier-note::after {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: var(--tape-x);
  z-index: 4;
  width: 4.6rem;
  height: 1.35rem;
  background:
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255, 255, 255, 0.18) 5px 7px),
    color-mix(in srgb, var(--spin) 30%, transparent);
  clip-path: polygon(3% 0, 97% 0, 100% 20%, 96% 40%, 100% 62%, 97% 82%, 100% 100%, 2% 100%, 0 80%, 4% 58%, 0 38%, 3% 18%);
  rotate: var(--tape-r);
  pointer-events: none;
  transition: opacity 0.35s ease, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier body.dark-theme .fun-facts-section .atelier-note::after {
  background:
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255, 255, 255, 0.08) 5px 7px),
    color-mix(in srgb, var(--spin) 34%, transparent);
}

/* A note in the margin, in pen, pointing at the icon. */
html.atelier .atelier-note-scribble {
  position: absolute;
  top: 0.95rem;
  right: 4.1rem;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 0.1rem;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--spin);
  rotate: -4deg;
  pointer-events: none;
  transition: opacity 0.4s ease, translate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier .atelier-note-scribble svg,
html.atelier .atelier-notes-aside svg {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.atelier .atelier-note-scribble svg {
  width: 1.7rem;
  height: 1.1rem;
  margin-top: 0.35rem;
}

html.atelier .atelier-note-scribble path,
html.atelier .atelier-notes-aside path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

html.atelier .atelier-note:hover .atelier-note-scribble {
  translate: -3px -2px;
}

html.atelier .atelier-notes-aside {
  position: absolute;
  top: 1.6rem;
  right: 1.2rem;
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--spin);
  rotate: -3deg;
  pointer-events: none;
}

html.atelier .atelier-notes-aside svg {
  order: -1;
  width: 2.6rem;
  height: 2.1rem;
  margin-bottom: -1.6rem;
  scale: -1 1;
}

/* Pinned up as the board scrolls in: tape first, then the pen. */
html.atelier.has-cues .atelier-notes:not(.is-cued) .atelier-note::after {
  opacity: 0;
  scale: 1.25;
}

html.atelier.has-cues .atelier-notes:not(.is-cued) .atelier-note-scribble,
html.atelier.has-cues .atelier-notes-aside:not(.is-cued) {
  opacity: 0;
}

html.atelier.has-cues .atelier-notes:not(.is-cued) .atelier-note-scribble path,
html.atelier.has-cues .atelier-notes-aside:not(.is-cued) path {
  stroke-dashoffset: 1;
}

html.atelier .atelier-notes.is-cued .atelier-note::after {
  transition-delay: calc(var(--note-i, 0) * 0.12s + 0.5s);
}

html.atelier .atelier-notes.is-cued .atelier-note-scribble {
  transition-delay: calc(var(--note-i, 0) * 0.12s + 0.9s);
}

html.atelier .atelier-notes.is-cued .atelier-note-scribble path,
html.atelier .atelier-notes-aside.is-cued path {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--note-i, 0) * 0.12s + 1.05s);
}

html.atelier .atelier-notes-aside {
  transition: opacity 0.5s ease 0.3s;
}

html.atelier .atelier-notes-aside.is-cued path {
  transition-delay: 0.55s;
}

html.atelier .fun-facts-section .atelier-note:nth-child(2) { --note-i: 1; }
html.atelier .fun-facts-section .atelier-note:nth-child(3) { --note-i: 2; }
html.atelier .fun-facts-section .atelier-note:nth-child(4) { --note-i: 3; }
html.atelier .fun-facts-section .atelier-note:nth-child(5) { --note-i: 4; }
html.atelier .fun-facts-section .atelier-note:nth-child(6) { --note-i: 5; }

@media (max-width: 760px) {
  html.atelier .atelier-notes-aside {
    display: none;
  }

  html.atelier .fun-facts-section .atelier-note {
    rotate: calc(var(--note-tilt, 0deg) * 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier.has-cues .atelier-notes .atelier-note::after,
  html.atelier.has-cues .atelier-notes .atelier-note-scribble,
  html.atelier.has-cues .atelier-notes-aside {
    opacity: 1 !important;
    scale: 1 !important;
    transition: none !important;
  }

  html.atelier.has-cues .atelier-notes .atelier-note-scribble path,
  html.atelier.has-cues .atelier-notes-aside path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* The card's glow follows the pointer instead of sitting in the middle. */
html.atelier .fun-facts-section .atelier-note:hover .fx-spot {
  opacity: 1;
}

html.atelier .atelier-note h3,
html.atelier .atelier-note p {
  position: relative;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-note-icon svg *,
  html.atelier .atelier-note:hover .atelier-note-icon svg * {
    animation: none !important;
  }
}

/* Coursework: the hovered subject steps forward behind a small marker. */
html.atelier .atelier-edu-courses li {
  position: relative;
  transition: translate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

html.atelier .atelier-edu-courses li::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  margin-top: -0.19rem;
  border-radius: 50%;
  background: var(--spin);
  scale: 0;
  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier .atelier-edu-courses li:hover {
  translate: 0.85rem 0;
  color: var(--spin);
}

html.atelier .atelier-edu-courses li:hover::before {
  scale: 1;
}

/* Contact: "open to roles" is live, so it says so with a soft ping. */
html.atelier .atelier-contact-status {
  position: relative;
  padding-left: 1.55rem;
}

html.atelier .atelier-contact-status::before,
html.atelier .atelier-contact-status::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.225rem;
  border-radius: 50%;
  background: #2fa36b;
}

html.atelier .atelier-contact-status::after {
  animation: status-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes status-ping {
  0% {
    scale: 1;
    opacity: 0.7;
  }
  70%, 100% {
    scale: 3;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-contact-status::after {
    animation: none;
  }

  html.atelier .atelier-edu-courses li:hover {
    translate: none;
  }
}

/* ---- Story page ------------------------------------------------------------
   The long version is a book, so the details are a bookbinder's: a portrait
   window on the cover, drop caps, a satin ribbon, a pencilled note. */

html.atelier .story-hero-copy {
  position: relative;
}

html.atelier .story-hero-long {
  position: relative;
  display: inline-block;
}

html.atelier .story-hero-long svg {
  position: absolute;
  left: -3%;
  bottom: -0.2em;
  width: 106%;
  height: 0.34em;
  overflow: visible;
  fill: none;
  stroke: var(--spin);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: story-ink 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}

html.atelier .story-hero-aside {
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  text-align: right;
  color: var(--spin);
  rotate: -3deg;
  opacity: 0;
  animation: story-fade 0.6s ease 1.2s forwards;
}

@keyframes story-ink {
  to { stroke-dashoffset: 0; }
}

@keyframes story-fade {
  to { opacity: 1; }
}

@media (max-width: 760px) {
  html.atelier .story-hero-aside {
    position: static;
    margin-top: 0.55rem;
    font-size: 0.92rem;
    text-align: left;
    rotate: -2deg;
  }
}

/* The portrait window: the mascot in an arch, as if lit from inside. */
html.atelier .sb-cover-portrait {
  position: relative;
  margin-top: 0.4rem;
}

html.atelier .sb-cameo {
  --cameo-w: 6.2rem;
  --cameo-sky: color-mix(in srgb, var(--spin) 16%, #1a1713);
  position: relative;
  display: block;
  width: var(--cameo-w);
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--spin) 80%, transparent);
  border-radius: 999px 999px 0.55rem 0.55rem;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--spin) 8%, transparent),
    0 14px 26px rgba(0, 0, 0, 0.42);
}

html.atelier .sb-cameo-window {
  position: relative;
  display: block;
  height: calc(var(--cameo-w) * 1.2);
  overflow: hidden;
  border-radius: 999px 999px 0.35rem 0.35rem;
  background:
    radial-gradient(70% 55% at 50% 40%, color-mix(in srgb, var(--spin) 42%, transparent), transparent 75%),
    var(--cameo-sky);
}

/* Two stars in the window behind her. */
html.atelier .sb-cameo-window::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--spin) 90%, #fff) 0 1.2px, transparent 2px),
    radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--spin) 90%, #fff) 0 1px, transparent 1.8px);
  animation: cameo-twinkle 3.2s ease-in-out infinite alternate;
}

@keyframes cameo-twinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

html.atelier .sb-cameo-art {
  position: absolute;
  left: -10%;
  top: 11%;
  width: 120%;
  aspect-ratio: 680 / 800;
  background-image: var(--mascot-look);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 50% 50%;
}

html.atelier .sb-cameo-art.is-react {
  background-image: url('mascots/deepika-reactions.webp?v=20261201');
}

html.atelier .sb-cameo-art.is-face {
  opacity: 0;
  transition: opacity 0.16s ease;
}

html.atelier .sb-cameo.is-face-on .sb-cameo-art.is-face {
  opacity: 1;
}

html.atelier .sb-cover-note {
  position: absolute;
  left: calc(100% + 0.35rem);
  top: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-family: var(--serif);
  font-size: 0.86rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: none;
  rotate: -7deg;
  opacity: 0.92;
}

html.atelier .sb-cover-note svg {
  width: 2rem;
  height: 1.5rem;
  margin: 0.1rem 0 0 -0.9rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Drop caps open each chapter. */
html.atelier .wb-sheet .wb-drop {
  float: left;
  margin: 0.32rem 0.4rem 0 0 !important;
  font-family: var(--serif);
  font-size: calc(var(--wb-rule) * 1.85);
  font-weight: 600;
  line-height: 0.8;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

html.atelier .story-book {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .story-hero-long svg {
    animation: none;
    stroke-dashoffset: 0;
  }

  html.atelier .story-hero-aside {
    animation: none;
    opacity: 1;
  }

  html.atelier .sb-cameo-window::before {
    animation: none;
  }
}

@media (pointer: coarse) {
  html.atelier .atelier-footer li {
    margin: 0;
  }

  html.atelier .atelier-footer li a {
    display: inline-block;
    padding: 0.55rem 0;
  }

  html.atelier .projects-section .project-readmore,
  html.atelier .atelier-cert-cta,
  html.atelier .theme-toggle-btn,
  html.atelier .logo,
  html.atelier .atelier-footer-logo,
  html.atelier .story-back {
    position: relative;
  }

  html.atelier .projects-section .project-readmore::after,
  html.atelier .atelier-cert-cta::after,
  html.atelier .theme-toggle-btn::after,
  html.atelier .logo::after,
  html.atelier .atelier-footer-logo::after,
  html.atelier .story-back::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    translate: -50% -50%;
  }
}

/* ---- Project viewer ---------------------------------------------------------
   A bottom sheet over the page: case studies, live sites, Figma files and code
   all open here instead of taking the visitor away (viewer.js). */
html.atelier .case-reader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  color: var(--ink);
}

html.atelier .case-reader::backdrop {
  background: rgba(18, 14, 10, 0.55);
  animation: case-reader-dim 0.45s ease both;
}

html.atelier .case-reader.is-closing::backdrop {
  animation: case-reader-undim 0.36s ease both;
}

@keyframes case-reader-dim { from { opacity: 0; } }
@keyframes case-reader-undim { to { opacity: 0; } }

html.atelier .case-reader-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 76rem);
  height: min(95vh, 66rem);
  height: min(95dvh, 66rem);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.3);
  will-change: transform;
}

/* Fixed rows, so the stage always gets the height that is left. */
html.atelier .case-reader-head { grid-row: 1; }
html.atelier .case-reader-stage { grid-row: 2; }
html.atelier .case-reader-foot { grid-row: 3; }

/* The page's buttons carry a bottom margin; nothing in here wants it. */
html.atelier .case-reader button {
  margin: 0;
  min-height: 0;
  font-family: var(--sans);
  line-height: 1;
}

/* ---- header ---- */
html.atelier .case-reader-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem 1.25rem;
  padding: 1.6rem 1.5rem 1rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

html.atelier .case-reader.is-dragging .case-reader-head { cursor: grabbing; }

html.atelier .case-reader-grip {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  width: 46px;
  height: 5px;
  margin-left: -23px;
  border-radius: 99px;
  background: var(--ink);
  opacity: 0.18;
  transition: opacity 0.2s ease, width 0.25s ease, margin 0.25s ease;
}

html.atelier .case-reader-head:hover .case-reader-grip,
html.atelier .case-reader.is-dragging .case-reader-grip {
  opacity: 0.45;
  width: 64px;
  margin-left: -32px;
}

html.atelier .case-reader-heading {
  flex: 1;
  min-width: 0;
}

html.atelier .case-reader-kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  margin: 0 0 0.5rem !important;
  font-family: var(--sans);
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted) !important;
}

html.atelier .case-reader-cat {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* What you are looking at, in that kind's own colour. */
html.atelier .case-reader-stamp {
  --tag: var(--spin);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  flex-shrink: 0;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--tag) 13%, transparent);
  color: var(--tag);
  letter-spacing: 0.12em;
}

html.atelier .case-reader-stamp::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

html.atelier .case-reader[data-kind="site"] .case-reader-stamp { --tag: #1f9d55; }
html.atelier .case-reader[data-kind="figma"] .case-reader-stamp { --tag: #8b3dff; }
html.atelier .case-reader[data-kind="repo"] .case-reader-stamp { --tag: var(--accent); }
html.atelier .case-reader[data-kind="repo"] .case-reader-stamp::before { border-radius: 2px; }
html.atelier body.dark-theme .case-reader[data-kind="site"] .case-reader-stamp { --tag: #4cd07d; }
html.atelier body.dark-theme .case-reader[data-kind="figma"] .case-reader-stamp { --tag: #b98bff; }

/* A live site breathes. */
html.atelier .case-reader[data-kind="site"] .case-reader-stamp::before {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tag) 55%, transparent);
  animation: case-reader-live 1.8s ease-out infinite;
}

@keyframes case-reader-live {
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}

html.atelier .case-reader-stamp.is-stamped {
  animation: case-reader-tag 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes case-reader-tag {
  from { opacity: 0; transform: translateY(4px) scale(0.85); }
}

html.atelier .case-reader-title {
  margin: 0 !important;
  overflow: hidden;
  font-family: var(--serif) !important;
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink) !important;
}

html.atelier .case-reader-hook {
  margin: 0.3rem 0 0 !important;
  overflow: hidden;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--spin) !important;
}

html.atelier .case-reader-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

html.atelier .case-reader-out,
html.atelier .case-reader-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 42px;
  padding: 0 1.1rem;
  border: 1.5px solid var(--ink);
  border-radius: 99px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

html.atelier .case-reader-out span[aria-hidden] {
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

html.atelier .case-reader-out:hover,
html.atelier .case-reader-out:focus-visible,
html.atelier .case-reader-pill:hover {
  background: var(--ink);
  color: var(--card) !important;
}

html.atelier .case-reader-out:hover span[aria-hidden] { transform: translate(2px, -2px); }

html.atelier .case-reader-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font-size: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.2s ease, color 0.2s ease;
}

html.atelier .case-reader-close:hover,
html.atelier .case-reader-close:focus-visible {
  transform: rotate(90deg);
  background: var(--ink);
  color: var(--card);
}

/* ---- view tabs (live / code, design / prototype): a segmented switch ---- */
html.atelier .case-reader-views {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

html.atelier .case-reader-views[hidden] { display: none; }

html.atelier .case-reader-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 34px;
  padding: 0 1rem;
  border: 0;
  border-radius: 99px;
  background: transparent;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  transition: background 0.25s ease, color 0.25s ease;
}

html.atelier .case-reader-view:hover { color: var(--ink); }

html.atelier .case-reader-view[aria-selected="true"] {
  background: var(--ink);
  color: var(--card);
}

html.atelier .case-reader-view-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--spin);
}

html.atelier .case-reader-view.is-site .case-reader-view-dot { background: #28c840; }
html.atelier .case-reader-view.is-figma .case-reader-view-dot { background: #a259ff; }
html.atelier .case-reader-view.is-repo .case-reader-view-dot { background: currentColor; border-radius: 2px; }

/* ---- stage ---- */
html.atelier .case-reader-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
}

html.atelier .case-reader[data-kind="site"] .case-reader-stage,
html.atelier .case-reader[data-kind="figma"] .case-reader-stage {
  border: 1.5px solid var(--ink);
  box-shadow: 5px 6px 0 var(--ink);
  margin-right: calc(1.25rem + 5px);
}

/* A little browser around live sites and Figma. */
html.atelier .case-reader-chrome {
  display: none;
  align-items: center;
  gap: 0.75rem;
  height: 46px;
  padding: 0 0.85rem;
  border-bottom: 1.5px solid var(--ink);
  background: var(--card);
  flex-shrink: 0;
}

html.atelier .case-reader[data-kind="site"] .case-reader-chrome,
html.atelier .case-reader[data-kind="figma"] .case-reader-chrome { display: flex; }

html.atelier .case-reader-lights { display: inline-flex; gap: 6px; }
html.atelier .case-reader-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
html.atelier .case-reader-lights i:nth-child(2) { background: #febc2e; }
html.atelier .case-reader-lights i:nth-child(3) { background: #28c840; }

html.atelier .case-reader-reload,
html.atelier .case-reader-devices button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease, transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}

html.atelier .case-reader-reload:hover { color: var(--ink); background: var(--line); transform: rotate(200deg); }

html.atelier .case-reader-url {
  flex: 1;
  max-width: 34rem;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 30px;
  padding: 0 0.9rem;
  border-radius: 99px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
}

html.atelier .case-reader-url svg { color: #1f9d55; flex-shrink: 0; }

html.atelier .case-reader-url-text::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--spin);
  animation: case-reader-caret 1s steps(1) infinite;
}

@keyframes case-reader-caret { 50% { opacity: 0; } }

html.atelier .case-reader-devices {
  display: inline-flex;
  padding: 2px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
}

html.atelier .case-reader[data-kind="figma"] .case-reader-devices { visibility: hidden; }

html.atelier .case-reader-devices button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--card);
}

html.atelier .case-reader-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html.atelier .case-reader[data-kind="figma"] .case-reader-screen,
html.atelier .case-reader-screen.is-phone {
  background-color: var(--paper);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.4px);
  background-size: 18px 18px;
}

/* Height, not top + bottom: a frame is a replaced element and keeps its
   150px default height between the two. */
html.atelier .case-reader-frame {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  translate: -50% 0;
  border: 0 solid var(--ink);
  border-radius: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.5s ease, width 0.6s cubic-bezier(0.2, 0.9, 0.25, 1), top 0.6s cubic-bezier(0.2, 0.9, 0.25, 1),
    height 0.6s cubic-bezier(0.2, 0.9, 0.25, 1), border-width 0.6s ease, border-radius 0.6s ease;
}

html.atelier .case-reader-frame[hidden] { display: none; }

html.atelier .case-reader-screen.is-ready .case-reader-frame { opacity: 1; }

/* The site on a phone: a bezel, a notch, the canvas showing round it. */
html.atelier .case-reader-screen.is-phone .case-reader-frame {
  top: 18px;
  height: calc(100% - 36px);
  width: 390px;
  border-width: 11px;
  border-radius: 38px;
  box-shadow: 8px 10px 0 color-mix(in srgb, var(--ink) 25%, transparent);
}

html.atelier .case-reader-screen.is-phone::after {
  content: '';
  position: absolute;
  top: 34px;
  left: 50%;
  width: 82px;
  height: 20px;
  margin-left: -41px;
  border-radius: 99px;
  background: var(--ink);
  z-index: 2;
  pointer-events: none;
}

/* Loading bar, the way a browser shows it. */
html.atelier .case-reader-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: 3px;
  width: 0;
  background: var(--spin);
  box-shadow: 0 0 10px var(--spin);
  pointer-events: none;
}

html.atelier .case-reader-screen.is-loading .case-reader-progress {
  animation: case-reader-load 7s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}

html.atelier .case-reader-screen.is-ready .case-reader-progress {
  width: 100%;
  opacity: 0;
  animation: none;
  transition: width 0.25s ease, opacity 0.4s ease 0.25s;
}

@keyframes case-reader-load { to { width: 88%; } }

/* ---- while it loads: a sheet of paper (or a window, a frame, some code) ---- */
html.atelier .case-reader-wait {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  transition: opacity 0.35s ease;
}

html.atelier .case-reader-screen.is-ready .case-reader-wait {
  opacity: 0;
  pointer-events: none;
}

html.atelier .case-reader-paper {
  position: relative;
  width: 132px;
  height: 168px;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 6px 22px 6px 6px;
  box-shadow: 6px 8px 0 var(--ink);
  animation: case-reader-bob 2.4s ease-in-out infinite;
}

html.atelier .case-reader-paper::before {
  content: '';
  position: absolute;
  top: -1.5px;
  right: -1.5px;
  width: 22px;
  height: 22px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0 0 0 6px;
  background: var(--paper);
}

html.atelier .case-reader-paper i {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 0 40%, color-mix(in srgb, var(--spin) 55%, transparent) 50%, var(--line) 60% 100%);
  background-size: 250% 100%;
  animation: case-reader-ink 1.6s ease-in-out infinite;
}

html.atelier .case-reader-paper i:nth-child(1) { width: 62%; height: 9px; }
html.atelier .case-reader-paper i:nth-child(2) { width: 100%; animation-delay: 0.12s; }
html.atelier .case-reader-paper i:nth-child(3) { width: 88%; animation-delay: 0.24s; }
html.atelier .case-reader-paper i:nth-child(4) { width: 95%; animation-delay: 0.36s; }
html.atelier .case-reader-paper i:nth-child(5) { width: 70%; animation-delay: 0.48s; }
html.atelier .case-reader-paper i:nth-child(6) { width: 40%; margin-top: auto; animation-delay: 0.6s; }

/* Live site: a browser window. */
html.atelier .case-reader[data-kind="site"] .case-reader-paper {
  width: 220px;
  height: 140px;
  padding: 34px 16px 16px;
  border-radius: 12px;
  gap: 9px;
}

html.atelier .case-reader[data-kind="site"] .case-reader-paper::before {
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 20px;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(circle at 12px 50%, #ff5f57 3.5px, transparent 4px),
    radial-gradient(circle at 24px 50%, #febc2e 3.5px, transparent 4px),
    radial-gradient(circle at 36px 50%, #28c840 3.5px, transparent 4px),
    var(--paper);
}

/* Figma: a frame with selection handles. */
html.atelier .case-reader[data-kind="figma"] .case-reader-paper {
  border: 1.5px solid #a259ff;
  border-radius: 2px;
  box-shadow: none;
  outline: 1px dashed color-mix(in srgb, #a259ff 50%, transparent);
  outline-offset: 7px;
}

html.atelier .case-reader[data-kind="figma"] .case-reader-paper::before {
  inset: -5px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(#fff, #fff) 0 0 / 8px 8px no-repeat,
    linear-gradient(#fff, #fff) 100% 0 / 8px 8px no-repeat,
    linear-gradient(#fff, #fff) 0 100% / 8px 8px no-repeat,
    linear-gradient(#fff, #fff) 100% 100% / 8px 8px no-repeat;
  filter: drop-shadow(0 0 0.8px #a259ff) drop-shadow(0 0 0.8px #a259ff);
}

/* Code: lines of syntax colour, indented. */
html.atelier .case-reader[data-kind="repo"] .case-reader-paper { width: 200px; height: 150px; border-radius: 10px; }
html.atelier .case-reader[data-kind="repo"] .case-reader-paper::before { display: none; }
html.atelier .case-reader[data-kind="repo"] .case-reader-paper i:nth-child(2) { margin-left: 16px; width: 70%; }
html.atelier .case-reader[data-kind="repo"] .case-reader-paper i:nth-child(3) { margin-left: 32px; width: 55%; }
html.atelier .case-reader[data-kind="repo"] .case-reader-paper i:nth-child(4) { margin-left: 32px; width: 62%; }
html.atelier .case-reader[data-kind="repo"] .case-reader-paper i:nth-child(5) { margin-left: 16px; width: 30%; }
html.atelier .case-reader[data-kind="repo"] .case-reader-paper i:nth-child(6) { width: 18%; margin-top: 0; }

@keyframes case-reader-bob {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-6px); }
}

@keyframes case-reader-ink {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}

html.atelier .case-reader-wait-line {
  margin: 0 !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem !important;
  color: var(--muted) !important;
}

html.atelier .case-reader-slow {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 3;
  translate: -50% 0;
  margin: 0 !important;
  padding: 0.45rem 0.5rem 0.45rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font-size: 0.85rem !important;
  color: var(--muted) !important;
  white-space: nowrap;
}

html.atelier .case-reader-slow[hidden] { display: none; }

/* ---- code: the repo card and README ---- */
html.atelier .case-reader-repo {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 4vw, 3rem) 3rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}

html.atelier .case-reader-repo[hidden] { display: none; }
html.atelier .case-reader-screen.is-ready .case-reader-repo { opacity: 1; }

html.atelier .case-reader-repo-card {
  max-width: 50rem;
  margin: 0 auto 2rem;
  padding: 1.4rem 1.5rem;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 7px 0 var(--ink);
}

html.atelier .case-reader-repo-path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem !important;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 1rem !important;
  color: var(--muted) !important;
}

html.atelier .case-reader-repo-path strong { color: var(--ink); }

html.atelier .case-reader-repo-desc {
  margin: 0 0 0.9rem !important;
  font-family: var(--serif);
  font-size: 1.15rem !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
}

html.atelier .case-reader-repo-topics,
html.atelier .case-reader-repo-stats,
html.atelier .case-reader-repo-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin: 0 0 0.9rem !important;
  padding: 0 !important;
  list-style: none !important;
}

html.atelier .case-reader-repo-topics li {
  padding: 0.18rem 0.65rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 500;
}

html.atelier .case-reader-repo-topics { gap: 0.4rem; }

html.atelier .case-reader-repo-stats li {
  font-size: 0.85rem;
  color: var(--muted);
}

html.atelier .case-reader-repo-stats b { color: var(--ink); font-weight: 600; }
html.atelier .case-reader-repo-stats a { color: var(--accent) !important; }

html.atelier .case-reader-repo-bar {
  display: flex;
  height: 9px;
  gap: 2px;
  margin-bottom: 0.7rem;
  border-radius: 99px;
  overflow: hidden;
}

html.atelier .case-reader-repo-bar i {
  display: block;
  min-width: 3px;
  transform-origin: left;
  animation: case-reader-grow 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@keyframes case-reader-grow { from { transform: scaleX(0); } }

html.atelier .case-reader-repo-langs { margin: 0 !important; }

html.atelier .case-reader-repo-langs li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink);
}

html.atelier .case-reader-repo-langs span { width: 9px; height: 9px; border-radius: 50%; }
html.atelier .case-reader-repo-langs em { font-style: normal; color: var(--muted); }

html.atelier .case-reader-readme {
  max-width: 50rem;
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink);
  text-align: left;
}

html.atelier .case-reader-readme-label {
  margin: 0 0 1rem !important;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
  color: var(--muted) !important;
}

html.atelier .case-reader-readme h1,
html.atelier .case-reader-readme h2,
html.atelier .case-reader-readme h3,
html.atelier .case-reader-readme h4 {
  margin: 1.6rem 0 0.6rem !important;
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  color: var(--ink) !important;
}

html.atelier .case-reader-readme h1 { font-size: 1.9rem !important; }
html.atelier .case-reader-readme h2 { font-size: 1.45rem !important; }
html.atelier .case-reader-readme h3 { font-size: 1.15rem !important; }
html.atelier .case-reader-readme h4 { font-size: 1rem !important; }

html.atelier .case-reader-readme p,
html.atelier .case-reader-readme li {
  font-size: 0.98rem !important;
  color: var(--ink) !important;
  text-align: left !important;
}

html.atelier .case-reader-readme p { margin: 0 0 0.9rem !important; }
html.atelier .case-reader-readme ul,
html.atelier .case-reader-readme ol { margin: 0 0 1rem !important; padding-left: 1.4rem !important; }
html.atelier .case-reader-readme a { color: var(--accent) !important; }

html.atelier .case-reader-readme img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

html.atelier .case-reader-readme code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.86em;
}

html.atelier .case-reader-readme pre {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  overflow: auto;
}

html.atelier .case-reader-readme pre code { padding: 0; background: none; }

html.atelier .case-reader-readme table { border-collapse: collapse; margin: 0 0 1rem; display: block; overflow: auto; }
html.atelier .case-reader-readme th,
html.atelier .case-reader-readme td { padding: 0.4rem 0.7rem; border: 1px solid var(--line); }

html.atelier .case-reader-readme blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--spin);
  color: var(--muted);
}

html.atelier .case-reader-repo-empty,
html.atelier .case-reader-repo-miss {
  max-width: 34rem;
  margin: 1rem auto;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
}

html.atelier .case-reader-repo-miss { margin-top: 18vh; }
html.atelier .case-reader-repo-miss p { color: var(--muted) !important; }

html.atelier .case-reader-repo-miss-big {
  margin-bottom: 0.4rem !important;
  font-size: 1.6rem !important;
  font-style: normal;
  color: var(--ink) !important;
}

/* ---- footer ---- */
html.atelier .case-reader-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
}

html.atelier .case-reader-foot.is-solo { visibility: hidden; }

html.atelier .case-reader-step {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: start;
  max-width: 100%;
  min-width: 0;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border: 1.5px solid transparent;
  border-radius: 99px;
  background: none;
  color: var(--ink);
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

html.atelier .case-reader-step.is-next {
  justify-self: end;
  padding: 0.45rem 0.45rem 0.45rem 1rem;
  text-align: right;
}

html.atelier .case-reader-step-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

html.atelier .case-reader-step-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

html.atelier .case-reader-step-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

html.atelier .case-reader-step-name {
  overflow: hidden;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.atelier .case-reader-step:hover,
html.atelier .case-reader-step:focus-visible { border-color: var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); }

html.atelier .case-reader-step:hover .case-reader-step-arrow,
html.atelier .case-reader-step:focus-visible .case-reader-step-arrow { background: var(--ink); color: var(--card); transform: translateX(-3px); }

html.atelier .case-reader-step.is-next:hover .case-reader-step-arrow,
html.atelier .case-reader-step.is-next:focus-visible .case-reader-step-arrow { transform: translateX(3px); }

html.atelier .case-reader-where {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
}

html.atelier .case-reader-count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

html.atelier .case-reader-dots { display: flex; gap: 6px; }

html.atelier .case-reader-dots i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--ink);
  opacity: 0.2;
  transition: width 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.25s ease;
}

html.atelier .case-reader-dots i.is-on {
  width: 20px;
  opacity: 1;
  background: var(--spin);
}

html.atelier .case-reader-keys {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

html.atelier .case-reader-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.25rem;
  margin-right: 0.15rem;
  padding: 0 0.3rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 0.66rem;
  color: var(--ink);
}

@media (hover: none) {
  html.atelier .case-reader-keys { display: none; }
}

/* Mid widths: the tabs drop under the title rather than squeezing it. */
@media (max-width: 1040px) {
  html.atelier .case-reader-head { flex-wrap: wrap; }
  html.atelier .case-reader-heading { flex-basis: calc(100% - 15rem); }
  html.atelier .case-reader-views { order: 3; }
}

@media (max-width: 640px) {
  html.atelier .case-reader-sheet {
    height: 94vh;
    height: 94dvh;
    border-radius: 20px 20px 0 0;
  }

  html.atelier .case-reader-head { padding: 1.5rem 1rem 0.8rem; gap: 0.75rem 0.6rem; align-items: flex-start; }
  html.atelier .case-reader-heading { flex-basis: 0; }
  html.atelier .case-reader-title { font-size: 1.2rem !important; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html.atelier .case-reader-hook { font-size: 0.86rem !important; }

  html.atelier .case-reader-views { width: 100%; }
  html.atelier .case-reader-view { flex: 1; padding: 0 0.6rem; }

  html.atelier .case-reader-out { width: 42px; padding: 0; justify-content: center; }
  html.atelier .case-reader-out-label { display: none; }

  html.atelier .case-reader-stage,
  html.atelier .case-reader[data-kind="site"] .case-reader-stage,
  html.atelier .case-reader[data-kind="figma"] .case-reader-stage {
    margin: 0 0.6rem;
    box-shadow: none;
  }

  html.atelier .case-reader-chrome { gap: 0.5rem; padding: 0 0.6rem; height: 42px; }
  html.atelier .case-reader-lights,
  html.atelier .case-reader-devices { display: none; }

  html.atelier .case-reader-foot { gap: 0.5rem; padding-left: 0.6rem; padding-right: 0.6rem; }
  html.atelier .case-reader-dots,
  html.atelier .case-reader-keys { display: none; }
  html.atelier .case-reader-step { gap: 0.5rem; padding-right: 0.6rem; }
  html.atelier .case-reader-step.is-next { padding-left: 0.6rem; }
  html.atelier .case-reader-step-name { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .case-reader-paper,
  html.atelier .case-reader-paper i,
  html.atelier .case-reader-stamp.is-stamped,
  html.atelier .case-reader[data-kind="site"] .case-reader-stamp::before,
  html.atelier .case-reader-repo-bar i,
  html.atelier .case-reader::backdrop { animation: none; }
}

/* ============================================================
   One heading system. Every section h2 carries .atelier-do-lead and a
   kicker; size, weight and alignment are set once, here, at a specificity
   (0,3,3) that outranks the older per-section title rules above.
   ============================================================ */
html.atelier main .section h2.atelier-do-lead {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 560 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  text-align: left !important;
}

html.atelier main .section .projects-title.atelier-do-lead {
  margin: 0 0 0.6rem !important;
}

html.atelier main .section .atelier-skills-intro .skills-title.atelier-do-lead {
  margin: 0 0 1.25rem !important;
}

@media (max-width: 760px) {
  html.atelier main .section h2.atelier-do-lead {
    font-size: clamp(1.9rem, 8.2vw, 2.45rem) !important;
  }
}

/* Back to top: hidden at the top of the page (script.js adds .is-shown
   after about a screen of scrolling), and never over the open drawer. */
html.atelier .scroll-top-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 12px;
  transition: opacity 0.25s ease, visibility 0.25s, translate 0.3s cubic-bezier(0.2, 0.9, 0.25, 1),
    background 0.2s, color 0.2s;
}

html.atelier .scroll-top-btn.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
}

html.atelier body.menu-open .scroll-top-btn,
html.atelier body.work-modal-open .scroll-top-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Phone drawer: one scrollbar (the page is locked behind it, and the
   drawer's own is hidden so it doesn't eat into the close button), straight
   dividers on the rows rather than the rounded links, and rows short enough
   that Contact and the theme toggle fit on a phone screen. */
@media (max-width: 800px) {
  html.atelier:has(body.menu-open),
  html.atelier body.menu-open {
    overflow: hidden !important;
  }

  html.atelier .nav-links,
  html.atelier .nav-links.open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 4.6rem 1.4rem 1.4rem !important;
  }

  html.atelier .nav-links::-webkit-scrollbar {
    display: none;
  }

  html.atelier body .nav-links > li {
    padding: 0 !important;
    border-bottom: 1px solid var(--line);
  }

  html.atelier body .nav-links > li.drawer-close-btn-li,
  html.atelier body .nav-links > li.drawer-theme-toggle-li {
    border-bottom: 0;
  }

  html.atelier body .nav-links > li > a {
    padding: 0.78rem 0.55rem !important;
    border-bottom: 0 !important;
    border-radius: 0.6rem;
  }

  html.atelier body .nav-links > li.drawer-theme-toggle-li {
    padding-top: 1rem !important;
  }

  html.atelier body .drawer-close-btn {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent) !important;
  }
}

/* Phone hero: the mascot shrinks so the name and pitch start on the first
   screen; on short phones she shrinks again. */
@media (max-width: 760px) {
  html.atelier .home-mascot {
    width: 190px;
  }

  html.atelier .home-mascot .atelier-mascot {
    max-width: 190px;
    height: 224px;
  }

  html.atelier .home-container {
    gap: 1rem;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  html.atelier .home-mascot {
    width: 150px;
  }

  html.atelier .home-mascot .atelier-mascot {
    max-width: 150px;
    height: 176px;
  }
}

/* Phone lock screen: a smaller door, so the name field is on screen. */
@media (max-width: 760px) {
  html.atelier .lock-porch {
    width: 7rem;
    padding-bottom: 1rem;
  }

  html.atelier .lock-scene {
    gap: 1.4rem;
  }

  html.atelier .portfolio-lock {
    padding-top: max(4.6rem, env(safe-area-inset-top)) !important;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  html.atelier .lock-porch {
    width: 5.6rem;
  }
}

/* Phone About loop: three steps on one row, the question on its own row
   below, so no arrow is ever left dangling at the end of a line. */
@media (max-width: 760px) {
  html.atelier .atelier-about-flow {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 0.8rem 1.75rem;
  }

  html.atelier .atelier-about-flow li.is-ask {
    grid-column: 1 / -1;
    justify-self: center;
  }

  html.atelier .atelier-about-flow li:not(:last-child)::after {
    right: -1.38rem;
  }

  html.atelier .atelier-about-flow li:nth-child(3)::after {
    content: none;
  }
}

/* Phone project viewer: the key metric, the category and the previous/next
   names wrap instead of trailing off in an ellipsis. */
@media (max-width: 640px) {
  html.atelier .case-reader-hook {
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
  }

  html.atelier .case-reader-kicker {
    align-items: flex-start;
    white-space: normal;
  }

  html.atelier .case-reader-cat {
    overflow: visible;
    line-height: 1.4;
    padding-top: 0.25rem;
  }

  html.atelier .case-reader-step-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: 0.85rem;
    line-height: 1.2;
  }
}

/* Balanced headings and quotes; no orphaned last words in paragraphs. */
html.atelier h1,
html.atelier h2,
html.atelier h3,
html.atelier .atelier-about-pull,
html.atelier .atelier-essay-pull,
html.atelier .atelier-exp-hook,
html.atelier .story-pull {
  text-wrap: balance;
}

html.atelier p,
html.atelier li {
  text-wrap: pretty;
}

html.atelier .atelier-nowrap {
  white-space: nowrap;
}

/* Category pills stay on one line; long ones truncate rather than wrap. */
html.atelier .project-category,
html.atelier .project-tag {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  height: auto;
  line-height: 1.45;
}

/* The active certificate is a warm card, not a blue-grey wash. */
html.atelier main .atelier-cert-index button:hover,
html.atelier main .atelier-cert-index button.is-active {
  background: var(--card);
}

/* Watermarks sit fully inside their cards. */
html.atelier .atelier-exp-paper::before {
  top: 0.6rem;
  right: 1rem;
  line-height: 0.9;
}

html.atelier .atelier-essay-num {
  top: 1rem;
  right: 1.2rem;
  line-height: 0.9;
}

html.atelier .atelier-essay-meta {
  padding-right: 5rem;
}

/* Skill cards: the divider follows the heading, so it lines up across cards
   whatever the number of tag rows below it. */
html.atelier .atelier-skill-tags {
  margin: 0;
}

/* Phone: the open/close toggle pins to the row's top-right corner instead of
   wrapping next to the company name. */
@media (max-width: 720px) {
  html.atelier .atelier-exp-row {
    position: relative;
    padding-right: 2.2rem;
  }

  html.atelier .atelier-exp-toggle {
    position: absolute;
    top: 0.95rem;
    right: 0.1rem;
    margin: 0;
  }
}

/* Writing: the essay card sits straight, with a way to the rest. */
html.atelier .atelier-essay {
  transform: none;
}

html.atelier .atelier-essay:hover,
html.atelier .atelier-essay:focus-visible {
  transform: translateY(-4px);
}

html.atelier .atelier-writing-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.4rem;
  padding-bottom: 0.15rem;
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

html.atelier .atelier-writing-more:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Fun facts: straight, compact, an even 3 x 2 grid. */
html.atelier .fun-facts-section .atelier-note {
  min-height: 0;
  padding: 1.15rem 1.2rem 1.25rem;
  container-type: inline-size;
}

/* The pen note needs room beside the kicker; on a narrow card it would
   write over it. */
@container (max-width: 310px) {
  html.atelier .fun-facts-section .atelier-note-scribble {
    display: none;
  }
}

html.atelier .fun-facts-section .atelier-notes {
  gap: 1.1rem;
}

html.atelier .fun-facts-section .atelier-note--wide {
  grid-column: auto;
}

html.atelier .fun-facts-section .atelier-note h3,
html.atelier .fun-facts-section .atelier-note--wide h3 {
  margin-bottom: 0.45rem;
  font-size: 1.22rem !important;
}

html.atelier .fun-facts-section .atelier-note-kicker {
  margin-bottom: 0.6rem;
}

html.atelier .fun-facts-section .atelier-note p {
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (min-width: 521px) and (max-width: 900px) {
  html.atelier .fun-facts-section .atelier-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html.atelier .fun-facts-section .atelier-note {
    padding: 1rem 1.05rem 1.1rem;
  }

  html.atelier .fun-facts-section .atelier-notes {
    gap: 0.9rem;
  }
}

/* —— Project sections: counter-drifting rows of compact cards (case-reel.js) ——
   The original cards stay in the HTML as the no-JS fallback and as the source
   the reader (viewer.js) and the "Read more" modal (script.js) work from. */
html.atelier .has-reel {
  overflow-x: clip;
}

html.atelier .has-reel .projects-cards-row {
  display: none !important;
}

html.atelier .case-reel {
  position: relative;
  width: 100vw;
  margin: 2.2rem 0 0 calc(50% - 50vw);
  display: grid;
  gap: 0.35rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

html.atelier .case-reel-row {
  overflow: hidden;
  padding: 8px 0 18px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

html.atelier .case-reel-row.is-dragging {
  cursor: grabbing;
}

html.atelier .case-reel-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
}

html.atelier .cr {
  --h: var(--spin);
  position: relative;
  flex: 0 0 auto;
  width: 356px;
  padding: 1.05rem 1.15rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--h) 9%, transparent), transparent 55%),
    var(--card);
  color: var(--ink);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease,
    box-shadow 0.45s ease, opacity 0.4s ease;
}

html.atelier .cr:hover,
html.atelier .cr:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--h) 55%, var(--line));
  box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--h) 70%, #000);
}

html.atelier .case-reel-row.is-hover .cr:not(:hover) {
  opacity: 0.5;
}

/* The brand's initials, set large and cropped by the card's corner. */
html.atelier .cr-mark {
  position: absolute;
  right: -0.35rem;
  bottom: -1.55rem;
  z-index: -1;
  font: italic 500 6.2rem/1 var(--serif);
  letter-spacing: -0.06em;
  color: var(--h);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .cr:hover .cr-mark,
html.atelier .cr:focus-within .cr-mark {
  opacity: 0.16;
  transform: translate(-6px, -4px) rotate(-4deg);
}

html.atelier .cr-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

html.atelier .cr-logo {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--h) 15%, var(--card));
  color: var(--h);
  font: 600 0.95rem/1 var(--serif);
  letter-spacing: -0.01em;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s ease, color 0.35s ease;
}

/* Real brand marks sit on white in both themes so their colours stay true. */
html.atelier .cr-logo.has-img {
  padding: 0 7px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(26, 23, 19, 0.08);
}

html.atelier .cr-logo img {
  display: block;
  width: auto;
  height: 28px;
  max-width: 58px;
  object-fit: contain;
  -webkit-user-drag: none;
}

html.atelier body.dark-theme .cr-logo:not(.has-img) {
  color: color-mix(in srgb, var(--h) 45%, #fff);
  background: color-mix(in srgb, var(--h) 34%, var(--card));
}

html.atelier .cr:hover .cr-logo,
html.atelier .cr:focus-within .cr-logo {
  transform: rotate(-6deg) scale(1.05);
}

html.atelier .cr:hover .cr-logo:not(.has-img),
html.atelier .cr:focus-within .cr-logo:not(.has-img) {
  background: var(--h);
  color: #fff;
}

html.atelier .cr-who {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

html.atelier .cr-brand {
  font: 600 0.86rem/1.2 var(--sans);
  color: var(--ink);
}

html.atelier .cr-kind {
  font: 500 0.74rem/1.2 var(--sans);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.atelier .cr-go {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
  -webkit-user-drag: none;
}

html.atelier .cr-go svg {
  width: 13px;
  height: 13px;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .cr:hover .cr-go,
html.atelier .cr:focus-within .cr-go {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper) !important;
}

html.atelier .cr:hover .cr-go svg,
html.atelier .cr:focus-within .cr-go svg {
  transform: rotate(45deg);
}

html.atelier h3.cr-title {
  margin: 0.85rem 0 0 !important;
  font: 500 1.14rem/1.25 var(--serif) !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: left !important;
}

/* The title button opens the card's "Read more" and covers the whole card. */
html.atelier .cr-more {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-wrap: balance;
  cursor: inherit;
}

html.atelier .cr-more::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

html.atelier .cr-more:focus-visible {
  outline: none;
}

html.atelier .cr:has(.cr-more:focus-visible) {
  outline: 2px solid var(--spin);
  outline-offset: 3px;
}

html.atelier p.cr-hook {
  margin: 0.3rem 0 0 !important;
  font: 400 0.86rem/1.4 var(--sans) !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: currentColor !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chips sit above the title's full-card hit area. */
html.atelier .cr-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

html.atelier a.cr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font: 600 0.74rem/1 var(--sans);
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  -webkit-user-drag: none;
}

html.atelier .cr-chip svg,
html.atelier .cr-chip img {
  width: 13px;
  height: 13px;
  flex: none;
}

html.atelier .cr-chip img {
  width: auto;
}

html.atelier a.cr-chip:hover,
html.atelier a.cr-chip:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper) !important;
}

/* —— Design: Figma frames on a dotted canvas —— */
html.atelier .cr--frame {
  --h: #0d99ff;
  width: 372px;
  padding: 0.95rem 1.1rem 1rem;
  border-radius: 6px;
  overflow: visible;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--card);
}

html.atelier .cr--frame:hover,
html.atelier .cr--frame:focus-within {
  transform: none;
  border-color: var(--h);
  box-shadow: 0 0 0 1px var(--h), 0 18px 34px -24px rgba(13, 153, 255, 0.6);
}

html.atelier .cr-frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font: 500 0.72rem/1.2 var(--sans);
  color: var(--muted);
}

html.atelier .cr-frame-name {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

html.atelier .cr-frame-name b {
  font-weight: 600;
  color: var(--h);
}

html.atelier .cr--frame:hover .cr-frame-name {
  color: var(--h);
}

html.atelier .cr-frame-kind {
  flex: none;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

html.atelier .cr--frame h3.cr-title {
  margin-top: 0.8rem !important;
}

html.atelier .cr--frame .cr-chips {
  margin-top: 0.85rem;
}

html.atelier .cr-select {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

html.atelier .cr--frame:hover .cr-select,
html.atelier .cr--frame:focus-within .cr-select {
  opacity: 1;
}

html.atelier .cr-select i {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 1.5px solid var(--h);
  border-radius: 1px;
}

html.atelier .cr-select i:nth-child(1) { top: -4px; left: -4px; }
html.atelier .cr-select i:nth-child(2) { top: -4px; right: -4px; }
html.atelier .cr-select i:nth-child(3) { bottom: -4px; left: -4px; }
html.atelier .cr-select i:nth-child(4) { bottom: -4px; right: -4px; }

/* Size readout under the selection, filled in from the card's box. */
html.atelier .cr-select em {
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translate(-50%, 50%);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  background: var(--h);
  color: #fff;
  font: 600 0.64rem/1.2 var(--sans);
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

html.atelier .cr-select em::before {
  content: attr(data-size);
}

/* —— Projects: quiet editor cards ——
   Same paper card as the rest; the code feel comes from a few mono details. */
html.atelier .cr--code {
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace;
  display: flex;
  flex-direction: column;
  width: 340px;
}

html.atelier .cr-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font: 500 0.72rem/1 var(--mono);
  color: var(--muted);
}

html.atelier .cr-dots {
  display: inline-flex;
  gap: 4px;
  flex: none;
}

html.atelier .cr-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.3s ease;
}

html.atelier .cr--code:hover .cr-dots i:nth-child(1) { background: #ff5f57; }
html.atelier .cr--code:hover .cr-dots i:nth-child(2) { background: #febc2e; transition-delay: 0.05s; }
html.atelier .cr--code:hover .cr-dots i:nth-child(3) { background: #28c840; transition-delay: 0.1s; }

html.atelier .cr-path {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

html.atelier .cr--code:hover .cr-path {
  color: var(--ink);
}

html.atelier .cr-caret {
  display: inline-block;
  width: 5px;
  height: 0.95em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--h);
  opacity: 0;
}

html.atelier .cr--code:hover .cr-caret {
  animation: cr-blink 1s steps(1) infinite;
}

@keyframes cr-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

html.atelier .cr-flag {
  flex: none;
  margin-left: auto;
  padding: 0.14rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.62rem;
}

html.atelier p.cr-comment {
  margin: 0.3rem 0 0 !important;
  font: 400 0.76rem/1.45 var(--mono) !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: currentColor !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.atelier .cr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

html.atelier .cr--code h3.cr-title {
  margin-top: 0.75rem !important;
}

html.atelier .cr--code .cr-more {
  min-height: 0;
}

html.atelier .cr--code p.cr-comment {
  margin-bottom: 0.85rem !important;
}

html.atelier .cr-stack {
  min-width: 0;
  font: 400 0.7rem/1.2 var(--mono);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.atelier .cr-links {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 0.85rem;
  flex: none;
}

html.atelier a.cr-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: 600 0.74rem/1 var(--mono);
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
  -webkit-user-drag: none;
}

html.atelier a.cr-link svg {
  width: 10px;
  height: 10px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier a.cr-link:hover,
html.atelier a.cr-link:focus-visible {
  color: var(--h) !important;
}

html.atelier a.cr-link:hover svg {
  transform: rotate(45deg);
}

html.atelier .cr-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28c840;
}

html.atelier .cr--code:hover .cr-live {
  animation: cr-pulse 1.6s ease-out infinite;
}

@keyframes cr-pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5); }
  70%, 100% { box-shadow: 0 0 0 5px rgba(40, 200, 64, 0); }
}

html.atelier .case-reel--frame .case-reel-row {
  padding: 10px 0 26px;
}

@keyframes cr-pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.55); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(40, 200, 64, 0); }
}

@media (max-width: 600px) {
  html.atelier .cr {
    width: 288px;
  }

  html.atelier .cr--code {
    width: 300px;
  }

  html.atelier .case-reel {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .case-reel {
    -webkit-mask-image: none;
            mask-image: none;
  }

  html.atelier .case-reel-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    cursor: auto;
  }

  html.atelier .case-reel-track {
    padding: 0 6vw;
  }

  html.atelier .cr {
    scroll-snap-align: center;
  }

  html.atelier .case-reel-track > [aria-hidden="true"] {
    display: none;
  }
}

@media print {
  html.atelier .case-reel {
    display: none !important;
  }

  html.atelier .has-reel .projects-cards-row {
    display: grid !important;
  }
}

/* Skills: a soft per-card hue (--sk) on the icon tile, corner wash and chip
   hover; the AI card spans the grid with tools and practice side by side. */
html.atelier .atelier-skill-card {
  --sk: var(--spin);
  --sk-ink: color-mix(in srgb, var(--sk) 62%, var(--ink));
  background-color: var(--card);
  background-image: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--sk) 7%, transparent), transparent 55%);
}

html.atelier .atelier-skill-card .atelier-skill-icon {
  color: var(--sk-ink);
  background: color-mix(in srgb, var(--sk) 9%, var(--paper));
  border-color: color-mix(in srgb, var(--sk) 26%, var(--line));
}

html.atelier .atelier-skill-card:hover .atelier-skill-icon {
  border-color: var(--sk);
}

html.atelier .atelier-skill-card .atelier-skill-tags li {
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

html.atelier .atelier-skill-card:hover .atelier-skill-tags li {
  border-color: color-mix(in srgb, var(--sk) 24%, var(--line));
}

html.atelier body .atelier-skill-card .atelier-skill-tags li:hover {
  color: var(--sk-ink) !important;
  border-color: color-mix(in srgb, var(--sk) 55%, transparent);
  background-color: color-mix(in srgb, var(--sk) 9%, transparent);
}

html.atelier .atelier-skill-card,
html.atelier .atelier-skill-lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  align-content: start;
  align-items: center;
}

html.atelier .atelier-skill-card {
  padding: 1.1rem 1.15rem 1.2rem;
}

html.atelier .atelier-skill-card .atelier-skill-icon {
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  border-radius: 0.65rem;
}

html.atelier .atelier-skill-card .atelier-skill-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

html.atelier .atelier-skill-card h3 {
  margin: 0;
  font-size: 1.22rem !important;
}

html.atelier .atelier-skill-card > .atelier-skill-tags {
  grid-column: 1 / -1;
  margin-top: 0.85rem;
  padding-top: 0.8rem;
}

html.atelier .atelier-skill-card .atelier-skill-tags {
  gap: 0.32rem;
}

html.atelier .atelier-skill-card .atelier-skill-tags li {
  padding: 0.18rem 0.5rem;
  font-size: 0.7rem;
}

html.atelier .atelier-skill-card--ai {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.55fr);
  gap: 1.4rem;
  align-items: start;
}

html.atelier .atelier-skill-note {
  grid-column: 1 / -1;
  margin: 0.7rem 0 0;
  max-width: 26ch;
  color: var(--muted) !important;
  font-size: 0.86rem;
  line-height: 1.5;
}

html.atelier .atelier-skill-groups {
  display: grid;
  gap: 0.8rem;
  align-self: stretch;
  align-content: center;
  padding-left: 1.4rem;
  border-left: 1px solid var(--line);
}

html.atelier .atelier-skill-sub {
  margin: 0 0 0.4rem;
  color: var(--muted) !important;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html.atelier .atelier-skill-group .atelier-skill-tags {
  padding: 0;
  border-top: 0;
}

html.atelier .atelier-skill-group:first-child .atelier-skill-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--ink) !important;
}

html.atelier .atelier-skill-group:first-child .atelier-skill-tags li::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--sk);
  opacity: 0.75;
}

@media (max-width: 720px) {
  html.atelier .atelier-skill-card--ai {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  html.atelier .atelier-skill-note {
    max-width: none;
  }

  html.atelier .atelier-skill-groups {
    padding: 1rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Experience: a live dot on the current role, a soft hover wash on rows,
   and the open card rising in with its points following one by one. */
html.atelier .atelier-exp-row {
  position: relative;
  border-radius: 0.8rem;
  transition: background-color 0.25s ease;
}

html.atelier .atelier-exp-row:hover {
  background-color: color-mix(in srgb, var(--card) 70%, transparent);
}

html.atelier .atelier-exp-role {
  transition: color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .atelier-exp-row:hover .atelier-exp-role {
  transform: translateX(4px);
}

html.atelier .atelier-exp-leader {
  transition: border-color 0.3s ease;
}

html.atelier .atelier-exp-row:hover .atelier-exp-leader,
html.atelier .atelier-exp-item.is-open .atelier-exp-leader {
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

html.atelier .atelier-exp-dur {
  margin-left: -0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.75;
}

html.atelier .atelier-exp-dur::before {
  content: "·";
  margin-right: 0.4rem;
}

html.atelier .atelier-exp-toggle {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease;
}

html.atelier .atelier-exp-row:hover .atelier-exp-toggle {
  border-color: var(--ink);
}

html.atelier .atelier-exp-item.is-open .atelier-exp-toggle {
  transform: rotate(180deg);
}

html.atelier .atelier-exp-item--now .atelier-exp-year {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

html.atelier .atelier-exp-item--now .atelier-exp-year::after {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--spin);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin) 45%, transparent);
  animation: expLive 2.2s ease-out infinite;
}

@keyframes expLive {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.5rem transparent; }
}

html.atelier .atelier-exp-item.is-open .atelier-exp-paper {
  animation: expRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.atelier .atelier-exp-item.is-open .atelier-exp-body li,
html.atelier .atelier-exp-item.is-open .atelier-exp-tags {
  animation: expRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.atelier .atelier-exp-item.is-open .atelier-exp-body li:nth-child(1) { animation-delay: 0.08s; }
html.atelier .atelier-exp-item.is-open .atelier-exp-body li:nth-child(2) { animation-delay: 0.13s; }
html.atelier .atelier-exp-item.is-open .atelier-exp-body li:nth-child(3) { animation-delay: 0.18s; }
html.atelier .atelier-exp-item.is-open .atelier-exp-body li:nth-child(4) { animation-delay: 0.23s; }
html.atelier .atelier-exp-item.is-open .atelier-exp-body li:nth-child(5) { animation-delay: 0.28s; }
html.atelier .atelier-exp-item.is-open .atelier-exp-body li:nth-child(n+6) { animation-delay: 0.33s; }
html.atelier .atelier-exp-item.is-open .atelier-exp-tags { animation-delay: 0.36s; }

@keyframes expRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

html.atelier .atelier-exp-body li {
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .atelier-exp-body li::before {
  width: 7px;
  height: 2px;
  top: 1.25rem;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .atelier-exp-body li:hover {
  padding-left: 1.35rem;
}

html.atelier .atelier-exp-body li:hover::before {
  width: 13px;
}

html.atelier .atelier-exp-tags li {
  transition: color 0.2s ease, border-color 0.2s ease;
}

html.atelier .atelier-exp-tags li:hover {
  color: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 720px) {
  html.atelier .atelier-exp-dur {
    margin-left: 0;
  }

  html.atelier .atelier-exp-row:hover .atelier-exp-role {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-exp-item--now .atelier-exp-year::after,
  html.atelier .atelier-exp-item.is-open .atelier-exp-paper,
  html.atelier .atelier-exp-item.is-open .atelier-exp-body li,
  html.atelier .atelier-exp-item.is-open .atelier-exp-tags {
    animation: none;
  }
}

/* Experience brand: each role carries its company colour (--brand) through
   the logo mark, the open card's top edge, corner wash, dashes and tags. */
html.atelier .atelier-exp-item {
  --brand: var(--accent);
  --brand-ink: color-mix(in srgb, var(--brand) 72%, var(--ink));
}

html.atelier .atelier-exp-mark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin-right: -0.4rem;
  align-self: center;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--brand) 9%, var(--paper));
  color: var(--brand-ink);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .atelier-exp-mark--parse {
  border-color: #0f0f11;
  background: #0f0f11;
}

html.atelier .atelier-exp-mark svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

html.atelier .atelier-exp-row:hover .atelier-exp-mark,
html.atelier .atelier-exp-item.is-open .atelier-exp-mark {
  transform: rotate(-6deg) scale(1.06);
}

html.atelier .atelier-exp-row:hover .atelier-exp-role,
html.atelier .atelier-exp-item.is-open .atelier-exp-role {
  color: var(--brand-ink);
}

html.atelier .atelier-exp-row:hover .atelier-exp-leader,
html.atelier .atelier-exp-item.is-open .atelier-exp-leader {
  border-bottom-color: color-mix(in srgb, var(--brand) 55%, transparent);
}

html.atelier body .atelier-exp-item .atelier-exp-period {
  color: var(--brand-ink) !important;
}

html.atelier .atelier-exp-body li::before {
  background: var(--brand);
}

html.atelier .atelier-exp-tags li:hover {
  color: var(--brand-ink);
  border-color: var(--brand);
}

html.atelier .atelier-exp-item--now .atelier-exp-year::after {
  background: var(--brand);
  animation-name: expLiveBrand;
}

@keyframes expLiveBrand {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.5rem transparent; }
}

html.atelier .atelier-exp-mark[data-href] {
  cursor: alias;
}

html.atelier .atelier-exp-mark--img {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
  background: #fff;
}

html.atelier .atelier-exp-mark--img img {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

html.atelier .atelier-exp-mark--round {
  border-radius: 50%;
  border-color: transparent;
  background: transparent;
}

html.atelier .atelier-exp-mark--round img {
  width: 100%;
  height: 100%;
}

html.atelier .atelier-exp-item.has-brand .atelier-exp-year {
  color: var(--brand-ink);
}

/* Open role: a brand-tinted side panel (logo, dates, link) beside the story,
   with the site's offset shadow taking the company colour. */
html.atelier .atelier-exp-paper {
  padding: 0;
}

html.atelier .atelier-exp-paper::before {
  display: none;
}

html.atelier .atelier-exp-item.is-open .atelier-exp-paper {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  border-color: var(--ink);
  box-shadow: 7px 9px 0 color-mix(in srgb, var(--brand) 82%, var(--ink));
}

html.atelier .atelier-exp-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.95rem;
  padding: 1.5rem 1.35rem 1.4rem;
  background: color-mix(in srgb, var(--brand) 9%, var(--card));
  border-right: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  overflow: hidden;
}

html.atelier .atelier-exp-side::after {
  content: attr(data-year);
  position: absolute;
  right: -0.15rem;
  bottom: -0.9rem;
  font-family: var(--serif);
  font-size: 5.4rem;
  font-weight: 560;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--brand);
  opacity: 0.13;
  pointer-events: none;
}

html.atelier .atelier-exp-side > * {
  position: relative;
  z-index: 1;
}

html.atelier .atelier-exp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 0.85rem;
  background: #fff;
  line-height: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

html.atelier a.atelier-exp-logo:hover,
html.atelier a.atelier-exp-logo:focus-visible {
  transform: translateY(-2px) rotate(-1.5deg);
  box-shadow: 3px 4px 0 var(--brand);
}

html.atelier .atelier-exp-logo img {
  display: block;
  width: auto;
  height: 1.85rem;
  max-width: 10.5rem;
  object-fit: contain;
}

html.atelier .atelier-exp-logo--badge {
  padding: 0.5rem 0.75rem;
  border-color: #0f0f11;
  background: #0f0f11;
}

html.atelier .atelier-exp-logo--badge img {
  height: 2.1rem;
}

html.atelier .atelier-exp-logo--round {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

html.atelier .atelier-exp-logo--round img {
  height: 4.2rem;
  border-radius: 50%;
}

html.atelier .atelier-exp-logo--mono {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand-ink);
}

html.atelier .atelier-exp-item.is-open .atelier-exp-logo {
  animation: expPop 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes expPop {
  from { opacity: 0; transform: scale(0.86) rotate(-4deg); }
  to { opacity: 1; transform: none; }
}

html.atelier .atelier-exp-period {
  margin: 0;
  line-height: 1.3;
}

html.atelier .atelier-exp-period span {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

html.atelier .atelier-exp-main {
  min-width: 0;
  padding: 1.4rem 1.5rem 1.5rem;
}

@media (max-width: 720px) {
  html.atelier .atelier-exp-item.is-open .atelier-exp-paper {
    grid-template-columns: 1fr;
    box-shadow: 5px 6px 0 color-mix(in srgb, var(--brand) 82%, var(--ink));
  }

  html.atelier .atelier-exp-side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 0.9rem;
    padding: 1.1rem 1.1rem 1rem;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  }

  html.atelier .atelier-exp-side::after {
    font-size: 3.6rem;
    bottom: -0.6rem;
  }

  html.atelier .atelier-exp-logo {
    min-height: 2.9rem;
    padding: 0.5rem 0.75rem;
  }

  html.atelier .atelier-exp-logo img {
    height: 1.5rem;
  }

  html.atelier .atelier-exp-logo--badge img {
    height: 1.7rem;
  }

  html.atelier .atelier-exp-logo--round img {
    height: 3.1rem;
  }

  html.atelier .atelier-exp-main {
    padding: 1.15rem 1.1rem 1.2rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  html.atelier .atelier-exp-item.is-open .atelier-exp-logo {
    animation: none;
  }
}

html.atelier body.dark-theme .atelier-exp-mark--parse,
html.atelier body.dark-theme .atelier-exp-logo--badge {
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}

/* Fun facts: each hobby gets its own hue (--fh) on the tape, kicker, icon,
   corner wash and the hover shadow; the pen notes stay terracotta. */
html.atelier .fun-facts-section .atelier-note {
  --fh: var(--spin);
  --fh-ink: color-mix(in srgb, var(--fh) 70%, var(--ink));
  background-color: var(--card);
  background-image: radial-gradient(120% 85% at 100% 0%, color-mix(in srgb, var(--fh) 8%, transparent), transparent 58%);
}

html.atelier .fun-facts-section .atelier-note:nth-child(1) { --fh: #9a6234; }
html.atelier .fun-facts-section .atelier-note:nth-child(2) { --fh: #7a5af0; }
html.atelier .fun-facts-section .atelier-note:nth-child(3) { --fh: #3d5a80; }
html.atelier .fun-facts-section .atelier-note:nth-child(4) { --fh: #d9443a; }
html.atelier .fun-facts-section .atelier-note:nth-child(5) { --fh: #5b7a4a; }
html.atelier .fun-facts-section .atelier-note:nth-child(6) { --fh: #b4436c; }

html.atelier body .fun-facts-section .atelier-note:hover {
  border-color: var(--ink);
  box-shadow: 7px 9px 0 color-mix(in srgb, var(--fh) 78%, var(--ink)) !important;
}

html.atelier .fun-facts-section .atelier-note::after {
  background:
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255, 255, 255, 0.2) 5px 7px),
    color-mix(in srgb, var(--fh) 32%, transparent);
  transition: rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier body.dark-theme .fun-facts-section .atelier-note::after {
  background:
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255, 255, 255, 0.08) 5px 7px),
    color-mix(in srgb, var(--fh) 45%, transparent);
}

html.atelier .fun-facts-section .atelier-note:hover::after {
  rotate: calc(var(--tape-r) * -0.6);
  scale: 1.06;
}

html.atelier body .fun-facts-section .atelier-note-kicker {
  color: var(--fh-ink) !important;
}

html.atelier .fun-facts-section .atelier-note:hover .atelier-note-kicker::after {
  background: var(--fh);
}

html.atelier .fun-facts-section .atelier-note-icon {
  border-color: color-mix(in srgb, var(--fh) 30%, var(--line));
  background: color-mix(in srgb, var(--fh) 9%, var(--card));
  color: var(--fh-ink);
}

html.atelier .fun-facts-section .atelier-note:hover .atelier-note-icon {
  border-color: var(--fh);
  background: var(--fh);
  color: #fff;
}

/* Footer "Let's ship.": three dots in one chain. The full stop drops in and
   lands with a squash, the jolt bounces the i's tittle, and the apostrophe
   swings from its top like a hung tag. Replays on hover. */
html.atelier .fx-footer-mark {
  padding-top: 0.32em;
  margin-top: calc(2.4rem - 0.32em);
}

html.atelier .fxf-apos {
  display: inline-block;
  font-style: normal;
  transform-origin: 50% 22%;
}

html.atelier .fxf-tittle,
html.atelier .fxf-dot {
  display: inline-block;
  border-radius: 50%;
  transform-origin: 50% 100%;
}

html.atelier .fxf-tittle {
  width: 0.135em;
  height: 0.135em;
  margin: 0 -0.1855em 0 0.0505em;
  vertical-align: 0.5125em;
  background: currentColor;
}

html.atelier .fxf-dot {
  position: relative;
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.03em;
  background: var(--spin);
}

html.atelier .fxf-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.02em;
  width: 0.5em;
  height: 0.12em;
  margin-left: -0.25em;
  border: 0.012em solid var(--spin);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

html.atelier .fx-footer-mark.is-armed:not(.is-live) .fxf-dot {
  opacity: 0;
}

html.atelier .fx-footer-mark.is-live .fxf-dot {
  animation: fxfDrop 1.15s both;
}

html.atelier .fx-footer-mark.is-live .fxf-dot::after {
  animation: fxfRipple 0.75s 0.42s ease-out both;
}

html.atelier .fx-footer-mark.is-live .fxf-tittle {
  animation: fxfHop 0.85s 0.44s both;
}

html.atelier .fx-footer-mark.is-live .fxf-apos {
  animation: fxfSwing 1.3s 0.78s both;
}

@keyframes fxfDrop {
  0% { opacity: 0; translate: 0 -1.15em; scale: 0.82 1.28; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  8% { opacity: 1; }
  38% { translate: 0 0; scale: 0.86 1.22; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  45% { translate: 0 0; scale: 1.45 0.58; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  62% { translate: 0 -0.24em; scale: 0.9 1.12; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  76% { translate: 0 0; scale: 1.18 0.84; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  86% { translate: 0 -0.05em; scale: 0.97 1.03; }
  100% { opacity: 1; translate: 0 0; scale: 1 1; }
}

@keyframes fxfRipple {
  0% { opacity: 0.55; scale: 0.2 0.4; }
  100% { opacity: 0; scale: 1.6 1.4; }
}

@keyframes fxfHop {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: ease-out; }
  10% { translate: 0 0; scale: 1.25 0.75; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  42% { translate: 0 -0.2em; scale: 0.88 1.14; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  64% { translate: 0 0; scale: 1.3 0.72; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  80% { translate: 0 -0.04em; scale: 0.96 1.05; }
  100% { translate: 0 0; scale: 1 1; }
}

@keyframes fxfSwing {
  0% { rotate: 0deg; animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1); }
  18% { rotate: -22deg; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  42% { rotate: 14deg; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  62% { rotate: -7deg; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  80% { rotate: 3deg; }
  100% { rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .fx-footer-mark .fxf-dot,
  html.atelier .fx-footer-mark .fxf-dot::after,
  html.atelier .fx-footer-mark .fxf-tittle,
  html.atelier .fx-footer-mark .fxf-apos {
    animation: none !important;
    opacity: 1;
  }

  html.atelier .fx-footer-mark .fxf-dot::after {
    opacity: 0;
  }
}

/* Theme toggle: a calm pill with an even inset thumb, ink by day with a
   moon, terracotta by night with a sun; line icons instead of emoji. */
html.atelier .theme-toggle-btn,
html.atelier .drawer-theme-toggle-li .theme-toggle-btn,
html.atelier .drawer-theme-toggle-li .theme-toggle-btn:hover,
html.atelier .drawer-theme-toggle-li .theme-toggle-btn:focus,
html.atelier .drawer-theme-toggle-li .theme-toggle-btn:active {
  position: relative;
  display: block;
  width: 50px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 999px !important;
  background: var(--card) !important;
  box-shadow: none !important;
  overflow: visible;
  transform: none;
}

html.atelier .theme-toggle-btn:hover {
  border-color: var(--ink) !important;
}

html.atelier .theme-toggle-icon-wrapper {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transform: none;
  transition: translate 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.3s ease;
}

html.atelier body.dark-theme .theme-toggle-icon-wrapper {
  transform: none;
  translate: 22px 0;
  background: var(--spin);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html.atelier .theme-toggle-btn #theme-toggle-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0;
  color: var(--paper);
  transition: rotate 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

html.atelier body.dark-theme .theme-toggle-btn #theme-toggle-icon {
  color: var(--paper);
  rotate: 180deg;
}

html.atelier #theme-toggle-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.atelier body:not(.dark-theme) #theme-toggle-icon svg path {
  fill: currentColor;
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .theme-toggle-icon-wrapper,
  html.atelier .theme-toggle-btn #theme-toggle-icon {
    transition: none;
  }
}

/* Contact polish: icon rows that fill in on hover, a copy pill
   for the email, a softer focus state on the form, quick starts and a
   paper plane on the send button. Layered over the base contact rules. */
html.atelier .atelier-contact-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 0 0 1rem;
}

html.atelier .atelier-contact-meta .atelier-contact-status {
  margin: 0;
}

html.atelier .atelier-contact-links li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
}

html.atelier .atelier-contact-links li > a {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  border-bottom: 0;
  padding: 0.7rem 0.05rem;
}

html.atelier .atelier-contact-links a > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .atelier-contact-ico {
  box-sizing: content-box;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0.42rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .atelier-contact-leader {
  position: relative;
  transform: none;
  align-self: center;
}

html.atelier .atelier-contact-leader::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  border-bottom: 1.5px solid var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .atelier-contact-links a > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: color 0.3s ease;
}

html.atelier .atelier-contact-go {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translate(-0.3rem, 0.3rem);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .atelier-contact-links a:is(:hover, :focus-visible) > span:first-child {
  transform: translateX(0.2rem);
}

html.atelier .atelier-contact-links a:is(:hover, :focus-visible) .atelier-contact-ico {
  background: var(--accent);
  color: var(--paper);
  transform: rotate(-6deg) scale(1.06);
}

html.atelier .atelier-contact-links a:is(:hover, :focus-visible) .atelier-contact-leader::after {
  transform: scaleX(1);
}

html.atelier .atelier-contact-links a:is(:hover, :focus-visible) .atelier-contact-go {
  opacity: 1;
  transform: none;
}

html.atelier .atelier-contact-clip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.62rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 600 0.7rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}

html.atelier .atelier-contact-clip svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.atelier .atelier-contact-clip:hover,
html.atelier .atelier-contact-clip:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

html.atelier .atelier-contact-clip:active {
  transform: scale(0.95);
}

html.atelier .atelier-contact-clip.is-copied {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  animation: contact-pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes contact-pop {
  40% { transform: scale(1.08); }
}

/* Form: the card lifts a little while someone is writing in it. */
html.atelier .atelier-contact-form {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .atelier-contact-form:focus-within {
  transform: translate(-2px, -3px);
  box-shadow: 9px 12px 0 var(--ink);
}

html.atelier .atelier-contact-form label {
  transition: color 0.25s ease;
}

html.atelier .atelier-contact-form .form-group:focus-within > label {
  color: var(--ink);
}

html.atelier .atelier-contact-form .form-group:has(:is(input, textarea):required:valid) > label::after {
  content: '\2713';
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--accent);
  letter-spacing: 0;
  animation: contact-pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier body .contact-section input,
html.atelier body .contact-section textarea {
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}

html.atelier body .contact-section input:hover,
html.atelier body .contact-section textarea:hover {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent) !important;
}

html.atelier body .contact-section input:focus,
html.atelier body .contact-section textarea:focus {
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

html.atelier .atelier-contact-field {
  position: relative;
}

html.atelier .atelier-contact-field textarea {
  display: block;
  padding-bottom: 1.7rem;
}

html.atelier .atelier-contact-count {
  position: absolute;
  right: 0.85rem;
  bottom: 0.55rem;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.75;
  pointer-events: none;
  transition: color 0.25s ease;
}

html.atelier .atelier-contact-count.is-near {
  color: var(--spin);
  opacity: 1;
}

html.atelier .atelier-contact-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

html.atelier .atelier-contact-starters button {
  padding: 0.32rem 0.7rem;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 0.76rem/1.2 var(--sans);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .atelier-contact-starters button:hover,
html.atelier .atelier-contact-starters button:focus-visible {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

html.atelier .atelier-contact-starters button.is-picked {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  animation: contact-pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier body .contact-section button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

html.atelier body .contact-section button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 25%, transparent);
}

html.atelier body .contact-section button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

html.atelier .form-btn-plane {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.atelier .contact-section button[type="submit"]:hover .form-btn-plane {
  transform: translate(3px, -3px) rotate(-8deg);
}

html.atelier .contact-section button[type="submit"].is-sending .form-btn-plane {
  animation: contact-fly 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

html.atelier .contact-section button[type="submit"].is-sent .form-btn-plane {
  animation: contact-sent 0.9s cubic-bezier(0.3, 0, 0.3, 1) both;
}

@keyframes contact-fly {
  0% { transform: none; opacity: 1; }
  45% { transform: translate(18px, -18px) rotate(-12deg); opacity: 0; }
  46% { transform: translate(-18px, 18px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

@keyframes contact-sent {
  0% { transform: none; }
  50% { transform: translate(22px, -22px) rotate(-14deg); opacity: 0; }
  51% { transform: scale(0.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

@media (max-width: 800px) {
  html.atelier .atelier-contact-links a > span:last-child {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .contact-section button[type="submit"] .form-btn-plane {
    animation: none !important;
  }

  html.atelier .atelier-contact-form:focus-within {
    transform: none;
  }
}
/* ---- Small screens: contact and footer, laid out for a phone ------------
   Contact links become one email card plus three tap tiles, the form
   tightens up, and the footer folds into a three-column index. */
@media (max-width: 640px) {
  html.atelier .atelier-contact {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }

  html.atelier .atelier-contact-copy > p:not(.atelier-contact-status) {
    margin-bottom: 1.1rem;
    font-size: 0.96rem;
    line-height: 1.55;
  }

  html.atelier body .atelier-contact-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    border-top: 0;
  }

  html.atelier body .atelier-contact-links li {
    margin: 0;
    border: 1.5px solid var(--line);
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--card) 70%, transparent);
    transition: border-color 0.25s ease, transform 0.25s ease;
  }

  html.atelier body .atelier-contact-links li:active {
    transform: scale(0.97);
  }

  html.atelier body .atelier-contact-links li:has(a:is(:hover, :focus-visible)) {
    border-color: var(--accent);
  }

  html.atelier body .atelier-contact-links li > a {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.8rem 0.3rem 0.7rem;
    text-align: center;
  }

  html.atelier body .atelier-contact-links a > span:first-child {
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  html.atelier body .atelier-contact-links a:is(:hover, :focus-visible) > span:first-child {
    transform: none;
  }

  html.atelier body .atelier-contact-links .atelier-contact-leader,
  html.atelier body .atelier-contact-links li:not(:first-child) a > span:last-child {
    display: none;
  }

  /* The email gets its own card: icon, label over address, copy. */
  html.atelier body .atelier-contact-links li:first-child {
    grid-column: 1 / -1;
    padding-right: 0.6rem;
  }

  html.atelier body .atelier-contact-links li:first-child > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 0.1rem 0.7rem;
    padding: 0.65rem 0.2rem 0.65rem 0.65rem;
    text-align: left;
  }

  html.atelier body .atelier-contact-links li:first-child a > span:first-child {
    display: contents;
  }

  html.atelier body .atelier-contact-links li:first-child .atelier-contact-ico {
    grid-row: span 2;
  }

  html.atelier body .atelier-contact-links li:first-child a > span:last-child {
    flex-basis: auto;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.86rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  html.atelier body .atelier-contact-links li:first-child .atelier-contact-go {
    display: none;
  }

  html.atelier .atelier-contact-clip {
    padding: 0.42rem 0.62rem;
  }

  html.atelier body .atelier-contact-form {
    padding: 1.15rem 1.05rem 1.15rem;
    border-radius: 1rem;
    box-shadow: 4px 5px 0 var(--ink);
  }

  html.atelier body .atelier-contact-form:focus-within {
    transform: none;
    box-shadow: 4px 5px 0 var(--ink);
  }

  html.atelier body .atelier-contact-form h3 {
    margin-bottom: 0.85rem;
    font-size: 1.32rem !important;
  }

  html.atelier body .atelier-contact-form .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  html.atelier body .atelier-contact-form .form-group {
    margin-bottom: 0.7rem;
  }

  html.atelier body .atelier-contact-form label {
    margin-bottom: 0.3rem;
    font-size: 0.66rem;
  }

  /* 16px keeps iOS from zooming the page when a field is tapped. */
  html.atelier body .contact-section input,
  html.atelier body .contact-section textarea {
    padding: 0.62rem 0.75rem;
    border-radius: 0.7rem;
    font-size: 16px;
  }

  html.atelier body .contact-section textarea {
    min-height: 6.2rem;
  }

  html.atelier .atelier-contact-starters {
    flex-wrap: nowrap;
    margin: 0.5rem -1.05rem 0;
    padding: 0.1rem 1.05rem 0.2rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent);
  }

  html.atelier .atelier-contact-starters::-webkit-scrollbar {
    display: none;
  }

  html.atelier .atelier-contact-starters button {
    flex: none;
    white-space: nowrap;
  }

  html.atelier body .contact-section button[type="submit"] {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.2rem;
  }

  html.atelier body .atelier-footer {
    margin-top: 0.5rem;
    padding: 2rem 0 1.1rem !important;
  }

  html.atelier body .atelier-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem 0.8rem;
  }

  html.atelier body .atelier-footer-brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }

  html.atelier body .atelier-footer-brand p {
    margin: 0;
    padding-left: 0.9rem;
    border-left: 1.5px solid var(--line);
    font-size: 0.86rem;
    line-height: 1.45;
  }

  html.atelier body .atelier-footer-label {
    margin-bottom: 0.45rem;
    font-size: 0.64rem;
  }

  html.atelier body .atelier-footer li {
    margin: 0;
  }

  html.atelier body .atelier-footer li a {
    display: inline-block;
    padding: 0.3rem 0;
    font-size: 0.86rem;
  }

  html.atelier body .fx-footer-mark {
    margin-top: calc(1.4rem - 0.32em);
    font-size: clamp(2.6rem, 15vw, 4rem);
  }

  html.atelier body .atelier-footer-bottom {
    flex-direction: row;
    align-items: center;
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 360px) {
  html.atelier body .atelier-contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  html.atelier body .atelier-contact-links li:first-child .atelier-contact-clip span {
    display: none;
  }

  html.atelier body .atelier-footer li a {
    font-size: 0.8rem;
  }
}
/* ---- Phone layer: long stacks become swipe rails, lists tighten --------- */
html.atelier .atelier-contact > * {
  min-width: 0;
}

html.atelier .atelier-footer-logo {
  flex: none;
  white-space: nowrap;
}

.m-deck-foot,
.m-tabs-bar,
.m-story-bars {
  display: none;
}

@keyframes m-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Phone modes (mobile-rails.js): About is a deck of notes, Skills are tabs
   that play through on their own, Fun facts are stories. Each auto-plays
   only while on screen and stops once the visitor takes over. */
@media (max-width: 640px) {
  /* About: a deck. The top note swipes or taps away and tucks to the back. */
  html.atelier body .atelier-about-notes.m-deck {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0.4rem 0.4rem 1.9rem !important;
  }

  html.atelier body .m-deck > li {
    grid-area: 1 / 1 !important;
    margin: 0 !important;
    rotate: none !important;
    translate: none !important;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  }

  html.atelier body .m-deck > li[data-pos="0"] {
    z-index: 3;
    border-color: var(--ink);
    box-shadow: 5px 6px 0 var(--ink);
    transform: translateX(var(--dx, 0px)) rotate(var(--rot, 0deg)) !important;
  }

  html.atelier body .m-deck > li[data-pos="1"] {
    z-index: 2;
    transform: translateY(13px) scale(0.955) rotate(2.4deg) !important;
  }

  html.atelier body .m-deck > li[data-pos="2"] {
    z-index: 1;
    transform: translateY(24px) scale(0.91) rotate(-2.2deg) !important;
  }

  html.atelier body .m-deck > li[data-pos="3"] {
    opacity: 0;
    transform: translateY(24px) scale(0.88) !important;
  }

  html.atelier body .m-deck > li.is-dragging {
    cursor: grabbing;
    transition: none !important;
  }

  html.atelier body .m-deck > li.is-leaving {
    opacity: 0;
    transform: translateX(calc(var(--fly, 1) * 115%)) rotate(calc(var(--fly, 1) * 14deg)) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.35s ease 0.05s !important;
  }

  html.atelier body .m-deck > li .atelier-about-stamp {
    display: none;
  }

  .m-deck-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.74rem;
  }

  .m-deck-dots {
    display: flex;
    gap: 0.35rem;
  }

  .m-deck-dots span {
    position: relative;
    width: 0.45rem;
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .m-deck-dots span.is-on {
    width: 1.6rem;
  }

  .m-deck-dots i {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
  }

  .m-deck-dots .is-on i {
    animation: m-fill 4.2s linear forwards paused;
  }

  .m-deck-foot.is-live:not(.is-held, .is-manual) .is-on i {
    animation-play-state: running;
  }

  .m-deck-foot.is-manual .is-on i {
    animation: none;
    transform: none;
  }

  /* Skills: one category at a time, picked from a row of tabs. */
  .m-tabs-bar {
    display: flex;
    gap: 0.4rem;
    margin: 0 calc(50% - 50vw) 0.9rem;
    padding: 0.2rem calc(50vw - 50%);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .m-tabs-bar::-webkit-scrollbar {
    display: none;
  }

  .m-tabs-bar button {
    --tone: color-mix(in srgb, var(--sk, var(--accent)) 78%, var(--ink));
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    padding: 0.5rem 0.95rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: 600 0.82rem/1 var(--sans);
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  }

  .m-tabs-bar button::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--sk, var(--accent));
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .m-tabs-bar button.is-on {
    border-color: var(--tone);
    background: color-mix(in srgb, var(--sk, var(--accent)) 10%, transparent);
    color: var(--tone);
  }

  .m-tabs-bar button.is-on::before {
    opacity: 1;
    transform: scale(1.2);
  }

  .m-tabs-bar i {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.5px;
    background: var(--sk, var(--accent));
    transform: scaleX(0);
    transform-origin: left;
  }

  .m-tabs-bar .is-on i {
    animation: m-fill 4.6s linear forwards paused;
  }

  .m-tabs-bar.is-live:not(.is-held, .is-manual) .is-on i {
    animation-play-state: running;
  }

  .m-tabs-bar.is-manual .is-on i {
    animation: none;
    transform: none;
    opacity: 0;
  }

  html.atelier body .atelier-skills-grid.m-tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    touch-action: pan-y;
  }

  html.atelier body .m-tabs > * {
    grid-area: 1 / 1 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden;
    transform: translateX(calc(var(--from, 1) * 18px)) !important;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s !important;
  }

  html.atelier body .m-tabs > .is-on {
    opacity: 1 !important;
    visibility: visible;
    transform: none !important;
    transition: opacity 0.4s ease 0.05s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s, visibility 0s !important;
  }

  /* Fun facts: stories. Tap right for next, left for back, hold to pause. */
  .m-story-bars {
    display: flex;
    gap: 4px;
    margin: 0 0 0.75rem;
  }

  .m-story-bars span {
    flex: 1;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ink) 14%, transparent);
  }

  .m-story-bars i {
    display: block;
    height: 100%;
    background: var(--spin);
    transform: scaleX(0);
    transform-origin: left;
  }

  .m-story-bars .is-done i {
    transform: none;
  }

  .m-story-bars .is-on i {
    animation: m-fill 5s linear forwards paused;
  }

  .m-story-bars.is-live:not(.is-held) .is-on i {
    animation-play-state: running;
  }

  html.atelier body .atelier-notes.m-stories {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
  }

  html.atelier body .m-stories > * {
    grid-area: 1 / 1 !important;
    margin: 0 !important;
    rotate: none !important;
    opacity: 0 !important;
    visibility: hidden;
    transform: scale(0.94) !important;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.35s !important;
  }

  html.atelier body .m-stories > .is-on {
    opacity: 1 !important;
    visibility: visible;
    transform: none !important;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s !important;
  }

  html.atelier body .m-stories.is-held > .is-on {
    transform: scale(0.98) !important;
  }

  .m-story-hint {
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    text-align: center;
    opacity: 0.8;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .m-deck-dots .is-on i,
  .m-tabs-bar .is-on i,
  .m-story-bars .is-on i {
    animation: none;
    transform: none;
  }
}

@media (min-width: 641px) {
  .m-story-hint {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Education: courses as small pills, the two stats side by side. */
  html.atelier body .atelier-edu-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem;
  }

  html.atelier body .atelier-edu-courses {
    display: block !important;
    padding-top: 0.9rem;
    font-size: 0.9rem;
    line-height: 1.75;
  }

  html.atelier body .atelier-edu-courses li {
    display: inline;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
  }

  html.atelier body .atelier-edu-courses li:not(:last-child)::after {
    content: ' \00b7  ';
    color: var(--spin);
    white-space: pre;
  }

  html.atelier body .atelier-edu-courses li::before {
    display: none;
  }

  /* Certificates: the index swipes sideways under the pile. */
  html.atelier body .atelier-cert-index {
    flex-direction: row;
    gap: 0.5rem;
    margin-inline: calc(50% - 50vw);
    padding: 0.2rem calc(50vw - 50%) 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: calc(50vw - 50%);
    scrollbar-width: none;
  }

  html.atelier body .atelier-cert-index::-webkit-scrollbar {
    display: none;
  }

  html.atelier body .atelier-cert-index button {
    flex: none;
    width: auto;
    max-width: 13rem;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--line);
    border-radius: 0.85rem;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  html.atelier body .atelier-cert-index button.is-active {
    border-color: var(--ink);
  }

  html.atelier body .atelier-cert-index button span {
    font-size: 0.6rem;
  }

  /* Experience: year, role and company in two tight lines. */
  html.atelier body .atelier-exp-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.1rem 0.7rem;
    padding: 0.8rem 2.3rem 0.8rem 0.1rem;
  }

  html.atelier body .atelier-exp-year {
    grid-row: span 2;
    flex-basis: auto;
    min-width: 2.6rem;
    font-size: 1rem;
  }

  html.atelier body .atelier-exp-role {
    font-size: 1rem;
    line-height: 1.25;
  }

  html.atelier body .atelier-exp-mark,
  html.atelier body .atelier-exp-dur {
    display: none;
  }

  html.atelier body .atelier-exp-co {
    grid-column: 2;
    font-size: 0.82rem;
  }

  html.atelier body .atelier-exp-toggle {
    top: 50%;
    margin-top: -0.7rem;
  }

  html.atelier body .atelier-exp-summary {
    display: none;
  }

  html.atelier body .atelier-exp-main {
    padding: 1rem 1rem 1.05rem;
  }

  html.atelier body .atelier-exp-side {
    padding: 0.8rem 1rem;
  }

  html.atelier body .atelier-exp-body li {
    margin-bottom: 0.35rem;
    font-size: 0.86rem;
    line-height: 1.45;
  }

  html.atelier body .atelier-exp-paper {
    margin-bottom: 0.8rem;
  }
}
/* Phone hero: she stands on the same left edge as the copy below her, which
   leaves the right side free, so her thought cloud opens beside her face
   instead of over it, sized to whatever room the screen leaves. */
/* From 576px up the navbar is fixed (base.css lets it scroll away below
   that), so the hero has to start beneath it. */
@media (min-width: 576px) and (max-width: 760px) {
  html.atelier body .home-section {
    padding-top: 5.9rem !important;
  }
}

@media (max-width: 760px) {
  html.atelier body .home-right {
    align-self: flex-start;
    justify-content: flex-start;
    margin-left: -0.5rem;
  }

  html.atelier body .home-mascot .atelier-mascot-bubble {
    top: -3%;
    left: 72%;
    right: auto;
    max-width: min(11rem, calc(50vw - 0.5rem));
    font-size: 0.84rem;
    transform-origin: 0% 100%;
  }
}

/* ---- Desktop navbar --------------------------------------------------------
   A full-width paper bar whose hairline appears once the page scrolls. A
   pill slides behind the hovered link and rests on the section being read
   (nav.js); a terracotta dot marks it. Contact is the one ink button.
   Between 801px and 1100px four links fold into "More". */
html.atelier .nav-pill,
html.atelier .nav-more {
  display: none !important;
}

@media (min-width: 801px) {
  html.atelier body .navbar {
    --nav-shadow: var(--ink);
    padding: 0.3rem 0 !important;
    transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html.atelier body.dark-theme .navbar {
    --nav-shadow: #000;
  }

  html.atelier body:not(.nav-scrolled) .navbar {
    border-bottom-color: transparent !important;
    background: color-mix(in srgb, var(--paper) 70%, transparent) !important;
  }

  html.atelier body .navbar-container {
    min-height: 58px;
  }

  html.atelier body .logo {
    flex: none;
    line-height: 1;
  }

  html.atelier body .logo .logo-brace {
    display: inline-block;
    letter-spacing: 0;
    transition: letter-spacing 0.4s cubic-bezier(0.34, 1.5, 0.5, 1);
  }

  html.atelier body .logo:hover .logo-brace {
    letter-spacing: 0.12em;
  }

  html.atelier body .nav-links {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.1rem !important;
    padding: 0 !important;
  }

  html.atelier body .nav-links > li {
    position: relative;
    z-index: 1;
    margin: 0 !important;
  }

  html.atelier body .nav-links > li.nav-pill {
    display: block !important;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: var(--w, 0px);
    height: var(--h, 0px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    opacity: 0;
    transform: translate(var(--x, 0px), var(--y, 0px));
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    pointer-events: none;
  }

  html.atelier body .nav-links > li.nav-pill.is-on {
    opacity: 1;
  }

  html.atelier body .nav-links > li > a,
  html.atelier body .nav-links .dropbtn {
    display: block;
    padding: 0.52rem 0.78rem !important;
    border: 0 !important;
    border-radius: 999px;
    color: var(--muted) !important;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.25s ease;
  }

  html.atelier body .nav-links > li > a:hover,
  html.atelier body .nav-links > li > a:focus-visible,
  html.atelier body .nav-links > li > a.is-current,
  html.atelier body .nav-links .dropdown:hover > .dropbtn {
    color: var(--ink) !important;
  }

  /* The underline from motion.css becomes the "you are here" dot. */
  html.atelier body .nav-links > li > a::after,
  html.atelier body .nav-links .dropbtn::after {
    left: 50%;
    right: auto;
    bottom: 0.16rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--spin);
    transform: translateX(-50%) scale(0) !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.6, 0.5, 1);
  }

  html.atelier body .nav-links > li > a.is-current::after {
    transform: translateX(-50%) scale(1) !important;
  }

  html.atelier body .nav-links .dropbtn {
    padding-right: 1.55rem !important;
    background: no-repeat right 0.7rem center / 0.6rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237d756b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  }

  html.atelier body .nav-links .dropdown:hover > .dropbtn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237d756b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 6 4.5 9 7.5'/%3E%3C/svg%3E");
  }

  html.atelier body .nav-links .dropdown-content {
    top: calc(100% + 0.7rem);
    left: 50%;
    min-width: 13rem;
    padding: 0.4rem;
    border: 1.5px solid var(--ink);
    border-radius: 1rem;
    box-shadow: 4px 5px 0 var(--nav-shadow);
    transform: translateX(-50%);
    animation: nav-drop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  html.atelier body .nav-links .dropdown-content::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.9rem;
    height: 0.9rem;
  }

  html.atelier body .nav-links .dropdown-content a {
    padding: 0.55rem 0.8rem !important;
    border-radius: 0.65rem;
    color: var(--ink) !important;
    font-size: 0.86rem;
    transition: background-color 0.2s ease, padding 0.25s ease;
  }

  html.atelier body .nav-links .dropdown-content a:hover,
  html.atelier body .nav-links .dropdown-content a:focus-visible {
    padding-left: 1rem !important;
    background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
  }

  @keyframes nav-drop {
    from { opacity: 0; transform: translate(-50%, -6px); }
  }

  /* Links sit centred between the mark and the actions on the right. */
  html.atelier body .nav-links {
    flex: 1 1 auto;
    justify-content: flex-start !important;
  }

  html.atelier body .nav-links > li.drawer-close-btn-li + li {
    margin-left: auto !important;
  }

  /* Contact: an outlined pill that fills with ink on hover. */
  html.atelier body .nav-links > li.nav-cta {
    margin-left: auto !important;
  }

  html.atelier body .nav-links > li.nav-cta > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem 0.5rem 1.05rem !important;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink);
    color: var(--ink) !important;
    font-weight: 600;
    transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.5, 1), background-color 0.25s ease, color 0.25s ease;
  }

  html.atelier body .nav-links > li.nav-cta > a:hover,
  html.atelier body .nav-links > li.nav-cta > a:focus-visible {
    background: var(--ink);
    color: var(--paper) !important;
  }

  html.atelier body .nav-links > li.nav-cta > a::before {
    content: '\2192';
    order: 2;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.5, 0.5, 1);
  }

  html.atelier body .nav-links > li.nav-cta > a::after {
    display: none;
  }

  html.atelier body .nav-links > li.nav-cta > a:hover {
    transform: translateY(-1px);
  }

  html.atelier body .nav-links > li.nav-cta > a:hover::before {
    transform: translateX(3px);
  }

  html.atelier body .nav-links > li.nav-cta > a.is-current {
    background: var(--ink);
    color: var(--paper) !important;
  }

  html.atelier body .nav-links > li.drawer-theme-toggle-li {
    display: flex;
    align-items: center;
    margin-left: 0.55rem !important;
    padding-left: 0.6rem;
    border-left: 1px solid var(--line);
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  html.atelier body .nav-links > li.nav-more-item {
    display: none !important;
  }

  html.atelier body .nav-links > li.nav-more {
    display: block !important;
  }

  html.atelier body .nav-links > li > a,
  html.atelier body .nav-links .dropbtn {
    padding-left: 0.62rem !important;
    padding-right: 0.62rem !important;
  }

  html.atelier body .nav-links .dropbtn {
    padding-right: 1.4rem !important;
    background-position: right 0.55rem center;
  }
}

@media (min-width: 801px) and (prefers-reduced-motion: reduce) {
  html.atelier body .nav-links > li.nav-pill,
  html.atelier body .navbar-container,
  html.atelier body .nav-links .dropdown-content {
    transition: none;
    animation: none;
  }
}
/* Navbar details: a reading-progress line along the bar's bottom edge and
   a Work menu that says what is behind each door. Hidden in the drawer. */
html.atelier .nav-menu-ico,
html.atelier .nav-menu-text small {
  display: none;
}

@media (min-width: 801px) {
  html.atelier body .navbar > .scroll-progress {
    position: absolute;
    top: auto;
    bottom: -1px;
    left: 0;
    z-index: 1;
    height: 2px;
    background: var(--spin) !important;
  }

  html.atelier body .nav-links .dropdown:not(.nav-more) .dropdown-content {
    min-width: 17.5rem;
  }

  html.atelier body .nav-links .dropdown-content a:has(.nav-menu-text) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem !important;
    white-space: normal !important;
  }

  html.atelier body .nav-links .dropdown-content a:has(.nav-menu-text):hover,
  html.atelier body .nav-links .dropdown-content a:has(.nav-menu-text):focus-visible {
    padding-left: 0.7rem !important;
  }

  html.atelier body .nav-menu-ico {
    display: block;
    flex: none;
    box-sizing: content-box;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0.45rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.5, 0.5, 1);
  }

  html.atelier body .nav-links .dropdown-content a:hover .nav-menu-ico,
  html.atelier body .nav-links .dropdown-content a:focus-visible .nav-menu-ico {
    background: var(--accent);
    color: var(--paper);
    transform: rotate(-6deg);
  }

  html.atelier body .nav-menu-text {
    display: block;
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1.3;
  }

  html.atelier body .nav-menu-text small {
    display: block;
    margin-top: 0.1rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 400;
  }
}

/* Hero punctuation (hero-dots.js): once the intro has played the title no
   longer clips, so the dots can hop and lean outside their line. */
html.atelier .home-section.hero-live .hero-line {
  overflow: visible;
}

html.atelier .home-title.hd-live .fx-ch {
  position: relative;
}

html.atelier .home-title .hd-glyph {
  position: relative;
  cursor: pointer;
  backface-visibility: hidden;
}

html.atelier .home-title .hd-glyph::after {
  content: '';
  position: absolute;
  inset: 0.15em -0.22em -0.05em;
}

html.atelier .home-title .hd-puff,
html.atelier .home-title .hd-ring {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
}

html.atelier .home-title .hd-puff {
  background: var(--spin);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: hd-puff var(--life, 500ms) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes hd-puff {
  0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 0.14em)) scale(1.7); }
}

html.atelier .home-title .hd-ring {
  border: 2px solid var(--spin);
  transform: translate(-50%, -50%) scale(1);
  animation: hd-ring 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes hd-ring {
  to { opacity: 0; transform: translate(-50%, -50%) scale(5.5); border-width: 0.5px; }
}