/* ==========================================================================
   Home page ("Chartreuse" direction) and the Play page. Loaded after site.css.
   Sections: 1 tokens · 2 intro scene · 3 work · 4 about · 5 play
             6 main homepage (index.html only: white, Helvetica, a light serif)
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
.home {
  /* Type: a high-contrast serif for headlines, a geometric sans for the rest.
     Case study pages keep their own fonts (site.css and digital-equity/). */
  --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ink-3: #675D51;
  --gold-1: #8A5A00; --gold-2: #C98A00; --gold-3: #F4B400; --gold-4: #F7C948; --gold-5: #FAE08A; --gold-6: #FCF0C9;
  --card-border: rgba(42, 35, 29, .06);
  /* Palette: the sun's yellow, with cobalt blue as the one highlight colour.
     Overrides the shared lime accent tokens from site.css for this page. */
  --cobalt: #0047AB;           /* 7.4:1 on cream */
  --cobalt-dark: #00337D;
  --lime: var(--cobalt);
  --lime-hl: rgba(0, 71, 171, .14);
  --lime-soft: rgba(0, 71, 171, .1);
  --olive: var(--cobalt-dark);
  --card-shadow: 0 24px 60px -36px rgba(201, 138, 0, .3);
  --card-shadow-hover: 0 30px 60px -34px rgba(201, 138, 0, .4);
  font-weight: 400;
  background-color: var(--cream);
}
.home .cap { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.home main { position: relative; z-index: 1; }
.brand--sans { font-family: var(--font-sans); font-size: 1rem; font-weight: 400; }

/* Key phrase marker: sits 36% high, fills on hover for links */
.klink, .home .hl {
  color: var(--cobalt); text-decoration: none;
  background-image: linear-gradient(var(--lime-hl), var(--lime-hl)); background-repeat: no-repeat;
  background-size: 100% 36%; background-position: 0 92%; transition: background-size .3s;
}
a.klink:hover, a.klink:focus-visible { background-size: 100% 100%; color: var(--cobalt-dark); }
.mark { font-weight: 600; }

/* 2. Intro scene ------------------------------------------------------------
   Without JS, or with reduced motion: a still composition (greeting, sun
   glow, headline). With motion, js/site.js sets --p (0 → 1) as you scroll
   through the tall .scene, and these rules play the sequence:
     0–.25 hold on the greeting · .25–.65 the sun rises to the centre of the
     screen, shrinking to 60% · .58–.74 the headline appears on it · then hold   */
.scene { position: relative; }
.scene-stage {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center; padding: calc(var(--header-h) + 24px) var(--gutter) 96px;
}
.sig { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 300; line-height: 1.4; text-align: center; }
.sig b { font-weight: 500; }
/* Small aside pinned to the bottom centre of the intro, above the scroll cue */
.psst { position: absolute; left: 0; right: 0; bottom: 104px; z-index: 2; padding-inline: var(--gutter); text-align: center; font-size: 12px; letter-spacing: .04em; font-style: italic; color: var(--ink-2); }
.scene h1 {
  font-family: var(--font-serif); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; color: var(--ink);
  text-align: center; max-width: 640px; text-wrap: balance;
}
.scene-copy { position: relative; z-index: 2; display: grid; gap: clamp(28px, 4vw, 48px); justify-items: center; }

/* Rotating role after "Hi, I'm Rhea": every role sits in one grid cell, so
   the line keeps the width of the longest and doesn't jump as they change */
.rotator { display: inline-grid; text-align: left; vertical-align: bottom; }
.rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.45em); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rotator > span.is-on { opacity: 1; transform: none; }
.rotator > span.is-off { opacity: 0; transform: translateY(-.45em); }

/* The sun's soft edge is drawn into the gradient itself (it matches the old
   blur(46px) look). No filter: iOS WebKit (Safari and in-app browsers like
   LinkedIn's) clipped the blurred glow into hard rectangles while it scaled.
   The box is 1.6x the sun so the whole fade fits inside it. */
