/* ==========================================================================
   Melissa Sugden portfolio – Sunshine and plum
   All text/background pairs meet WCAG 2.2 AA (4.5:1 or higher).
   ========================================================================== */
:root {
  --plum: #2E0A5C;        /* main ink and dark sections */
  --plum-muted: #3B2366;  /* secondary text on light */
  --purple: #7B4FD0;      /* shapes only */
  --lilac: #C9B6FF;       /* shapes and tiles */
  --lilac-soft: #E6DDFF;  /* secondary text on plum */
  --yellow: #FFD60A;      /* accent on plum, shapes */
  --cream: #FFF7DC;       /* page background */
  --white: #FFFFFF;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;

  --leaf-sm: 16px 0 16px 0; /* signature shape: rounded top-left and bottom-right */
  --leaf-lg: 28px 0 28px 0;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden always wins, even over .btn's display */
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.page {
  background: var(--cream); color: var(--plum);
  font-family: var(--font-body); font-size: 1.125rem; line-height: 1.55;
  min-height: 100vh; overflow-x: clip; /* clip, not hidden, so the sticky header works */
}
.wrap { max-width: 1320px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.section-pad { padding-top: 104px; padding-bottom: 104px; }
.num { font-family: var(--font-display); font-weight: 600; } /* figures in Bricolage (Atkinson's zero is slashed) */
.num-text { font-family: var(--font-display); font-weight: 400; } /* figures inside body text */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -100px; background: var(--plum); color: var(--white); padding: 12px 16px; z-index: 10; }
.skip-link:focus { top: 16px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; border-radius: var(--leaf-sm);
  font: inherit; font-weight: 700; font-size: 1.1rem; text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.btn-primary { background: var(--plum); color: var(--yellow); }
.btn-outline { border-color: var(--plum); background: transparent; color: var(--plum); }
.btn-outline-accent { min-height: 44px; padding: 0 18px; font-size: 1rem; border-color: var(--yellow); background: transparent; color: var(--yellow); }
.btn-icon { gap: 10px; }
#copy-email { min-width: 20.5rem; justify-content: center; } /* same width copied or not, so nothing shifts */
.btn-svg { flex: none; width: 20px; height: 20px; }
.btn-svg .icon-tick { display: none; }
.is-copied .btn-svg .icon-copy { display: none; }
.is-copied .btn-svg .icon-tick { display: inline; }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 1rem; }

/* Header */
/* Sticky header: always on screen so Pause motion is always reachable. It slims down once the
   page is scrolled (.is-scrolled, set in main.js / project.js). */
html { scroll-padding-top: var(--header-h, 90px); } /* jump links and focused items land below the header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--plum); color: var(--white); }
.site-header .header-inner { transition: padding .3s var(--ease); }
.site-header .logo { transition: font-size .3s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 2px 0 var(--lilac); } /* keeps it distinct over plum sections */
.site-header.is-scrolled .header-inner { padding-top: 8px; padding-bottom: 8px; }
.site-header.is-scrolled .nav { font-size: .95rem; }
.site-header.is-scrolled .nav a { padding: 6px 0; }
.site-header.is-scrolled .logo { font-size: 1.05rem; }
.site-header.is-scrolled #motion-toggle { font-size: .9rem; }
.header-inner { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-decoration: none; letter-spacing: -0.02em; }
.logo span { color: var(--yellow); }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 700; }
.nav a { padding: 10px 0; }

/* Hero */
.hero { padding-top: 48px; padding-bottom: 112px; display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.hero-text { flex: 999 1 560px; min-width: 0; }
.display { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6.6vw, 6.4rem); line-height: 1.1; letter-spacing: -0.035em; }
.display-line { display: block; }
.word-window { display: block; height: 1.25em; overflow: hidden; margin-top: .06em; }
.words { display: block; animation: words 10s cubic-bezier(.75, 0, .2, 1) infinite; }
.words > span { display: block; height: 1.25em; }
.hl { white-space: nowrap; display: inline-block; height: 1.15em; line-height: 1.15em; vertical-align: top; padding: 0 .14em;
  border-radius: .18em 0 .18em 0; background: var(--plum); color: var(--yellow); }
