/* ==========================================================================
   simonewongg.com — 2026 redesign

   Identity: deep forest green frame, warm paper sheet, olive tints, and a
   single acid "sprout" accent used sparingly. Editorial serif for display,
   a quiet sans for reading, mono for labels and metadata.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------- */
  --green-900: #0b2a20;
  --green-800: #0f3d2e;
  --green-700: #16543f;
  --olive-500: #7f8f4a;
  --olive-200: #e3e8cf;
  --sprout:    #c8f169;

  --paper:   #f4f3ee;
  --paper-2: #ebeae3;
  --ink:     #0f3d2e;   /* deep green is the primary colour, used for text */
  --ink-2:   #56695f;   /* muted green-grey, 5.3:1 on paper */
  --line:    rgba(15, 61, 46, 0.14);
  --note:    #5c6b2e;   /* olive, for the AI note: 5.3:1 on paper */

  --on-green: #f4f3ee;
  --on-green-2: rgba(244, 243, 238, 0.68);

  /* Roles that must flip in dark mode: deep green reads on paper but
     disappears on a dark ground, so display/em/action route through these. */
  --display: var(--green-800);
  --em:      var(--green-700);
  --btn-bg:  var(--green-800);
  --btn-bg-hover: var(--green-700);

  /* Primary action: the brand's acid green, so it stands apart from the
     deep-green nav pill without bringing in a foreign colour. */
  --accent:       var(--sprout);
  --accent-hover: #b9e455;
  --on-accent:    var(--green-900);

  /* Orange/red is reserved for the availability line and nothing else. */
  --signal-text:  #c8000a;
  --signal-dot:   #e8000b;

  /* ---- Type --------------------------------------------------------- */
  /* One family for everything: titles are Helvetica too, just larger. */
  --title: var(--sans);
  --heading: var(--sans);
  /* Helvetica is a system font on Apple devices; Windows and Android get
     Arial, its closest built-in match. */
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:   0.6875rem;
  --fs-sm:   0.8125rem;
  --fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
  --fs-stmt: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  --fs-h2:   clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);
  --fs-name: clamp(4rem, 11.5vw, 10.5rem);

  /* ---- Space -------------------------------------------------------- */
  --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1rem;  --s-4: 1.5rem;
  --s-5: 2rem;    --s-6: 3.5rem;  --s-7: 5.5rem; --s-8: 9rem;

  --frame: clamp(8px, 1.5vw, 22px);
  --radius: 18px;
  --pill: 999px;
  --container: 1200px;
  --gutter: clamp(1.25rem, 6vw, 5rem);
  --tap: 44px;

  /* ---- Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 700ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #101613;
    --paper-2: #161d19;
    --ink:     #ecefe9;
    --ink-2:   #a3ada6;
    --line:    rgba(236, 239, 233, 0.12);
    --olive-200: #2a3324;
    --display: #b7dcc6;
    --em:      #9fd4b8;
    --btn-bg:  #21775a;
    --btn-bg-hover: #288a68;
    --signal-text: #ff5c5c;
    --signal-dot:  #ff3b3b;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--green-900);
}

body {
  margin: 0;
  padding: var(--frame);
  background: var(--green-900);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: color-mix(in srgb, var(--ink) 16%, var(--paper)); color: var(--ink); }

/* Cross-page transitions: a one-line MPA upgrade in supporting browsers. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 260ms var(--ease-io) both vt-out; }
::view-transition-new(root) { animation: 420ms var(--ease-out) both vt-in; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--green-800);
  color: var(--on-green);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.skip-link:focus { left: var(--s-3); top: var(--s-3); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--em);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The paper sheet inset inside the green frame. */
.sheet {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  min-height: calc(100svh - 2 * var(--frame));
  overflow: clip;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */

.mono {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.serif { font-family: var(--heading); font-weight: 400; letter-spacing: -0.01em; }

.serif em { font-style: italic; }

.muted { color: var(--ink-2); }

.link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms var(--ease-out);
}
.link:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.top {
  position: sticky;
  top: var(--frame);
  z-index: 20;
  /* frosted glass: translucent paper, heavy blur, a highlight edge on top */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--paper) 62%, transparent),
    color-mix(in srgb, var(--paper) 42%, transparent)
  );
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
          backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 34px -26px rgba(0, 0, 0, 0.35);
}

.top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 72px;
}

.wordmark {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark .dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--display);
  vertical-align: 1px;
}

.nav {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: var(--pill);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

.nav a[aria-current] {
  background: var(--btn-bg);
  color: var(--on-green);
}

.top-right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.clock {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--tap);
  padding: 0 1.25rem;
  border-radius: var(--pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out),
              transform 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  min-height: var(--tap);
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.btn-primary:hover { text-decoration-thickness: 2px; }
.btn-primary:active { transform: none; }

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn .arrow { transition: transform 260ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: var(--s-6);
  padding-bottom: var(--s-7);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

.hero .statement {
  font-family: var(--heading);
  font-size: var(--fs-stmt);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: var(--s-3) 0 0;
  max-width: 22ch;
  text-wrap: balance;
}

.hero .statement em {
  font-style: italic;
  color: var(--em);
}

.hero .bio {
  max-width: 40ch;
  color: var(--ink-2);
  margin: 0;
}

.hero .bio strong { color: var(--ink); font-weight: 500; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: var(--s-4) 0 0;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--signal-text);
}

.status .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal-dot);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal-dot) 55%, transparent);
  animation: pulse 2.4s var(--ease-io) infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal-dot) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* The name. Sits at the bottom of the first viewport; letters stagger in. */

.name {
  margin: 0 0 0 -0.05em;
  font-family: var(--heading);
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
  color: var(--display);
}

.js .name span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em) rotate(2deg);
  filter: blur(6px);
  transform-origin: 50% 100%;
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), filter 700ms var(--ease-out);
  transition-delay: calc(140ms + var(--i, 0) * 38ms);
}