.sun {
  --d: min(100vw, 900px);
  position: absolute; left: 50%; bottom: calc(-1 * min(66vw, 600px) - var(--d) * .3); z-index: 1; pointer-events: none;
  width: calc(var(--d) * 1.6); aspect-ratio: 1; margin-left: calc(var(--d) * -.8);
  background: radial-gradient(39.17% 39.17% at 50% 50.75%,
    #FFD200 0%, #FFD200 29.8%, rgba(255, 210, 2, 1) 36.2%, rgba(255, 211, 8, 1) 41.5%,
    rgba(255, 213, 15, .995) 45.7%, rgba(255, 214, 24, .98) 50%, rgba(255, 216, 34, .944) 54.3%,
    rgba(255, 218, 44, .873) 58.5%, rgba(255, 220, 54, .763) 62.8%, rgba(255, 221, 61, .616) 67%,
    rgba(255, 222, 68, .447) 71.3%, rgba(255, 223, 74, .287) 75.5%, rgba(255, 224, 78, .156) 79.8%,
    rgba(255, 225, 82, .07) 84%, rgba(255, 225, 87, .024) 88.3%, rgba(255, 224, 86, .006) 92.6%, rgba(255, 224, 86, 0) 100%);
  opacity: .5;
  transform-origin: 50% 50%; will-change: transform;
}

/* Fine grain over the sun (added by js/site.js). It covers the stage and
   never scales; a radial mask that follows the sun keeps it on the circle. */
.sun-grain {
  --s: min(100vw, 900px); --o: min(66vw, 600px);
  --k: calc(1 - var(--e, 0) * .4);
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grain-img) 0 0 / 180px 180px repeat;
  mix-blend-mode: overlay;
  --y: calc((1 - var(--e, 0)) * (100% + var(--o) - var(--s) * .5) + var(--e, 0) * 50%);
  opacity: .2;
  -webkit-mask-image: radial-gradient(circle calc(var(--s) * .62 * var(--k)) at 50% var(--y), #000 0%, #000 40%, transparent 82%);
          mask-image: radial-gradient(circle calc(var(--s) * .62 * var(--k)) at 50% var(--y), #000 0%, #000 40%, transparent 82%);
}

.scroll-cue--line { gap: 8px; }
.cuebar { display: block; width: 1px; height: 38px; background: linear-gradient(var(--lime), transparent); transform-origin: top; }
@keyframes cuel { 0%, 100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
.js-motion .cuebar { animation: cuel 1.8s ease-in-out infinite; }

/* Scroll-driven version */
.js-scene .scene {
  height: 300vh;
  /* --e: how far the sun has risen, 0 → 1, eased out */
  --t: clamp(0, (var(--p, 0) - .25) / .4, 1);
  --e: calc(var(--t) * (2 - var(--t)));
}
.js-scene .scene-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.js-scene .scene-copy { grid-area: 1 / 1; }
.js-scene .sig, .js-scene .scene h1 { grid-area: 1 / 1; }
.js-scene .sig, .js-scene .psst {
  /* fades as the sun rises */
  opacity: calc(1 - clamp(0, (var(--p, 0) - .25) / .13, 1));
  transform: translateY(calc(clamp(0, (var(--p, 0) - .25) / .13, 1) * -24px));
}
.js-scene .scene h1 {
  opacity: clamp(0, (var(--p, 0) - .58) / .16, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 0) - .58) / .16, 1)) * 24px));
}
.js-scene .sun {
  /* rises from below the fold until its centre meets the centre of the screen */
  transform:
    translateY(calc(var(--e) * -1 * (50vh + min(66vw, 600px) - min(100vw, 900px) * .5)))
    scale(calc(1 - var(--e) * .4));
  transform:
    translateY(calc(var(--e) * -1 * (50svh + min(66vw, 600px) - min(100vw, 900px) * .5)))
    scale(calc(1 - var(--e) * .4));
}
.js-scene .scene .scroll-cue { opacity: calc(1 - clamp(0, (var(--p, 0) - .1) / .08, 1)); }

/* 3. Work ------------------------------------------------------------------ */
.home .work-aside .tagline { font-family: var(--font-serif); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.35; font-weight: 400; letter-spacing: -0.005em; color: var(--ink); }
.home .work-aside .experiences { font-size: clamp(1rem, .92rem + .35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); }

.home .cards { counter-reset: card; gap: clamp(20px, 2.4vw, 28px); }
.home .cards > li { counter-increment: card; }

