@charset "UTF-8";
/* The Tailorstack web system. Strict by design, after Ramp: one heading face at one weight, one type scale
   (Agrandir 64 / 48 / 32 / 20, Inter 20 / 16 / 15 / 13), one radius scale, hairlines instead of shadows, one section
   rhythm, short sine-eased motion. Every colour, size and radius is a token below; explore/kit.html shows them all. */

@font-face { font-family: "Agrandir"; src: url("/site/assets/fonts/PPAgrandir-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Brand (Tailorstack brand guidelines, May 2026) */
  --navy: #040633;
  --green: #024609;   /* in the palette; not used on the site yet */
  --lime: #a2e777;
  --cyan: #a5dfe2;
  --purple: #270E40;   /* the guide's own panel colour, used beside navy in social posts: white text, cyan marks */

  /* Neutrals */
  --page: #FBF9F5;
  --ink: #040633;
  --tone: rgba(4, 6, 51, .64);     /* second half of every two-tone heading, and secondary text. .64 keeps 4.5:1+ on the page and on quiet panels */
  --hair: rgba(4, 6, 51, .10);     /* every border */
  --soft: #F4F2EE;                 /* flat surface inside frames */
  --panel: #F1EDE5;                /* the footer */
  --ground-shadow: #F0EBE1;        /* the page's linen: --page where the light falls, this in the weave */
  --pen: #1E2F86;                  /* handwriting, only ever inside photographed paper */

  /* Buttons and fields: the app's own, from Figma (product.css --ts-navy, --ts-cyan, --ts-stroke, --ts-input-shadow) */
  --button: #050731;
  --button-ink: #ABDCDF;
  --button-hover: #151A5C;
  --button-soft: rgba(4, 6, 51, .07);
  --button-soft-hover: rgba(4, 6, 51, .11);
  --button-lime-hover: #B4EE8F;
  --field-line: #E7E7E7;
  --field-shadow: 0 2px 2px -1px rgba(0, 0, 0, .04);

  /* Status */
  --error: #B3261E;                /* field errors and the failed-send note; 5.8:1 on its soft ground */
  --error-soft: #FCEDEA;

  /* Discs behind W icons: a soft bright, and an ink of its own hue. Allowed outside the brand colours. Classes .disc-lime … below. */
  --disc-lime: #A2E777;   --disc-lime-ink: #040633;
  --disc-peach: #FFC9A3;  --disc-peach-ink: #3D0F2B;
  --disc-cyan: #A5DFE2;   --disc-cyan-ink: #040633;
  --disc-sun: #FFE27A;    --disc-sun-ink: #332F0B;
  --disc-navy: #040633;   --disc-navy-ink: #A2E777;
  --disc-pink: #FFD0E1;   --disc-pink-ink: #4A0D24;
  --disc-lilac: #D7CDFF;  --disc-lilac-ink: #1E1654;

  /* Cloth: the paper and shadow colours the linen is mapped between (cloth.js, data-tint="orders").
     One tint per feature, and the neutral for every other page. */
  --tint-measurements: #ECF0E6;  --tint-measurements-shadow: #D3DCC8;
  --tint-orders: #E8EEF2;        --tint-orders-shadow: #C9D7E1;
  --tint-invoices: #F2EDE3;      --tint-invoices-shadow: #DDD2BE;
  --tint-lookbook: #F3E9E6;      --tint-lookbook-shadow: #E0CCC6;
  --tint-neutral: #F1EDE6;       --tint-neutral-shadow: #DAD2C5;
  --tint-hero: #EAF2F2;          --tint-hero-shadow: #CCDDDE;   /* the home page's cotton, behind the first screen */

  /* Type: two families, one heading weight. Agrandir 64 / 48 / 32 / 20 and Inter 20 / 16 / 15 / 13; nothing else. */
  --head: "Agrandir", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;   /* only ever inside photographed paper */
  --type-h1: 400 64px/64px var(--head);        /* page titles */
  --type-h2: 400 48px/52px var(--head);        /* section headings, the footer */
  --type-h3: 400 32px/38px var(--head);        /* panel headings, home steps */
  --type-h4: 400 20px/26px var(--head);        /* card titles, the phone menu */
  --type-lede: 400 20px/30px var(--body);      /* under a page title */
  --type-body: 400 16px/24px var(--body);
  --type-read: 400 16px/26px var(--body);      /* long reading: privacy and terms */
  --type-control: 400 15px/20px var(--body);   /* nav and switches; buttons at 500 */
  --type-small: 400 13px/18px var(--body);
  --type-label: 600 13px/18px var(--body);     /* capitals, tracked +12% */
  --type-unfold: 400 32px/52px var(--head);    /* text with buttons in its lines (sections.css .s-unfold): the H3 size, with room between lines */

  /* Radius: one scale for everything (strokes and icon lines keep their own) */
  --r-1: 4px;        /* small marks: tags, code */
  --r-2: 8px;        /* controls, and panels inside a card */
  --r-3: 12px;       /* surfaces: frames, cards, app windows */
  --r-4: 16px;       /* items inside a 24px panel, screens inside a device */
  --r-5: 24px;       /* large floating panels: the phone menu */
  --r-pill: 999px;   /* buttons, the header, switches */
  --r: var(--r-3);   /* every surface */
  --r-c: var(--r-2); /* every control */

  /* Rhythm */
  --section: 104px;

  /* Motion */
  --ease: cubic-bezier(.45, .05, .55, .95);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --dur: .28s;
}
@media (max-width: 720px) {
  :root { --section: 72px; --type-h1: 400 44px/46px var(--head); --type-h2: 400 34px/38px var(--head); --type-h3: 400 26px/32px var(--head); --type-unfold: 400 26px/44px var(--head); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
::selection { background: rgba(162, 231, 119, .6); color: var(--navy); }
body { margin: 0; background-color: var(--page); color: var(--ink); font: var(--type-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-c); background: var(--navy); color: #fff; text-decoration: none; transition: top var(--dur) var(--ease); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type: the scale in :root, as classes. Phones step the headings down in the tokens. ---------- */
.h1 { margin: 0; font: var(--type-h1); letter-spacing: -0.025em; }
.h2 { margin: 0; font: var(--type-h2); letter-spacing: -0.022em; }
.h3 { margin: 0; font: var(--type-h3); letter-spacing: -0.018em; }
.h4 { margin: 0; font: var(--type-h4); letter-spacing: -0.01em; }
.p { margin: 0; font: var(--type-body); }
.small { font: var(--type-small); }
.tone { color: var(--tone); }
.h1, .h2, .h3 { text-wrap: balance; }
.p, .faq p { text-wrap: pretty; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { margin-top: var(--section); }

/* ---------- Logo (SVG as a mask, so it takes any brand colour) ---------- */
.logo { display: inline-block; width: 124px; aspect-ratio: 1644 / 241; background: currentColor;
  -webkit-mask: url("/site/assets/logo/logo-condensed.svg") center / contain no-repeat; mask: url("/site/assets/logo/logo-condensed.svg") center / contain no-repeat; }
.logo-icon { display: inline-block; width: 28px; aspect-ratio: 382 / 218; background: currentColor;
  -webkit-mask: url("/site/assets/logo/logo-icon.svg") center / contain no-repeat; mask: url("/site/assets/logo/logo-icon.svg") center / contain no-repeat; }
.logo-button { display: inline-block; width: 26px; aspect-ratio: 569 / 383; background: currentColor;
  -webkit-mask: url("/site/assets/logo/logo-button.svg") center / contain no-repeat; mask: url("/site/assets/logo/logo-button.svg") center / contain no-repeat; }
.logo-stacked { display: inline-block; width: 120px; aspect-ratio: 1315 / 1194; background: currentColor;
  -webkit-mask: url("/site/assets/logo/logo-stacked.svg") center / contain no-repeat; mask: url("/site/assets/logo/logo-stacked.svg") center / contain no-repeat; }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--r-pill);
  font: 500 15px/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .16s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--button); color: var(--button-ink); }   /* the app's primary button */
.btn-primary:hover { background: var(--button-hover); }
.btn.sm { height: 38px; padding: 0 16px; }
.btn-lime { background: var(--lime); color: var(--navy); }
.btn-lime:hover { background: var(--button-lime-hover); }
.btn-quiet { background: transparent; border-color: var(--hair); color: inherit; }
.btn-quiet:hover { border-color: rgba(4, 6, 51, .28); }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; font: var(--type-body); color: var(--tone); text-decoration: none; transition: color var(--dur) var(--ease); }
.arrow-link::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.arrow-link:hover { color: var(--ink); }
.arrow-link:hover::after { transform: translateX(3px); }

/* Email + button, as one control */
.email-cta { display: flex; gap: 6px; padding: 5px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-pill); max-width: 440px; transition: border-color var(--dur) var(--ease); }
.email-cta:focus-within { border-color: rgba(4, 6, 51, .35); }
.email-cta input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 8px 0 18px; font: 400 16px var(--body); color: var(--ink); }
.email-cta input::placeholder { color: var(--tone); }
.dark .email-cta { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.dark .email-cta input { color: #fff; }
.dark .email-cta input::placeholder { color: rgba(255, 255, 255, .55); }

/* ---------- Surfaces ---------- */
.frame { position: relative; border-radius: var(--r); border: 1px solid var(--hair); overflow: hidden; background: var(--soft); isolation: isolate; }
canvas.cloth { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }

/* Real objects: photographed, so they keep a soft contact shadow */
.obj { position: absolute; pointer-events: none; user-select: none; filter: drop-shadow(0 10px 14px rgba(20, 18, 10, .16)) drop-shadow(0 2px 3px rgba(20, 18, 10, .14)); }
.obj img { width: 100%; height: auto; }

/* Discs: a W icon on a coloured disc (the chips rows, the contact page, the legal short versions) */
.disc { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none; }
.disc .bi { display: block; }
.disc-lime { background: var(--disc-lime); color: var(--disc-lime-ink); }
.disc-peach { background: var(--disc-peach); color: var(--disc-peach-ink); }
.disc-cyan { background: var(--disc-cyan); color: var(--disc-cyan-ink); }
.disc-sun { background: var(--disc-sun); color: var(--disc-sun-ink); }
.disc-navy { background: var(--disc-navy); color: var(--disc-navy-ink); }
.disc-pink { background: var(--disc-pink); color: var(--disc-pink-ink); }
.disc-lilac { background: var(--disc-lilac); color: var(--disc-lilac-ink); }
.hand { font-family: var(--hand); color: var(--pen); mix-blend-mode: multiply; font-weight: 500; letter-spacing: .01em; }
.docx { font-family: "Times New Roman", Times, serif; color: #222; }

/* FAQ */
.faq { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; font: var(--type-body); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq-sign { position: relative; width: 12px; height: 12px; flex: none; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform var(--dur) var(--ease); }
.faq-sign::after { transform: rotate(90deg); }
.faq[open] .faq-sign::after { transform: rotate(0deg); }
.faq p { margin: 0; padding: 0 48px 22px 0; color: var(--tone); }
.faq { overflow: hidden; }
.faq summary { transition: color var(--dur) var(--ease); }
.faq summary:hover { color: var(--tone); }

/* Footer, after cosmos.so: a light panel that is also the closing call to action.
   Headline and two pill buttons, quiet link columns, and a woven garment label where Cosmos keeps its app card. */
.foot { margin-top: var(--section); background: var(--panel); color: var(--ink); }
.foot-in { max-width: 1200px; margin: 0 auto; padding: 88px 24px 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 40px 64px; align-items: start; }
.foot-cta { max-width: 560px; }
.foot-h { margin: 0; font: var(--type-h2); letter-spacing: -.025em; text-wrap: balance; }
.foot-h .tone { display: block; }   /* each line balances on its own, so neither leaves a word behind */
.foot-btns { display: flex; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.foot-note { margin: 20px 0 0; font: var(--type-small); color: var(--tone); }   /* a line under the buttons, such as who to write to */
.foot-note a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.btn-soft { background: var(--button-soft); color: var(--ink); }
.btn-soft:hover { background: var(--button-soft-hover); }
.foot-col { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; min-width: 120px; }
.foot-col h2 { margin: 0 0 6px; font: var(--type-small); color: var(--tone); }
.foot-col a { font: var(--type-body); color: var(--ink); text-decoration: none; transition: color var(--dur) var(--ease); }
.foot-col a:hover { color: var(--tone); }
.foot-label { display: inline-block; margin-bottom: 28px; text-decoration: none; color: var(--navy); }
/* A small woven collar label: navy weave, cyan thread, folded ends with a line of stitching */
.woven { position: relative; display: flex; align-items: center; justify-content: center; width: 150px; height: 46px; border-radius: var(--r-1);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 2.5px),
    linear-gradient(180deg, #0B0E45, var(--button));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 1px rgba(4, 6, 51, .25), 0 10px 18px -10px rgba(4, 6, 51, .5);
  transform: rotate(-2deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.woven::before, .woven::after { content: ""; position: absolute; top: 0; bottom: 0; width: 11px; border: 0 dashed rgba(171, 220, 223, .4); }
.woven::before { left: 0; border-right-width: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); }
.woven::after { right: 0; border-left-width: 1px; background: linear-gradient(270deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); }
.woven .logo { width: 96px; color: var(--button-ink); }
.foot-label:hover .woven, .foot-label:focus-visible .woven { transform: rotate(0deg) translateY(-2px); }
.woven .rip { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: soft-light; border-radius: inherit; }
/* Dragging a finger across the label deforms it instead of scrolling the page. */
.foot-label { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.foot-label .woven { -webkit-user-drag: none; }
.foot-label:active .woven { transform: rotate(0deg) scale(.97); transition-duration: .15s; }
.foot-base { width: calc(100% - 48px); max-width: 1152px; margin: 0 auto; padding: 20px 0 32px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: var(--type-small); color: var(--tone); }
.foot-base a { color: inherit; }
@media (max-width: 960px) {
  .foot-in { grid-template-columns: 1fr 1fr; gap: 40px 24px; padding: 64px 24px 48px; }
  .foot-cta { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Site header: a sticky glass pill ---------- */
.site-head { position: sticky; top: 12px; z-index: 50; padding: 0 16px; margin-top: 12px; }
.site-head .pill { max-width: 1176px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 8px 0 24px; border-radius: var(--r-pill);
  background: rgba(251, 249, 245, .7); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
/* Once the page moves under the header, the strip above the pill fades the content out instead of showing a sliver of it */
.site-head::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 48px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(251, 249, 245, .94), rgba(251, 249, 245, .6) 45%, rgba(251, 249, 245, 0)); opacity: 0; transition: opacity var(--dur) var(--ease); }
.site-head.stuck::before { opacity: 1; }
.site-head.stuck .pill { background: rgba(251, 249, 245, .8); box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 24px -12px rgba(4, 6, 51, .18); }
.site-head .brand { display: flex; align-items: center; position: relative; color: var(--navy); }
/* The inline wordmark (header.js): its o is a button that rolls the word up past 40px of scroll. The brand keeps the
   full word's width on wide screens, so the nav beside it never shifts as it rolls. */
.site-head .ts-logo { display: block; fill: currentColor; fill-rule: evenodd; overflow: hidden; }
.site-head .ts-logo .o-wrap { transform-box: fill-box; transform-origin: center; }
@media (min-width: 901px) { .site-head .brand { width: 124px; flex: none; } }
.logo-intro .site-head .brand > .logo { visibility: hidden; }   /* the landing intro starts from dots, not the word */
.site-head .links { display: flex; gap: 4px; margin: 0 auto; }
.site-head .links a { padding: 8px 14px; border-radius: var(--r-pill); font: var(--type-control); color: var(--tone); text-decoration: none; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.site-head .links a:hover { color: var(--ink); background: rgba(4, 6, 51, .05); }
.site-head .links a[aria-current="page"] { color: var(--ink); background: rgba(4, 6, 51, .06); }
.site-head .acts { display: flex; gap: 6px; align-items: center; }
.site-head .acts .txt { padding: 8px 14px; font: var(--type-control); color: var(--tone); text-decoration: none; }
.site-head .acts .txt:hover { color: var(--ink); }
/* Phones: a hamburger that turns into a close cross, and a full-width glass panel that drops open under the pill */
.site-head .menu { display: none; position: static; }
.site-head .menu summary { list-style: none; cursor: pointer; width: 44px; height: 38px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--ink); }
.site-head .menu summary::-webkit-details-marker { display: none; }
.site-head .menu summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.burger { position: relative; display: block; width: 20px; height: 12px; }
.burger i { position: absolute; left: 0; width: 20px; height: 1.6px; border-radius: 1px; background: currentColor; transition: top .3s var(--ease), transform .3s var(--ease); }
.burger i:first-child { top: 1.5px; } .burger i:last-child { top: 9px; }
.menu[open]:not(.closing) .burger i { top: 5.2px; }
.menu[open]:not(.closing) .burger i:first-child { transform: rotate(45deg); } .menu[open]:not(.closing) .burger i:last-child { transform: rotate(-45deg); }
/* The pill's backdrop blur makes it the panel's containing block: hang the panel off its full width, 8px below */
.site-head .menu nav { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); padding: 8px; border-radius: var(--r-5); display: flex; flex-direction: column;
  background: var(--page); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--hair), 0 24px 48px -20px rgba(4, 6, 51, .3); transform-origin: 50% 0; }
.site-head .menu nav a { position: relative; padding: 15px 16px; border-radius: var(--r-4); font: var(--type-h4); letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
/* Straight hairlines between items, inset from the panel's sides; hidden either side of a highlighted item */
.site-head .menu nav a + a::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--hair); }
.site-head .menu nav a:hover::before, .site-head .menu nav a:hover + a::before, .site-head .menu nav a[aria-current="page"]::before, .site-head .menu nav a[aria-current="page"] + a::before { opacity: 0; }
.site-head .menu nav a:hover { background: rgba(4, 6, 51, .05); }
.site-head .menu nav a[aria-current="page"] { background: rgba(4, 6, 51, .06); }
.menu[open] nav { animation: nav-in .38s cubic-bezier(.2, .8, .2, 1) both; }
.menu[open] nav a { animation: nav-link .42s cubic-bezier(.2, .8, .2, 1) both; }
.menu[open] nav a:nth-child(2) { animation-delay: .03s; } .menu[open] nav a:nth-child(3) { animation-delay: .06s; } .menu[open] nav a:nth-child(4) { animation-delay: .09s; }
.menu[open] nav a:nth-child(5) { animation-delay: .12s; } .menu[open] nav a:nth-child(6) { animation-delay: .15s; }
.menu.closing nav { animation: nav-out .22s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px) scale(.97); clip-path: inset(0 0 70% 0 round var(--r-5)); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--r-5)); } }
@keyframes nav-link { from { opacity: 0; transform: translateY(-6px); } }
@keyframes nav-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .menu[open] nav, .menu[open] nav a, .menu.closing nav { animation: none; } .burger i { transition: none; } }
@media (max-width: 900px) {
  .site-head .links, .site-head .acts .txt { display: none; }
  /* Get started grows out of a dot beside the menu as the logo rolls up, and draws back into it on the way down (header.js).
     It hangs off the right of a box with no width, so the full word never has to make room for it. */
  .site-head .acts { position: relative; margin-left: auto; width: 0; height: 38px; }
  .site-head .acts .btn { position: absolute; top: 0; right: 0; transform-origin: calc(100% - 19px) 50%; transition: background-color var(--dur) var(--ease); }
  .site-head .logo { width: 108px; }
  .site-head .menu { display: block; }
  .site-head .pill { padding-left: 20px; gap: 4px; }
}

/* ---------- Things that rise in as they enter the page (once) ---------- */
[data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-rise].risen { opacity: 1; transform: none; }
html.no-js [data-rise] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1; transform: none; } }