/* ===== inplay: interior pages (About, Workshops, Consulting, Writing) =====
   Loads on top of styles.css and reuses its tokens. The home page is a
   pixel-placed 1440 Figma canvas; these pages carry the same vocabulary -
   Jua chips, cream ground, the four brand colours, the cutting-mat footer -
   in a flow layout that holds together at every width. */

:root {
  --green:  #1ea858;
  --yellow: #cabb12;
  --blue:   #3a89b8;
  --red:    #d45d4a;
}


/* ===== Type system: one scale for the whole site, 3D experience included.
   Two families only: Jua for display, Jost (Futura where present) for text.
   Nothing anywhere may fall back to a serif, SVG <text> in particular
   defaults to serif when no family is set, which is where it crept in. */
:root {
  --font-display: 'Jua', sans-serif;
  --font-text: 'Futura', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step-eyebrow: clamp(12px, 1.05vw, 14px);
  --step-body-s:  clamp(14px, 1.15vw, 16px);
  --step-body:    clamp(15px, 1.3vw, 18px);
  --step-lede:    clamp(16px, 1.6vw, 21px);
  --step-h3:      clamp(19px, 2vw, 26px);
  --step-h2:      clamp(24px, 3vw, 38px);
  --step-h1:      clamp(32px, 5vw, 60px);

  --lh-tight: 1.14;
  --lh-body: 1.6;
  --track-eyebrow: 0.18em;
}
svg text, svg tspan { font-family: var(--font-text); }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--futura);
}
img { max-width: 100%; }
a { color: inherit; }

/* Sections space themselves from the top, so the last one needs its own tail -
   otherwise the page runs straight into the footer's colour band. */
main { display: block; padding-bottom: clamp(64px, 9vw, 132px); }

/* ------------------------------------------------------------- page hero */
.page-hero { padding: clamp(24px, 5vw, 60px) 0 clamp(40px, 6vw, 76px); }
.eyebrow {
  font-family: var(--jua); font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}

/* The chip: the home hero's signature, reused as the page title. */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.18em 0.36em; border-radius: clamp(16px, 2.4vw, 34px);
  font-family: var(--jua); line-height: normal; color: var(--cream);
  white-space: nowrap;
}
.chip.green  { background: var(--green); }
.chip.yellow { background: var(--yellow); }
.chip.blue   { background: var(--blue); }
.chip.red    { background: var(--red); }

.hero-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.6vw, 24px);
  margin: clamp(18px, 2.6vw, 34px) 0 0; font-weight: 400;
}
.hero-title .chip { font-size: clamp(46px, 8.6vw, 122px); }
.hero-lede-lg {
  max-width: 640px; margin-top: clamp(22px, 3vw, 38px);
  font-family: var(--futura); font-weight: 500;
  font-size: clamp(17px, 1.7vw, 24px); line-height: 1.55; color: #1e1e1e;
}

/* --------------------------------------------------------------- section */
.section { padding: clamp(46px, 7vw, 104px) 0 0; }
/* A section stacks blocks: lead, deck, steps, banner: and they were butting
   into each other. Everything after the first gets its own breathing room;
   .section-head is always first so its own margin-bottom still governs. */
.section > * + * { margin-top: clamp(26px, 3.4vw, 46px); }
.section-head { text-align: center; margin-bottom: clamp(30px, 4.4vw, 64px); }
.section-title {
  font-family: var(--jua); font-weight: 400; color: var(--ink);
  font-size: clamp(30px, 4vw, 56px); line-height: 1.12;
}
.section-head .eyebrow + .section-title { margin-top: clamp(16px, 2vw, 28px); }
.lead {
  font-family: var(--futura); font-weight: 500; line-height: 1.6; color: #1e1e1e;
  font-size: clamp(16px, 1.5vw, 21px);
}