.lead { margin: 36px 0 0; max-width: 34rem; font-size: 1.3rem; color: var(--plum-muted); }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.shape-grid { flex: 1 1 340px; max-width: 500px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tile span { display: block; width: 78%; height: 78%; }
/* Wide screens: the shape grid grows to the same height as the text beside it
   (top of the headline to the bottom of the buttons) and stays square.
   Below 1280px there isn't room, so the smaller grid layout above is used. */
@media (min-width: 1280px) {
  .hero { display: grid; grid-template-columns: minmax(min-content, 1fr) auto; align-items: stretch; gap: 48px; }
  .display-line { white-space: nowrap; } /* keep "I shape design for" on one line */
  .hero { --display-size: min(6.6vw, 5.75rem); --x-top: calc(var(--display-size) * .35); }
  .hero .display { font-size: var(--display-size); } /* a touch smaller at its largest, so text and grid fit side by side */
  /* Grid starts level with the top of the lowercase letters (x-height) of the first headline line */
  .shape-grid { margin-top: var(--x-top); height: calc(100% - var(--x-top)); aspect-ratio: 1; width: auto; max-width: none;
    grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .shape-grid .tile { aspect-ratio: auto; }
}

/* Bands */
.band-white { background: var(--white); color: var(--plum); }
.band-plum { background: var(--plum); color: var(--white); }
.h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.h2.accent { color: var(--yellow); max-width: 22ch; }
.h3 { margin: 0 0 20px; font-size: 1.5rem; }
.eyebrow { margin: 0 0 16px; font-weight: 700; color: var(--lilac-soft); }
.intro { margin: 20px 0 48px; font-size: 1.2rem; color: var(--lilac-soft); }
.soft { margin: 0 0 20px; color: var(--lilac-soft); }

/* Portfolio */
.work-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter { min-height: 44px; padding: 0 18px; border-radius: var(--leaf-sm); border: 2px solid var(--plum); background: transparent;
  color: var(--plum); font: inherit; font-weight: 700; cursor: pointer; }
.filter span { font-weight: 400; }
.filter[aria-pressed="true"] { background: var(--plum); color: var(--white); }
.result-text { margin: 24px 0 32px; color: var(--plum-muted); }
.show-more-row { display: flex; justify-content: center; margin-top: 56px; }
.show-more-row:has(> [hidden]) { display: none; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 40px 28px; }

.card { position: relative; display: flex; flex-direction: column; transition: transform .4s var(--ease); }
.card:hover, .card:focus-within { transform: translateY(-6px); }
.card-media { position: relative; aspect-ratio: 3 / 2; border: 0; border-radius: var(--leaf-lg);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img, .card:focus-within .card-media img { transform: scale(1.04); }
.card-shape { display: block; width: 46%; aspect-ratio: 1; transition: transform .6s var(--ease), border-radius .6s var(--ease); }
.card:hover .card-shape, .card:focus-within .card-shape { transform: rotate(180deg) scale(1.08); border-radius: 50% !important; }

/* Cards with several images flick through them while the card is hovered or has keyboard focus.
   Otherwise (and with reduced motion) only the first image shows. Each extra frame shows for one
   "step" (--step); the first change comes after --wait so a quick pass of the mouse doesn't trigger it. */
.card-frame { opacity: 0; }
.card:hover .card-frame, .card:focus-within .card-frame {
  animation: var(--show) calc(var(--step) * var(--frames)) linear infinite both;
  animation-delay: calc(var(--wait) + var(--step) * (var(--i) - 1)); }
.frames-2 .card-frame { --show: show-2; }
.frames-3 .card-frame { --show: show-3; }
.frames-4 .card-frame { --show: show-4; }
.frames-5 .card-frame { --show: show-5; }
.card-media { --step: 1.5s; --wait: .5s; }
@keyframes show-2 { 0% { opacity: 0 } 12% { opacity: 1 } 50% { opacity: 1 } 62% { opacity: 0 } 100% { opacity: 0 } }
@keyframes show-3 { 0% { opacity: 0 } 8% { opacity: 1 } 33.3% { opacity: 1 } 41.3% { opacity: 0 } 100% { opacity: 0 } }
@keyframes show-4 { 0% { opacity: 0 } 6% { opacity: 1 } 25% { opacity: 1 } 31% { opacity: 0 } 100% { opacity: 0 } }
@keyframes show-5 { 0% { opacity: 0 } 5% { opacity: 1 } 20% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }

/* Arrow badge in the signature leaf shape */
.card-arrow { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: var(--yellow); color: var(--plum); border: 2px solid var(--plum); border-radius: var(--leaf-sm);
  transition: background-color .3s var(--ease), color .3s var(--ease); }
.card-arrow svg { width: 26px; height: 26px; transition: transform .4s var(--ease); }
.card:hover .card-arrow, .card:focus-within .card-arrow { background: var(--plum); color: var(--yellow); }
.card:hover .card-arrow svg, .card:focus-within .card-arrow svg { transform: translateX(4px); }

.card-body { padding: 16px 4px 0; }
.card h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; }
/* The title link stretches over the whole card, so the image, title and text all go to the case study */
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--leaf-lg); }
.card:hover .card-link { text-decoration: underline; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 3px solid var(--plum); outline-offset: 6px; }
.card p { margin: 6px 0 10px; color: var(--plum-muted); font-size: 1rem; }
.tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: var(--leaf-sm); border: 1.5px solid var(--plum); }

