/* shensuwan — commissions site.
   Look: a periwinkle sky with white halftone dots and white paper objects on it. Only the objects that
   "float" — header, status card, art cards, the main button, the receipt, the contact sheet — get the hard
   blue offset shadow; everything else is ruled with hairlines. Playfair Display sets the big page titles only
   (everything else is Jost), upright and at normal tracking (no slanted type anywhere: the client asked for none), Jost does the reading text; Japanese falls back glyph by glyph to Shippori
   Mincho B1 / Zen Kaku Gothic New. One action colour (--cta); pink only on the status dot. */

:root {
  --sky-0: #f0f3fa;        /* paper: page background below the sky, selected rows */
  --sky-1: #d5deef;        /* image placeholders, soft fills */
  --sky-2: #b1c9ef;        /* soft borders */
  --sky-3: #8aaee0;        /* offset shadow of the floating objects */
  --cta: #4e6fb0;          /* the only action colour — white text 4.97:1 */
  --cta-deep: #2c4672;     /* hard shadow under the action colour */
  --ink: #1b2442;          /* text, the header outline, title rules */
  --ink-2: #384c65;        /* secondary text */
  --ink-3: #485f88;        /* muted text, icons (6.4:1 on white) */
  --line: #cbd7ee;         /* hairlines on white */
  --pink: #e48aae;         /* status dot only */
  --peach: #f0b37e;        /* waitlist dot */
  --slate: #9aa6bf;        /* closed dot */

  --f-display: 'Playfair Display', 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', 'Times New Roman', serif;
  --f-ui: 'Jost', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;

  --r-card: 22px;
  --r-md: 16px;
  --sh-card: 6px 6px 0 var(--sky-3);
  --sh-cta: 4px 4px 0 var(--cta-deep);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --seam: clamp(72px, 10vw, 128px);
  --hdr-h: 72px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
/* Playfair's default figures are old-style and every `font:` shorthand resets the choice, hence the hammer */
*, *::before, *::after { font-variant-numeric: lining-nums !important; }
/* The scrollbar's place is reserved for good: on a tall screen a page that fits gets taller when a terms item or
   the lightbox opens, the scrollbar appears and the whole centred layout would jump sideways. The sky is painted on
   the root so that the reserved strip is sky too, not a pale band. */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 32px);
  scrollbar-gutter: stable;
  background: linear-gradient(180deg, #b7c8ee 0%, #c8d6f2 30%, #dfe7f6 62%, var(--sky-0) 100%) 0 0 / 100% max(100svh, 760px) repeat-x var(--sky-0);
}
html:has(> body.is-sub) { background-size: 100% max(64svh, 560px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: 400 17px/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}
main { flex: 1; position: relative; z-index: 1; padding-bottom: var(--seam); }
.page-home main { padding-bottom: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
em, i, address, cite { font-style: normal; } /* no slanted type on this site */
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
/* zero specificity: a list's own class must be able to set its padding (it could not: the receipt lines sat on their rule) */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:focus-visible { outline: 2.5px solid var(--cta); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sky-2); color: var(--ink); }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 0 0 1.5px var(--ink); }
.skip:focus { top: 12px; }

/* Japanese: phrase-aware breaking, a touch more air */
[lang="ja"] { line-break: strict; word-break: auto-phrase; }
/* zero specificity, and <html lang="ja"> itself must not trigger it (it would retrack every Latin label) */
:where(p[lang="ja"], li[lang="ja"], [lang="ja"]:not(html) :is(p, li)) { line-height: 1.95; letter-spacing: .02em; }
html[data-lang="ja"] :where(.phead__lede, .rcpt__fine, .hint, .step__hint, .extras__empty) { line-height: 1.9; letter-spacing: .02em; }

/* ---------------------------------------------------------------- language + status switches
   Copy lives in the HTML twice: <span data-l="en">…</span><span data-l="ja" lang="ja">…</span>.
   The inline script in <head> sets html[data-lang] before the first paint, so nothing flashes. */
html[data-lang="ja"] [data-l="en"], html:not([data-lang="ja"]) [data-l="ja"] { display: none !important; }
/* status: data.json / the Telegram bot sets html[data-gh-status]; until then "open" shows */
[data-st] { display: none; }
html:not([data-gh-status]) [data-st="open"], html[data-gh-status="open"] [data-st="open"],
html[data-gh-status="waitlist"] [data-st="waitlist"], html[data-gh-status="closed"] [data-st="closed"] { display: contents; }

/* ---------------------------------------------------------------- the sky
   a periwinkle gradient with white polka dots (every other row shifted by half a step) that thin out toward the paper */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: max(100svh, 760px);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .78) 0 2.1px, transparent 2.7px) 0 0 / 32px 32px,
    radial-gradient(circle, rgba(255, 255, 255, .78) 0 2.1px, transparent 2.7px) 16px 16px / 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, #000 0 45%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0 45%, transparent 92%);
}
body.is-sub::before { height: max(64svh, 560px); } /* the gradient itself is the root background, see html */

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(860px + 2 * var(--gutter)); }