/* Card: cover image edge to edge on top, then title, one sentence, and the role at the foot */
.home .card {
  display: flex; flex-direction: column; padding: 6px; border-radius: 14px; color: inherit; text-decoration: none;
  background: #FFFDF8; border: 1px solid rgba(42, 35, 29, .22);
  box-shadow: 0 1px 2px rgba(42, 35, 29, .04), 0 18px 40px -24px rgba(42, 35, 29, .25);
  transition: box-shadow .3s;
}
.home .card:hover, .home .card:focus-visible { background: #FFFDF8; box-shadow: 0 1px 2px rgba(42, 35, 29, .06), 0 24px 48px -22px rgba(42, 35, 29, .32); }
.home .card-media { flex: none; aspect-ratio: 4 / 3; height: auto; min-height: 0; border-radius: 10px; background: #ECE6DA; }
.home .card-media > img { width: 100%; height: 100%; object-fit: cover; }
.home .card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.4vw, 30px) clamp(16px, 2.2vw, 28px) clamp(16px, 2vw, 26px); text-align: left; }
.home .card-title { font-family: var(--font-serif); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.08; font-weight: 400; letter-spacing: -0.015em; }
.home .card:hover .card-title { transform: none; }
.home .card-desc { margin: 0; font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.5; color: var(--ink-2); }
.home .card-foot { margin: auto 0 0; padding-top: 16px; }
.home .card-tag { font-size: clamp(1rem, .95rem + .3vw, 1.25rem); color: var(--ink); }

/* Sideways scroll (js/site.js adds .js-deck): the cards column is pinned
   and the cards sit in one row. Scrolling down slides the row to the left,
   one card at a time; after the last card the page carries on. The row is
   cut off at the left edge of the column (so the text column stays clear)
   and runs out to the right edge of the window, so the next card peeks in. */
.js-deck .work { overflow-x: clip; } /* the row never widens the page */
.js-deck .deck { min-width: 0; }
.js-deck .deck-stage {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center; padding-block: 24px;
  clip-path: inset(-40px -100vw -40px 0);
}
.js-deck .work-head, .js-deck .work-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
/* Two cards fill a wide column and one fills a narrow one (shorter if the
   window is too short for them); the next one peeks in from the right */
.js-deck .deck-stage { --nav-h: 60px; container-type: inline-size; }

/* Phones and tablets (js/site.js adds .deck-swipe): the row scrolls sideways
   under the finger and snaps card by card; the page is not pinned. */
.deck-swipe .deck-stage { position: static; height: auto; clip-path: none; padding-block: 0; }
html.deck-swipe .cards {
  --cw: min(86cqw, calc((100svh - var(--header-h) - 48px - var(--nav-h)) * var(--card-ratio)));
  width: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; will-change: auto; transform: none !important; padding-block: 2px;
  padding-inline-end: calc(100% - var(--cw)); /* so the last card can also sit at the left edge */
}
.deck-swipe .cards::-webkit-scrollbar { display: none; }
.deck-swipe .cards > li { scroll-snap-align: start; scroll-snap-stop: always; }
/* a card grows to fit longer text instead of cutting off "Continue Reading" */
html.deck-swipe .home-index .card {
  aspect-ratio: auto; height: 100%; min-height: calc(100cqw / var(--card-ratio)); /* 100cqw = the card (its li is the container) */
  grid-template-rows: calc(100cqw / var(--card-ratio) * .4) 1fr;
}
html.deck-swipe .home-index .card--soon { grid-template-rows: 1fr; }
@container (min-width: 560px) {
  html.deck-swipe .cards { --cw: min(calc((100cqw - var(--card-gap)) / 2.15), calc((100svh - var(--header-h) - 48px - var(--nav-h)) * var(--card-ratio))); }
}