/* Skills */
.skill-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.skill { border: 2px solid var(--lilac-soft); border-radius: var(--leaf-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.skill.featured { border-color: var(--yellow); }
.skill-badge { position: relative; display: block; width: 60px; height: 60px; }
.skill-badge .icon { position: absolute; inset: 0; display: block; }
.skill-glyph { position: absolute; inset: 16px; width: 28px; height: 28px; color: var(--plum); } /* still icon on top of the moving shape */
.skill strong { font-size: 1.2rem; line-height: 1.25; }
.skill span:last-child { color: var(--lilac-soft); font-size: 1rem; }
.tools-block { margin-top: 64px; }
.tools-block .h3 { margin-bottom: 8px; }
.tools-block .tool-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 24px 48px; }
.pills { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li, .tool-groups dd span { padding: 6px 14px; border: 1.5px solid var(--lilac-soft); border-radius: var(--leaf-sm); font-size: .95rem; }
.tool-groups { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.tool-groups dt { font-weight: 700; margin-bottom: 8px; color: var(--yellow); }
.tool-groups dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Tool logos: yellow on plum (home page); in a small plum badge on light backgrounds (case studies) */
.tool { display: inline-flex; align-items: center; gap: 8px; }
.tool-icon { flex: none; width: 18px; height: 18px; color: var(--yellow); }
.skill-tags li { display: inline-flex; align-items: center; gap: 6px; }
.tool-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: -4px;
  background: var(--plum); border-radius: 8px 0 8px 0; }
.tool-badge .tool-icon { width: 14px; height: 14px; }

/* Leadership */
.lead-h { font-size: clamp(2rem, 3.6vw, 3.2rem); margin-bottom: 16px; }
.lead-intro { margin: 0 0 56px; font-size: 1.2rem; color: var(--plum-muted); }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px 56px; }
.principles h3 { margin: 0 0 10px; font-size: 1.4rem; }
.principles p { margin: 0; color: var(--plum-muted); }
/* Leadership tiles: like the hero grid, a coloured tile with a shape inside that slowly changes shape */
.principle-tile { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 24px; border-radius: 6px; overflow: hidden; }
.principle-tile span { display: block; width: 78%; height: 78%; }

/* Contact and footer */
.contact { padding-top: 128px; padding-bottom: 128px; display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
.contact-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.035em; }
.contact-where { margin: 0; font-size: 1.3rem; color: var(--plum-muted); }
.contact-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.site-footer { border-top: 3px solid var(--plum); }
.footer-inner { padding-top: 24px; padding-bottom: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; }
.supervised { display: inline-flex; align-items: center; gap: 10px; }
.dogs { display: inline-flex; }
.dog { width: 34px; height: 34px; }
.dog + .dog { margin-left: 8px; } /* a little space between Charlie and Chai */
/* The dogs open the game */
.dogs-btn { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 4px 6px; margin: -4px 0 -4px -6px;
  border: 0; border-radius: var(--leaf-sm); background: transparent; cursor: pointer; }
.dogs-btn:hover { background: var(--lilac-soft); }
.dogs-btn:hover .dog { transform: translateY(-3px); }
.dog { transition: transform .3s var(--ease); }
.dogs-btn:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }

/* Case study page (project.html) */
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.cs-intro { padding-top: 40px; padding-bottom: 40px; }
.cs-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 24px; }
.cs-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 18ch; }
.cs-shape { flex: none; width: 72px; height: 72px; background: var(--yellow); border-radius: var(--leaf-lg); }
.cs-lead { margin-top: 20px; max-width: 40rem; }
.cs-hero-shape { display: block; width: min(30%, 220px); aspect-ratio: 1; background: var(--plum); }
.cs-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px 72px; align-items: start; }
.cs-facts { margin: 0; padding: 28px; background: var(--lilac-soft); border-radius: var(--leaf-lg); display: flex; flex-direction: column; gap: 20px; }
.cs-facts dt { font-weight: 700; margin-bottom: 4px; }
.cs-facts dd { margin: 0; }
.role-main, .role-note { display: block; }
.role-note { margin-top: 4px; font-size: .95rem; color: var(--plum-muted); }
.cs-text { max-width: 44rem; }
.cs-h { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; }
.cs-text p, .cs-list { margin: 0 0 40px; }
.cs-text > :last-child { margin-bottom: 0; }
.cs-list { padding-left: 1.2em; }
.cs-list li + li { margin-top: 10px; }
.todo { color: var(--plum-muted); font-style: italic; }

/* Case study image viewer: main image with thumbnails underneath */
.cs-viewer { margin-bottom: 72px; }
.cs-stage { position: relative; }
.cs-stage-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; max-height: 78vh;
  padding: 0; border: 2px solid var(--plum); border-radius: var(--leaf-lg); overflow: hidden; background: var(--white); cursor: zoom-in; font: inherit; }
.cs-stage-btn { padding: clamp(16px, 4%, 48px); } /* white space round the image */
.cs-stage-btn img { width: 100%; height: 100%; object-fit: contain; } /* whole image, never cropped */
.cs-fade { animation: cs-fade .45s var(--ease); }
@keyframes cs-fade { from { opacity: .2 } to { opacity: 1 } }
.cs-stage-btn:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; }
.cs-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  background: var(--yellow); color: var(--plum); border: 2px solid var(--plum); border-radius: var(--leaf-sm); transition: background-color .3s var(--ease), color .3s var(--ease); }
.cs-zoom svg { width: 24px; height: 24px; }
.cs-stage-btn:hover .cs-zoom, .cs-stage-btn:focus-visible .cs-zoom { background: var(--plum); color: var(--yellow); }
.cs-stage-empty { aspect-ratio: 16 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  border: 2px solid var(--plum); border-radius: var(--leaf-lg); background: var(--lilac); }
.cs-thumbs { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21%, 120px), 1fr)); gap: 12px; }
.cs-thumb { display: block; width: 100%; padding: 0; border: 2px solid var(--plum); border-radius: var(--leaf-sm); overflow: hidden;
  background: var(--white); cursor: pointer; font: inherit; }
.cs-thumb img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* The image on show gets a thick ring (a shape change, not just colour); keyboard focus gets a separate outline */
.cs-thumb[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--plum); }
.cs-hint { margin: 0 0 8px; color: var(--plum-muted); font-size: .875rem; }
.cs-thumb:focus-visible { outline: 3px solid var(--purple); outline-offset: 8px; }

/* Case study story layout (trial on Deafblind Australia) */
.story-top { padding-bottom: 72px; }
.story-hero { margin: 0; }
.story-img-btn { display: block; width: 100%; padding: 0; border: 2px solid var(--plum); border-radius: var(--leaf-lg); overflow: hidden;
  background: var(--white); cursor: zoom-in; font: inherit; }
.story-img-btn { padding: clamp(12px, 4%, 40px); } /* white space round the image */
.story-img-btn img { width: 100%; height: auto; }
.story-hero .story-img-btn img { max-height: 80vh; object-fit: contain; }
.story-img-btn:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; }
.story-body { padding-top: 64px; padding-bottom: 104px; }
.story-facts { margin: 0 0 88px; padding: 28px 32px; background: var(--lilac-soft); border-radius: var(--leaf-lg);
  display: flex; flex-wrap: wrap; gap: 20px 56px; }