/* ---------------------------------------------------------------- header */
.hdr { position: sticky; top: 12px; z-index: 40; margin-top: 16px; }
.hdr__bar {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--hdr-h); padding: 9px 12px 9px 10px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--sky-3);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; min-width: 0; border-radius: 30px; padding-right: 6px; }
.brand__ava { width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--sky-2); object-fit: cover; }
.brand__name { font: 400 21px/1 var(--f-ui); }
.nav { margin-left: auto; }
.nav ul, .menu ol { list-style: none; margin: 0; padding: 0; }
.nav ul { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.nav a {
  display: block; padding: 8px 2px;
  font: 400 17px/1 var(--f-ui); text-decoration: none; color: var(--ink-2);
  border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--sky-2); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.nav [lang="ja"] { font-size: 15px; letter-spacing: .06em; }

.lang { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 999px; background: var(--sky-0); }
.lang button {
  border: 0; background: none; min-width: 44px; height: 36px; padding: 0 12px; border-radius: 999px;
  font: 400 14px/1 var(--f-ui); color: var(--ink-3); transition: background-color .2s, color .2s;
}
.lang button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--sky-3); }
.lang button:not([aria-pressed="true"]):hover { color: var(--ink); }

.burger { display: none; flex: none; margin-left: 2px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: none; place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s var(--ease), background-color .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* full-screen menu for phones */
.menu {
  position: fixed; inset: 0; z-index: 39; display: none; flex-direction: column;
  padding: calc(var(--hdr-h) + 56px) var(--gutter) 32px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 2px, transparent 2.6px) 0 0 / 32px 32px,
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 2px, transparent 2.6px) 16px 16px / 32px 32px,
    linear-gradient(180deg, #c3d2f1, var(--sky-0));
  overflow-y: auto; overscroll-behavior: contain;
}
.menu.is-open { display: flex; }
.menu ol { display: grid; }
.menu ol a {
  display: block; padding: 12px 0; text-decoration: none; border-bottom: 1px solid rgba(27, 36, 66, .22);
  font: 400 clamp(32px, 9vw, 44px)/1.15 var(--f-display); color: var(--ink);
}
.menu ol a [lang="ja"] { font-size: .8em; font-weight: 500; letter-spacing: .06em; }
.menu ol a[aria-current="page"] { color: var(--cta); }
.menu .btn { margin-top: auto; align-self: flex-start; }
@media (max-height: 500px) { .menu { padding-top: calc(var(--hdr-h) + 24px); } .menu ol a { font-size: 26px; padding-block: 6px; } .menu .btn { margin-top: 20px; } }
@media (prefers-reduced-motion: no-preference) { .menu.is-open { animation: fadeIn .3s ease-out; } }
@keyframes fadeIn { from { opacity: 0; } }

@media (max-width: 900px) {
  :root { --hdr-h: 62px; }
  .hdr__bar { gap: 10px; padding: 7px 8px; }
  .brand__ava { width: 44px; height: 44px; }
  .brand__name { font-size: 21px; }
  .nav { display: none; }
  .lang { margin-left: auto; }
  .burger { display: grid; }
}
@media (max-width: 400px) {
  .hdr__bar { gap: 6px; }
  .brand { gap: 8px; }
  .brand__ava { width: 40px; height: 40px; }
  .brand__name { font-size: 18px; }
  .lang button { min-width: 34px; padding: 0 8px; }
  .burger { width: 42px; height: 42px; }
}
@media (max-width: 355px) { .brand__name { display: none; } } /* the link keeps aria-label="shensuwan" */