/* Counter and arrows under the row */
.deck-nav { display: none; }
.js-deck .deck-nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding-top: 16px; }
.deck-count { font-size: 14px; letter-spacing: .04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.deck-count b { font-weight: 500; color: var(--ink); }
.deck-arrows { display: flex; gap: 4px; margin-right: -10px; }
.deck-arrow {
  display: grid; place-items: center; width: 48px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  transition: color .2s, opacity .2s, transform .3s var(--ease);
}
.deck-arrow:hover { color: var(--cobalt); }
[data-deck-next].deck-arrow:hover { transform: translateX(3px); }
[data-deck-prev].deck-arrow:hover { transform: translateX(-3px); }
.deck-arrow:disabled { opacity: .25; cursor: default; transform: none; color: var(--ink); }
.js-deck .cards {
  --cw: min(calc((100cqw - var(--card-gap)) / 2), calc((100svh - var(--header-h) - 48px - var(--nav-h)) * var(--card-ratio)));
  display: flex; gap: var(--card-gap); width: max-content; will-change: transform;
}
.js-deck .cards > li { flex: none; width: var(--cw); }
@container (max-width: 759.98px) {
  .js-deck .cards { --cw: min(100cqw, calc((100svh - var(--header-h) - 48px - var(--nav-h)) * var(--card-ratio))); }
}

/* Counter pill under the cards */
.home .work-count {
  position: sticky; bottom: 20px; z-index: 2; justify-self: center; width: max-content; margin: 24px auto 0;
  background: var(--cream); padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 20px -10px rgba(42, 35, 29, .25);
}
.home .work-head { justify-content: flex-start; }

/* 4. About ----------------------------------------------------------------- */
.home .about-grid { align-items: end; }
.home .about-photo { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 480px; }
.home .about-photo .portrait { aspect-ratio: 3 / 4; border-radius: 24px; background: #F4E5DB; }
.home .about-photo figcaption { order: 0; writing-mode: horizontal-tb; transform: none; max-height: none; font-size: var(--fs-xs); }
.home .about-copy { font-weight: 300; line-height: 1.7; max-width: 700px; gap: 16px; }
.home .about-copy h2 { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; }
@media (min-width: 900px) {
  .home .about-grid { grid-template-columns: minmax(300px, 480px) minmax(0, 700px); justify-content: space-between; }
}
@media (max-width: 899.98px) {
  .home .about-photo { max-width: 260px; margin-inline: auto; text-align: center; }
}


/* 5. Play ------------------------------------------------------------------
   A loose wall of side projects. Tiles flow in columns (masonry), so tall,
   square and wide images all sit together without cropping.               */
.play-intro { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0 clamp(40px, 6vw, 80px); text-align: center; }
.play-intro .container { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; }
.play-intro h1 { font-family: var(--font-serif); font-size: clamp(3.5rem, 2rem + 7vw, 8rem); line-height: .95; font-weight: 400; letter-spacing: -0.03em; }
.play-lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 300; line-height: 1.45; max-width: 36ch; color: var(--ink-2); }
.play-sun {
  position: absolute; left: 50%; top: 0; width: min(90vw, 720px); aspect-ratio: 1; transform: translate(-50%, -38%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--gold-3) 0%, var(--gold-4) 30%, var(--gold-5) 52%, var(--gold-6) 72%, rgba(252, 240, 201, 0) 100%);
  filter: blur(40px); opacity: .75;
}
.js-motion .play-sun { animation: playsun 9s ease-in-out infinite alternate; }
@keyframes playsun { to { transform: translate(-50%, -32%) scale(1.08); } }