.story-facts dt { font-weight: 700; margin-bottom: 4px; }
.story-facts dd { margin: 0; }
.story-section + .story-section { margin-top: 96px; }
.story-text { max-width: 44rem; }
.story-text p, .story-text .cs-list { margin: 0; }
.story-text p + .cs-list { margin-top: 16px; }
.story-images { margin-top: 40px; display: grid; gap: 28px; align-items: start; }
.story-images-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.story-figure { margin: 0; }
@media (min-width: 800px) {
  .story-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 64px; align-items: start; }
  .story-side .story-images { margin-top: 0; }
}
.story-side .story-img-btn img { max-height: 80vh; object-fit: contain; }
.story-caption { margin-top: 12px; max-width: 40rem; color: var(--plum-muted); font-size: 1rem; }

/* Charlie & Chai's bone hunt (js/dog-game.js) */
.dog-game { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 3px solid var(--plum);
  border-radius: var(--leaf-lg); background: var(--cream); color: var(--plum); font-family: var(--font-body); font-size: 1.05rem; line-height: 1.5; overflow: auto; }
#dg-live { top: 0; left: 0; } /* keep the screen reader message from adding scroll */
.dog-game::backdrop { background: rgba(46, 10, 92, .75); }
.dg-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px 12px 24px; background: var(--plum); color: var(--white); }
.dg-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--yellow); }
.dg-title:focus { outline: none; }
.dg-screen { padding: 16px 20px 20px; }
.dg-big { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; }
.dg-help { margin: 20px 0 12px; color: var(--plum-muted); }
.dg-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.dg-player { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; border: 2px solid var(--plum); border-radius: var(--leaf-lg);
  background: var(--white); color: var(--plum); font: inherit; cursor: pointer; transition: background-color .3s var(--ease), transform .3s var(--ease); }
.dg-player:hover, .dg-player:focus-visible { background: var(--lilac-soft); transform: translateY(-3px); }
.dg-player:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }
.dg-face svg { width: 96px; height: 96px; }
.dg-name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.dg-breed { font-size: .95rem; color: var(--plum-muted); }
.dg-btn { min-height: 44px; padding: 0 18px; border: 2px solid var(--plum); border-radius: var(--leaf-sm); background: transparent; color: var(--plum); font: inherit; font-weight: 700; cursor: pointer; }
.dg-bar .dg-btn { border-color: var(--yellow); color: var(--yellow); }
.dg-btn:hover { background: var(--plum); color: var(--yellow); }
.dg-bar .dg-btn:hover { background: var(--yellow); color: var(--plum); }
.dg-primary { background: var(--plum); color: var(--yellow); }
.dg-btn:focus-visible, .dg-arrow:focus-visible, .dg-link:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.dg-link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--plum); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.dg-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-bottom: 8px; font-weight: 700; }
.dg-status strong { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.dg-stage { position: relative; display: flex; justify-content: center; }
.dg-stage canvas { display: block; max-width: 100%; border-radius: 12px 0 12px 0; touch-action: none; }
.dg-stage canvas:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.dg-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 20px; border-radius: var(--leaf-sm);
  background: var(--yellow); color: var(--plum); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; pointer-events: none; }