/* ---------------------------------------------------------------- buttons + links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0;
  font: 500 17px/1 var(--f-ui); text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--cta { background: var(--cta); color: #fff; box-shadow: var(--sh-cta); }
.btn--cta:hover { background: #4666a6; }
.btn--cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--cta-deep); }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cta); }
.btn--ghost:hover { background: var(--sky-0); }
.btn--ghost:active { background: var(--sky-1); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn--sm svg { width: 16px; height: 16px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; box-shadow: none; }
.btn--ghost[aria-disabled="true"] { box-shadow: inset 0 0 0 1.5px var(--cta); }
.btn [lang="ja"] { font-size: 16px; letter-spacing: .04em; }

.alink {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 400 17px/1.2 var(--f-ui); color: var(--ink-2);
  padding: 6px 0; border-bottom: 1px solid currentColor; transition: color .2s;
}
.alink::after {
  content: ""; width: 22px; height: 10px; flex: none; background: currentColor; transition: transform .25s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h25.5M21.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h25.5M21.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.alink:hover { color: var(--ink); }
.alink:hover::after { transform: translateX(4px); }

.card { background: #fff; border-radius: var(--r-card); box-shadow: var(--sh-card); }

/* status: a dot and a word */
.status { display: inline-flex; align-items: center; gap: 9px; font: 400 15px/1.2 var(--f-ui); color: var(--ink-2); }
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); flex: none; }
html[data-gh-status="waitlist"] .status__dot { background: var(--peach); }
html[data-gh-status="closed"] .status__dot { background: var(--slate); }
.status-note { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ---------------------------------------------------------------- home hero */
.hero {
  --pt: clamp(32px, 6vh, 64px); --pb: clamp(32px, 5vh, 72px);
  position: relative; padding-block: var(--pt) var(--pb);
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  min-height: calc(100svh - var(--hdr-h) - 20px - var(--pt) - var(--pb));
}
.hero__copy { display: grid; gap: 32px; justify-items: start; }
.lockup { padding: clamp(24px, 3vw, 38px) clamp(26px, 3.4vw, 46px) clamp(26px, 3.2vw, 40px); min-width: min(100%, 440px); }
.lockup__title { font: 400 clamp(52px, 7vw, 100px)/.92 var(--f-display); color: var(--ink); }
.lockup__title em { display: block; margin-bottom: .14em; font-size: .5em; line-height: 1.1; color: var(--ink-2); }
.lockup__title b { display: block; font-weight: 400; letter-spacing: .02em; white-space: nowrap; }
.lockup__title [lang="ja"] { display: block; font: 500 clamp(34px, 4.3vw, 60px)/1.25 var(--f-display); letter-spacing: .04em; white-space: nowrap; }
.lockup__title .status__dot { display: inline-block; width: .13em; height: .13em; min-width: 9px; min-height: 9px; margin-left: .16em; vertical-align: .62em; }
.lockup__title [lang="ja"] .status__dot { width: .2em; height: .2em; vertical-align: .5em; }
.lockup__note { margin-top: 16px; max-width: 34ch; font-size: 16px; color: var(--ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: center; }
.hero__more { margin-top: -8px; }

/* the stage: three tall cards, each its own artwork, stepping up to the right.
   The whole stage (cards + their offsets + control bar) must fit the first screen: its size follows the viewport */
.stage { position: relative; justify-self: end; max-width: 100%; }
.slicer {
  --n: 3; --g: clamp(12px, 1.7vw, 22px); --ar: 6 / 5;
  --h: clamp(360px, calc(100svh - var(--hdr-h) - 270px), 640px);
  position: relative; width: calc(var(--h) * 1.2); max-width: 100%; aspect-ratio: var(--ar); container-type: inline-size;
}
.slat {
  --sw: calc((100cqw - (var(--n) - 1) * var(--g)) / var(--n));
  position: absolute; top: 0; height: 100%; width: var(--sw); left: calc(var(--i) * (var(--sw) + var(--g)));
  padding: 0; border: 4px solid #fff; border-radius: 20px; overflow: hidden; background: var(--sky-1); cursor: zoom-in;
  box-shadow: 6px 6px 0 var(--sky-3);
  transform: translateY(var(--y, 0));
  transition: transform .5s var(--ease), box-shadow .25s;
}
.slat img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--focus, 50% 25%); transform-origin: var(--focus, 50% 25%);
  -webkit-user-drag: none; user-select: none;
}
.slat:nth-child(1) { --y: 6%; }
.slat:nth-child(2) { --y: 0%; }
.slat:nth-child(3) { --y: -6%; }
.slat:hover, .slat:focus-visible { transform: translateY(calc(var(--y) - 2%)); box-shadow: 8px 9px 0 var(--cta); }
.slat:focus-visible { outline-offset: 6px; }
.slat:disabled { cursor: default; }
.slat:disabled:hover { transform: translateY(var(--y)); box-shadow: 6px 6px 0 var(--sky-3); }
@media (prefers-reduced-motion: no-preference) {
  /* first paint: the cards rise into their steps one after another, each picture easing back from a close-up */
  .slat { animation: cardIn .9s var(--ease) backwards; animation-delay: calc(var(--i) * 110ms + 60ms); }
  .slat img { animation: settle 2.2s var(--ease) backwards; animation-delay: calc(var(--i) * 110ms + 60ms); }
}
@keyframes cardIn { from { opacity: 0; transform: translateY(calc(var(--y, 0%) + 9%)); } }
@keyframes settle { from { transform: scale(1.12); } }