.play-wall { padding-bottom: clamp(72px, 10vw, 140px); }
.tiles { list-style: none; padding: 0; columns: 3 260px; column-gap: clamp(16px, 2.4vw, 32px); }
.tiles > li { list-style: none; break-inside: avoid; margin-bottom: clamp(16px, 2.4vw, 32px); }
.tile {
  display: block; padding: 12px; border-radius: clamp(20px, 2vw, 26px); color: inherit; text-decoration: none;
  background: rgba(246, 239, 224, .84); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s;
}
.tile-media { border-radius: 16px; overflow: hidden; background: #F4E5DB; }
/* A real image sets its own shape: the placeholder ratio no longer applies */
.tile-media:has(img) { aspect-ratio: auto !important; }
.tile-media img { display: block; width: 100%; height: auto; }
.tile-body { display: grid; gap: 4px; padding: 14px 6px 6px; }
.tile-title { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 400; line-height: 1.25; }
.tile-tag { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
a.tile:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
/* Playful hover: each tile tips a little, alternating direction */
@media (hover: hover) {
  a.tile:hover { background: rgba(246, 239, 224, .98); box-shadow: var(--card-shadow-hover); }
  .js-motion a.tile:hover { transform: rotate(-1.2deg) translateY(-4px); }
  .js-motion .tiles > li:nth-child(even) a.tile:hover { transform: rotate(1.2deg) translateY(-4px); }
}
.show-drafts .tiles > li[data-draft] .tile { outline: 2px dashed rgba(42, 35, 29, .3); outline-offset: 4px; }

/* "Coming soon" note: js/site.js shows it while no tile is published */
.play-empty { display: none; text-align: center; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 300; color: var(--ink-2); padding-block: 24px 48px; }
.play-empty.is-empty { display: block; }

/* Ping pong (js/pong.js) -------------------------------------------------
   The game draws on one fixed canvas that never takes clicks, under the
   header. With a mouse, the paddle replaces the yellow dot cursor.        */
.pong { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; pointer-events: none; }
.has-paddle .cursor-dot { display: none; }
.has-paddle, .has-paddle * { cursor: none !important; }
.pong-bar {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px;
  padding: calc(var(--header-h) + 20px) var(--gutter) 0;
}
.pong-switch {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--card-border); border-radius: 999px;
  background: rgba(246, 239, 224, .9); box-shadow: var(--card-shadow); font: inherit; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.pong-switch:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.pong-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(42, 35, 29, .16); transition: background-color .25s; }
.pong-knob { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(42, 35, 29, .3); transition: transform .25s var(--ease); }
.pong-switch[aria-checked="true"] .pong-track { background: #F4B400; }
.pong-switch[aria-checked="true"] .pong-knob { transform: translateX(16px); }
.pong-hint, .pong-score { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.pong-score b { color: var(--ink); font-weight: 600; }
@media not ((hover: hover) and (pointer: fine)) { .pong-hint { display: none; } }
/* Focus mode: only the game is left */
.pong-focus body { overflow: hidden; }
.pong-focus .play-intro, .pong-focus .play-wall, .pong-focus .site-footer, .pong-focus .pong-hint { display: none; }
/* Touch screens: the canvas takes the finger, so dragging moves the paddle */
.pong-focus .pong { pointer-events: auto; touch-action: none; }
.pong-focus main { z-index: 95; }

/* 6. Main homepage (index.html) -------------------------------------------
   Pure white page, Helvetica throughout, and a light Cooper-style serif (Fraunces) only for the two
   statement lines (the intro headline and "I lead the Human Centered Design
   process…"). Play and the case studies keep their own type.             */
@font-face {
  font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/bodoni-moda-latin-opsz-normal.woff2) format('woff2-variations'), url(../fonts/bodoni-moda-latin-opsz-normal.woff2) format('woff2');
}
/* Fraunces (SIL OFL, self-hosted): a soft, Cooper-style serif, used light for the two statement lines */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-latin-full-normal.woff2) format('woff2-variations'), url(../fonts/fraunces-latin-full-normal.woff2) format('woff2');
}
.home-index {
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Cooper Light', 'Cooper BT', 'Fraunces', Georgia, serif;
  --cream: #FFFFFF;            /* pills and anything else that used the page colour */
  --ink: #161616;
  --ink-2: #474747;            /* 9.4:1 on white */
  --ink-3: #666666;            /* 5.7:1 on white */
  --line: rgba(0, 0, 0, .08);
  background: #FFFFFF;
}
.home-index .site-header.is-scrolled { background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 var(--line); backdrop-filter: none; }
/* Landing: the header stays out of the way until the visitor scrolls, then hides on the way down and returns on the way up (js/header.js) */
.home-index .brand--sans { font-weight: 500; letter-spacing: -0.01em; }
.home-index .sig { font-weight: 300; letter-spacing: -0.01em; }
.home-index .psst { font-style: normal; }
/* The serif lines (now just the tagline; the headline switches to sans below): Cooper Light if installed, else Fraunces Light with soft terminals, sturdy enough to read */
.home-index .scene h1, .home-index .work-aside .tagline { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 300; font-variation-settings: 'SOFT' 100, 'WONK' 0; letter-spacing: -0.01em; }
.home-index .scene h1 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); line-height: 1.25; }
/* Wide enough for two lines on a laptop; the key words are bold and cobalt */
.home-index .scene h1 { max-width: min(31em, 100%); }
.home-index .scene h1 strong { font-weight: 600; color: var(--cobalt); }
/* Headline in the same sans as "Hi, I'm Rhea" above it (Rhea's call); the tagline below stays serif */
.home-index .scene h1 { font-family: var(--font-sans); font-weight: 300; font-variation-settings: normal; letter-spacing: -0.015em; max-width: min(34em, 100%); }
.home-index .scene h1 strong { font-weight: 600; color: var(--ink); } /* bold, in the same black as the rest of the line */
.home-index .work-aside .tagline { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.3; }

