/* ==========================================================================
   Amelio Services — "Craft table" theme (draft 4)
   The whole site is a well-used arts and crafts table. Every section is a
   different hand-made piece sitting on it: a paper collage, a transit map,
   index cards on cork, a storyboard, a miniature cardboard town, a card
   catalog, a postcard and a cutting mat. The nine logo petals are cut from
   construction paper and tie the pieces together.
   Rules that keep it readable: text always sits on paper (never on texture),
   ink is dark and bold, tilts stay under 1.2 degrees, and "Simple view"
   (Reading tools) removes every decoration.
   Loaded after site.css, so it overrides tokens and component looks.
   ========================================================================== */

:root {
  --table: #ecdcc0;
  --table-deep: #e1cba6;
  --paper: #ecdcc0;          /* body background = the table */
  --band: #f5ead7;           /* kraft runner */
  --band-2: #efe4f4;
  --surface: #fffdf7;        /* drawing paper */
  --surface-2: #faf4e8;
  --kraft: #d6b88c;
  --kraft-ink: #3b2a17;
  --cork: #c99c64;
  --mat: #1d5b4c;            /* cutting mat */
  --ink: #23180f;
  --ink-2: #47372a;
  --ink-3: #5a4836;
  --line: #dcc8a6;
  --line-strong: #a3865c;
  --shadow: 0 1px 1px rgba(70, 45, 20, .14), 0 12px 22px -12px rgba(70, 45, 20, .55);
  --shadow-lift: 0 2px 2px rgba(70, 45, 20, .14), 0 18px 30px -14px rgba(70, 45, 20, .6);
  --tape: rgba(244, 232, 196, .82);
  --font-display: "Shantell Sans", "Fredoka", "Comic Neue", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Shantell Sans", "Segoe Print", cursive;
  --body-weight: 500;
  --sketch: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --sketch-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --c-safe: var(--c-ink, var(--teal));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --table: #2a2019; --table-deep: #241b15; --paper: #2a2019; --band: #32271f; --band-2: #2f2638;
    --surface: #3a2f26; --surface-2: #42362c; --kraft: #5a4630; --kraft-ink: #f6e9d5; --cork: #5b4127; --mat: #12382f;
    --ink: #fbf3e6; --ink-2: #eadbc5; --ink-3: #d9c7ad; --line: #574738; --line-strong: #8d755a;
    --shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 22px -12px rgba(0, 0, 0, .8);
    --shadow-lift: 0 2px 2px rgba(0, 0, 0, .4), 0 18px 30px -14px rgba(0, 0, 0, .85);
    --tape: rgba(225, 205, 150, .38);
    --action: #63d6ae; --action-hover: #8ee5c7; --on-action: #0b261d; --link: #9cc8ff;
  }
}
:root[data-theme="dark"] {
  --table: #2a2019; --table-deep: #241b15; --paper: #2a2019; --band: #32271f; --band-2: #2f2638;
  --surface: #3a2f26; --surface-2: #42362c; --kraft: #5a4630; --kraft-ink: #f6e9d5; --cork: #5b4127; --mat: #12382f;
  --ink: #fbf3e6; --ink-2: #eadbc5; --ink-3: #d9c7ad; --line: #574738; --line-strong: #8d755a;
  --shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 22px -12px rgba(0, 0, 0, .8);
  --shadow-lift: 0 2px 2px rgba(0, 0, 0, .4), 0 18px 30px -14px rgba(0, 0, 0, .85);
  --tape: rgba(225, 205, 150, .38);
  --action: #63d6ae; --action-hover: #8ee5c7; --on-action: #0b261d; --link: #9cc8ff;
}

/* ---------- The table ---------- */
body {
  font-weight: var(--body-weight);
  background-color: var(--table);
  background-image:
    var(--grain),
    radial-gradient(circle at 6% 14%, rgba(255, 194, 14, .20) 0 22px, transparent 23px),
    radial-gradient(circle at 7.6% 15.2%, rgba(255, 194, 14, .20) 0 7px, transparent 8px),
    radial-gradient(circle at 93% 31%, rgba(28, 179, 229, .16) 0 30px, transparent 31px),
    radial-gradient(circle at 91% 33.5%, rgba(28, 179, 229, .16) 0 9px, transparent 10px),
    radial-gradient(circle at 4% 58%, rgba(202, 26, 147, .12) 0 26px, transparent 27px),
    radial-gradient(circle at 96% 74%, rgba(123, 190, 43, .16) 0 24px, transparent 25px),
    radial-gradient(circle at 8% 88%, rgba(255, 122, 18, .14) 0 20px, transparent 21px),
    repeating-linear-gradient(177deg, rgba(140, 95, 45, .06) 0 1px, transparent 1px 8px, rgba(140, 95, 45, .045) 8px 10px, transparent 10px 23px);
}
p, li, dd, td { font-weight: var(--body-weight); }
strong, b, th, dt { font-weight: 800; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.005em; }
h1 { font-weight: 800; }
.hand { font-family: var(--font-hand); font-weight: 700; font-size: 1.45em; line-height: 1.1; color: var(--c-safe); }

/* Paper pieces: cards, doors and panels look like cut paper with tape */
.card, .door, .service-panel, .person, .faq details, .table-wrap, .form-card, .tool-panel, .paper {
  background-color: var(--surface);
  background-image: var(--fiber);
  border: 0;
  border-radius: 3px;
  box-shadow: var(--shadow);
  position: relative;
}
.card-link:hover, .door:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px) rotate(0deg) !important; }
.taped::before, .door::before, .tool-card::before, .person::before, .paper.taped::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .2));
  box-shadow: 0 1px 2px rgba(70, 45, 20, .18);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
  pointer-events: none; z-index: 2;
}
.c-yellow.taped::before, .c-yellow.door::before { background-color: rgba(255, 210, 60, .62); }
.c-orange.taped::before, .c-orange.door::before { background-color: rgba(255, 150, 70, .55); }
.c-magenta.taped::before, .c-magenta.door::before { background-color: rgba(240, 120, 200, .5); }
.c-sky.taped::before, .c-sky.door::before { background-color: rgba(120, 210, 240, .55); }
.c-green.taped::before, .c-green.door::before { background-color: rgba(160, 215, 90, .55); }
.c-purple.taped::before, .c-purple.door::before { background-color: rgba(170, 120, 215, .5); }
.c-blue.taped::before, .c-blue.door::before { background-color: rgba(90, 170, 235, .5); }
.c-indigo.taped::before, .c-indigo.door::before { background-color: rgba(130, 130, 220, .5); }
.c-red.taped::before, .c-red.door::before { background-color: rgba(240, 110, 110, .5); }

/* Gentle hand-placed tilts */
.grid > .card:nth-child(4n+1), .doors > .door:nth-child(3n+1), .tilt-l { transform: rotate(-.7deg); }
.grid > .card:nth-child(4n+2), .doors > .door:nth-child(3n+2), .tilt-r { transform: rotate(.6deg); }
.grid > .card:nth-child(4n+3), .doors > .door:nth-child(3n+3) { transform: rotate(-.3deg); }
.grid > .card:nth-child(4n+4) { transform: rotate(.9deg); }

/* Colored paper edge on cards with a petal class */
.card[class*="c-"] { border-top: 6px solid var(--c); }
.door { background-color: var(--surface); border-top: 8px solid var(--c); padding-top: var(--space-6); }
.door .door-icon { border-radius: 50% 50% 50% 8px; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }

/* Pinking-shears edge (zigzag) */
.pinked { position: relative; }
.pinked::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background:
    linear-gradient(-45deg, transparent 7px, var(--pinked-color, var(--surface)) 0) 0 0 / 14px 14px repeat-x,
    linear-gradient(45deg, transparent 7px, var(--pinked-color, var(--surface)) 0) 0 0 / 14px 14px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(70, 45, 20, .16));
  pointer-events: none;
}

/* Masking-tape labels (eyebrows) */
.eyebrow {
  font-family: var(--font-body); font-weight: 800; letter-spacing: .06em;
  color: var(--ink); background: var(--tape);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .25));
  padding: .3em .9em .3em .7em;
  clip-path: polygon(2% 6%, 98% 0, 100% 48%, 97% 100%, 0 94%, 1.5% 50%);
  box-shadow: 0 1px 2px rgba(70, 45, 20, .2);
  transform: rotate(-1.2deg);
}
.eyebrow::before { background: var(--c, var(--petal-green)); }