/* controls: arrows around the counter, the timer line, pause */
.stage__bar { display: flex; align-items: center; gap: 6px; margin-top: 46px; }
.stage__num { min-width: 3.4em; text-align: center; font: 400 18px/1 var(--f-ui); color: var(--ink-3); white-space: nowrap; }
.stage__num b { font-weight: 400; color: var(--ink); }
.stage__prog { flex: 1; height: 2px; margin-inline: 12px 8px; background: rgba(27, 36, 66, .16); overflow: hidden; }
.stage__prog i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.stage__prog i.is-run { animation: fill var(--dur, 5600ms) linear forwards; }
.stage.is-paused .stage__prog i.is-run { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.tbtn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 0; background: none; color: var(--ink); transition: background-color .2s;
}
.tbtn:hover { background: rgba(255, 255, 255, .7); }
.tbtn svg { width: 16px; height: 16px; }
.tbtn .i-long { width: 26px; height: 12px; transition: transform .25s var(--ease); }
.tbtn[data-go="-1"]:hover .i-long { transform: translateX(-3px); }
.tbtn[data-go="1"]:hover .i-long { transform: translateX(3px); }
.tbtn .i-play { display: none; }
.stage.is-stopped .tbtn .i-play { display: block; }
.stage.is-stopped .tbtn .i-pause { display: none; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 44px; }
  .hero__copy { justify-items: stretch; }
  .lockup { min-width: 0; }
  .hero__ctas .btn { flex: 1 1 140px; padding-inline: 20px; }
  .hero__more { justify-self: start; }
  .stage { justify-self: center; width: min(100%, 520px); }
  .slicer { --ar: 1 / 1; width: 100%; }
  .slat { border-width: 3px; border-radius: 16px; }
  .stage__bar { margin-top: 38px; }
}

/* ---------------------------------------------------------------- interior page head
   the title on a hairline, the other language at the far end, one star flare crossing the rule */