/* Key experiences: links are blue and underlined (the underline fills in on
   hover); the plain phrase has the same weight but no colour or underline */
.home-index .work-aside .experiences { font-size: clamp(1rem, .94rem + .3vw, 1.1875rem); line-height: 1.6; color: var(--ink-2); }
.home-index .klink, .home-index .kplain { font-weight: 500; }
.home-index .klink {
  color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; text-decoration-color: rgba(0, 71, 171, .45);
  background-image: linear-gradient(var(--lime-hl), var(--lime-hl)); background-size: 100% 0; background-position: 0 100%;
  transition: background-size .25s, text-decoration-color .25s;
}
.home-index a.klink:hover, .home-index a.klink:focus-visible { background-size: 100% 100%; text-decoration-color: var(--cobalt); color: var(--cobalt-dark); }
.home-index .klink::after { content: "\2197"; display: inline-block; margin-left: .15em; font-size: .8em; text-decoration: none; }
.home-index .klink--here::after { content: none; } /* stays on the page: no "opens elsewhere" arrow */
.home-index .kplain { color: var(--ink); }
/* Non-link emphasis elsewhere ("actionable innovation") also stays plain, so blue always means clickable */
.home-index .hl { color: var(--ink); font-weight: 500; background: none; }

/* Cards: very slightly rounded corners, a coloured image panel on the top 40% and the
   text on off-white below it: an outlined tag, a large title, a short grey
   description and "Continue Reading" at the foot */