/* ---------- Header: a strip of drawing paper with folder tabs ---------- */
.utility { background: var(--kraft); border-bottom: 0; color: var(--kraft-ink); }
.utility a { color: var(--kraft-ink); }
.utility a:hover { color: var(--kraft-ink); }
.utility .btn-ghost { color: var(--kraft-ink); }
.site-header {
  background: var(--surface);
  background-image: var(--fiber);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: 0 6px 14px -10px rgba(70, 45, 20, .6);
}
.primary-nav a {
  border-radius: var(--sketch);
  border: 2px solid transparent;
  font-weight: 800;
}
.primary-nav a:hover { background: var(--c-tint); border-color: var(--c); }
.primary-nav a[aria-current="page"] { background: var(--c-tint); box-shadow: none; border-color: var(--c); border-radius: var(--sketch); }
.primary-nav a .dot { box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.primary-nav .nav-portal a { background: var(--ink); color: var(--surface); }
.primary-nav .nav-portal a:hover, .primary-nav .nav-portal a[aria-current="page"] { background: var(--ink-2); color: var(--surface); border-color: var(--ink); }
@media (max-width: 1239px) {
  .site-header.menu-open .primary-nav { background: var(--surface); }
  .site-header.menu-open .primary-nav a { background: var(--surface-2); border: 2px solid var(--line-strong); }
}
.reading-panel { background: var(--surface); background-image: var(--fiber); }
.seg button { border-radius: var(--sketch); border-width: 2px; }

/* ---------- Buttons: chunky construction paper ---------- */
.btn { border-radius: var(--sketch); font-weight: 800; }
.btn-primary { background: var(--action); color: var(--on-action); box-shadow: 0 4px 0 color-mix(in srgb, var(--action) 60%, #000); }
.btn-primary:hover { box-shadow: 0 6px 0 color-mix(in srgb, var(--action) 60%, #000); transform: translateY(-2px); }
.btn-primary:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--action) 60%, #000); transform: translateY(2px); }
.btn-secondary { background: var(--surface); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.btn-secondary:hover { background: var(--surface-2); transform: translateY(-1px); }
.btn-quiet { border-radius: var(--sketch-2); }
.chip { border-radius: var(--sketch); font-weight: 800; }
.chip-outline { border: 2px solid var(--line-strong); }
.badge { border-radius: var(--sketch-2); }
input, select, textarea { border-radius: 6px; }
.copy-btn { border-radius: var(--sketch); }

/* ---------- Page header for inner pages: a torn paper banner ---------- */
.page-hero { background: transparent; padding-block: var(--space-6) var(--space-6); }
.page-hero .wrap { position: relative; }
.page-hero .wrap > .page-hero-paper, .page-hero-paper {
  background-color: var(--surface); background-image: var(--fiber);
  padding: var(--space-6) var(--space-6) var(--space-6);
  box-shadow: var(--shadow); border-top: 10px solid var(--c, var(--petal-green));
  display: flex; flex-direction: column; gap: var(--space-4); position: relative;
  transform: rotate(-.4deg);
}
.page-hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
.breadcrumbs a, .breadcrumbs ol { color: var(--ink-2); }

/* Sections sit on the table; banded sections become a kraft runner */
.band, .band-2 {
  background-color: var(--band);
  background-image: var(--fiber);
  box-shadow: inset 0 10px 14px -14px rgba(70, 45, 20, .5), inset 0 -10px 14px -14px rgba(70, 45, 20, .5);
}
.section-head h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.section-head p { color: var(--ink-2); font-weight: 500; }

/* In-short summary as a sticky note */
.in-short {
  background: #fff3b0; color: #23180f; border-radius: 2px; box-shadow: var(--shadow);
  transform: rotate(-.5deg); position: relative;
}
.in-short h2, .in-short li { color: #23180f; }
.in-short li .ico { background: rgba(255, 255, 255, .7); color: #5b4300; border-radius: 50%; }

/* Steps: numbered paper circles */
.steps > li::before { border-radius: 50%; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); font-weight: 800; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.steps > li { background: var(--surface); background-image: var(--fiber); padding: var(--space-4); box-shadow: var(--shadow); border-radius: 3px; }

/* Callouts: notes clipped to the page */
.callout { border-radius: 3px; box-shadow: var(--shadow); border-left-width: 8px; background-color: var(--surface); background-image: var(--fiber); }
.callout.ok { background-color: var(--ok-tint); }
.callout.warn { background-color: var(--warn-tint); }
.callout.safety { background-color: var(--bad-tint); }

/* CTA band: a postcard */
.cta-band {
  background: var(--surface); background-image: var(--fiber); color: var(--ink);
  border-radius: 4px; box-shadow: var(--shadow-lift);
  border: 0; outline: 10px solid transparent;
  background-clip: padding-box;
}
.cta-band::before {
  content: ""; position: absolute; inset: 10px; border: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg, #ec2227 0 14px, transparent 14px 28px, #0a89da 28px 42px, transparent 42px 56px) top / 100% 8px no-repeat,
    repeating-linear-gradient(135deg, #ec2227 0 14px, transparent 14px 28px, #0a89da 28px 42px, transparent 42px 56px) bottom / 100% 8px no-repeat;
}
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--ink-2); }
.cta-band .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.cta-band .btn-secondary:hover { background: var(--surface-2); }
.cta-band .btn-primary { background: var(--action); color: var(--on-action); }
.cta-band .btn-primary:hover { background: var(--action-hover); color: var(--on-action); }
.cta-band .petal-deco { opacity: .95; }

/* ---------- Footer: a self-healing cutting mat with a ruler edge ---------- */
.site-footer {
  position: relative; margin-top: var(--space-8);
  background-color: var(--mat);
  background-image:
    linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: #f1fbf7; border-top: 0;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px;
  background-color: #f2e3c4;
  background-image:
    repeating-linear-gradient(90deg, #3b2a17 0 2px, transparent 2px 60px),
    repeating-linear-gradient(90deg, #3b2a17 0 1px, transparent 1px 12px);
  background-size: 100% 16px, 100% 9px;
  background-repeat: no-repeat;
  box-shadow: 0 -3px 8px rgba(70, 45, 20, .25);
}
.site-footer h2, .site-footer a, .site-footer p, .site-footer li { color: #f1fbf7; }
.site-footer .muted, .site-footer .small.muted { color: #d4ece4; }
.site-footer a { text-decoration: underline; text-decoration-thickness: .08em; }
.site-footer a:hover { color: #fff3b0; }
.site-footer .logo-light { display: none !important; }
.site-footer .logo-dark { display: inline-block !important; }
.site-footer .footer-safety { background: #fff3b0; color: #23180f; border-radius: 2px; transform: rotate(-.4deg); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .6); }
.site-footer .footer-safety p, .site-footer .footer-safety strong { color: #23180f; }
.site-footer .footer-legal, .site-footer .footer-legal p, .site-footer .footer-legal a { color: #e3f5ee; }

/* ==========================================================================
   New craft pieces
   ========================================================================== */

/* ---------- Home hero: paper collage ---------- */
.collage-hero { padding-block: var(--space-6) var(--space-7); overflow: hidden; }
.collage-hero .wrap { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .collage-hero .wrap { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); } }
.hero-sheet {
  background-color: var(--surface); background-image: var(--fiber);
  padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); box-shadow: var(--shadow-lift);
  transform: rotate(-.8deg); position: relative; display: flex; flex-direction: column; gap: var(--space-5);
}
.hero-sheet::before { content: ""; position: absolute; top: -13px; left: 18px; width: 110px; height: 26px; background: rgba(255, 210, 60, .66); transform: rotate(-6deg); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.hero-sheet::after { content: ""; position: absolute; top: -10px; right: 26px; width: 96px; height: 24px; background: rgba(120, 210, 240, .6); transform: rotate(5deg); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.hero-sheet h1 { font-size: clamp(2.1rem, 1.25rem + 3.3vw, 3.5rem); line-height: 1.06; }
.marker { background: linear-gradient(100deg, transparent 0 2%, rgba(255, 194, 14, .55) 2% 97%, transparent 97%) 0 62% / 100% 58% no-repeat; padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.marker-green { background-image: linear-gradient(100deg, transparent 0 2%, rgba(123, 190, 43, .45) 2% 97%, transparent 97%); }
.marker-sky { background-image: linear-gradient(100deg, transparent 0 2%, rgba(28, 179, 229, .38) 2% 97%, transparent 97%); }
.hero-sheet .lead { color: var(--ink); font-size: var(--step-1); font-weight: 500; }
.hero-facts { display: grid; gap: var(--space-2); list-style: none; padding: 0; }
.hero-facts li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .6rem; margin: 0; font-weight: 600; max-width: none; }
.hero-facts .icon { color: var(--teal); margin-top: .15em; }

/* The petal collage: nine construction-paper petals plus stickers */
.petal-collage { position: relative; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.petal-collage .collage-art { width: 100%; max-width: 600px; height: auto; overflow: visible; }
.petal-collage .paper-petal { filter: url(#rough-paper); }
.petal-collage .petal-btn { cursor: pointer; }
.petal-collage .petal-btn .petal-shape { transition: transform .25s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.petal-collage .petal-btn:hover .petal-shape, .petal-collage .petal-btn[aria-pressed="true"] .petal-shape { transform: scale(1.08) rotate(-2deg); }
.petal-collage .petal-btn:focus { outline: none; }
.petal-collage .petal-btn:focus-visible .petal-ring { stroke: var(--focus); stroke-width: 6; }
.petal-collage .petal-icon { color: #fff; pointer-events: none; }
/* The petals unfurl one by one when the page opens, then rest */
.petal-collage .petal-btn .paper-petal { transform-box: fill-box; transform-origin: 50% 100%; animation: petal-unfurl .9s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes petal-unfurl { from { transform: scale(.15, .25); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.petal-collage [data-bloom-center] { animation: fade-up .6s ease-out both; animation-delay: .9s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.petal-collage .petal-btn:hover .paper-petal { filter: url(#rough-paper) brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .petal-collage .petal-btn .paper-petal, .petal-collage [data-bloom-center] { animation: none; } }
:root[data-motion="reduce"] .petal-collage .petal-btn .paper-petal, :root[data-motion="reduce"] .petal-collage [data-bloom-center] { animation: none; }
.collage-note {
  width: 100%; max-width: 560px; min-height: 10.5rem; position: relative;
  background: #fff3b0; color: #23180f; padding: var(--space-5) var(--space-5) var(--space-4);
  box-shadow: var(--shadow); transform: rotate(.8deg); display: flex; flex-direction: column; gap: var(--space-2);
}
.collage-note::before { content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 35%, #ff8a8d, #c0161b 60%); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.collage-note h3 { color: #23180f; font-size: var(--step-1); display: flex; gap: .5em; align-items: center; }
.collage-note p, .collage-note li { color: #2b2014; }
.collage-note .svc-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.collage-note .chip { background: rgba(255, 255, 255, .75); color: #23180f; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; list-style: none; padding: 0; }
.chip-row li { margin: 0; }
.chip-btn {
  font: inherit; font-weight: 800; font-size: var(--step--1); cursor: pointer;
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .35em .85em;
  border-radius: var(--sketch); border: 2px solid var(--c); background: var(--surface); color: var(--ink);
}
.chip-btn .dot { width: .6em; height: .85em; border-radius: 100% 0 100% 0 / 100% 0 100% 0; background: var(--c); transform: rotate(-20deg); }
.chip-btn[aria-pressed="true"] { background: var(--c-tint); box-shadow: 0 3px 0 var(--c); }

/* Stickers: little life themes scattered on the table */
.stickers { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; list-style: none; padding: 0; }
.stickers li { margin: 0; }
.sticker {
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .45em;
  padding: .45em .9em .45em .5em; min-height: 46px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--ink); font-weight: 800; font-size: var(--step--1);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(70, 45, 20, .15), 0 6px 10px -4px rgba(70, 45, 20, .45);
  transition: transform .15s ease;
}
.sticker .sticker-ico { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.sticker .sticker-ico .icon { width: 1.15rem; height: 1.15rem; }
.stickers li:nth-child(odd) .sticker { transform: rotate(-2deg); }
.stickers li:nth-child(even) .sticker { transform: rotate(2deg); }
.sticker:hover { transform: rotate(0) scale(1.04); }
.sticker[aria-pressed="true"] { background: var(--c-tint); box-shadow: 0 0 0 3px var(--c), 0 6px 10px -4px rgba(70, 45, 20, .45); }

/* ---------- Transit map: the suggested route ---------- */
.route-poster {
  background-color: var(--surface); background-image: var(--fiber);
  box-shadow: var(--shadow-lift); padding: var(--space-6) var(--space-5); position: relative;
  transform: rotate(.3deg);
}
.route-poster::before, .route-poster::after { content: ""; position: absolute; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b8f0ff, #0a89da 60%); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.route-poster::before { left: 14px; }
.route-poster::after { right: 14px; }
.route-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.route-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.route-badge { display: inline-flex; align-items: center; gap: .5em; font-weight: 800; background: var(--ink); color: var(--surface); padding: .35em .8em; border-radius: 8px; }
.route-line { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); position: relative; counter-reset: stop; }
.route-line > li { margin: 0; max-width: none; position: relative; counter-increment: stop; }
.route-line a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .25rem var(--space-3); align-items: start; text-decoration: none; color: var(--ink); padding: .5rem; border-radius: var(--sketch); }
.route-line a:hover { background: var(--c-tint); }
.stop-dot {
  grid-row: span 2; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 6px solid var(--c); font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  color: var(--ink); position: relative; z-index: 1;
}
.stop-name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.2; }
.stop-desc { color: var(--ink-2); font-size: var(--step--1); font-weight: 500; }
.route-line > li.is-here .stop-dot { background: var(--c); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--c); }
.route-line > li.is-here .stop-name::after { content: "You are here"; display: inline-block; margin-left: .5em; font-family: var(--font-hand); font-size: 1.25em; color: var(--c-safe); transform: rotate(-3deg); }
/* Vertical line on small screens */
.route-line::before { content: ""; position: absolute; left: calc(.5rem + 1.6rem - 7px); top: 1.6rem; bottom: 1.6rem; width: 14px; border-radius: 4px; background: repeating-linear-gradient(180deg, #6b4a2b 0 6px, transparent 6px 14px), linear-gradient(90deg, transparent 2px, #8a8f94 2px 5px, transparent 5px 9px, #8a8f94 9px 12px, transparent 12px); }
@media (min-width: 900px) {
  .route-line { grid-template-columns: repeat(var(--stops, 6), minmax(0, 1fr)); gap: var(--space-2); }
  .route-line::before { left: calc(100% / var(--stops, 6) / 2); right: calc(100% / var(--stops, 6) / 2); top: calc(.5rem + 1.6rem - 7px); bottom: auto; width: auto; height: 14px; background: repeating-linear-gradient(90deg, #6b4a2b 0 6px, transparent 6px 14px), linear-gradient(180deg, transparent 2px, #8a8f94 2px 5px, transparent 5px 9px, #8a8f94 9px 12px, transparent 12px); }
  .route-line a { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .stop-dot { grid-row: auto; }
  .route-line > li.is-here .stop-name::after { display: block; margin: .2em 0 0; }
}

/* The tram: parked at the stop you are on, after rolling in along the line */
.route-tram { position: absolute; z-index: 2; width: 100px; height: 27px; left: 0; top: -6px; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); animation: tram-arrive-v 1.4s cubic-bezier(.2, .9, .3, 1.05) both, tram-bob 3s ease-in-out 1.4s infinite; }
.route-tram svg { width: 100%; height: 100%; overflow: visible; }
@keyframes tram-arrive-v { from { transform: translateY(-120px); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 899px) { .route-line > li.is-here { padding-top: 30px; } .route-line > li.is-here .route-tram { top: -2px; } }
@keyframes tram-arrive { from { transform: translateX(-60vw); opacity: 0; } 60% { opacity: 1; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes tram-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@media (min-width: 900px) {
  .route-tram { left: 50%; top: calc(2.1rem - 44px); width: 150px; height: 40px; transform: translateX(-50%); animation: tram-arrive 1.6s cubic-bezier(.2, .9, .3, 1.05) both, tram-bob 3s ease-in-out 1.6s infinite; }
  .route-line > li.is-here { padding-top: 1.4rem; }
  .route-line > li:not(.is-here) a { padding-top: calc(.5rem + 1.4rem); }
}
@media (prefers-reduced-motion: reduce) { .route-tram { animation: none; transform: translateX(-50%); } }
:root[data-motion="reduce"] .route-tram { animation: none; }
:root[data-look="simple"] .route-tram { display: none; }

/* Next-stop ticket at the bottom of route pages */
.ticket {
  display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: center;
  background: #fff6dc; color: #23180f; padding: var(--space-5) var(--space-6);
  position: relative; box-shadow: var(--shadow);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  border-top: 8px solid var(--c, var(--petal-indigo));
}
@media (min-width: 760px) { .ticket { grid-template-columns: auto minmax(0, 1fr) auto; } }
.ticket .ticket-stub { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: var(--step--1); color: #23180f; border-right: 2px dashed rgba(35, 24, 15, .35); padding-right: var(--space-4); display: flex; flex-direction: column; gap: .2rem; }
.ticket .ticket-stub .big { font-size: 2.2rem; letter-spacing: 0; line-height: 1; }
.ticket h2 { font-size: var(--step-2); color: #23180f; }
.ticket p { color: #3b2c1f; }
.ticket .btn-primary { background: #0a6b57; color: #fff; box-shadow: 0 4px 0 #064337; }
@media (max-width: 759px) { .ticket .ticket-stub { border-right: 0; border-bottom: 2px dashed rgba(35, 24, 15, .35); padding: 0 0 var(--space-3); flex-direction: row; gap: .6rem; align-items: baseline; } }

/* ---------- Corkboard with index cards ---------- */
.corkboard {
  background-color: var(--cork);
  background-image:
    radial-gradient(rgba(90, 55, 20, .35) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 235, 200, .25) 1px, transparent 1.6px),
    var(--grain);
  background-size: 9px 9px, 13px 13px, auto;
  background-position: 0 0, 4px 6px, 0 0;
  border: 14px solid #8a5a2b; border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15), var(--shadow-lift);
  padding: var(--space-6) var(--space-5);
}
.index-cards { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.index-cards > li { margin: 0; max-width: none; }
.index-card {
  height: 100%; position: relative; background-color: #fffef9; color: #23180f;
  background-image: linear-gradient(#e06b6b, #e06b6b), repeating-linear-gradient(transparent 0 1.55rem, rgba(60, 120, 200, .22) 1.55rem calc(1.55rem + 1px));
  background-size: 100% 2px, 100% 100%; background-position: 0 3.6rem, 0 3.7rem; background-repeat: no-repeat, repeat-y;
  padding: var(--space-4) var(--space-4) var(--space-5); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.index-cards > li:nth-child(odd) .index-card { transform: rotate(-1deg); }
.index-cards > li:nth-child(even) .index-card { transform: rotate(.9deg); }
.index-card::before { content: ""; position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .8), var(--c) 55%); box-shadow: 0 3px 3px rgba(0, 0, 0, .4); }
.index-card h3 { font-size: var(--step-1); color: #23180f; display: flex; gap: .5em; align-items: center; min-height: 2.6rem; }
.index-card h3 .icon { color: var(--c-ink); flex: none; }
.index-card p, .index-card li { color: #2f2418; line-height: 1.55rem; }
.index-card ul { padding-left: 1.1em; display: grid; gap: 0; }
.index-card li + li { margin: 0; }

/* ---------- Storyboard (two services) ---------- */
.storyboard { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.story-panel { background: var(--surface); background-image: var(--fiber); box-shadow: var(--shadow); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.story-frame {
  border: 4px solid var(--ink); border-radius: 4px; aspect-ratio: 16 / 7; position: relative; overflow: hidden;
  background: var(--c-tint); display: grid; place-items: center;
}
.story-frame .scene-tag { position: absolute; top: 0; left: 0; background: var(--ink); color: var(--surface); font-family: var(--font-display); font-weight: 800; padding: .25em .7em; font-size: var(--step--1); letter-spacing: .06em; }
.story-frame .scene-art { width: 92%; height: 82%; color: var(--c-ink); }
.story-panel h3 { font-size: var(--step-2); }
.story-panel .code { font-family: var(--font-display); font-weight: 800; color: var(--c-safe); }

/* Film strip for "how it works" steps */
.filmstrip {
  list-style: none; margin: 0; padding: 30px 0; display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  background-color: #1d1712;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 10px, #f3e7d3 10px 22px, transparent 22px 34px),
    repeating-linear-gradient(90deg, transparent 0 10px, #f3e7d3 10px 22px, transparent 22px 34px);
  background-size: 100% 12px, 100% 12px; background-position: 0 9px, 0 calc(100% - 9px); background-repeat: no-repeat;
  border-radius: 4px; box-shadow: var(--shadow-lift); counter-reset: frame;
}
.filmstrip > li { counter-increment: frame; margin: 0 6px; max-width: none; background: var(--surface); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); border-top: 6px solid var(--c, var(--petal-yellow)); }
.filmstrip > li + li { margin-top: 0; }
.filmstrip > li::before { content: "Step " counter(frame); font-family: var(--font-display); font-weight: 800; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--c-safe); }
.filmstrip h3 { font-size: var(--step-1); }
.filmstrip p { color: var(--ink-2); font-size: var(--step--1); }
@media (max-width: 700px) { .filmstrip > li + li { margin-top: 8px; } }

/* ---------- Miniature cardboard town (service area) ---------- */
.town-set { background: #bfe3f2; border-radius: 6px; box-shadow: var(--shadow-lift); padding: var(--space-6) var(--space-4) 0; position: relative; overflow: hidden; }
.town-set::before { content: ""; position: absolute; right: 7%; top: 18px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff1a6, #ffc20e 70%); box-shadow: 0 0 0 10px rgba(255, 194, 14, .18); }
.town { list-style: none; margin: 0; padding: 0 0 54px; display: flex; flex-wrap: wrap; gap: 26px 12px; justify-content: center; align-items: flex-end; position: relative; z-index: 1; }
.town > li { margin: 0; max-width: none; }
.house {
  --w: 8.6rem; position: relative; width: var(--w); min-height: 4.4rem; padding: .55rem .4rem .45rem;
  background: var(--house, #f7e2c0); color: #23180f; text-align: center;
  font-weight: 800; font-size: .92rem; line-height: 1.2; display: grid; place-items: center;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08), 0 6px 0 -2px rgba(70, 45, 20, .25);
  margin-top: 2.4rem; border-radius: 2px;
}
.house::before { content: ""; position: absolute; left: -8px; right: -8px; bottom: 100%; height: 2.4rem; background: var(--roof, #ec2227); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.house::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 22px; margin-left: -9px; background: rgba(60, 35, 15, .55); border-radius: 9px 9px 0 0; }
.house span { position: relative; z-index: 1; padding-bottom: 20px; }
.town > li:nth-child(9n+1) .house { --roof: #ffc20e; --house: #fff4d6; }
.town > li:nth-child(9n+2) .house { --roof: #ff7a12; --house: #ffe9d6; }
.town > li:nth-child(9n+3) .house { --roof: #ec2227; --house: #fde4e4; }
.town > li:nth-child(9n+4) .house { --roof: #ca1a93; --house: #fae0f1; }
.town > li:nth-child(9n+5) .house { --roof: #6f2da1; --house: #efe4f7; }
.town > li:nth-child(9n+6) .house { --roof: #34359b; --house: #e6e6f7; }
.town > li:nth-child(9n+7) .house { --roof: #0a89da; --house: #dcf0fc; }
.town > li:nth-child(9n+8) .house { --roof: #1cb3e5; --house: #dcf4fb; }
.town > li:nth-child(9n+9) .house { --roof: #7bbe2b; --house: #ebf6dd; }
.town > li:nth-child(odd) .house { transform: rotate(-1deg); }
.town > li.home-base .house { --w: 10.5rem; --house: #fff; }
.town > li.home-base .house span::before { content: "★ "; color: #0a6b57; }
.road { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #4b4f55; z-index: 0; }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2px; background: repeating-linear-gradient(90deg, #ffd24d 0 28px, transparent 28px 52px); }
.town-bus { position: absolute; bottom: 6px; left: 6%; z-index: 2; width: 88px; height: 34px; color: #fff; }
.town-legend { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Polaroid and notebook paper (About) ---------- */
.polaroid { background: #fff; padding: 14px 14px 18px; box-shadow: var(--shadow-lift); transform: rotate(-2deg); display: inline-flex; flex-direction: column; gap: .6rem; max-width: 280px; }
.polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #eee; }
.polaroid figcaption { font-family: var(--font-hand); font-size: 1.6rem; font-weight: 700; color: #23180f; text-align: center; line-height: 1.1; }
.notebook {
  background-color: #fffef8; color: #23180f; position: relative; box-shadow: var(--shadow);
  background-image: linear-gradient(90deg, transparent 3.2rem, rgba(224, 107, 107, .65) 3.2rem 3.35rem, transparent 3.35rem), repeating-linear-gradient(transparent 0 calc(1.75rem - 1px), rgba(60, 120, 200, .25) calc(1.75rem - 1px) 1.75rem);
  background-position: 0 0, 0 .6rem;
  padding: var(--space-5) var(--space-5) var(--space-5) 4.3rem; line-height: 1.75rem;
  display: flex; flex-direction: column; gap: 1.75rem;
}
.notebook::before { content: ""; position: absolute; left: 1.1rem; top: 1.5rem; bottom: 1.5rem; width: 16px; background: radial-gradient(circle, var(--table) 6px, transparent 7px) 0 0 / 16px 6rem repeat-y; }
.notebook p, .notebook li, .notebook h2, .notebook h3 { color: #23180f; line-height: 1.75rem; }
.notebook h2 { font-size: var(--step-3); line-height: 1.2; }
.notebook ul { padding-left: 1.1em; display: grid; gap: 0; }
.notebook li + li { margin: 0; }
:root[data-theme="dark"] .notebook, :root[data-theme="dark"] .index-card { filter: brightness(.94); }

/* Price tag and calendar note */
.price-tag { position: relative; display: inline-flex; flex-direction: column; gap: .2rem; background: var(--kraft); color: var(--kraft-ink); padding: var(--space-4) var(--space-5) var(--space-4) 3rem; clip-path: polygon(1.6rem 0, 100% 0, 100% 100%, 1.6rem 100%, 0 50%); box-shadow: var(--shadow); font-weight: 800; }
.price-tag::before { content: ""; position: absolute; left: 1.15rem; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--table); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.price-tag .amount { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; }
.week-note { background: var(--surface); background-image: var(--fiber); box-shadow: var(--shadow); padding: var(--space-4) var(--space-5); border-top: 26px solid #c4161c; position: relative; }
.week-note::before { content: "My week"; position: absolute; top: -24px; left: 12px; color: #fff; font-weight: 800; font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; }
.week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; list-style: none; padding: 0; margin: var(--space-3) 0; }
.week-days li { margin: 0; text-align: center; padding: .45rem 0; border-radius: 4px; font-weight: 800; font-size: var(--step--1); background: var(--surface-2); color: var(--ink-3); }
.week-days li.on { background: var(--green-tint); color: var(--green-ink); box-shadow: inset 0 0 0 2px var(--petal-green); }

/* ---------- Pegboard (tools) ---------- */
.pegboard {
  background-color: #d8b98c;
  background-image: radial-gradient(circle, rgba(70, 45, 20, .55) 3px, transparent 3.6px), var(--grain);
  background-size: 28px 28px, auto; background-position: 14px 14px, 0 0;
  padding: var(--space-6) var(--space-5); border-radius: 6px; box-shadow: var(--shadow-lift);
}
:root[data-theme="dark"] .pegboard { background-color: #5a4630; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pegboard { background-color: #5a4630; } }

/* ---------- Card catalog (resources by journey stage) ---------- */
.catalog { background: #9a6a3a; background-image: var(--grain), linear-gradient(180deg, #a87543, #8d5f32); padding: var(--space-4); border-radius: 8px; box-shadow: var(--shadow-lift); display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.drawer {
  font: inherit; cursor: pointer; text-align: left; color: #23180f; position: relative;
  background: linear-gradient(180deg, #e9c99b, #d9b380); border: 0; border-radius: 4px; padding: var(--space-4) var(--space-4) var(--space-5);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; gap: .35rem; min-height: 9rem;
}
.drawer .label-holder { align-self: center; background: #fffef6; border: 3px solid #b0894a; border-radius: 3px; padding: .25em .7em; font-weight: 800; font-family: var(--font-display); text-align: center; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
.drawer .drawer-desc { font-size: var(--step--1); font-weight: 600; color: #2b1f12; text-align: center; }
.drawer::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 46px; height: 10px; margin-left: -23px; border-radius: 0 0 23px 23px; background: #6b4a1f; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .4); }
.drawer:hover { transform: translateY(-2px); }
.drawer[aria-expanded="true"] { background: linear-gradient(180deg, #fff3b0, #f2dc86); transform: translateY(6px); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .1), 0 0 0 4px #fff, 0 0 0 7px var(--ink); }
.drawer-panel { margin-top: var(--space-5); }

/* ---------- Clipboard (forms) ---------- */
.clipboard {
  position: relative; background: #b9874f; background-image: var(--grain), linear-gradient(160deg, #c39159, #a8773f);
  border-radius: 14px; padding: 56px 14px 14px; box-shadow: var(--shadow-lift);
}
.clipboard::before { content: ""; position: absolute; top: 12px; left: 50%; width: 150px; height: 46px; margin-left: -75px; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #e4e7ea, #9aa3ab); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); z-index: 2; }
.clipboard > .clip-paper { background: var(--surface); background-image: var(--fiber); padding: var(--space-6) var(--space-5) var(--space-5); border-radius: 2px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.postcard {
  background: var(--surface); background-image: var(--fiber); box-shadow: var(--shadow-lift); position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5); border: 10px solid transparent;
  border-image: repeating-linear-gradient(135deg, #ec2227 0 12px, var(--surface) 12px 24px, #0a89da 24px 36px, var(--surface) 36px 48px) 10;
}
.postcard .stamp { position: absolute; top: 14px; right: 14px; width: 64px; height: 76px; background: var(--c-tint, #fff3b0); border: 3px dotted var(--line-strong); display: grid; place-items: center; transform: rotate(4deg); }
.postcard .stamp svg { width: 46px; height: 46px; }

/* ---------- Native forms (replace Jotform) ---------- */
.aform { display: flex; flex-direction: column; gap: var(--space-4); }
.aform .field { display: flex; flex-direction: column; gap: .35rem; }
.aform label, .aform legend { font-weight: 800; }
.aform .hint { font-size: var(--step--1); color: var(--ink-2); font-weight: 500; }
.aform input[type="text"], .aform input[type="email"], .aform input[type="tel"], .aform input[type="date"], .aform input[type="time"], .aform input[type="number"], .aform select, .aform textarea {
  font: inherit; font-weight: 500; width: 100%; min-height: 48px; padding: .6em .8em; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: 6px;
}
.aform textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.aform input:focus, .aform select:focus, .aform textarea:focus { border-color: var(--ink); }
.aform fieldset { border: 2px dashed var(--line-strong); border-radius: 6px; padding: var(--space-3) var(--space-4) var(--space-4); margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.aform .choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.aform .choice { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; min-height: 40px; }
.aform .choice input { width: 1.3rem; height: 1.3rem; accent-color: var(--action); }
.aform .row-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.aform .req { color: var(--bad-ink); font-weight: 800; }
.aform .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: var(--space-3) var(--space-4); border-radius: 4px; font-weight: 700; }
.form-status.ok { background: var(--ok-tint); color: var(--ok-ink); }
.form-status.bad { background: var(--bad-tint); color: var(--bad-ink); }
.form-status.info { background: var(--band-2); color: var(--ink); }
.field-error { color: var(--bad-ink); font-weight: 700; font-size: var(--step--1); }
[aria-invalid="true"] { border-color: var(--bad-ink) !important; }

/* ---------- Save to my shelf (favorites) ---------- */
.fav-btn {
  font: inherit; font-size: var(--step--1); font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35em; min-height: 40px; padding: .3em .75em;
  border: 2px solid var(--line-strong); border-radius: var(--sketch); background: var(--surface); color: var(--ink);
}
.fav-btn[aria-pressed="true"] { background: #fff3b0; border-color: #b8860b; color: #23180f; }
.fav-btn .icon { width: 1.1em; height: 1.1em; }
.fav-btn[aria-pressed="true"] .icon { fill: #ffc20e; }

/* ---------- My Amelio portal: a planner binder ---------- */
.binder { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 960px) { .binder { grid-template-columns: minmax(0, 1fr) 4.4rem; } }
.binder-pages { background: var(--surface); background-image: var(--fiber); box-shadow: var(--shadow-lift); padding: clamp(1rem, .6rem + 2vw, 2.2rem); border-left: 18px solid #34359b; position: relative; min-height: 26rem; }
.binder-pages::before { content: ""; position: absolute; left: -12px; top: 2rem; bottom: 2rem; width: 6px; background: radial-gradient(circle, #d9dbe0 5px, transparent 6px) 0 0 / 6px 4.5rem repeat-y; }
.binder-tabs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.binder-tabs li { margin: 0; }
@media (min-width: 960px) {
  .binder-tabs { flex-direction: column; margin: 2rem 0 0; gap: 8px; grid-column: 2; grid-row: 1; }
  .binder-tabs button { writing-mode: vertical-rl; min-height: 7rem; border-radius: 0 12px 12px 0 !important; padding: .8em .4em !important; }
}
.binder-tabs button {
  font: inherit; font-weight: 800; cursor: pointer; min-height: 44px; padding: .4em .9em; border: 0;
  border-radius: 12px 12px 0 0; background: var(--c); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); opacity: .78;
}
.binder-tabs button[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.c-yellow .binder-tab-label, .binder-tabs .c-yellow button, .binder-tabs .c-sky button, .binder-tabs .c-green button, .binder-tabs .c-orange button { color: #23180f; text-shadow: none; }
.portal-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.portal-head h2 { font-size: var(--step-3); }
.who-chip { display: inline-flex; align-items: center; gap: .5em; padding: .35em .8em; border-radius: var(--sketch); background: var(--surface-2); border: 2px solid var(--line-strong); font-weight: 800; }
.demo-banner { background: repeating-linear-gradient(135deg, #fff3b0 0 18px, #ffe68a 18px 36px); color: #23180f; padding: var(--space-3) var(--space-4); font-weight: 700; box-shadow: var(--shadow); margin-bottom: var(--space-5); }
.demo-banner p { color: #23180f; }
.folder-grid { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.folder-grid > li { margin: 0; max-width: none; }
.folder {
  font: inherit; text-align: left; cursor: pointer; width: 100%; height: 100%; position: relative; color: #23180f;
  background: #f4d48a; border: 0; border-radius: 0 8px 8px 8px; padding: var(--space-5) var(--space-4) var(--space-4);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08), var(--shadow); display: flex; flex-direction: column; gap: .4rem; margin-top: 18px;
}
.folder::before { content: ""; position: absolute; left: 0; top: -18px; width: 42%; height: 20px; background: #f4d48a; border-radius: 8px 8px 0 0; }
.folder:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.folder h3 { font-size: var(--step-1); color: #23180f; }
.folder p { color: #3b2c1f; font-size: var(--step--1); }
.folder .meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.folder .chip { background: rgba(255, 255, 255, .7); color: #23180f; }
.summary-board { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.note-card { background: #fff3b0; color: #23180f; padding: var(--space-4); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .4rem; }
.note-card:nth-child(3n+2) { background: #d9f2fb; transform: rotate(.6deg); }
.note-card:nth-child(3n+3) { background: #f9dff0; transform: rotate(-.5deg); }
.note-card:nth-child(3n+1) { transform: rotate(-.4deg); }
.note-card h3, .note-card h4 { font-size: var(--step-0); color: #23180f; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.note-card p, .note-card li { color: #2b2014; }
.note-card .big { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; line-height: 1.1; }
.ai-summary { background: var(--surface); border: 3px solid var(--petal-purple); border-radius: var(--sketch); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.ai-summary .src { font-size: var(--step--1); color: var(--ink-2); }
.log-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.log-list > li { margin: 0; max-width: none; background: var(--surface-2); border-left: 6px solid var(--c, var(--petal-sky)); padding: var(--space-3) var(--space-4); border-radius: 0 4px 4px 0; display: grid; gap: .3rem; }
.log-list .log-meta { font-size: var(--step--1); color: var(--ink-2); font-weight: 700; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.shelf { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.shelf > li { margin: 0; max-width: none; background: var(--surface-2); border-bottom: 6px solid #8a5a2b; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: .35rem; }
.portal-table { width: 100%; }
.mini-stat { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.empty-note { color: var(--ink-2); font-style: italic; }
.portal-section + .portal-section { margin-top: var(--space-6); }
.portal-section > h3 { font-size: var(--step-2); margin-bottom: var(--space-3); display: flex; align-items: center; gap: .5rem; }
.signin-card { max-width: 34rem; margin-inline: auto; }

/* ---------- Simple view (Reading tools): no decorations at all ---------- */
:root[data-look="simple"] body, :root[data-contrast="high"] body { background-image: none; background-color: var(--surface-2); }
/* Straighten the paper, but keep drawings (SVG) intact */
:root[data-look="simple"] *:not(svg *), :root[data-contrast="high"] *:not(svg *) { transform: none !important; }
:root[data-look="simple"] .taped::before, :root[data-look="simple"] .door::before, :root[data-look="simple"] .tool-card::before, :root[data-look="simple"] .person::before,
:root[data-look="simple"] .hero-sheet::before, :root[data-look="simple"] .hero-sheet::after, :root[data-look="simple"] .route-poster::before, :root[data-look="simple"] .route-poster::after,
:root[data-look="simple"] .index-card::before, :root[data-look="simple"] .collage-note::before, :root[data-look="simple"] .pinked::after, :root[data-look="simple"] .site-footer::before,
:root[data-look="simple"] .cta-band::before, :root[data-look="simple"] .town-set::before, :root[data-look="simple"] .notebook::before, :root[data-look="simple"] .clipboard::before,
:root[data-contrast="high"] .taped::before, :root[data-contrast="high"] .door::before, :root[data-contrast="high"] .tool-card::before, :root[data-contrast="high"] .person::before,
:root[data-contrast="high"] .hero-sheet::before, :root[data-contrast="high"] .hero-sheet::after, :root[data-contrast="high"] .index-card::before, :root[data-contrast="high"] .collage-note::before { display: none !important; }
:root[data-look="simple"] .card, :root[data-look="simple"] .door, :root[data-look="simple"] .service-panel, :root[data-look="simple"] .hero-sheet, :root[data-look="simple"] .route-poster,
:root[data-look="simple"] .page-hero-paper, :root[data-look="simple"] .story-panel, :root[data-look="simple"] .binder-pages, :root[data-look="simple"] .steps > li, :root[data-look="simple"] .callout,
:root[data-look="simple"] .person, :root[data-look="simple"] .faq details, :root[data-look="simple"] .clip-paper, :root[data-look="simple"] .postcard, :root[data-look="simple"] .week-note {
  background-image: none; box-shadow: none; border: 2px solid var(--line-strong);
}
:root[data-look="simple"] .corkboard, :root[data-look="simple"] .pegboard, :root[data-look="simple"] .catalog, :root[data-look="simple"] .clipboard, :root[data-look="simple"] .town-set {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
:root[data-look="simple"] .index-card, :root[data-look="simple"] .notebook { background-image: none; border: 2px solid var(--line-strong); box-shadow: none; padding-left: var(--space-4); }
:root[data-look="simple"] .drawer { background: var(--surface); color: var(--ink); border: 2px solid var(--line-strong); box-shadow: none; }
:root[data-look="simple"] .drawer .drawer-desc { color: var(--ink-2); }
:root[data-look="simple"] .drawer::after { display: none; }
:root[data-look="simple"] .drawer[aria-expanded="true"] { background: var(--c-tint, var(--band)); border-color: var(--ink); }
:root[data-look="simple"] .site-footer { background-image: none; }
:root[data-look="simple"] .eyebrow { background: none; clip-path: none; box-shadow: none; padding: 0; }
:root[data-look="simple"] .marker { background: none; }
:root[data-look="simple"] .band, :root[data-look="simple"] .band-2 { background-image: none; box-shadow: none; }
:root[data-look="simple"] .ticket { -webkit-mask: none; mask: none; }
:root[data-look="simple"] .filmstrip { background: transparent; padding: 0; box-shadow: none; gap: var(--space-3); }
:root[data-look="simple"] .road, :root[data-look="simple"] .town-bus, :root[data-look="simple"] .house::before, :root[data-look="simple"] .house::after { display: none; }
:root[data-look="simple"] .house { margin-top: 0; box-shadow: none; border: 2px solid var(--line-strong); }
:root[data-look="simple"] .town { padding-bottom: 0; }
:root[data-look="simple"] .paper-petal { filter: none; }
:root[data-look="simple"] .hand { font-family: var(--font-body); font-size: 1em; }
:root[data-look="simple"] .route-line > li.is-here .stop-name::after { font-family: var(--font-body); font-size: .9em; }

/* Reduced motion: no lifts */
@media (prefers-reduced-motion: reduce) {
  .card-link:hover, .door:hover, .btn-primary:hover, .drawer:hover, .folder:hover, .sticker:hover { transform: none !important; }
}
:root[data-motion="reduce"] .card-link:hover, :root[data-motion="reduce"] .door:hover, :root[data-motion="reduce"] .btn-primary:hover, :root[data-motion="reduce"] .drawer:hover { transform: none !important; }

@media print {
  body { background: #fff !important; }
  .card, .door, .notebook, .index-card, .hero-sheet { box-shadow: none !important; transform: none !important; }
  .corkboard, .pegboard, .catalog, .clipboard, .town-set { background: none !important; border: 0 !important; box-shadow: none !important; }
}

/* ---------- Fixes after the first look ---------- */
.eyebrow { align-self: flex-start; width: fit-content; max-width: 100%; }
.primary-nav ul { gap: 2px; }
.primary-nav a { white-space: nowrap; padding: .5em .6em; font-size: .95rem; }
@media (min-width: 1000px) { .collage-hero .wrap { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.hero-sheet h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.05rem); line-height: 1.1; }
.index-card h3 { min-height: 3.1rem; align-items: flex-start; }
.town-set::before { right: 3%; top: 8px; width: 46px; height: 46px; }
.binder { grid-template-columns: minmax(0, 1fr); }
.binder > * { min-width: 0; }
.binder-tabs button { opacity: 1; }
.binder-tabs button[aria-selected="false"] { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); }
.binder-tabs button[aria-selected="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.binder-tabs .c-purple button, .binder-tabs .c-indigo button { color: #fff; }

/* ---------- My Week and My Day planner ---------- */
.planner-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -2px; position: relative; z-index: 1; }
.planner-tabs [role="tab"] {
  font: inherit; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: .45em;
  min-height: 48px; padding: .5em 1em; border: 0; border-radius: 12px 12px 0 0; background: var(--c-tint); color: var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08);
}
.planner-tabs [role="tab"][aria-selected="true"] { background: var(--surface); box-shadow: 0 -4px 0 var(--c) inset, 0 -2px 6px rgba(70, 45, 20, .15); text-decoration: underline; text-underline-offset: .25em; }
.planner-panel { background: var(--surface); background-image: var(--fiber); box-shadow: var(--shadow-lift); padding: clamp(1rem, .6rem + 2vw, 2rem); display: flex; flex-direction: column; gap: var(--space-5); }
.week-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.planner-add { padding: var(--space-4) var(--space-5); }
.aform .row-3, .row-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.week-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.day-col { background: var(--surface-2); border-top: 6px solid var(--line-strong); padding: var(--space-3) var(--space-4) var(--space-4); border-radius: 0 0 6px 6px; min-width: 0; }
.day-col.is-today { border-top-color: var(--petal-yellow); background: var(--yellow-tint); }
.day-col h3 { font-size: var(--step-1); }
.day-col h4, .day-card h4 { font-family: var(--font-body); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-top: var(--space-3); }
.today-tag { font-family: var(--font-body); font-size: var(--step--1); background: var(--ink); color: var(--surface); padding: .1em .5em; border-radius: 6px; vertical-align: middle; }
.plan-list { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .4rem; }
.plan-list li, .plan-item { margin: 0; max-width: none; }
.plan-item { display: flex; align-items: flex-start; gap: .4rem; background: var(--surface); border-left: 5px solid var(--c); padding: .4rem .5rem; border-radius: 0 4px 4px 0; }
.plan-item .check { flex: 1; min-width: 0; }
.plan-item.is-done > .check span { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); }
.plan-kind { display: block; font-size: var(--step--1); color: var(--ink-2); font-weight: 600; }
.icon-btn { font: inherit; cursor: pointer; border: 2px solid transparent; background: transparent; color: var(--ink-2); min-width: 40px; min-height: 40px; border-radius: 8px; display: inline-grid; place-items: center; }
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.day-layout { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.day-card { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.day-card h3 { font-size: var(--step-1); display: flex; gap: .5rem; align-items: center; }
.feelings { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.feel { display: inline-flex; align-items: center; gap: .45em; padding: .4em .8em; min-height: 48px; border: 2px solid var(--line-strong); border-radius: var(--sketch); cursor: pointer; font-weight: 700; background: var(--surface); }
.feel input { width: 1.2rem; height: 1.2rem; accent-color: var(--action); }
.feel-emoji { font-size: 1.4rem; line-height: 1; }
.feel:has(input:checked) { background: var(--yellow-tint); border-color: var(--ink); }
.progress { height: 14px; background: rgba(0, 0, 0, .08); border-radius: 7px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .15); }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, #7bbe2b, #0a89da); }
#fu-list li { display: flex; align-items: flex-start; gap: .4rem; }
#fu-list li .check { flex: 1; }
#fu-list li.is-late .plan-kind { color: var(--bad-ink); font-weight: 800; }

/* ---------- My Amelio: shared calendar ---------- */
.cal-week { display: grid; gap: 6px; grid-template-columns: repeat(7, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.cal-week > li { margin: 0; max-width: none; background: var(--surface-2); border-top: 5px solid var(--line-strong); padding: .4rem; min-height: 6.5rem; border-radius: 0 0 4px 4px; min-width: 0; }
.cal-week > li.is-today { border-top-color: var(--petal-yellow); background: var(--yellow-tint); }
.cal-week .cal-day { font-weight: 800; font-size: var(--step--1); display: block; }
.cal-week .cal-ev { display: block; font-size: .82rem; line-height: 1.25; margin-top: .3rem; padding: .2rem .3rem; background: var(--surface); border-left: 4px solid var(--c, var(--petal-blue)); overflow-wrap: anywhere; }
@media (max-width: 760px) { .cal-week { grid-template-columns: 1fr; } .cal-week > li { min-height: 0; } }
.agenda { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.agenda > li { margin: 0; max-width: none; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; background: var(--surface-2); padding: var(--space-3); border-left: 6px solid var(--c, var(--petal-blue)); border-radius: 0 4px 4px 0; }
.agenda .when { font-weight: 800; line-height: 1.25; }
.agenda .when small { display: block; font-weight: 600; color: var(--ink-2); }
.agenda .what p { margin: 0; }
.agenda .acts { display: flex; flex-wrap: wrap; gap: .3rem; }
@media (max-width: 600px) { .agenda > li { grid-template-columns: 1fr; } }
.feed-box { background: var(--band-2); padding: var(--space-4); border-radius: 6px; display: flex; flex-direction: column; gap: var(--space-2); }
.feed-box code { overflow-wrap: anywhere; font-size: .85rem; background: var(--surface); padding: .3rem .5rem; border-radius: 4px; }
:root[data-look="simple"] .planner-panel { background-image: none; box-shadow: none; border: 2px solid var(--line-strong); }

/* Paper pieces that stay light in dark mode keep light-mode ink inside them */
.index-card, .notebook, .note-card, .folder {
  --ink: #23180f; --ink-2: #47372a; --ink-3: #5a4836; --surface: #fffdf7; --surface-2: #faf4e8;
  --line: #dcc8a6; --line-strong: #a3865c; --link: #1b5ca2; --action: #0a6b57; --action-hover: #075646; --on-action: #fff; --focus: #29298e;
  --yellow-ink: #765600; --yellow-tint: #fff4cc; --orange-ink: #9a4300; --orange-tint: #ffe9d6; --red-ink: #a3171b; --red-tint: #fce2e2;
  --magenta-ink: #8e1167; --magenta-tint: #fadff0; --purple-ink: #5b2486; --purple-tint: #eee4f6; --indigo-ink: #2d2e86; --indigo-tint: #e5e5f6;
  --blue-ink: #0b5f96; --blue-tint: #dceffb; --sky-ink: #08678a; --sky-tint: #dbf3fa; --green-ink: #3e690e; --green-tint: #e9f5da;
  --ok-ink: #1f6a2a; --ok-tint: #e3f4e3; --bad-ink: #a3171b; --bad-tint: #fce2e2;
  color: var(--ink);
}
.index-card.c-yellow { --c-ink: #765600; } .index-card.c-orange { --c-ink: #9a4300; } .index-card.c-red { --c-ink: #a3171b; }
.index-card.c-magenta { --c-ink: #8e1167; } .index-card.c-purple { --c-ink: #5b2486; } .index-card.c-indigo { --c-ink: #2d2e86; }
.index-card.c-blue { --c-ink: #0b5f96; } .index-card.c-sky { --c-ink: #08678a; } .index-card.c-green { --c-ink: #3e690e; }

/* ---------- Personal dashboard ---------- */
.dash-top { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); border-top: 8px solid var(--petal-indigo); }
.dash-top h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.inline-field { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.inline-field input { flex: 1 1 14rem; max-width: 22rem; }
.file-btn { position: relative; cursor: pointer; }
.file-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus-halo); }
.dash-custom { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); border: 3px dashed var(--line-strong); }
.custom-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.custom-list li { margin: 0; max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; background: var(--surface-2); padding: var(--space-2) var(--space-3); border-radius: 6px; }
.accent-pick { border: 0; padding: 0; margin: 0; }
.accent-pick legend { font-weight: 800; margin-bottom: var(--space-2); }
.accent-pick .choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.accent-pick .choice { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; min-height: 40px; }
.accent-pick .choice input { width: 1.2rem; height: 1.2rem; accent-color: var(--action); }
.accent-pick .dot { width: .8em; height: 1.1em; border-radius: 100% 0 100% 0 / 100% 0 100% 0; background: var(--c); transform: rotate(-20deg); }
.dash-grid { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.dash-panel { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); border-top: 8px solid var(--c, var(--petal-indigo)); min-width: 0; }
.dash-panel.wide { grid-column: 1 / -1; }
.dash-panel h3 { font-size: var(--step-2); display: flex; gap: .5rem; align-items: center; }
.dash-panel h4 { font-family: var(--font-body); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-top: var(--space-2); }
.dash-grid .dash-panel:nth-child(3n+2) { transform: rotate(.35deg); }
.dash-grid .dash-panel:nth-child(3n) { transform: rotate(-.3deg); }
.dash-grid .dash-panel.wide { transform: none; }
.shelf > li.is-pinned { border-bottom-color: var(--petal-yellow); background: var(--yellow-tint); }
.shelf-note { font-size: var(--step--1); background: var(--surface); padding: .3rem .5rem; border-left: 3px solid var(--line-strong); }
.shelf-acts { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .2rem; }
.note-edit { gap: var(--space-2); }
.note-edit label { font-weight: 800; font-size: var(--step--1); }
.add-link summary { cursor: pointer; font-weight: 800; color: var(--link); padding: .3rem 0; }
.add-link .aform { margin-top: var(--space-3); }
.dash-goals { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.dash-goals li { margin: 0; max-width: none; display: grid; gap: .3rem; }
.big-num { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 1; }
.big-num span { font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; }
.tool-status { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.tool-status li { margin: 0; max-width: none; display: grid; gap: .1rem; padding: .4rem 0; border-bottom: 1px dashed var(--line-strong); }
.tool-status li span { font-size: var(--step--1); color: var(--ink-2); }
.contact-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.contact-cards li { margin: 0; max-width: none; background: var(--surface-2); padding: var(--space-3); border-radius: 6px; display: flex; flex-direction: column; gap: .3rem; overflow-wrap: anywhere; }
.dash-more { margin-top: auto; font-weight: 800; }
.dash-more a { display: inline-flex; align-items: center; gap: .3rem; }
#dash-grid .check-list li.is-late .plan-kind { color: var(--bad-ink); font-weight: 800; }
:root[data-look="simple"] .dash-panel, :root[data-look="simple"] .dash-top, :root[data-look="simple"] .dash-custom { background-image: none; box-shadow: none; border: 2px solid var(--line-strong); transform: none; }
@media print {
  .dash-panel { break-inside: avoid; box-shadow: none !important; border: 1px solid #999 !important; transform: none !important; }
  .dash-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   The station: a stop on the Amelio Services Line, as a miniature train set.
   A folded paper map of the line, then the station building, the track and the
   train on the page's own background. The same set sits beside the departures
   board at the bottom of the page. assets/js/station.mjs runs arrivals and
   departures; Less movement / Simple view park the train.
   ========================================================================== */
.station-set { padding-block: var(--space-4) 0; overflow: clip; }
.station-set + .page-hero, .station-set + .collage-hero { padding-top: var(--space-6); }
.line-map-head { margin-bottom: var(--space-3); }
.line-map-head h2 { font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: .5em; color: var(--ink); }
.line-badge { display: inline-flex; align-items: center; gap: .4em; font-size: var(--step--1); background: var(--ink); color: var(--surface); padding: .3em .7em; border-radius: 8px; letter-spacing: .02em; }
.line-badge .icon { width: 1.1em; height: 1.1em; }

/* the map: a sheet of paper you could hold */
.line-map { position: relative; margin: 0 auto; max-width: 1040px; filter: drop-shadow(0 10px 10px rgba(35, 24, 15, .28)) drop-shadow(0 2px 2px rgba(35, 24, 15, .2)); transform: rotate(-.6deg); }
.line-map > svg { display: block; width: 100%; height: auto; overflow: visible; }
.line-map > .lm-tall { display: none; }
@media (max-width: 899px) { .line-map > .lm-wide { display: none; } .line-map > .lm-tall { display: block; max-width: 520px; margin: 0 auto; } .line-map { transform: rotate(-.4deg); } }
.lm-stop { cursor: pointer; outline: none; }
.lm-stop .lm-ring { transition: stroke-width .15s; }
.lm-stop:hover .lm-ring, .lm-stop:focus-visible .lm-ring { fill: #fffdf3; stroke-width: 4; }
.lm-stop .lm-hit { pointer-events: all; }
.lm-stop:hover .lm-pill, .lm-stop:focus-visible .lm-pill { fill: #ffe9a8; stroke-width: 3.2; }
.lm-stop.is-here:hover .lm-pill { fill: #23180f; }
.lm-stop:hover .lm-label, .lm-stop:focus-visible .lm-label { transform-box: fill-box; }
.lm-stop:focus-visible .lm-hit { stroke: var(--focus, #29298e); stroke-width: 4; stroke-opacity: 1; }
.lm-stop:hover .lm-name, .lm-stop:focus-visible .lm-name { text-decoration: underline; text-underline-offset: 3px; }
.lm-stop:focus-visible .lm-ring { stroke: var(--focus, #29298e); stroke-width: 5; }
.lm-stop.is-here .lm-label rect { fill: #23180f; } .lm-stop.is-here .lm-name { fill: #fff6dc; }
.lm-halo { animation: lm-pulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lm-pulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: .2; } }
.lm-pin { animation: lm-bob 2.4s ease-in-out infinite; }
@keyframes lm-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
:root[data-theme="dark"] .line-map { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }

/* the train set (the track drawing is 12000 units wide, so the line runs off both edges of any screen and the section clips it;
   at 2400 it stopped short of a 27-inch monitor's edges: draft 10, post-deploy item 3) */
.station-scene { --ts: .68; --ds: .86; position: relative; height: calc(318px * var(--ds)); margin-top: calc(-78px * var(--ds)); overflow: visible; }   /* the station building peeks over the bottom edge of the map */
.depart-set .station-scene { margin-top: var(--space-6); }
@media (max-width: 899px) { .station-scene { --ts: .58; --ds: .72; margin-top: calc(-70px * var(--ds)); } }
@media (max-width: 479px) { .station-scene { --ts: .46; --ds: .58; margin-top: calc(-60px * var(--ds)); } }
.depart-set .station-scene { margin-top: var(--space-6); }
.stn-track { position: absolute; left: 50%; bottom: calc(14px * var(--ts)); width: calc(12000px * var(--ts)); height: calc(72px * var(--ts)); transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 2px 2px rgba(35, 24, 15, .25)); }
.stn-depot { position: absolute; left: 50%; bottom: calc(41px * var(--ts) - 8px * var(--ds)); width: calc(420px * var(--ds)); height: calc(310px * var(--ds)); transform: translateX(-50%); z-index: 0; filter: drop-shadow(0 8px 6px rgba(35, 24, 15, .28)); }
.stn-lamp circle { filter: drop-shadow(0 0 3px #ffe08a); }
:root:not([data-theme="dark"]) .stn-lamp circle { opacity: .75; filter: none; }
.stn-smoke circle { animation: stn-wisp 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.stn-smoke circle:nth-child(2) { animation-delay: -1.3s; } .stn-smoke circle:nth-child(3) { animation-delay: -2.6s; }
@keyframes stn-wisp { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3px, -6px) scale(1.15); } }

/* the train: parked at the platform, arriving from one side, leaving to the other */
.train { position: absolute; left: 50%; bottom: calc(2px * var(--ts)); width: calc(600px * var(--ts)); height: calc(168px * var(--ts)); margin-left: calc(-300px * var(--ts)); z-index: 2; --x: 0px; transform: translateX(var(--x)); }
.train-body { position: absolute; inset: 0; }
.train-art { width: 100%; height: 100%; overflow: visible; display: block; }
.train[data-dir="w"] .train-body { transform: scaleX(-1); }
.train .wheel { transform-box: fill-box; transform-origin: center; }
.train .tr-rod { transform-box: fill-box; transform-origin: center; }
.is-arriving .train { animation: tr-arrive 3s cubic-bezier(.15, .7, .25, 1) both; }
.is-leaving .train { animation: tr-leave 1.9s cubic-bezier(.6, 0, .9, .4) both; }
.is-parked .train { animation: tr-idle 4s ease-in-out infinite; }
@keyframes tr-arrive { from { transform: translateX(var(--from)); } to { transform: translateX(0); } }
@keyframes tr-leave { from { transform: translateX(0); } to { transform: translateX(var(--to)); } }
@keyframes tr-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
[data-dir="e"] .train { --from: calc(-50vw - 700px); --to: calc(50vw + 700px); }
[data-dir="w"] .train { --from: calc(50vw + 700px); --to: calc(-50vw - 700px); }
.is-arriving .train .wheel { animation: tr-spin 3s cubic-bezier(.15, .7, .25, 1) both; }
.is-leaving .train .wheel { animation: tr-spin-up 1.9s cubic-bezier(.6, 0, .9, .4) both; }
.is-arriving .train .tr-rod { animation: tr-rod 3s cubic-bezier(.15, .7, .25, 1) both; }
.is-leaving .train .tr-rod { animation: tr-rod-up 1.9s cubic-bezier(.6, 0, .9, .4) both; }
@keyframes tr-spin { from { rotate: 1800deg; } to { rotate: 0deg; } }
@keyframes tr-spin-up { from { rotate: 0deg; } to { rotate: 1440deg; } }
@keyframes tr-rod { 0.000% { translate: 0.00px 0.00px; } 2.500% { translate: 7.78px -3.22px; } 5.000% { translate: 11.00px -11.00px; } 7.500% { translate: 7.78px -18.78px; } 10.000% { translate: 0.00px -22.00px; } 12.500% { translate: -7.78px -18.78px; } 15.000% { translate: -11.00px -11.00px; } 17.500% { translate: -7.78px -3.22px; } 20.000% { translate: -0.00px 0.00px; } 22.500% { translate: 7.78px -3.22px; } 25.000% { translate: 11.00px -11.00px; } 27.500% { translate: 7.78px -18.78px; } 30.000% { translate: 0.00px -22.00px; } 32.500% { translate: -7.78px -18.78px; } 35.000% { translate: -11.00px -11.00px; } 37.500% { translate: -7.78px -3.22px; } 40.000% { translate: -0.00px 0.00px; } 42.500% { translate: 7.78px -3.22px; } 45.000% { translate: 11.00px -11.00px; } 47.500% { translate: 7.78px -18.78px; } 50.000% { translate: 0.00px -22.00px; } 52.500% { translate: -7.78px -18.78px; } 55.000% { translate: -11.00px -11.00px; } 57.500% { translate: -7.78px -3.22px; } 60.000% { translate: -0.00px 0.00px; } 62.500% { translate: 7.78px -3.22px; } 65.000% { translate: 11.00px -11.00px; } 67.500% { translate: 7.78px -18.78px; } 70.000% { translate: 0.00px -22.00px; } 72.500% { translate: -7.78px -18.78px; } 75.000% { translate: -11.00px -11.00px; } 77.500% { translate: -7.78px -3.22px; } 80.000% { translate: -0.00px 0.00px; } 82.500% { translate: 7.78px -3.22px; } 85.000% { translate: 11.00px -11.00px; } 87.500% { translate: 7.78px -18.78px; } 90.000% { translate: 0.00px -22.00px; } 92.500% { translate: -7.78px -18.78px; } 95.000% { translate: -11.00px -11.00px; } 97.500% { translate: -7.78px -3.22px; } 100.000% { translate: -0.00px 0.00px; } }
@keyframes tr-rod-up { 0.000% { translate: 0.00px 0.00px; } 3.125% { translate: 7.78px -3.22px; } 6.250% { translate: 11.00px -11.00px; } 9.375% { translate: 7.78px -18.78px; } 12.500% { translate: 0.00px -22.00px; } 15.625% { translate: -7.78px -18.78px; } 18.750% { translate: -11.00px -11.00px; } 21.875% { translate: -7.78px -3.22px; } 25.000% { translate: -0.00px 0.00px; } 28.125% { translate: 7.78px -3.22px; } 31.250% { translate: 11.00px -11.00px; } 34.375% { translate: 7.78px -18.78px; } 37.500% { translate: 0.00px -22.00px; } 40.625% { translate: -7.78px -18.78px; } 43.750% { translate: -11.00px -11.00px; } 46.875% { translate: -7.78px -3.22px; } 50.000% { translate: -0.00px 0.00px; } 53.125% { translate: 7.78px -3.22px; } 56.250% { translate: 11.00px -11.00px; } 59.375% { translate: 7.78px -18.78px; } 62.500% { translate: 0.00px -22.00px; } 65.625% { translate: -7.78px -18.78px; } 68.750% { translate: -11.00px -11.00px; } 71.875% { translate: -7.78px -3.22px; } 75.000% { translate: -0.00px 0.00px; } 78.125% { translate: 7.78px -3.22px; } 81.250% { translate: 11.00px -11.00px; } 84.375% { translate: 7.78px -18.78px; } 87.500% { translate: 0.00px -22.00px; } 90.625% { translate: -7.78px -18.78px; } 93.750% { translate: -11.00px -11.00px; } 96.875% { translate: -7.78px -3.22px; } 100.000% { translate: -0.00px 0.00px; } }
.is-leaving .train .tr-lamp, .is-arriving .train .tr-lamp { filter: drop-shadow(0 0 6px #fff6a8); }
.train .tr-bell { transform-box: fill-box; transform-origin: 50% 0; }
.train.is-ringing .tr-bell { animation: tr-ring .12s ease-in-out 0s 8 alternate, tr-settle .5s ease-out .96s 1; }
@keyframes tr-settle { 0% { rotate: 12deg; } 40% { rotate: -6deg; } 70% { rotate: 3deg; } 100% { rotate: 0deg; } }
@keyframes tr-ring { from { rotate: -24deg; } to { rotate: 24deg; } }
/* the bell button sits over the drawn bell (mirrored when the train faces west) */
.tr-bell-btn { position: absolute; left: calc(100% * 330 / 600 - 21px); top: calc(100% * 34 / 168 - 21px); width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 4; }
.train[data-dir="w"] .tr-bell-btn { left: calc(100% * 270 / 600 - 21px); }
.tr-bell-btn:hover, .tr-bell-btn:focus-visible { background: radial-gradient(circle, rgba(255, 226, 140, .6), transparent 70%); }
/* the bell asks to be rung: a little glint every few seconds, a nudge on hover, a full swing (and the ding-ding) on a click */
.train .tr-glint { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: tr-glint 5.5s ease-in-out 2s infinite; }
@keyframes tr-glint { 0%, 82%, 100% { opacity: 0; scale: .4; rotate: 0deg; } 88% { opacity: 1; scale: 1.15; rotate: 45deg; } 94% { opacity: 0; scale: .6; rotate: 90deg; } }
.train:has(.tr-bell-btn:hover) .tr-bell, .train:has(.tr-bell-btn:focus-visible) .tr-bell { animation: tr-nudge 1.1s ease-in-out infinite; }
@keyframes tr-nudge { 0%, 100% { rotate: 0deg; } 25% { rotate: -7deg; } 75% { rotate: 7deg; } }
.train.is-ringing .tr-clapper { animation: tr-clap .09s ease-in-out 0s 9 alternate; transform-box: fill-box; }
@keyframes tr-clap { from { translate: -2px 0; } to { translate: 2px 0; } }
.tr-bell-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed rgba(255, 226, 140, .0); transition: border-color .2s; }
.tr-bell-btn:hover::after { border-color: rgba(255, 226, 140, .85); }
@media (prefers-reduced-motion: reduce) { .train .tr-glint { animation: none; } .train:has(.tr-bell-btn:hover) .tr-bell { animation: none; } }
.tr-bell-btn:focus-visible { outline: 3px solid var(--focus, #29298e); outline-offset: 2px; }
.tr-waves { position: absolute; inset: 0; pointer-events: none; }
.tr-waves i { position: absolute; top: 2px; width: 10px; height: 16px; border: 2.5px solid #e2b23a; border-color: transparent #e2b23a transparent transparent; border-radius: 50%; opacity: 0; }
.tr-waves i:first-child { right: -6px; } .tr-waves i:last-child { left: -6px; transform: scaleX(-1); }
.is-ringing .tr-waves i { animation: tr-wave .45s ease-out 2; }
@keyframes tr-wave { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 6px -2px; } }
.is-ringing .tr-waves i:last-child { animation-name: tr-wave-l; }
@keyframes tr-wave-l { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: -6px -2px; } }

/* steam: puffs leave the stack and drift back over the train */
.smoke { position: absolute; left: calc(100% * 473 / 600); top: calc(100% * 20 / 168); width: 0; height: 0; z-index: 3; }
.train[data-dir="w"] .smoke { left: auto; right: calc(100% * 473 / 600); }
.smoke i { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #eef0f2 60%, #c9ced3); opacity: 0; --dx: -1; }
.train[data-dir="w"] .smoke i { --dx: 1; }
.is-arriving .smoke i, .is-leaving .smoke i { animation: tr-puff 1.5s ease-out infinite; }
.is-parked .smoke i { animation: tr-puff-idle 3.2s ease-out infinite; }
.smoke i:nth-child(2) { animation-delay: .25s !important; } .smoke i:nth-child(3) { animation-delay: .5s !important; } .smoke i:nth-child(4) { animation-delay: .75s !important; } .smoke i:nth-child(5) { animation-delay: 1s !important; } .smoke i:nth-child(6) { animation-delay: 1.25s !important; }
@keyframes tr-puff { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 12% { opacity: .95; } 100% { transform: translate(calc(var(--dx) * 120px), -70px) scale(2.6); opacity: 0; } }
@keyframes tr-puff-idle { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 15% { opacity: .55; } 100% { transform: translate(calc(var(--dx) * 16px), -46px) scale(1.4); opacity: 0; } }
.is-parked .smoke i:nth-child(n+4) { display: none; }

/* the departures board at the bottom of the page */
.depart-set { padding-block: var(--space-6) 0; overflow: clip; }
.depart-board { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: center; margin-block: 0; background: #fff6dc; color: #23180f; padding: var(--space-5) var(--space-6); border: 3px solid #23180f; border-radius: 16px; box-shadow: 0 6px 0 #23180f; position: relative; z-index: 1; }
.depart-board::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(35, 24, 15, .25); border-radius: 10px; pointer-events: none; }
@media (min-width: 760px) { .depart-board { grid-template-columns: auto minmax(0, 1fr) auto; } }
.db-stub { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: var(--step--1); color: #23180f; border-right: 2px dashed rgba(35, 24, 15, .35); padding-right: var(--space-4); display: flex; flex-direction: column; gap: .2rem; }
.db-stub .big { font-size: 2.2rem; letter-spacing: 0; line-height: 1; }
.depart-board h2, .depart-board h3 { font-size: var(--step-2); color: #23180f; }
.depart-board p { color: #3b2c1f; }
.depart-board .btn-primary { background: #0a6b57; color: #fff; box-shadow: 0 4px 0 #064337; }
@media (max-width: 759px) { .db-stub { border-right: 0; border-bottom: 2px dashed rgba(35, 24, 15, .35); padding: 0 0 var(--space-3); flex-direction: row; gap: .6rem; align-items: baseline; } }

/* landing by train inside a preview frame: see station.mjs landAtTop */
:root.is-landing, :root.is-landing body { height: 1px !important; overflow: hidden !important; scroll-padding: 0 !important; }

/* calm settings: everything stands still */
@media (prefers-reduced-motion: reduce) { .train, .train *, .smoke i, .lm-halo, .lm-pin, .stn-smoke circle { animation: none !important; } .smoke i:first-child { opacity: .5; transform: translate(0, -20px) scale(1.4); } }
:root[data-motion="reduce"] .train, :root[data-motion="reduce"] .train *, :root[data-motion="reduce"] .smoke i, :root[data-motion="reduce"] .lm-halo, :root[data-motion="reduce"] .lm-pin, :root[data-motion="reduce"] .stn-smoke circle { animation: none !important; }
:root[data-look="simple"] .station-scene { display: none; }
:root[data-look="simple"] .line-map { filter: none; transform: none; }
/* The five stations have full names in the header: a slightly smaller menu, and the menu itself is the way to
   How to get Started (the Contact button returns where the menu folds into Menu) */
@media (min-width: 1240px) {
  .site-header:not(.app-header) .primary-nav a { font-size: .86rem; padding: .5em .45em; }
  .site-header:not(.app-header) .primary-nav ul { gap: 0; }
  .site-header:not(.app-header) .header-actions .btn-get-started { display: none; }
  .site-header:not(.app-header) .wrap { gap: var(--space-3); }
}
/* The "Professional file" tab on the professionals page: one line, on its own paper, in every theme */
.theme-office .page-hero .wrap > .page-hero-paper::before { width: max-content !important; height: 26px !important; white-space: nowrap; transform: none !important; background: #f0dcae !important; color: #4a3a1c !important; top: -26px !important; left: 0 !important; right: auto !important; box-shadow: none !important; border: 0 !important; }