.phead { padding-block: clamp(44px, 8vh, 88px) clamp(28px, 4.5vh, 48px); }
.phead__row {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  padding-bottom: clamp(14px, 2vw, 22px); border-bottom: 1px solid var(--ink);
}
.phead__row::after {
  content: ""; position: absolute; right: max(18%, 150px); bottom: -27px; width: 40px; height: 96px; background: var(--ink); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 96'%3E%3Cpath d='M20 0v96M3 70h34' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M20 59c.7 7.6 3.4 10.3 11 11-7.6.7-10.3 3.4-11 11-.7-7.6-3.4-10.3-11-11 7.6-.7 10.3-3.4 11-11Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 96'%3E%3Cpath d='M20 0v96M3 70h34' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M20 59c.7 7.6 3.4 10.3 11 11-7.6.7-10.3 3.4-11 11-.7-7.6-3.4-10.3-11-11 7.6-.7 10.3-3.4 11-11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.phead__title { font: 400 clamp(46px, 6.6vw, 84px)/1 var(--f-display); }
.phead__title [lang="ja"] { font: 500 clamp(36px, 5vw, 60px)/1.25 var(--f-display); letter-spacing: .05em; }
.phead__alt { font: 400 17px/1.2 var(--f-ui); color: var(--ink-2); }
.phead__alt [lang="ja"] { font-size: 15px; letter-spacing: .1em; }
.phead__lede { margin-top: clamp(26px, 3vw, 34px); max-width: 50ch; font-size: 18px; color: var(--ink-2); }
@media (max-width: 700px) {
  /* the other language moves under the title; the flare keeps the right end, with a shorter upper ray */
  .phead__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .phead__row::after { right: 10px; -webkit-clip-path: inset(34px 0 0 0); clip-path: inset(34px 0 0 0); }
  .phead__title { font-size: clamp(40px, 11.5vw, 52px); }
  .phead__lede { margin-top: 36px; }
}

/* ---------------------------------------------------------------- price calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 392px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.step + .step { margin-top: 44px; }
.step__label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font: 400 clamp(24px, 2.4vw, 28px)/1.2 var(--f-ui); }
.step__label [lang="ja"] { font-size: .92em; letter-spacing: .04em; }
.step__no { color: var(--cta); }
.step__no::after { content: "."; }
.step__hint { margin: -6px 0 16px; color: var(--ink-3); font-size: 15px; }

/* what to draw: one card per type, its cover work kept in its own format — a landscape sheet gets a wide card,
   a portrait a tall one. Twelve columns; app.js gives every card its span (--sd on desktop, --sm on phones). */
.types { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; container-type: inline-size; }
.type {
  position: relative; grid-column: span var(--sd, 3); grid-row: span 2; display: grid; grid-template-rows: auto 1fr; row-gap: 0;
  padding: 0; border: 0; border-radius: 18px; overflow: hidden; text-align: left; background: #fff;
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s, background-color .15s;
}
@supports (grid-template-rows: subgrid) { .type { grid-template-rows: subgrid; } } /* covers and captions line up across a row */
.type:hover { box-shadow: 0 0 0 1px var(--sky-3); }
.type[aria-checked="true"] { background: var(--sky-0); box-shadow: 0 0 0 2px var(--cta); }
.type:focus-visible { outline-offset: 4px; border-radius: 18px; }
.type__media { position: relative; display: block; overflow: hidden; width: 100%; aspect-ratio: 2 / 3; min-height: 100%; background: var(--sky-1); }
.type[data-sd="6"] .type__media { aspect-ratio: 8 / 5; }
.type[data-sd="9"] .type__media { aspect-ratio: 5 / 2; }
.type[data-sd="12"] .type__media { aspect-ratio: 3 / 1; }
.type__pic {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%;
  transition: transform .6s var(--ease);
}
.type--wide .type__pic { object-position: 50% 42%; }
.type:hover .type__pic { transform: scale(1.03); }
.type__text { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 12px 16px 16px; }
.type__name { font: 400 17px/1.3 var(--f-ui); overflow-wrap: anywhere; }
.type__price { font: 400 21px/1 var(--f-ui); white-space: nowrap; }
.type__price small { font: 400 14px/1 var(--f-ui); color: var(--ink-3); margin-inline: 2px 4px; }
.type__price small:first-child { margin-left: 0; }
@container (max-width: 540px) {
  .type { grid-column: span var(--sm, 6); border-radius: 16px; }
  .type[data-sm="12"] .type__media { aspect-ratio: 8 / 5; }
  .type[data-sm="4"] .type__text { gap: 5px; padding: 9px 10px 12px; }
  .type[data-sm="4"] .type__name { font-size: 14px; line-height: 1.3; }
  .type[data-sm="4"] .type__price { font-size: 19px; }
  .type[data-sm="4"] .type__price small { font-size: 12px; }
  .type[data-sm="4"] .type__check { top: 7px; right: 7px; width: 22px; height: 22px; }
}

/* option lists: one white sheet per group, rows ruled with hairlines, the chosen row tinted */
.rows { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.opt + .opt { border-top: 1px solid var(--line); }
label.opt:hover { background: #f7f9fd; }
.opt:has(input:checked), .opt.is-on { background: var(--sky-0); }
.type__check, .opt__box {
  width: 22px; height: 22px; display: grid; place-items: center; flex: none; color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--ink-3); transition: background-color .15s, box-shadow .15s;
}
.type__check { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.opt__box { border-radius: 6px; }
.type__check svg, .opt__box svg { width: 12px; height: 12px; opacity: 0; }
.type[aria-checked="true"] .type__check, .opt input:checked + .opt__box { background: var(--cta); box-shadow: inset 0 0 0 1.5px var(--cta); }
.type[aria-checked="true"] .type__check svg, .opt input:checked + .opt__box svg { opacity: 1; }

.extras__empty { padding: 20px 22px; border-radius: 18px; border: 1px dashed var(--sky-3); color: var(--ink-3); }
.opt {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 58px; padding: 10px 18px; transition: background-color .15s;
}
label.opt { cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt input:focus-visible + .opt__box { outline: 2.5px solid var(--cta); outline-offset: 3px; }
.opt__label { font-size: 17px; line-height: 1.35; }
.opt__price { font: 400 15px/1.2 var(--f-ui); color: var(--ink-2); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums !important; }
.opt--n { grid-template-columns: minmax(0, 1fr) auto auto; }
.qty { display: inline-flex; align-items: center; gap: 2px; }
.qty button {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--sky-2);
  font-size: 19px; line-height: 1; color: var(--ink); transition: background-color .15s;
}
.qty button:hover:not(:disabled) { background: var(--sky-1); }
.qty button:disabled { opacity: .4; cursor: default; }
.qty output { min-width: 30px; text-align: center; font-variant-numeric: lining-nums tabular-nums !important; }

.share { margin-top: 26px; }
.share__q { margin-bottom: 12px; font-size: 17px; font-weight: 500; }
.share__q [lang="ja"] { font-size: 16px; }
.share .opt__box { border-radius: 50%; }
.share .opt__box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; }
.share input:checked + .opt__box::after { opacity: 1; }

.info {
  display: block; width: 100%; min-height: 140px; resize: vertical; padding: 16px 18px; border: 0; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px var(--line); line-height: 1.55;
}
.info:focus { outline: 2px solid transparent; box-shadow: 0 0 0 1.5px var(--cta); } /* transparent outline survives forced colors */
.info::placeholder { color: #7d8cab; }
.info__meta { display: flex; justify-content: flex-end; margin-top: 6px; font-size: 13px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums !important; }

/* pinned, but never taller than the screen: the send buttons must stay reachable (inner scroll when needed) */
.calc__side { position: sticky; top: calc(var(--hdr-h) + 36px); display: grid; gap: 18px; max-height: calc(100svh - var(--hdr-h) - 56px); overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 10px 0; scrollbar-width: thin; }
/* the receipt: a paper slip, squarer than the cards */
.rcpt__paper { padding: 26px 26px 28px; background: #fff; border-radius: 6px; box-shadow: var(--sh-card); }
.rcpt__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rcpt__kicker { font: 400 15px/1 var(--f-ui); color: var(--ink-3); }
.rcpt__kicker [lang="ja"] { font-size: 14px; letter-spacing: .08em; }
.rcpt .status { font-size: 14px; }
.rcpt .status-note { margin-top: 10px; text-align: right; }
.rcpt__who { margin-top: 14px; font: 400 28px/1 var(--f-ui); }
.rcpt__meta { margin-top: 8px; font-size: 13px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums !important; }
.rcpt__lines { margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px dashed var(--ink-3); display: grid; gap: 10px; min-height: 52px; }
.rcpt__lines li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.35; }
.rcpt__lines li span { min-width: 0; color: var(--ink-2); }
.rcpt__lines li i { flex: 1; border-bottom: 1px dotted var(--sky-3); transform: translateY(-4px); min-width: 12px; }
.rcpt__lines li b { font-weight: 500; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums !important; }
.rcpt__lines .is-empty { color: var(--ink-3); }
.rcpt__tot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 18px; border-top: 1px dashed var(--ink-3); }
.rcpt__tot span { font: 400 18px/1 var(--f-ui); }
.rcpt__tot span [lang="ja"] { font-size: 16px; }
.rcpt__tot b { font: 400 clamp(28px, 2.8vw, 34px)/1 var(--f-ui); white-space: nowrap; }
.rcpt__fine { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.acts { display: grid; gap: 12px; }
.acts .btn { width: 100%; }
.hint { font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: center; padding-inline: 8px; }
.hint.is-ok { color: var(--cta-deep); }
.hint.is-ok::before { content: "✓ "; }
.copybox { width: 100%; min-height: 150px; padding: 12px 14px; border-radius: 12px; border: 0; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 13px; line-height: 1.5; }

.calc-bar { display: none; }
@media (max-width: 960px) {
  .calc { grid-template-columns: 1fr; }
  .calc__side { position: static; max-height: none; overflow: visible; padding: 0 6px 0 0; }
  .calc-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 12px;
    padding: 9px 9px 9px 22px; border-radius: 999px; background: #fff; border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--sky-3);
    transition: transform .35s var(--ease), opacity .35s;
  }
  .calc-bar.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .35s var(--ease), opacity .35s, visibility 0s .35s; }
  .calc-bar__sum { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
  .calc-bar__sum b { font: 500 20px/1.1 var(--f-ui); }
  .calc-bar__sum span { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calc-bar .btn { min-height: 44px; padding: 0 20px; font-size: 15px; box-shadow: none; }
  .page-price .foot { padding-bottom: 96px; }
}
@media (max-width: 520px) {
  .opt { gap: 12px; padding: 10px 14px; }
  .opt--n { grid-template-columns: minmax(0, 1fr) auto; }
  .opt--n .opt__price { grid-column: 1; grid-row: 2; margin-top: -6px; }
  .opt--n .qty { grid-row: span 2; }
  .rcpt__paper { padding: 22px 20px 24px; }
}

/* ---------------------------------------------------------------- terms */
.terms { display: grid; gap: 12px; }
.term { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); overflow: clip; }
.term summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 24px clamp(20px, 3vw, 32px); cursor: pointer; list-style: none; border-radius: 18px; transition: background-color .15s;
}
.term summary::-webkit-details-marker { display: none; }
.term summary:hover { background: #f7f9fd; }
/* the card clips its content (height animation), so the focus ring goes on the card, not on the summary */
.term summary:focus-visible { outline: none; }
.term:has(> summary:focus-visible) { outline: 2.5px solid var(--cta); outline-offset: 3px; }
.term__t { font: 400 clamp(21px, 2.1vw, 24px)/1.3 var(--f-ui); }
.term__t [lang="ja"] { font-size: .92em; line-height: 1.5; letter-spacing: .04em; }
.term__ico { position: relative; width: 18px; height: 18px; }
.term__ico::before, .term__ico::after { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1.5px; margin-top: -.75px; background: var(--ink); }
.term__ico::after { transform: rotate(90deg); transition: transform .35s var(--ease); }
.term[open] .term__ico::after { transform: rotate(0deg); }
.term__body { padding: 0 clamp(20px, 3vw, 32px) 28px; }
.term__body ul { display: grid; gap: 12px; padding: 20px 0 0; margin: 0; border-top: 1px solid var(--line); list-style: none; }
.term__body li { position: relative; padding-left: 20px; max-width: 70ch; color: var(--ink-2); }
.term__body li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky-3); }
.term__body li ul { padding-top: 8px; border: 0; gap: 4px; }
.term__body li li::before { width: 8px; height: 1.5px; border-radius: 0; top: .8em; left: 0; }
@supports (interpolate-size: allow-keywords) {
  .term { interpolate-size: allow-keywords; }
  .term::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
  .term[open]::details-content { height: auto; }
}
.terms__note { display: grid; justify-items: start; gap: 14px; margin-top: 28px; padding: 0 clamp(20px, 3vw, 32px); }
.terms__note p { font: 400 18px/1.55 var(--f-ui); max-width: 52ch; }
.terms__note p[lang="ja"] { font: 400 16px/1.9 var(--f-ui); }