.home-index { --card-ratio: 0.71; --card-gap: clamp(16px, 2.2vw, 32px); --card-bg: #F6F3EE; }
.home-index .cards { gap: var(--card-gap); }
.home-index .cards > li { container-type: inline-size; } /* the title scales with the card */
.home-index .card {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 40% 1fr; gap: 0; padding: 0; border: 0; border-radius: 6px; box-shadow: none;
  aspect-ratio: var(--card-ratio); background: var(--card-bg); overflow: hidden; transform: none;
  transition: background .3s var(--ease);
}
.home-index .card:hover, .home-index .card:focus-visible { background: #F1ECE4; box-shadow: none; }
.home-index .card:focus-visible { border-radius: 6px; outline-offset: 3px; }
/* "Coming soon": no image, the text fills the card */
.home-index .card--soon { grid-template-rows: 1fr; }
.home-index .card--soon .card-body { justify-content: flex-end; }
.home-index .card-media { aspect-ratio: auto; height: auto; min-height: 0; border-radius: 0; background: #6B2730; }
.home-index .card-media > img { object-position: 50% 35%; }
.home-index .card:hover .card-media > img { transform: scale(1.03); }
.home-index .card-media .ph { width: 100%; height: 100%; }
/* Product mockups in the image panel: phones, a browser window or a printed
   flyer on a colour block, cropped by the bottom of the panel */
.home-index .card-media--mock { position: relative; background: var(--mock-bg, #EEE); }
.mock { position: absolute; transition: transform .6s var(--ease); }
.mock img { display: block; }
.home-index .card:hover .mock { transform: translateY(-6px); }
.mock--phones { left: 0; right: 0; top: 13%; height: 150%; display: flex; justify-content: center; gap: 5%; }
.mock--phones img { height: 100%; width: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .18)); }
.mock--browser { left: 12%; right: 12%; top: 14%; bottom: -40%; padding-top: 14px; border-radius: 6px; overflow: hidden; background: #FFFFFF; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35); }
.mock--browser::before {
  content: ""; position: absolute; top: 5px; left: 8px; width: 26px; height: 4px;
  background: radial-gradient(circle 2px, #D5D5D5 98%, transparent) 0 0 / 9px 4px repeat-x;
}
.mock--browser img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mock--poster { left: 50%; top: 12%; height: 130%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; transform: translateX(-50%) rotate(-3deg); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4); }
.home-index .card:hover .mock--poster { transform: translateX(-50%) translateY(-6px) rotate(-3deg); }
.mock--poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.home-index .card-body {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0; min-height: 0;
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px);
}
.home-index .card-tag {
  align-self: flex-start; margin: 0 0 clamp(12px, 1.2vw, 16px); padding: 3px 10px; border: 1px solid rgba(0, 0, 0, .55); border-radius: 999px;
  background: none; font-size: 12px; line-height: 1.4; letter-spacing: 0; color: var(--ink); white-space: nowrap;
}
.home-index .card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 clamp(12px, 1.2vw, 16px); }
.home-index .card-tags .card-tag { margin: 0; }
.home-index .card-title {
  flex: none; font-family: var(--font-sans); font-size: clamp(1.125rem, 6.3cqw, 1.75rem); line-height: 1.14; font-weight: 400; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: pretty; transform: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.home-index .card:hover .card-title { transform: none; }
.home-index .card-desc {
  flex: none; margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: #6B6B6B;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.home-index .card-more { flex: none; margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 400; color: var(--ink); }
.home-index .card-more > span { display: inline-block; margin-left: .4em; transition: transform .3s var(--ease); }
.home-index .card:hover .card-more > span { transform: translateX(4px); }
/* Without the sideways scroll (reduced motion) the cards sit in a grid */
html:not(.js-deck) .home-index .cards { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
@media (max-width: 899.98px) {
  .home-index .card-body { padding: 20px 20px 22px; }
  .home-index .card-desc { font-size: 13.5px; }
  .home-index .card-more { font-size: 14px; }
}

.home-index .about-copy { font-weight: 400; color: var(--ink-2); }
.home-index .about-copy em { font-style: italic; }
.home-index .about-photo .portrait { background: #F2F2F2; }

/* Resume password dialog */
.resume-dialog {
  width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; background: #FFFFFF; color: var(--ink);
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .35);
}
.resume-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.resume-form { position: relative; display: grid; gap: 10px; padding: 28px 24px 24px; }
.resume-form h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; padding-right: 36px; }
.resume-note { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-bottom: 6px; }
.resume-label { font-size: 13px; color: var(--ink-3); }
.resume-input { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 10px; background: #FFFFFF; color: var(--ink); }
.resume-input:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: transparent; }
.resume-status { min-height: 1.4em; font-size: 14px; color: var(--ink-2); }
.resume-status.is-error { color: #B42318; }
.resume-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.resume-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--ink); color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.resume-btn:disabled { opacity: .55; cursor: progress; }
.resume-btn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.resume-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  font-size: 26px; line-height: 1; color: var(--ink-2); cursor: pointer;
}
.resume-close:hover { background: #F3F3F3; }
.home-index .resume-actions .txt-link { text-decoration-color: var(--cobalt); font-size: 15px; }

/* About: "a few things I love", a small label over one line of interests split by dots */
.home-index .about-copy .loves { display: block; margin-top: clamp(20px, 3vw, 32px); text-align: left; }
.home-index .loves-title { margin: 0 0 8px; text-align: left; font-size: 13px; letter-spacing: .04em; color: var(--ink-2); }
.home-index .loves-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 0; }
.home-index .loves-list li { margin: 0; }
.home-index .loves-list li:not(:last-child)::after { content: "\2022"; margin: 0 .75em; color: var(--cobalt); }

/* About: CliftonStrengths, then the page ends with the contact line */
.home-index .strengths { margin-top: clamp(56px, 8vw, 104px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.home-index .strengths-title { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: .04em; color: var(--ink); }
.home-index .strengths-note { margin: 6px 0 0; max-width: 46em; font-size: var(--fs-sm); color: var(--ink-2); }
.home-index .strengths-list { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; }
.home-index .strengths-list li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: var(--fs-sm); color: var(--ink); }
.home-index .strengths-list b { font-weight: 500; }
.home-index .strengths-list span { margin-top: -6px; max-width: 16em; font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-2); }
.home-index .strengths-list svg { width: 40px; height: 40px; fill: none; stroke: var(--cobalt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.home-index .strengths-list svg .on { fill: var(--cobalt); }
@media (max-width: 640px) { .home-index .strengths-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-index .site-end { padding-block: clamp(56px, 8vw, 96px) 40px; }
.home-index .site-end .container { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px 32px; }
.home-index .end-contact { margin: 0; font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); font-weight: 300; letter-spacing: -0.01em; color: var(--ink); }
.home-index .to-top { border: 1px solid rgba(0, 0, 0, .55); border-radius: 999px; background: none; padding: 10px 18px; font: inherit; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.home-index .to-top:hover, .home-index .to-top:focus-visible { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.home-index .end-copy { grid-column: 1 / -1; margin: clamp(16px, 3vw, 32px) 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
@media (max-width: 640px) { .home-index .site-end .container { grid-template-columns: 1fr; justify-items: start; } }