.dg-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.dg-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 46px); gap: 6px; }
.dg-arrow { border: 2px solid var(--plum); border-radius: var(--leaf-sm); background: var(--white); color: var(--plum); font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.dg-arrow:active, .dg-arrow:hover { background: var(--yellow); }
.dg-arrow[data-dir="up"] { grid-column: 2; grid-row: 1; }
.dg-arrow[data-dir="left"] { grid-column: 1; grid-row: 2; }
.dg-arrow[data-dir="down"] { grid-column: 2; grid-row: 2; }
.dg-arrow[data-dir="right"] { grid-column: 3; grid-row: 2; }
.dg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
/* Puppy pics slider: the photo fits the screen height, so no scrolling */
.dg-slide { margin: 0; display: flex; justify-content: center; }
.dg-slide img { display: block; width: auto; height: auto; max-width: 100%; /* height is fitted to the screen by dog-game.js */
  border: 2px solid var(--plum); border-radius: var(--leaf-lg); object-fit: contain; }
.dg-slide-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.dg-slide-nav .dg-btn { padding: 0 12px; white-space: nowrap; }
.dg-count { margin: 0; font-weight: 700; white-space: nowrap; }
@media (max-width: 420px) {
  /* Narrow phones: Previous / Next show just the arrows (the words stay for screen readers) */
  .dg-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dg-slide-nav .dg-btn { min-width: 52px; font-size: 1.2rem; }
}

/* Lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--plum); color: var(--white); font-family: var(--font-body); font-size: 1.125rem; line-height: 1.5; }
.lightbox::backdrop { background: var(--plum); }
.lb-inner { height: 100%; display: flex; flex-direction: column; gap: 16px; padding: 20px clamp(16px, 4vw, 48px); }
.lb-bar, .lb-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.lb-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.lb-figure { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lb-figure img { flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  background: var(--white); border-radius: var(--leaf-lg); padding: clamp(12px, 3vw, 32px); box-sizing: border-box; }
.lb-caption { max-width: 60rem; text-align: center; color: var(--lilac-soft); }
.lb-btn { min-height: 44px; padding: 0 20px; border: 2px solid var(--yellow); border-radius: var(--leaf-sm); background: transparent;
  color: var(--yellow); font: inherit; font-weight: 700; cursor: pointer; }
.lb-btn:hover { background: var(--yellow); color: var(--plum); }
.lb-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.cs-next { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.cs-next-link { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 20px 24px; border: 2px solid var(--plum);
  border-radius: var(--leaf-lg); text-decoration: none; transition: background-color .3s var(--ease), color .3s var(--ease); }
.cs-next-link.next { text-align: right; }
.cs-next-link:hover { background: var(--plum); color: var(--yellow); }
.cs-next-label { font-weight: 700; }
.cs-next-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
@media (max-width: 800px) {
  .cs-story { grid-template-columns: 1fr; }
  .cs-shape { width: 48px; height: 48px; }
  .cs-next-link.next { text-align: left; }
}

/* Motion */
@keyframes words { 0%,20% { transform: translateY(0) } 25%,45% { transform: translateY(-1.25em) } 50%,70% { transform: translateY(-2.5em) } 75%,95% { transform: translateY(-3.75em) } 100% { transform: translateY(-5em) } }
@keyframes turn { 0%,18% { transform: rotate(0) } 25%,43% { transform: rotate(90deg) } 50%,68% { transform: rotate(180deg) } 75%,93% { transform: rotate(270deg) } 100% { transform: rotate(360deg) } }
@keyframes morph { 0%,22%,100% { border-radius: 0 } 33%,55% { border-radius: 50% } 66%,88% { border-radius: 100% 0 100% 0 } }
.turn { animation: turn 8s cubic-bezier(.7, 0, .2, 1) infinite; }
.morph { animation: morph 7s cubic-bezier(.7, 0, .2, 1) infinite; }
.paused * { animation-play-state: paused !important; }
.paused *, .paused *::before, .paused *::after { transition: none !important; } /* Pause motion also stops hover effects */
@media (prefers-reduced-motion: reduce) {
  .motion *, .motion *::before, .motion *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 600px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .section-pad { padding-top: 72px; padding-bottom: 72px; }
  .hl { white-space: normal; height: auto; }
  .word-window, .words > span { height: auto; }
  .words { animation: none; }
  .words > span:not(:first-child) { display: none; } /* phones show one phrase, no clipping */
}

/* Sticky header on phones (kept last so it overrides the header rules above) */
@media (max-width: 700px) {
  /* Phones: two compact rows. Name and Pause motion on top, section links underneath. */
  .header-inner { gap: 4px 12px; padding-top: 8px; padding-bottom: 4px; }
  .header-actions { display: contents; }
  .logo { font-size: 1.2rem; white-space: nowrap; }
  #motion-toggle { order: 2; flex: none; padding: 0 12px; }
  .nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 20px; scrollbar-width: none; }
  .nav a { white-space: nowrap; padding: 10px 0; }
  /* Scrolled on phones: one slim row with the name and Pause motion. The section links
     don't fit beside them, so they show again at the top of the page. */
  .site-header.is-scrolled .header-inner { flex-wrap: nowrap; padding-top: 6px; padding-bottom: 6px; }
  .site-header.is-scrolled .nav { display: none; }
}

/* Case study links, e.g. the full flipbook */
.cs-links { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* External link icon (js/external-links.js) */
.ext-icon { flex: none; width: 1em; height: 1em; margin-left: 8px; vertical-align: -0.12em; }