/* ---------------------------------------------------------------- works */
.chips {
  position: sticky; top: calc(var(--hdr-h) + 24px); z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: #fff; box-shadow: 0 0 0 1px var(--sky-2); font-size: 16px; line-height: 1.3; color: var(--ink-2);
  transition: background-color .15s, color .15s;
}
.chip sup { font-size: 12px; line-height: 1; color: var(--ink-3); vertical-align: baseline; top: 0; }
.chip:hover { color: var(--ink); background: var(--sky-0); }
.chip[aria-current="true"] { background: var(--ink); color: #fff; box-shadow: 0 0 0 1px var(--ink); }
.chip[aria-current="true"] sup { color: var(--sky-2); }
.chip [lang="ja"] { font-size: 14px; letter-spacing: .04em; }

.wsec { padding-top: clamp(40px, 5.5vw, 68px); }
.wsec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 22px; padding-top: 16px; border-top: 1px solid var(--ink); }
.wsec__title { font: 400 clamp(28px, 3.2vw, 38px)/1.15 var(--f-ui); min-width: 0; overflow-wrap: anywhere; }
.wsec__title [lang="ja"] { font: 400 clamp(24px, 2.8vw, 32px)/1.3 var(--f-ui); letter-spacing: .05em; }
@media (max-width: 420px) { .wsec__title [lang="ja"] { font-size: 6.5vw; } } /* キャラクターデザインラフ fits one line from 320px */
.wsec__sub { font: 400 16px/1.3 var(--f-ui); color: var(--ink-3); }
.wsec__sub [lang="ja"] { font-size: 14px; letter-spacing: .08em; }
.wsec__order { margin-left: auto; font-size: 16px; }