/* the home page's "Play is not the opposite of work" pull-quote */
.pullquote {
  font-family: var(--jua); font-weight: 400; text-align: center; color: var(--ink);
  font-size: clamp(28px, 4vw, 56px); line-height: 1.2;
  padding: clamp(50px, 8vw, 112px) 0 clamp(10px, 2vw, 26px);
}

/* --------------------------------- coloured cards (home's "how we work") */
.deck { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); align-items: start; }
.deck.three { grid-template-columns: repeat(3, 1fr); }
.deck.two   { grid-template-columns: repeat(2, 1fr); }
.deck-col { display: flex; flex-direction: column; gap: 9px; align-items: center; }
.deck-tab { height: 20px; width: 94%; border-radius: 50px; }
.deck-card {
  width: 100%; border-radius: 16px; color: #fff;
  padding: clamp(20px, 2vw, 29px) clamp(20px, 1.8vw, 25px) clamp(26px, 2.4vw, 33px);
  display: flex; flex-direction: column; gap: clamp(28px, 5vw, 90px);
}
.deck-card h3 {
  font-family: var(--jua); font-weight: 400; line-height: normal;
  font-size: clamp(30px, 3.6vw, 52px);
}
.deck-card p { font-family: var(--futura); font-weight: 500; font-size: clamp(15px, 1.5vw, 20px); line-height: 1.45; opacity: .85; }
.deck-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.deck-card li {
  font-family: var(--futura); font-weight: 500; font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.4; padding-left: 20px; position: relative; opacity: .9;
}
.deck-card li::before { content: '·'; position: absolute; left: 6px; font-size: 1.4em; line-height: 1; }

@media (max-width: 980px) { .deck, .deck.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .deck, .deck.three, .deck.two { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- photo banner card */
.banner {
  position: relative; width: 100%; border-radius: 38px; overflow: hidden;
  aspect-ratio: 1259 / 572; user-select: none;
}
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 28, 18, .62) 0%, rgba(20, 28, 18, .12) 40%, rgba(20, 28, 18, 0) 62%);
}
.banner .cap { position: absolute; left: clamp(22px, 5vw, 76px); right: clamp(22px, 5vw, 76px); bottom: clamp(22px, 4.4vw, 56px); z-index: 1; }
.banner h3 { font-family: var(--jua); font-weight: 400; font-size: clamp(22px, 2.8vw, 37px); color: #fff; margin-bottom: 10px; }
.banner p  { font-family: var(--futura); font-weight: 500; font-size: clamp(14px, 1.7vw, 24px); line-height: 1.4; color: #fff; opacity: .9; max-width: 469px; }
/* the 1259:572 crop is too shallow for a caption once the page is phone-width */
@media (max-width: 760px) { .banner { aspect-ratio: 4 / 3; } }

/* A video sits in the banner frame exactly as a photo does. It keeps its own
   controls, so the caption moves out from under the gradient and sits below
   the card instead of floating over the scrubber. The clip is 16:9 and carries
   its own title cards, so the frame matches the footage rather than the
   1259:572 photo crop - nothing gets cut off. */
.banner.video-card { background: #141c12; aspect-ratio: 16 / 9; }
.banner.video-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner.video-card::after { content: none; }
.banner.video-card:hover { transform: none; box-shadow: none; }
/* Two clips side by side reads as the two countries named in the Design
   process deck above; they stack before the controls get cramped. */
.video-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 34px); }
.video-pair figure { margin: 0; }
.video-pair .video-cap { max-width: none; margin-inline: 0; text-align: left; }
@media (max-width: 860px) { .video-pair { grid-template-columns: 1fr; } }
.video-cap { margin-top: clamp(14px, 1.8vw, 22px); max-width: 720px; }
.video-cap h3 { font-family: var(--jua); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); margin-bottom: 8px; }
.video-cap p  { font-family: var(--futura); font-weight: 500; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; opacity: .8; }