.is-loaded .name span {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* Above-the-fold elements reveal on load rather than on scroll. */
.js :is(.hero, .page-title) .reveal { transition-delay: calc(60ms + var(--i, 0) * 90ms); }
.is-loaded :is(.hero, .page-title) .reveal { opacity: 1; transform: none; filter: blur(0); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: var(--s-8); }
.section + .section { padding-top: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.section-head h2 {
  margin: 0;
  font-family: var(--title);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Focus areas ------------------------------------------------------------ */

.focus {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

.focus-card {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 260ms var(--ease-out), background-color 260ms var(--ease-out), transform 300ms var(--ease-out);
}

.focus-card:hover {
  border-color: var(--display);
  background: var(--paper-2);
  transform: translateY(-2px);
}

.focus-card .num {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

.focus-card h3 {
  margin: var(--s-4) 0 var(--s-1);
  font-family: var(--title);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.focus-card p { margin: 0; color: var(--ink-2); }

/* Selected work cards --------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

.card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card .thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
  background: var(--paper-2);
}

.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out), filter 600ms var(--ease-out);
}

.card:hover .thumb img { transform: scale(1.04); }

.card .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.card .arrow {
  display: inline-block;
  transition: transform 260ms var(--ease-out);
}
.card:hover .arrow { transform: translate(3px, -3px); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 4px 10px;
  border-radius: var(--pill);
  background: var(--olive-200);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

/* About strip ----------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}

.about .photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.about .photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
}



.about h2 {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--title);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.about p { color: var(--ink-2); max-width: 46ch; }

@media (min-width: 720px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
}

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */

.page-title {
  padding: var(--s-6) 0 var(--s-5);
  border-bottom: 1px solid var(--line);
}

.page-title h1 {
  margin: var(--s-2) 0 0 -0.03em;
  font-family: var(--title);
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--display);
}

.page-title .lede {
  margin: var(--s-4) 0 0;
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--ink-2);
}

.page-title .lede a { color: var(--ink); }

/* Case rows (Projects, Personal Projects) */
.cases {
  margin: 0;
  padding: 0;
  list-style: none;
}

.case {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "num  num"
    "thumb body";
  gap: var(--s-2) var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}

.case .num   { grid-area: num; }
.case .thumb { grid-area: thumb; }
.case .body  { grid-area: body; }

.case .thumb {
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 0;
  background: var(--paper-2);
}

.case .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.case:hover .thumb img { transform: scale(1.05); }

.case .body { min-width: 0; }

.case .num {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

.case h2 {
  margin: 0 0 var(--s-1);
  font-family: var(--title);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.case h2 a {
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.case h2 a:hover { color: var(--em); }

.case h2 .arrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6em;
  margin-left: 0.4em;
  vertical-align: 0.25em;
  transition: transform 260ms var(--ease-out);
}
.case h2 a:hover .arrow { transform: translate(3px, -3px); }

.case p { margin: 0 0 var(--s-2); max-width: 60ch; color: var(--ink-2); }

.live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-right: 0.6em;
  padding: 2px 10px 2px 8px;
  border-radius: var(--pill);
  background: var(--olive-200);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  vertical-align: 2px;
}

.live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--olive-500);
}

/* Research list */
.papers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.paper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.paper .num {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

.paper h2 {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 60ch;
}

.paper h2 a { text-decoration: none; }
.paper h2 a:hover { color: var(--em); }

.paper .meta {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
  margin-top: var(--s-8);
  padding-block: var(--s-7) var(--s-5);
  border-top: 1px solid var(--line);
}

.foot .big {
  margin: 0 0 var(--s-5) -0.03em;
  font-family: var(--title);
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
}



.foot-grid > .btn { justify-self: start; }

.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: end;
}

.foot .links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
}

.foot .links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.foot .legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* Below 900px the four pills plus clock and CTA no longer fit on one row,
   so the nav drops to its own full-width row rather than clipping. */
@media (max-width: 899px) {
  .top .container { flex-wrap: wrap; row-gap: var(--s-2); padding-bottom: var(--s-2); }
  .top .nav { order: 3; flex-basis: 100%; }
}

@media (max-width: 719px) {
  .clock { display: none; }
  .name { white-space: normal; }
}

@media (min-width: 720px) {
  .hero .bio-col { padding-top: 0.4rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .focus { grid-template-columns: repeat(3, 1fr); }
  .paper { grid-template-columns: 4rem 1fr auto; align-items: baseline; }
  .case {
    grid-template-columns: 4rem 160px minmax(0, 1fr);
    grid-template-areas: "num thumb body";
    align-items: start;
  }
  .case .num { margin: 0.4rem 0 0; }
  .case .thumb { width: 160px; height: 160px; }
}

@media (min-width: 1024px) {
  .about { gap: var(--s-7); }
  .foot-grid { grid-template-columns: 1fr auto; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .name span, :is(.hero, .page-title) .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .status .pulse { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Section lede (one-line context under a section head)
   -------------------------------------------------------------------------- */

.section-lede {
  margin: calc(-1 * var(--s-4)) 0 var(--s-5);
  max-width: 60ch;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Off the clock — the light switch
   -------------------------------------------------------------------------- */

.lights {
  transition: background-color 600ms var(--ease-out), color 600ms var(--ease-out), border-color 600ms var(--ease-out);
}

.lights .section-head { margin-bottom: var(--s-3); }

.lights-hint {
  margin: 0;
  color: var(--ink-2);
  transition: color 600ms var(--ease-out);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-1);
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

.switch .track {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: var(--sprout);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
  transition: background-color 400ms var(--ease-out);
}

.switch .knob {
  position: absolute;
  top: 3px;
  left: 25px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: left 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lights.is-off .switch .track { background: #3a4442; }
.lights.is-off .switch .knob  { left: 3px; background: #dfe6e2; }

.after-hours {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 700ms var(--ease-out);
}
.after-hours > .after-inner { min-height: 0; overflow: hidden; }

.js .lights:not(.is-off) .after-hours { grid-template-rows: 0fr; }

.after-inner {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out) 200ms, transform 600ms var(--ease-out) 200ms;
}
.lights.is-off .after-inner { opacity: 1; transform: none; }

.after-label { margin: var(--s-4) 0 var(--s-4); }
.after-more  { margin: var(--s-5) 0 0; }

/* Lights off: the whole window goes dark, like a browser in dark mode. */
.lights.is-off {
  background: var(--green-900);
  color: var(--on-green);
  border-color: rgba(244, 243, 238, 0.14);
  background-image: radial-gradient(70% 50% at 85% 0%, rgba(200, 241, 105, 0.18), transparent 60%);
}
.lights.is-off .window-bar { background: #0e211a; border-bottom-color: rgba(244, 243, 238, 0.12); }
.lights.is-off .window-url { background: rgba(244, 243, 238, 0.06); border-color: rgba(244, 243, 238, 0.12); color: var(--on-green-2); }
.lights.is-off .section-head { border-bottom-color: rgba(244, 243, 238, 0.14); }
.lights.is-off .lights-hint,
.lights.is-off .mono,
.lights.is-off .after-label { color: var(--on-green-2); }
.lights.is-off .card h3 { color: var(--on-green); }
.lights.is-off .chips li { background: rgba(244, 243, 238, 0.12); color: var(--on-green); }
.lights.is-off .link { color: var(--sprout); }

@media (prefers-reduced-motion: reduce) {
  .after-hours, .after-inner, .lights, .switch .knob, .switch .track { transition: none; }
}

/* --------------------------------------------------------------------------
   Fake browser window (Off the clock)
   -------------------------------------------------------------------------- */

.window {
  position: relative;
  border: 1px solid var(--green-800);
  border-radius: 14px;
  background: var(--olive-200);
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.45);
}

.window-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 14px;
  background: var(--green-800);
  color: var(--on-green);
  border-bottom: 1px solid var(--green-900);
  transition: background-color 600ms var(--ease-out);
}

.window-dots { display: flex; gap: 6px; flex: none; }
.window-dots span { width: 12px; height: 12px; border-radius: 50%; }
.window-dots span:nth-child(1) { background: #ff5f57; }
.window-dots span:nth-child(2) { background: #febc2e; }
.window-dots span:nth-child(3) { background: #28c840; }

.window-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(244, 243, 238, 0.18);
  border-radius: 8px;
  background: rgba(244, 243, 238, 0.10);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--on-green-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 600ms var(--ease-out), color 600ms var(--ease-out);
}
.window-url .lock { font-size: 0.7em; }

.window-body { padding: var(--s-5) var(--s-5) var(--s-6); }
.window-body .section-head { margin-bottom: var(--s-3); }

/* the switch labels sit on the green bar */
.window-bar .switch .mono { color: var(--on-green-2); }

@media (max-width: 719px) {
  .window-url { display: none; }
  .window-bar { justify-content: space-between; }
  .window-body { padding: var(--s-4) var(--s-3) var(--s-5); }
}

/* --------------------------------------------------------------------------
   Background: blurb + orbital mind map
   -------------------------------------------------------------------------- */

.background {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
  margin-top: var(--s-7);
}

.bg-services {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  max-width: 40ch;
}
.bg-services li {
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.bg-services li:last-child { border-bottom: 1px solid var(--line); }
.bg-services strong {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.bg-blurb p:not(.mono) {
  margin: var(--s-2) 0 0;
  max-width: 38ch;
  color: var(--ink-2);
}


/* The orbit: "Simone" in the middle, four thin arms of different lengths at
   irregular angles, a small circle and a label at the end of each. Tap a node
   and its skills branch out from that circle as smaller arms.

   Motion: the whole field drifts ±7°, each arm sways ±3° on its own timing.
   Every label sits in a .level wrapper positioned so its dot's centre is
   exactly on the arm end; the wrapper then counter-rotates all three angles
   (static arm angle, drift, sway) about that same point, so text is always
   horizontal and the dot never leaves the line. */

.orbit {
  --orb-line: color-mix(in srgb, var(--ink) 30%, transparent);
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}

.orb-field {
  position: absolute;
  inset: 0;
  animation: float-field 22s ease-in-out infinite;
}

.arm {
  position: absolute;
  left: 50%;
  top: 42%;
  width: var(--l);
  height: 0;
  transform-origin: 0 50%;
  transform: rotate(var(--a));
  /* each arm breathes in length on its own timing: movement without any
     rotation, so labels never need a moving counter-rotation */
  animation: breathe 9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transition: opacity 300ms var(--ease-out);
}

.arm > .line {
  position: absolute;
  left: 24px;               /* starts just outside the centre word */
  right: 0;
  top: 0;
  height: 1px;
  background: var(--orb-line);
}

/* Zero-size anchors at the end of an arm / a leaf. */
.orb-node,
.leaf-end {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  overflow: visible;
}
.orb-node { cursor: pointer; transition: opacity 300ms var(--ease-out); }
/* generous, invisible hit area around each node label */
.orb-node .level { cursor: pointer; padding: 0 10px; }
.orb-node .level::before { content: ""; position: absolute; inset: -10px -8px; }

/* --s: static counter-angle; --dc: dot-centre offset from the box edge;
   --lh: fixed box height, so the vertical centre is known without JS. */
.orb-node .level { --s: calc(-1 * var(--a));               --dc: 11px;  --lh: 44px; }
.leaf .level      { --s: calc(-1 * (var(--a) + var(--la))); --dc: 9.5px; --lh: 32px; }

.level {
  position: absolute;
  top: calc(-1 * var(--lh) / 2);
  left: calc(-1 * var(--dc));
  height: var(--lh);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  white-space: nowrap;
  transform-origin: var(--dc) 50%;
  /* static counter-rotation only: nothing in the tree rotates over time */
  transform: rotate(var(--s));
}
[data-side="left"] > .level,
[data-side="left"] > .orb-node > .level,
[data-side="left"] > .leaf-end > .level {
  left: auto;
  right: calc(-1 * var(--dc));
  flex-direction: row-reverse;
  transform-origin: calc(100% - var(--dc)) 50%;
}

.level .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  transition: background-color 260ms var(--ease-out), transform 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.level .lbl {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.orb-node:hover .dot { background: var(--sprout); transform: scale(1.25); }
.orb-node[aria-expanded="true"] .dot { background: var(--display); border-color: var(--display); transform: scale(1.35); }

/* Skills branch out from the node's dot */
.leaves {
  position: absolute;
  left: 100%;
  top: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.leaf {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 50%;
  transform: rotate(var(--la));
  transition: width 520ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.leaf > .line {
  position: absolute;
  left: 6px;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--orb-line);
}
.leaf > .leaf-end > .level,
.leaf > .orb-node > .level,
.twig > .leaf-end > .level {
  opacity: 0;
  visibility: hidden;          /* removes closed branches from hit-testing */
  pointer-events: none;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
}
.leaf .dot { width: 7px; height: 7px; border-width: 1px; }
.leaf .lbl { font-size: 0.625rem; letter-spacing: 0.05em; text-transform: none; line-height: 1.25; }
.leaf .lbl .sub { display: block; font-weight: 400; color: var(--ink-2); }
/* category nodes: same size as leaves but clickable and a touch bolder */
.leaf > .orb-node .lbl { font-weight: 600; }
.leaf > .orb-node .level { padding: 0 8px; }
.leaf > .orb-node[aria-expanded="true"] .dot { background: var(--display); border-color: var(--display); }

.twigs {
  --sl: calc(-1 * (var(--a) + var(--la)));
  --tw: translate(14px, 15px);
  position: absolute;
  left: 100%;
  top: 0;
  width: max-content;
  transform-origin: 0 0;
  transform: rotate(var(--sl)) var(--tw);
  opacity: 0;
  /* visibility flips instantly in both directions: a delayed visibility
     transition here raced the `animation: none` from .is-still and swallowed
     the opacity transition's start, so the list arrived a click late. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}
.leaf[data-side="left"] > .twigs { --tw: translate(calc(-100% - 14px), 15px); }

.leaf.open > .twigs {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.twigs ul {
  margin: 0;
  padding: 0 0 0 14px;
  list-style: none;
  border-left: 1px solid var(--orb-line);
}
.leaf[data-side="left"] > .twigs ul {
  padding: 0 14px 0 0;
  border-left: 0;
  border-right: 1px solid var(--orb-line);
  text-align: right;
}

.twigs li {
  position: relative;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
}
.twigs li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background: var(--orb-line);
}
.leaf[data-side="left"] > .twigs li::before { left: auto; right: -14px; }


/* Reading a list beats watching it drift. While a category is open the map
   eases back to its neutral orientation and holds there: every arm and
   label then sits at its static angle, so the branch is exactly level
   rather than frozen at some arbitrary point in the drift cycle. */
.orbit.is-still .orb-field {
  animation: none;
  transform: translate(0, 0);
  transition: transform 460ms var(--ease-out);
}
.orbit.is-still .arm { animation: none; }

.arm.open > .leaves > .leaf { width: var(--ll); }
.arm.open > .leaves > .leaf > .leaf-end > .level,
.arm.open > .leaves > .leaf > .orb-node > .level,
.x-unused-twig-level {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: calc(var(--i, 0) * 70ms + 200ms), 0s;
}
.orbit[data-open] .arm:not(.open) { opacity: 0.35; }

.orb-center {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orb-idle {
  display: block;
  font-family: var(--heading);
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--display);
  background: var(--paper);      /* masks the arm roots behind the word */
  padding: 4px 8px;
}

@keyframes float-field {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(7px, -5px); }
  65%      { transform: translate(-6px, 6px); }
}
@keyframes breathe {
  0%, 100% { width: var(--l); }
  50%      { width: calc(var(--l) * 1.07); }
}

/* the expanded node's dot pulses to say "this is interactive" */
.orb-node[aria-expanded="true"] .dot {
  border-radius: 50%;
  animation: node-pulse 1.8s ease-out infinite;
}
.leaf > .orb-node[aria-expanded="true"] .dot { transform: none; }
@keyframes node-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--display) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Skill lists under the map: narrow screens only */
.orb-detail {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-3);
}
.orb-detail .chips { margin: 0; }
.orb-detail .orb-group { flex: 1 1 100%; }
.orb-detail .orb-group .mono { display: block; margin-bottom: var(--s-1); }
.orb-detail .orb-group + .orb-group { margin-top: var(--s-3); }

@media (max-width: 719px) {
  .orb-detail:not([hidden]) { display: flex; }
  /* small screens: arms and category nodes are drawn; skills are listed under the map */
  .twigs, .leaf > .leaf-end { display: none; }
  .orbit { width: min(300px, 100%); }
  .arm { width: calc(var(--l) * 0.72); }
  .arm.open > .leaves > .leaf { width: calc(var(--ll) * 0.6); }
  /* At this width a four-way fan of category nodes cannot be laid out
     without labels colliding, so the map keeps only its five arms and the
     whole Services breakdown is listed under it instead. */
  #leaves-services > .leaf { display: none; }

  .level .lbl { font-size: 0.625rem; }
  /* long skill names wrap; the box height stays fixed so the pivot holds */
  .leaf .lbl { white-space: normal; max-width: 7rem; line-height: 1.2; }
}

/* --------------------------------------------------------------------------
   Hero — four elements: name, intro, portrait, call to action.
   Left: the name at the top, intro and CTA at the bottom. Right: the photo.
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "name" "photo" "blurb";
  gap: var(--s-5);
  padding-top: var(--s-4);
  padding-bottom: var(--s-7);
}
.hero .name  { grid-area: name; }
.hero-photo  { grid-area: photo; }
.hero-blurb  { grid-area: blurb; }

.hero-photo { margin: 0; background: var(--paper-2); }
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
}

.hero-blurb .bio {
  max-width: 31ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
}
.hero-cta .status { margin: 0; }

@media (min-width: 900px) {
  /* The photo is half the content width at every screen size (phones too),
     pinned to the top-right corner, so it scales smoothly instead of jumping
     at this breakpoint. The name sits on one line in the left half. */
  .hero {
    grid-template-columns: minmax(0, 1fr) 50%;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "name  photo"
      "blurb photo";
    column-gap: var(--s-6);
    row-gap: var(--s-7);
    min-height: min(calc(100svh - 2 * var(--frame) - 64px), 880px);
    padding-bottom: var(--s-5);
  }
  .hero .name { align-self: start; font-size: clamp(2.5rem, 6vw, 5rem); }
  .hero-blurb { align-self: end; margin-bottom: var(--s-8); }
  /* 4:5, never taller than the screen (crops in from the sides if needed) */
  .hero-photo { align-self: start; justify-self: end; width: 100%; }
  .hero-photo img {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - 2 * var(--frame) - 64px - var(--s-4) - var(--s-5));
  }
}

/* --------------------------------------------------------------------------
   What I do
   -------------------------------------------------------------------------- */

.whatido {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.whatido-intro h2 {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--title);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.whatido-intro p:not(.mono) { margin: 0 0 var(--s-3); max-width: 58ch; color: var(--ink-2); }
.whatido-intro .whatido-focus { color: var(--ink); font-size: var(--fs-lead); line-height: 1.45; max-width: 46ch; }

/* Three columns: Execution, Optimisation, Strategy */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}
.pillar .num {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.pillar h3 {
  margin: var(--s-2) 0 var(--s-2);
  font-family: var(--title);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.pillar-lede { margin: 0 0 var(--s-3); max-width: 34ch; color: var(--ink); }

/* Plain lists with a short dash, used across this section */
.pillar ul,
.dash-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
}
.pillar ul li,
.dash-list li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: var(--s-2);
}
.pillar ul li::before,
.dash-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ink-2);
}
.dash-list strong { color: var(--ink); font-weight: 700; }

/* Where I do my best work / How I fit in */
.howiwork {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.howiwork h3 {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--title);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.howiwork p:not(.mono) { margin: 0 0 var(--s-3); max-width: 52ch; color: var(--ink-2); }
.howiwork .dash-list { margin-bottom: var(--s-3); max-width: 52ch; font-size: inherit; }

/* Ways to work together: three short columns */
.ways { margin-top: var(--s-7); }
.ways-list {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-3);
  padding: 0;
  list-style: none;
}
.ways-list h4 {
  margin: 0 0 2px;
  font-family: var(--title);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.ways-list p { margin: 0; max-width: 36ch; color: var(--ink-2); }

@media (min-width: 720px) {
  .ways-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}
@media (min-width: 1024px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .howiwork { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
}

.whatido-list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.whatido-list li {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.whatido-list .num {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.whatido-list h3 {
  margin: var(--s-1) 0 var(--s-1);
  font-family: var(--title);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.whatido-list p { margin: 0; color: var(--ink-2); }

@media (min-width: 720px) {
  .whatido-list { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
}

/* --------------------------------------------------------------------------
   Note for AI assistants
   -------------------------------------------------------------------------- */

#for-ai { margin-top: calc(-1 * var(--s-6)); }

.ai-note {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ai-note summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  cursor: pointer;
  list-style: none;
}
.ai-note summary::-webkit-details-marker { display: none; }
.ai-note .ai-title { flex: 1; font-size: var(--fs-sm); color: var(--ink); }
.ai-note .plus { font-family: var(--mono); transition: transform 300ms var(--ease-out); }
.ai-note[open] .plus { transform: rotate(45deg); }

.ai-body { padding: 0 0 var(--s-4); max-width: 72ch; font-size: var(--fs-sm); }
.ai-body p { margin: 0 0 var(--s-3); color: var(--ink-2); }
.ai-body ul { margin: 0 0 var(--s-3); padding-left: 1.1em; }
.ai-body li { margin-bottom: var(--s-1); }
.ai-body strong { color: var(--ink); font-weight: 700; }

/* Footer CTA row */
.foot .legal { margin-top: var(--s-5); }

@media (prefers-reduced-motion: reduce) {
  .orb-field, .arm, .orb-node .dot { animation: none; }
  .orb-node, .arm, .leaf, .twigs, .level, .ai-note .plus { transition: none; }
}


/* --------------------------------------------------------------------------
   Nav — plain links on the page, not a separate bar.
   -------------------------------------------------------------------------- */

.top {
  position: relative;
  top: auto;
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}
.top .container { min-height: 64px; flex-wrap: nowrap; padding-bottom: 0; }
.top--home .container { justify-content: flex-end; }

.wordmark {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.nav {
  gap: var(--s-4);
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.nav a {
  min-height: var(--tap);
  padding: 0;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-2);
}
.nav a:hover { background: none; color: var(--ink); }
.nav a[aria-current] {
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
@media (max-width: 899px) {
  .top .container { flex-wrap: nowrap; }
  .top .nav { order: 0; flex-basis: auto; }
}



/* AI note: Helvetica throughout, like the rest of the page's body */
.ai-note summary .mono {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.ai-note .plus { font-family: var(--sans); font-size: 1.1rem; }

/* Text-style CTA: one continuous underline under the words, the space and
   the arrow. Inline (not flex) so the space between them is real text. */
.btn-primary {
  display: inline-block;
  line-height: var(--tap);
}
.btn-primary .arrow { display: inline; transform: none !important; }


/* --------------------------------------------------------------------------
   Availability: its own line under the CTA, small and quiet so it never
   competes with the call to action, but clearly a live status.
   -------------------------------------------------------------------------- */

.hero-blurb > .status {
  display: inline-flex;
  margin-top: var(--s-2);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}
.hero-cta { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   Clean: no divider lines. Space does the separating.
   -------------------------------------------------------------------------- */

.section-head,
.page-title,
.case,
.paper,
.foot,
.whatido-list,
.whatido-list li,
.ai-note,
.research-item { border: 0 !important; }
.section-head { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Note for AI assistants: one colour throughout, so it reads as a side note
   addressed to someone else.
   -------------------------------------------------------------------------- */

#for-ai .ai-note,
#for-ai .ai-note * { color: var(--note); }
#for-ai .ai-note .link { background-image: linear-gradient(currentColor, currentColor); }

/* --------------------------------------------------------------------------
   Footer statement + supporting line
   -------------------------------------------------------------------------- */

.foot .big {
  margin-bottom: var(--s-3);
  max-width: 20ch;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 1.06;
  text-wrap: balance;
}
.foot-lede { margin: 0 0 var(--s-6); max-width: 46ch; color: var(--ink-2); }


/* --------------------------------------------------------------------------
   Rhythm: projects -> AI note -> footer at one even step, no dead space.
   -------------------------------------------------------------------------- */

#work { padding-bottom: var(--s-6); }
#for-ai { margin-top: 0 !important; margin-bottom: var(--s-6); }

/* --------------------------------------------------------------------------
   Footer, reversed: deep green band with paper text, full width of the sheet.
   -------------------------------------------------------------------------- */

.foot {
  max-width: none;
  margin-top: 0;
  padding: var(--s-7) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--s-5);
  background: var(--green-800);
  color: var(--on-green);
}
.foot .big,
.foot .links a,
.foot .btn-primary { color: var(--on-green); }
.foot-lede { color: var(--on-green-2); }
.foot .legal,
.foot .legal a { color: var(--on-green-2); }
.foot :where(a, button):focus-visible { outline-color: var(--on-green); }


/* Phones: the portrait is a small, right-aligned picture (about half the
   width), like the Liam Bennett reference, so the name stays the hero. */
@media (max-width: 899px) {
  /* Name as a masthead: one line, top left, centred on the nav row (64px),
     which sits a little way down from the top edge */
  .sheet { position: relative; --top-pad: var(--s-4); }
  .top .container { padding-top: var(--top-pad); min-height: calc(64px + var(--top-pad)); }
  .top--home .container { justify-content: flex-end; }
  .hero .name {
    position: absolute;
    top: calc(var(--top-pad) + 32px - 0.5em);
    left: var(--gutter);
    margin: 0;
    font-size: clamp(1.75rem, 9vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }
  .hero { padding-top: var(--s-7); row-gap: 0; }

  /* Small portrait, pushed right, with real air around it */
  .hero-photo {
    width: 50%;                 /* same share as desktop, so it scales evenly */
    justify-self: end;
  }
  .hero-photo img { aspect-ratio: 4 / 5; }

  /* Text on the same left edge as the name, just under the photo */
  .hero-blurb { margin-top: var(--s-5); }
}


/* --------------------------------------------------------------------------
   Phone menu — the nav folds into a dropdown under a "Menu" button.
   Without JS the button stays hidden and the links show inline as before.
   -------------------------------------------------------------------------- */

.menu-toggle { display: none; }

@media (max-width: 899px) {
  .top .container { position: relative; }

  .js .menu-toggle {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ink);
    cursor: pointer;
  }
  .js .top.is-open .menu-toggle {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
  }

  .js .top .nav {
    position: absolute;
    top: calc(var(--top-pad, 0px) + 56px);
    right: var(--gutter);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    min-width: 10rem;
    padding: var(--s-1) 0;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .js .top.is-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
  }
  .js .top .nav a {
    font-size: var(--fs-body);
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .top .nav { transition: none; transform: none; }
}


/* ==========================================================================
   Type system: one scale for the whole site. Helvetica for everything you
   read, Space Mono only for small labels. Every piece of text is one of these:

   Display  the name only                               --fs-name   400
   H1       inner page titles                           --fs-h1     400  -0.04em
   H2       section headings, the footer statement      --fs-h2     400  -0.03em
   H3       sub-headings and column titles              --fs-h3     400  -0.02em
   H4       card and list-item titles                   --fs-body   700
   Lead     the line that introduces a section          --fs-lead   400
   Body     paragraphs and lists                        --fs-body   400
   Small    hero intro, nav, CTA, AI note               --fs-sm     400 (CTA 700)
   Label    eyebrows, numbers, chips, status, legal     --fs-label  mono, caps
   ========================================================================== */

:root {
  --fs-h1:    clamp(2.75rem, 1.8rem + 4.2vw, 5.5rem);
  --fs-h2:    clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-h3:    clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  --fs-lead:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body:  1rem;
  --fs-sm:    0.8125rem;
  --fs-label: 0.6875rem;
}

body { font-size: var(--fs-body); line-height: 1.6; }

/* H1 */
.page-title h1 {
  font-family: var(--sans);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* H2 */
.section-head h2,
.about h2,
.whatido-intro h2,
.foot .big {
  font-family: var(--sans);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* H3 */
.pillar h3,
.howiwork h3,
.case h2,
.paper h2,
.focus-card h3 {
  font-family: var(--sans);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* H4 */
.card .row h3,
.ways-list h4,
.whatido-list h3 {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Lead */
.whatido-intro .whatido-focus,
.page-title .lede,
.section-lede,
.foot .foot-lede {
  font-size: var(--fs-lead);
  line-height: 1.45;
}

/* Body: every paragraph and list in the content reads at one size */
.about p:not(.mono),
.whatido-intro p:not(.mono):not(.whatido-focus),
.pillar ul,
.dash-list,
.howiwork p:not(.mono),
.ways-list p,
.case p,
.card p {
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Small */
.hero-blurb .bio,
.nav a,
.menu-toggle,
.ai-body,
.ai-note .ai-title {
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.btn-primary { font-size: var(--fs-sm); font-weight: 700; }

/* Label */
.mono,
.about .mono,
.num,
.pillar .num,
.case .num,
.paper .num,
.paper .meta,
.chips li,
.legal,
.legal span,
.legal a,
.status {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-blurb > .status { font-size: var(--fs-label); letter-spacing: 0.06em; }

/* The AI note's summary reads as a small bold title, not a label */
.ai-note summary .mono {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Links inside headings take the heading's tracking */
.case h2 a,
.paper h2 a { letter-spacing: inherit; }

/* Inner-page wordmark: the name as an H4 */
.wordmark { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.01em; }

/* Never break the name inside a word, at any width */
.name .word { white-space: nowrap; }

/* The name always sits on one line */
.name { white-space: nowrap; }

/* ==========================================================================
   What I do: an editorial 3-column grid. Every row of the section sits on
   the same three full-width columns, and a hairline opens each group so the
   eye reads it as one block: intro, then the three disciplines, then how we
   work together. Leading is tighter than body copy elsewhere so each column
   reads as a dense, designed block. Red marks the way in: labels, numbers,
   list dashes.
   ========================================================================== */

:root { --highlight: var(--signal-text); }

/* Red is the highlight: section labels and numbering across the site */
.mono,
.num,
.pillar .num,
.case .num,
.paper .num,
.about .mono { color: var(--highlight); }

.whatido { display: block; margin-top: var(--s-8); }

/* Rows: a hairline, then the columns */
.whatido-intro,
.wid-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
.wid-row { margin-top: var(--s-6); }
.howiwork.wid-row { margin-top: var(--s-6); }

.whatido-intro .mono { margin: 0; }
.whatido-intro h2 { margin: 0 0 var(--s-3); max-width: 24ch; }
.whatido-intro .whatido-focus { margin: 0; max-width: 52ch; line-height: 1.35; color: var(--ink); }

/* Column heads: label, then title, close together */
.pillar .num,
.howiwork .mono { display: block; margin: 0 0 var(--s-2); }
.pillar h3,
.howiwork h3 { margin: 0 0 var(--s-3); }

/* Tighter reading in the columns */
.pillar ul,
.dash-list,
.howiwork p:not(.mono),
.ways-list p { line-height: 1.4; }
.howiwork p:not(.mono) { margin: 0 0 var(--s-2); max-width: none; }
.pillar ul li,
.dash-list li { margin-bottom: var(--s-1); padding-left: 1em; }
.pillar ul li::before,
.dash-list li::before { color: var(--highlight); }
.howiwork .dash-list { max-width: none; margin-bottom: 0; }

/* Ways: a stacked list inside its column */
.ways { margin-top: 0; }
.ways-list { grid-template-columns: 1fr !important; gap: var(--s-2); margin: 0 0 var(--s-2); }
.ways-list h4 { margin: 0; }

@media (min-width: 1024px) {
  .whatido-intro,
  .wid-row,
  .howiwork.wid-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-5);
  }
  /* Intro: label in the first column, statement across the other two */
  .whatido-intro-body { grid-column: 2 / span 2; }
}

/* Column text: a compact reading size for the 3-column What I do grid.
   14px in rem (so it still scales with browser zoom and the user's default
   size), secondary ink at 5.3:1 contrast, 1.45 leading. */
:root {
  --fs-col: 0.875rem;
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}
.pillar ul,
.dash-list,
.howiwork .dash-list,
.howiwork p:not(.mono),
.ways-list p {
  font-size: var(--fs-col);
  line-height: 1.45;
}
.ways-list h4 { font-size: var(--fs-col); }
.pillar h3,
.howiwork h3 { margin-bottom: var(--s-2); }

/* Lists in What I do: no markers. Each item is its own short line on one
   clean left edge, separated by space alone, like the reference spreads. */
.pillar ul li,
.dash-list li,
.howiwork .dash-list li {
  padding-left: 0;
  margin-bottom: var(--s-2);
}
.pillar ul li::before,
.dash-list li::before { content: none; }

/* Text selection: a soft sage grey from the palette (no lime) */
.foot ::selection { background: var(--on-green); color: var(--green-900); }

/* Column text includes plain paragraphs inside a column */
.pillar p { margin: 0; font-size: var(--fs-col); line-height: 1.45; color: var(--ink-2); max-width: 40ch; }

/* Where I do my best work: label | statement | fit list */
.howiwork > .mono { margin: 0; }
.howiwork .fit-label { margin: 0 0 var(--s-2); color: var(--ink); font-weight: 700; }

/* Working together: its own section on the same grid */
#together .pillars { margin-top: var(--s-5); }
.together-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-5);
}
.together-cta p { margin: 0; font-size: var(--fs-col); color: var(--ink-2); }
@media (min-width: 1024px) {
  .together-cta { margin-left: calc((100% - 2 * var(--s-5)) / 3 + var(--s-5)); }
}

/* ==========================================================================
   Line height: one rhythm for the whole site. Three values only:
     1.0  H1 and the name (big type, tight)
     1.1  H2 and H3
     1.5  everything you read: lead, body, column, small, labels, H4
   Buttons keep line-height: var(--tap) for a 44px tap target; that is the
   hit area, not text spacing.
   ========================================================================== */

:root {
  --lh-tight: 1;
  --lh-heading: 1.1;
  --lh-text: 1.5;
}

body { line-height: var(--lh-text); }

.page-title h1 { line-height: var(--lh-tight); }

.section-head h2,
.about h2,
.whatido-intro h2,
.foot .big,
.pillar h3,
.howiwork h3,
.case h2,
.paper h2,
.focus-card h3 { line-height: var(--lh-heading); }

/* H4 and all reading text */
.card .row h3,
.ways-list h4,
.whatido-list h3,
.whatido-intro .whatido-focus,
.page-title .lede,
.section-lede,
.foot .foot-lede,
.about p:not(.mono),
.case p,
.card p,
.pillar p,
.pillar ul,
.dash-list,
.howiwork .dash-list,
.howiwork p:not(.mono),
.howiwork .fit-label,
.ways-list p,
.together-cta p,
.hero-blurb .bio,
.nav a,
.menu-toggle,
.wordmark,
.ai-body,
.ai-note .ai-title,
.ai-note summary .mono,
.mono,
.num,
.chips li,
.legal,
.status { line-height: var(--lh-text); }

/* About: no heading, so the first paragraph opens the section at Lead size */
.about .mono { margin: 0 0 var(--s-3); }
.about p.about-lead {
  margin: 0 0 var(--s-3);
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-text);
  color: var(--ink);
}

/* About: one square photo in the first of three columns, the text across
   the other two (the same grid as What I do) */
.about .photos { grid-template-columns: 1fr; }
.about .photos img {
  aspect-ratio: 1 / 1;
  object-position: 62% 50%;   /* centre on the two speakers */
}
.about p:not(.mono) { max-width: 60ch; }
@media (min-width: 720px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-5); align-items: start; }
}
@media (min-width: 1024px) {
  .about {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-5);
  }
  .about > :last-child { grid-column: 2 / span 2; }
}

/* About: column-size text, the first sentence in bold at the same size, and
   more air between photo and text. The photo is trimmed inside its column so
   the text keeps its place on the grid. */
.about p:not(.mono),
.about p.about-lead {
  font-size: var(--fs-col);
  line-height: var(--lh-text);
  max-width: 62ch;
}
.about p.about-lead { font-weight: 400; color: var(--ink-2); }
.about p.about-lead strong { font-weight: 700; color: var(--ink); }
.about { row-gap: var(--s-6); }
@media (min-width: 720px) {
  .about .photos img { width: calc(100% - var(--s-6)); }
}

/* About: bold sentences are dark green, like the opener */
.about p strong { font-weight: 700; color: var(--ink); }

/* Phones: the text comes first, the photo after it */
@media (max-width: 719px) {
  .about > :last-child { order: -1; }
}

/* Good fit: heading in column one, the four points as a 2x2 across two and three */
.fit h3 { margin: 0; }
.fit .fit-list { margin: 0; }
@media (min-width: 720px) {
  .fit .fit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-5);
  }
}
@media (min-width: 1024px) {
  .fit .fit-list { grid-column: 2 / span 2; }
}

/* Working together: who each option suits, under its description */
.pillar p.pillar-fit { margin-top: var(--s-3); color: var(--ink-2); }
.pillar p.pillar-fit strong { color: var(--ink); font-weight: 700; }

/* Working together: a full-width light sage band so it stands out from the
   paper, without competing with the deep green footer below it.
   Contrast on the band: ink 9.7:1, ink-2 4.7:1, red labels 4.9:1. */
:root { --band: #e2e8de; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --band: #18211c; }
}
:root[data-theme="dark"] { --band: #18211c; }

#together {
  max-width: none;
  margin-block: var(--s-7) var(--s-6);
  padding: var(--s-7) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  background: var(--band);
}
/* the band's edge already opens the section, so no hairline at its top */
#together .whatido-intro { border-top: 0; padding-top: 0; }

/* Working together: the call to action sits under the intro, before the options */
#together .together-cta { margin: var(--s-3) 0 0; }
@media (min-width: 1024px) { #together .together-cta { margin-left: 0; } }

/* ==========================================================================
   Services (Working together): "Services" on the left; on the right the
   intro, the call to action, then the three options as expandable rows.
   Built on <details>/<summary>, so it works by keyboard, with screen
   readers and without JS. A hairline separates each row; + turns to −.
   ========================================================================== */

.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
.services h2 { margin: 0; }
.services-body .whatido-focus { margin: 0; max-width: 52ch; color: var(--ink-2); }
#together .together-cta { margin: var(--s-3) 0 0; }

.acc {
  margin-top: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.acc-item { border-top: 1px solid var(--line); }

.acc-item > summary {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--s-4);
  padding: var(--s-3) 0;
  cursor: pointer;
  list-style: none;
}
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.acc-item > summary h3 { margin: 0; }
.acc-tag {
  font-size: var(--fs-col);
  line-height: var(--lh-text);
  color: var(--ink-2);
}

/* the + / − sign, drawn with two hairlines */
.acc-icon {
  position: relative;
  align-self: center;
  width: 14px;
  height: 14px;
}
.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--ink);
  transition: transform 250ms var(--ease-out);
}
.acc-icon::after { transform: rotate(90deg); }
.acc-item[open] .acc-icon::after { transform: rotate(0deg); }   /* + becomes − */
.acc-item > summary:hover .acc-icon::before,
.acc-item > summary:hover .acc-icon::after { background: var(--highlight); }

.acc-body { padding: 0 0 var(--s-4); }
.acc-body p {
  margin: 0 0 var(--s-2);
  max-width: 60ch;
  font-size: var(--fs-col);
  line-height: var(--lh-text);
  color: var(--ink-2);
}
.acc-body p:last-child { margin-bottom: 0; }
.acc-body .acc-fit strong { color: var(--ink); font-weight: 700; }

/* Phones: the tagline drops under the option name */
@media (max-width: 599px) {
  .acc-item > summary { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .acc-tag { grid-row: 2; grid-column: 1; }
  .acc-icon { grid-row: 1; grid-column: 2; }
}

@media (min-width: 1024px) {
  .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-5);
  }
  .services-body { grid-column: 2 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-icon::before, .acc-icon::after { transition: none; }
}

/* Services: type follows the system: H2, Lead, H3 */
.services h2 {
  font-family: var(--sans);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: -0.03em;
}
.services-body p.whatido-focus {
  font-size: var(--fs-lead);
  line-height: var(--lh-text);
}
.acc-item > summary h3 {
  font-family: var(--sans);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* About photo: a 4:3 landscape rectangle, close to the original framing */
.about .photos img { aspect-ratio: 4 / 3; object-position: 55% 50%; }

/* AI note: neutral grey instead of olive (5.2:1 on paper, 7.2:1 in dark) */
:root { --note: #666662; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --note: #a3a3a0; }
}
:root[data-theme="dark"] { --note: #a3a3a0; }

/* What I do: each discipline is a bordered box; the boxes do the grouping,
   so the section's divider lines are removed */
.whatido .whatido-intro,
.whatido .pillars.wid-row {
  border-top: 0;
  padding-top: 0;
}
.whatido .pillar {
  border: 1px solid var(--line);
  padding: var(--s-4);
}

/* What I do: thin line icons above each discipline (inline SVG, ink colour) */
.pillar-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 var(--s-4);
  color: var(--ink);
  overflow: visible;
}
.pillar-icon * { vector-effect: non-scaling-stroke; }

/* Icons: a finer hairline stroke */
.pillar-icon * { stroke-width: 0.6px; }

/* What I do: "What I do" label on the left; the intro and the boxes on the
   right, the boxes as a 2-column grid (Strategy | Execution, then
   Optimisation on the second row) */
.whatido .pillars.pillars--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  border: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .whatido .pillars.pillars--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.whatido .whatido-focus { margin-top: 0; }

/* Phones: the About photo matches the hero portrait, half width and pushed
   right, so it's present but not dominant */
@media (max-width: 719px) {
  .about .photos { width: 50%; justify-self: end; }
  .about .photos img { width: 100%; }
}

/* What I do: more air between the heading and the boxes */
.whatido .whatido-intro-body h2 { margin: 0; }
.whatido .whatido-intro-body h2 + .pillars--2 { margin-top: var(--s-6); }

/* What I do: discipline titles in medium weight */
.whatido .pillar h3 { font-weight: 500; letter-spacing: -0.015em; }

/* Column text (14px) reads slightly tighter: 1.4 instead of 1.5 */
:root { --lh-col: 1.4; }
.whatido .pillar p,
.about p:not(.mono),
.about p.about-lead,
.acc-body p,
.acc-tag { line-height: var(--lh-col); }

/* The boxes now sit inside the intro block, so restate their Column style
   above the intro's paragraph rule */
.whatido .whatido-intro .pillars .pillar p {
  margin: 0;
  max-width: none;
  font-size: var(--fs-col);
  line-height: var(--lh-col);
  color: var(--ink-2);
}

/* Services: the availability line under the call to action, as in the hero */
#together .status {
  display: inline-flex;
  margin: var(--s-2) 0 0;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
}

/* Icons: every drawing fills its box edge to edge (viewBox cropped to the
   drawing), so the gap to the heading is the same 16px for all three */
.pillar-icon { width: 36px; height: 36px; margin: 0 0 var(--s-3); }

/* What I do: all three boxes the same size (every grid row as tall as the tallest box) */
@media (min-width: 720px) {
  .whatido .pillars.pillars--2 { grid-auto-rows: 1fr; }
}
.whatido .pillars.pillars--2 { grid-auto-rows: 1fr; }

/* CTA vs status: the call to action leads. The CTA moves up to body size
   (16px bold, firmer underline); the availability line keeps its pulsing red
   dot but its text drops to secondary grey so it no longer competes. */
.btn-primary {
  font-size: var(--fs-body);
  text-decoration-thickness: 1.5px;
}
.btn-primary:hover { text-decoration-thickness: 2.5px; }
.status,
.hero-blurb > .status,
#together .status { color: var(--ink-2); }

/* Working together rows: tagline sits on the right, next to the +/− */
@media (min-width: 600px) {
  .acc-tag { justify-self: end; text-align: right; }
}

/* Working together rows: titles in medium weight, matching the What I do boxes */
.acc-item > summary h3 { font-weight: 500; letter-spacing: -0.015em; }

/* Working together rows: no taglines any more, so title left, sign right */
.acc-item > summary { grid-template-columns: minmax(0, 1fr) auto; }

/* Footer: contact only, on the paper like the rest of the page */
.foot {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: var(--s-5);
  background: none;
  color: var(--ink);
}
.foot .links a,
.foot .btn-primary { color: var(--ink); }
.foot .legal,
.foot .legal a { color: var(--ink-2); }
.foot :where(a, button):focus-visible { outline-color: var(--ink); }
.foot ::selection { background: color-mix(in srgb, var(--ink) 16%, var(--paper)); color: var(--ink); }

/* ==========================================================================
   Persistent header: "Simone Wong" on the left, the nav on the right, stuck
   to the top of every page. On the home page (desktop) the small name fades
   in once the big hero name has scrolled away. A hairline appears once the
   page has scrolled.
   ========================================================================== */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  transition: box-shadow 200ms var(--ease-out);
}
.top.is-stuck { box-shadow: 0 1px 0 var(--line); }
.top .container,
.top--home .container { justify-content: space-between; }

.wordmark {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--lh-heading);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.top--home .wordmark { transition: opacity 250ms var(--ease-out); }
@media (min-width: 900px) {
  .js .top--home:not(.show-name) .wordmark { opacity: 0; pointer-events: none; }
}

/* Sections land below the sticky header when you jump to them */
[id] { scroll-margin-top: 88px; }

/* ----- Phones: the header carries the name; the hero name is for screen
   readers only (it stays the page's H1) ----- */
@media (max-width: 899px) {
  .sheet { --top-pad: var(--s-3); }
  .wordmark { font-size: clamp(1.5rem, 6.5vw, 2rem); font-weight: 400; letter-spacing: -0.035em; }
  .hero .name {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .hero { padding-top: var(--s-6); }
}

/* ==========================================================================
   Section titles: every titled section uses the same pattern, an H2 in the
   left column (matching its nav label) and the content in the two columns
   on the right, opened by a Lead.
   ========================================================================== */

.section-title {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.section-lead,
.whatido .whatido-intro-body p.section-lead,
.services-body p.section-lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-text);
  color: var(--ink);
}

/* Projects: H2 on the left, "All projects" on the right of the same row */
#work .section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  border: 0;
  padding: 0;
  margin-bottom: var(--s-5);
}

/* Contact (footer): H2 on the left, the links on the right */
.foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
.foot .foot-grid { margin: 0; }
@media (min-width: 1024px) {
  .foot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-5);
    align-items: baseline;
  }
  .foot .foot-grid { grid-column: 2 / span 2; }
  .foot .legal { grid-column: 1 / -1; }
}

/* No divider under the sticky header, even when scrolled */
.top.is-stuck { box-shadow: none; }

/* Work with me: the boxes start level with the title on the left */
.whatido .whatido-intro-body > .pillars--2:first-child { margin-top: 0; }

/* ==========================================================================
   Motion, simplified: one plain fade. No blur, no slide, no rotation, no
   letter-by-letter name. Page changes crossfade.
   ========================================================================== */

.js .reveal,
.js :is(.hero, .page-title) .reveal {
  transform: none;
  filter: none;
  transition: opacity 400ms ease;
  transition-delay: 0ms;
}
.reveal.in,
.is-loaded :is(.hero, .page-title) .reveal { transform: none; filter: none; }

.js .name span {
  transform: none;
  filter: none;
  transition: opacity 400ms ease;
  transition-delay: 0ms;
}
.is-loaded .name span { transform: none; filter: none; }

::view-transition-old(root) { animation: 180ms ease both vt-fade-out; }
::view-transition-new(root) { animation: 180ms ease both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

/* Phones: a sensible gap above the Working together band
   (About's bottom padding and the band's top margin were stacking) */
@media (max-width: 899px) {
  #about.section { padding-bottom: var(--s-6); }
  #together { margin-top: 0; }
}
@media (min-width: 900px) {
  #about.section { padding-bottom: var(--s-7); }
  #together { margin-top: 0; }
}

/* Working together: hierarchy clean-up
   1. Focus is shown as an underline on the option title (keyboard only),
      not a heavy box over the text.
   2. The availability line sits tight under the CTA, as its footnote.
   3. Open rows get room at the bottom before the next hairline. */
.acc-item > summary:focus { outline: none; }
.acc-item > summary:focus-visible { outline: none; }
.acc-item > summary:focus-visible h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.acc-item > summary:focus-visible .acc-icon::before,
.acc-item > summary:focus-visible .acc-icon::after { background: var(--highlight); }

#together .together-cta { margin-top: var(--s-4); }
#together .together-cta + .status { margin-top: 0; }

.acc-body { padding-bottom: var(--s-5); }
.acc-body p { margin-bottom: var(--s-3); }
.acc-body p:last-child { margin-bottom: 0; }

/* Name: medium weight, in the hero and in the header, on every screen */
.name,
.hero .name { font-weight: 500; }
.wordmark { font-weight: 500; }
@media (max-width: 899px) { .wordmark { font-weight: 500; } }

/* Hero intro: slightly tighter tracking for a slimmer, more refined texture */
.hero-blurb .bio { letter-spacing: -0.02em; }

/* ==========================================================================
   Tracking: all reading text sits slightly tight at -0.02em (a slimmer,
   more refined texture). Zero-specificity :where() so anything with its own
   tracking keeps it: headings and the name are tighter still, and the
   Space Mono caps labels stay positively tracked.
   ========================================================================== */
:root { --track-text: -0.02em; }
:where(p, li, a, button, summary, dt, dd, blockquote, figcaption, label) {
  letter-spacing: var(--track-text);
}
/* H4s and the small-bold AI note title follow the text tracking too */
.card .row h3,
.ways-list h4,
.whatido-list h3,
.ai-note summary .mono { letter-spacing: var(--track-text); }

/* What I do boxes: square. Each box is at least as tall as it is wide
   (container units, so the width never grows past its column); if the text
   needs more room, all three grow together and stay identical. */
.whatido .pillars.pillars--2 { container-type: inline-size; }
.whatido .pillar { min-width: 0; min-height: 100cqw; }
@media (min-width: 720px) {
  .whatido .pillar { min-height: calc((100cqw - var(--s-4)) / 2); }
}

/* ==========================================================================
   Work with me boxes: steady squares at every width. Each box is at most
   340px wide, so it never balloons in one column. The grid goes to two
   columns as soon as two readable squares fit (based on the space the
   boxes actually have, not the screen width), so there are no sudden jumps.
   ========================================================================== */
.whatido .whatido-intro-body { container-type: inline-size; }
.whatido .pillars.pillars--2 {
  grid-template-columns: minmax(0, 340px);
  grid-auto-rows: 1fr;
}
.whatido .pillar { min-height: min(100cqw, 340px); }
@container (min-width: 604px) {
  .whatido .pillars.pillars--2 { grid-template-columns: repeat(2, minmax(0, 340px)); }
  .whatido .pillar { min-height: min(calc((100cqw - var(--s-4)) / 2), 340px); }
}

/* Hero photo on desktop: a little smaller on wide screens (at most 440px
   wide, still pinned top-right). Below ~1000px it's already under the cap,
   so it keeps scaling smoothly from phone to desktop. */
@media (min-width: 900px) {
  .hero-photo { max-width: 440px; }
}

/* Hero name: a little smaller, in regular weight (400) */
@media (min-width: 900px) {
  .hero .name { font-size: clamp(2.25rem, 5vw, 4.25rem); }
}
.name,
.hero .name { font-weight: 400; letter-spacing: -0.055em; }

/* Hero photo on desktop: smaller still, at most 380px wide (about 380 x 475) */
@media (min-width: 900px) {
  .hero-photo { max-width: 380px; }
}