/* masonry: app.js puts every work into the shortest of the columns (.grid__col); the gaps live here */
.grid { --row-gap: 22px; display: flex; align-items: flex-start; column-gap: 22px; }
.grid__col { flex: 1 1 0; min-width: 0; display: grid; align-content: start; row-gap: var(--row-gap); }
.tile { margin: 0; }
.tile button { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--sky-1); cursor: zoom-in; }
.tile img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.tile button:hover img { transform: scale(1.025); }
.tile figcaption { padding: 8px 2px 0; font-size: 14px; line-height: 1.35; color: var(--ink-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.wsec__more { display: flex; justify-content: center; margin-top: 8px; }
.works__end { display: flex; justify-content: center; margin-top: var(--seam); padding-top: 32px; border-top: 1px solid var(--ink); }
@media (max-width: 560px) {
  .grid { --row-gap: 14px; column-gap: 12px; }
  .tile button { border-radius: 10px; }
  .tile figcaption { font-size: 13px; }
}

/* ---------------------------------------------------------------- contact: one sheet, three ruled rows */
.clist { overflow: hidden; }
.crow {
  display: grid; grid-template-columns: minmax(120px, 22%) minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 40px); text-decoration: none; transition: background-color .15s;
}
.crow + .crow { border-top: 1px solid var(--line); }
a.crow:hover { background: #f7f9fd; }
a.crow:focus-visible { outline-offset: -5px; border-radius: 16px; }
.crow__label { font-size: 16px; color: var(--ink-3); }
.crow__val { font: 400 clamp(21px, 2.6vw, 28px)/1.25 var(--f-ui); overflow-wrap: break-word; min-width: 0; } /* the address has a <wbr> before @ */
a.crow__val { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--sky-3); transition: text-decoration-color .2s; }
a.crow__val:hover { text-decoration-color: var(--ink); }
.crow__act { display: inline-flex; }
.crow__go { width: 22px; height: 22px; color: var(--ink-3); transition: transform .25s var(--ease), color .2s; }
a.crow:hover .crow__go { transform: translate(3px, -3px); color: var(--ink); }
.contact__status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
@media (max-width: 640px) {
  .crow { grid-template-columns: minmax(0, 1fr) auto; }
  .crow__label { grid-column: 1 / -1; margin-bottom: -6px; font-size: 15px; }
}

/* ---------------------------------------------------------------- lightbox */
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lb::backdrop { background: rgba(17, 24, 46, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
/* min-width: 0 — otherwise the track grows to the last picture's width and fit() measures that instead of the screen */
.lb__stage { position: relative; display: grid; place-items: center; padding: 72px 96px 12px; min-height: 0; min-width: 0; touch-action: pan-y pinch-zoom; }
.lb__img { max-width: none; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); background: #fff; } /* size set by app.js from w/h; white under transparent uploads */
.lb__foot { display: grid; justify-items: center; gap: 6px; padding: 14px 24px 26px; text-align: center; }
.lb__count { font: 400 15px/1 var(--f-ui); color: #b9c8ea; }
.lb__by { font: 400 clamp(18px, 2vw, 22px)/1.2 var(--f-ui); }
.lb__desc { max-width: 60ch; font-size: 14px; color: #c7d2ec; }
.lb :focus-visible { outline-color: #fff; } /* the blue ring is ~2.3:1 on the dark scrim */
.ibtn {
  position: absolute; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: rgba(17, 24, 46, .5); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); transition: background-color .2s;
}
.ibtn:hover { background: rgba(255, 255, 255, .16); }
.ibtn svg { width: 18px; height: 18px; }
.ibtn .i-long { width: 24px; height: 11px; }
.lb__close { top: 16px; right: 16px; }
.lb__prev { left: 20px; top: 50%; margin-top: -40px; }
.lb__next { right: 20px; top: 50%; margin-top: -40px; }
@media (prefers-reduced-motion: no-preference) {
  .lb[open] { animation: fadeIn .3s ease-out; }
  .lb__img.is-in { animation: lbImg .4s var(--ease); }
}
@keyframes lbImg { from { opacity: 0; transform: scale(.98); } }
@media (max-width: 700px) {
  .lb__stage { padding: 64px 10px 8px; }
  .lb__prev, .lb__next { top: auto; bottom: 24px; margin: 0; }
  .lb__prev { left: 16px; }
  .lb__next { right: 16px; }
  .lb__foot { padding: 14px 84px 28px; min-height: 100px; }
  .lb__close { top: 12px; right: 12px; }
}

/* ---------------------------------------------------------------- footer */
.foot { position: relative; padding-block: 40px 36px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .5); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; }
.foot__legal { display: grid; gap: 10px; max-width: 76ch; font-size: 13px; line-height: 1.65; color: var(--ink-3); }
.foot__legal [lang="ja"] { line-height: 1.9; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px; margin: -10px -10px 0 0; }
.foot__links a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-2); transition: background-color .2s, color .2s; }
.foot__links a:hover { background: #fff; color: var(--ink); }
.foot__links svg { width: 19px; height: 19px; }
.foot__copy { grid-column: 1 / -1; font: 400 14px/1 var(--f-ui); color: var(--ink-2); }
@media (max-width: 700px) { .foot__grid { grid-template-columns: 1fr; } .foot__links { margin: 0 0 0 -12px; } }

/* ---------------------------------------------------------------- 404 */
.lost { display: grid; justify-items: start; gap: 28px; padding-block: clamp(60px, 12vh, 140px); }
.lost h1 { font: 400 clamp(72px, 13vw, 168px)/.9 var(--f-display); }
.lost h1 em { display: block; margin-top: .5em; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; color: var(--ink-2); font-family: var(--f-ui); }
.lost h1 em[lang="ja"] { font-weight: 500; letter-spacing: .06em; }

/* ---------------------------------------------------------------- motion + contrast preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  /* the progress line is the slideshow timer, not decoration: if the visitor presses play, it must still take 5.6 s */
  .stage__prog i.is-run { animation-duration: var(--dur, 5600ms) !important; }
  .term::details-content { transition: none; }
}

/* keyboard focus must not hide under sticky / fixed bars (scroll-padding, WCAG 2.4.11) */
html:has(> body.page-works) { scroll-padding-top: calc(var(--hdr-h) + 104px); }
@media (max-width: 960px) { html:has(> body.page-price) { scroll-padding-bottom: 100px; } }

/* Windows high contrast: controls drawn with shadows/backgrounds need real borders */
@media (forced-colors: active) {
  .opt__box, .type__check { border: 2px solid CanvasText; }
  .share input:checked + .opt__box::after, .opt input:checked + .opt__box, .type[aria-checked="true"] .type__check { forced-color-adjust: none; background: Highlight; }
  .info, .type, .rows, .term, .rcpt__paper { border: 1px solid CanvasText; }
  .lang button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .type[aria-checked="true"], .chip[aria-current="true"] { outline: 3px solid Highlight; outline-offset: -4px; }
  .btn, .ibtn, .tbtn, .card, .chip { border: 1px solid CanvasText; }
  .phead__row::after { background: CanvasText; }
}