/* ------------------------------------------------------- photo grid/wall */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.gallery.three { grid-template-columns: repeat(3, 1fr); }
.gallery figure {
  position: relative; border-radius: 24px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--blue); margin: 0;
}
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(30px, 4vw, 44px) clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 20px);
  font-family: var(--futura); font-weight: 500; font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.35; color: #fff;
  background: linear-gradient(to top, rgba(20, 28, 18, .72) 0%, rgba(20, 28, 18, 0) 100%);
}
@media (max-width: 980px) { .gallery.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gallery, .gallery.three { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ prose list */
.entries { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); }
.entry {
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(18px, 2vw, 26px); border-radius: 24px; text-decoration: none;
  background: rgba(38, 38, 38, 0.035);
  transition: background .22s ease, transform .22s ease;
}
.entry:hover { background: rgba(38, 38, 38, 0.07); transform: translateY(-2px); }
.entry .shot { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--blue); }
.entry .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entry .kicker {
  font-family: var(--jua); font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); opacity: .45; margin-bottom: 10px;
}
.entry h3 { font-family: var(--jua); font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; margin-bottom: 12px; }
.entry p  { font-family: var(--futura); font-weight: 500; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; opacity: .8; }
.entry .more { display: inline-block; margin-top: 16px; font-family: var(--jua); font-size: 18px; color: var(--green); }
@media (max-width: 760px) { .entry { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- step numbers */
.steps { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 34px); align-items: baseline;
  padding: clamp(20px, 2.4vw, 32px) 0; border-top: 1.5px solid rgba(38, 38, 38, 0.14);
}
.step:last-child { border-bottom: 1.5px solid rgba(38, 38, 38, 0.14); }
.step .n { font-family: var(--jua); font-size: clamp(28px, 3.4vw, 46px); line-height: 1; }
.step h3 { font-family: var(--jua); font-weight: 400; font-size: clamp(21px, 2.2vw, 30px); margin-bottom: 10px; }
.step p  { font-family: var(--futura); font-weight: 500; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6; opacity: .8; max-width: 720px; }

/* ------------------------------------------------------------- award block */
.award {
  display: grid; grid-template-columns: clamp(180px, 20vw, 260px) 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: start;
  padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: rgba(38, 38, 38, 0.035);
}
.award > img { width: 100%; height: auto; }
.award blockquote {
  font-family: var(--jua); font-weight: 400; font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3; color: var(--ink); margin-bottom: 12px;
}
.award p { font-family: var(--futura); font-weight: 500; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6; opacity: .82; }
.award .attrib {
  font-family: var(--jua); font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  opacity: .45; margin: 10px 0 26px;
}
.award .attrib:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .award { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- people */
.people { display: flex; flex-wrap: wrap; gap: clamp(28px, 7vw, 117px); justify-content: center; }
.person { display: flex; gap: 24px; align-items: center; }
.person img { height: 248px; width: auto; flex: none; }
.person .n { font-family: var(--futura); font-weight: 500; font-size: clamp(19px, 1.7vw, 24px); color: #1e1e1e; }
.person .r { font-family: var(--futura); font-weight: 500; font-size: 16px; color: #1e1e1e; opacity: .3; margin-top: 8px; }

/* --------------------------------------------------------------- motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.33, 1, .68, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Micro-interactions, interior pages ============================== */
.deck-col { transition: transform .3s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.deck-col:hover { transform: translateY(-5px); }
.deck-tab { transition: transform .3s var(--ease-out, cubic-bezier(.22,1,.36,1)); transform-origin: center; }
.deck-col:hover .deck-tab { transform: scaleX(1.05); }

.banner { transition: transform .4s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.banner img { transition: transform .6s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.banner:hover img { transform: scale(1.035); }

.entry .shot img { transition: transform .5s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.entry:hover .shot img { transform: scale(1.05); }
.entry .more { transition: transform .24s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.entry:hover .more { transform: translateX(4px); }

/* numbered steps: the rule and the number wake up together */
.step { transition: border-color .3s ease; }
.step .n { transition: transform .3s var(--ease-out, cubic-bezier(.22,1,.36,1)), color .3s ease; }
.step:hover .n { transform: translateY(-2px) scale(1.06); }

.person img { transition: transform .35s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.person:hover img { transform: translateY(-4px) rotate(-1.5deg); }

/* reveals arrive in sequence rather than all at once */
.reveal { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .deck-col, .deck-tab, .banner, .banner img, .entry .shot img, .entry .more,
  .step .n, .person img { transition: none !important; }
  .reveal { transition-delay: 0ms !important; }
}

/* ===== satisfying, interior pages ====================================== */
.deck-col {
  transition: transform .42s var(--spring, cubic-bezier(.34,1.56,.64,1));
  will-change: transform;
}
.deck-col:hover { transform: translateY(-9px) scale(1.015); }
.deck-card { transition: box-shadow .42s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.deck-col:hover .deck-card { box-shadow: 0 18px 38px rgba(38,38,38,.2); }
.deck-tab { transition: transform .42s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.deck-col:hover .deck-tab { transform: scaleX(1.08) scaleY(1.25); }

.banner { transition: transform .5s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .5s ease; }
.banner:hover { transform: translateY(-5px); box-shadow: 0 26px 54px rgba(20,28,18,.26); }
.banner:hover img { transform: scale(1.05); }

.entry { transition: background .24s ease, transform .4s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .4s ease; }
.entry:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(38,38,38,.12); }
.entry .more { transition: transform .34s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.entry:hover .more { transform: translateX(7px); }

.step .n { transition: transform .42s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.step:hover .n { transform: translateY(-4px) scale(1.12); }

.gallery figure { transition: transform .5s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .5s ease; }
.gallery img { transition: transform .6s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.gallery figure:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(20,28,18,.24); }
.gallery figure:hover img { transform: scale(1.05); }

.person img { transition: transform .48s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.person:hover img { transform: translateY(-7px) rotate(-2.5deg) scale(1.03); }

/* the hero chips lift like keys on a keyboard */
.chip { transition: transform .42s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .42s ease; }
.hero-title .chip:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 16px 30px rgba(38,38,38,.22); }

@media (prefers-reduced-motion: reduce) {
  .deck-col, .deck-card, .deck-tab, .banner, .entry, .entry .more,
  .gallery figure, .gallery img,
  .step .n, .person img, .chip { transition: none !important; transform: none !important; }
}

/* ===== Alignment: give the long-form blocks a real measure ==============
   `.section-head` is centred, but `.steps` and `.entries` were running the
   full 1260 shell with their copy capped at 720 - which read as a centred
   heading sitting over a left-hugging column with dead space to its right.
   Both now sit in a centred column of their own, so the page has one axis. */
.steps   { max-width: 940px;  margin-inline: auto; }
.step p  { max-width: none; }
.entries { max-width: 1080px; margin-inline: auto; }
.award   { max-width: 1000px; margin-inline: auto; }

/* ------------------------------------------------------- journal categories */
.cats {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
}
.cat {
  font-family: var(--jua); font-weight: 400; color: var(--cream);
  font-size: clamp(15px, 1.4vw, 20px); line-height: 1;
  padding: 0.62em 1.15em; border-radius: 360px;
  transition: transform .42s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .42s ease;
}
.cat:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 14px 26px rgba(38,38,38,.2); }
.cat.green  { background: var(--green); }
.cat.yellow { background: var(--yellow); }
.cat.blue   { background: var(--blue); }
.cat.red    { background: var(--red); }

/* ------------------------------------------------- "read the full paper" cta */
.paper-cta { text-align: center; }
.paper-cta a {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--green); color: var(--cream); text-decoration: none;
  font-family: var(--jua); font-size: clamp(17px, 1.5vw, 21px);
  padding: 12px 30px; border-radius: 360px;
  box-shadow: 0 8px 20px rgba(38,38,38,.14);
  transition: transform .3s var(--spring, cubic-bezier(.34,1.56,.64,1)), background .2s ease;
}
.paper-cta a:hover { transform: translateY(-3px) scale(1.02); background: #199a4f; }

@media (prefers-reduced-motion: reduce) {
  .cat, .paper-cta a { transition: none !important; transform: none !important; }
}

/* ============================== "View the 3D experience" ==================
   A sticker, not a button: the pill sits on an offset second impression in a
   second brand ink, the way a mis-registered riso print does, and pressing it
   slides the top impression down onto the one behind. The mark turns on its Y
   axis, which is the whole promise of the link in one gesture. */
.gm-3d-cta {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(26px, 3.2vw, 40px);
  padding: 13px 28px 13px 15px; border-radius: 360px;
  background: var(--green); color: var(--cream);
  font-family: var(--jua); font-size: clamp(17px, 1.6vw, 23px); line-height: 1;
  text-decoration: none; perspective: 400px;
  box-shadow: 7px 7px 0 var(--yellow), 0 16px 32px rgba(38, 38, 38, .16);
  transition: transform .42s var(--spring, cubic-bezier(.34,1.56,.64,1)),
              box-shadow .42s var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.gm-3d-cta:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--yellow), 0 9px 18px rgba(38, 38, 38, .2);
}
.gm-3d-cta:active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 var(--yellow), 0 4px 9px rgba(38, 38, 38, .22);
  transition-duration: .09s;
}
.gm-3d-cta .ico {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: rgba(252, 248, 235, .18); display: grid; place-items: center;
}
.gm-3d-cta .ico svg {
  display: block;
  animation: gm3dTurn 6s cubic-bezier(.45,0,.55,1) infinite;
}
.gm-3d-cta .arw {
  width: 9px; height: 9px; flex: none; margin-left: 2px;
  border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .34s var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.gm-3d-cta:hover .arw { transform: rotate(45deg) translate(3px, -3px); }

@keyframes gm3dTurn {
  0%, 62%, 100% { transform: rotateY(0deg); }
  81%           { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gm-3d-cta, .gm-3d-cta .arw { transition: none !important; transform: none !important; }
  .gm-3d-cta .ico svg { animation: none !important; }
}

/* ===== Journal: category filters ======================================= */
/* The chips always looked like buttons, so now they behave like them. */
.cat { cursor: pointer; user-select: none; opacity: .55; }
.cat.is-on { opacity: 1; }
.cat.all { background: var(--ink, #262626); }
.cat.is-empty { opacity: .28; cursor: not-allowed; }
.cat.is-empty:hover { transform: none; box-shadow: none; }
.cat:focus-visible { outline: 3px solid var(--ink, #262626); outline-offset: 3px; }
.entry[hidden] { display: none !important; }
.entries-empty {
  font-family: var(--futura); font-weight: 500; text-align: center;
  opacity: .6; padding: clamp(24px, 4vw, 48px) 0;
}

/* ===== Journal: the paper deep-dive, folded away ======================== */
.paper-deep { border-radius: 24px; background: rgba(38, 38, 38, 0.035); overflow: hidden; }
.paper-deep > summary {
  display: flex; align-items: center; gap: 20px; cursor: pointer;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 32px);
  list-style: none;
}
.paper-deep > summary::-webkit-details-marker { display: none; }
.paper-deep .lbl { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.paper-deep .ttl {
  font-family: var(--jua); font-weight: 400; line-height: 1.2;
  font-size: clamp(20px, 2.2vw, 30px);
}
.paper-deep .chev {
  flex: none; width: 13px; height: 13px; margin-right: 6px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.paper-deep[open] .chev { transform: rotate(-135deg) translate(-3px, -3px); }
.paper-deep > summary:hover { background: rgba(38, 38, 38, 0.05); }
.paper-deep .paper-body { padding: 0 clamp(18px, 2.4vw, 32px) clamp(24px, 3vw, 40px); }
@media (prefers-reduced-motion: reduce) { .paper-deep .chev { transition: none; } }