/* Comic: after instalanding.ai's manga-panel-dev-tool-page (MIT). A black-and-white comic
   issue: two inks only (#111 and paper #f8f8f5), halftone dot screens drawn in CSS, thick
   ink borders with hard offset shadows, Bangers for display (paper fill, ink stroke),
   Barlow Condensed for reading, JetBrains Mono for small labels.
   The hand-drawn line is an SVG displacement filter (inlined as a data URI, so nothing is
   fetched). It goes on outline overlays (::after) and on buttons, tags and badges, never
   on a box that holds body text, or the text would wobble too.
   Suits tattoo studios, comic and record shops, gaming cafes, barbers. */

:root[data-theme="comic"] {
  /* motion below the hero (see base.css) */
  --reveal-y: 0px; --reveal-scale: 0.85; --reveal-ease: cubic-bezier(0.3, 1.6, 0.5, 1); --nav-lift: 0 4px 0 #111; --reveal-in: stamp;
  --ink-raw: #111111;
  --paper: #f8f8f5;
  --bg: #f8f8f5;
  --bg-soft: #f8f8f5;
  --surface: #f8f8f5;
  --ink: #111111;
  --ink-2: #111111;
  --muted: #3f3f3d;
  --line: #111111;
  --accent: #111111;
  --primary: #111111;
  --primary-ink: #f8f8f5;
  --glass: #f8f8f5;
  --glass-border: #111111;

  --font-display: "Bangers", Impact, "Arial Narrow Bold", sans-serif;
  --font-body: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 400;
  --display-tracking: 0.02em;
  --display-leading: 1;

  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --shadow: 6px 6px 0 #111111;
  --card-border: 0;

  --slab-bg: #f8f8f5;
  --slab-ink: #111111;
  --footer-bg: #111111;
  --footer-ink: #f8f8f5;

  /* halftone screens: two dot grids offset by half a cell make the 45 degree look */
  --screen:
    radial-gradient(circle at 25% 25%, #111 1.2px, transparent 1.7px) 0 0 / 8px 8px,
    radial-gradient(circle at 75% 75%, #111 1.2px, transparent 1.7px) 0 0 / 8px 8px;
  --screen-lg:
    radial-gradient(circle at 25% 25%, #111 2.3px, transparent 2.9px) 0 0 / 12px 12px,
    radial-gradient(circle at 75% 75%, #111 2.3px, transparent 2.9px) 0 0 / 12px 12px;
  --screen-paper:
    radial-gradient(circle at 25% 25%, #f8f8f5 1.3px, transparent 1.8px) 0 0 / 8px 8px,
    radial-gradient(circle at 75% 75%, #f8f8f5 1.3px, transparent 1.8px) 0 0 / 8px 8px;
  --screen-paper-lg:
    radial-gradient(circle at 25% 25%, #f8f8f5 2.3px, transparent 2.9px) 0 0 / 12px 12px,
    radial-gradient(circle at 75% 75%, #f8f8f5 2.3px, transparent 2.9px) 0 0 / 12px 12px;

  --ph-1: var(--screen), #f8f8f5;
  --ph-2: var(--screen-lg), #f8f8f5;
  --ph-3: repeating-linear-gradient(-45deg, #111 0 2px, transparent 2px 9px), #f8f8f5;
  --ph-4: var(--screen), repeating-linear-gradient(45deg, transparent 0 14px, #111 14px 16px), #f8f8f5;
  --ph-5: var(--screen-paper-lg), #111;
  --ph-6: repeating-conic-gradient(from 0deg at 50% 115%, #111 0 3deg, #f8f8f5 3deg 9deg);

  /* the hand-drawn line: a strong wobble for outlines, a light one for tags and buttons.
     "-b" variants use another seed; showpiece motion swaps between them (line boil). */
  --wob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='2' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#w");
  --wob-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='2' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#w");
  --wob-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='2' seed='2' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#w");
  --wob-l-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#w");

  color-scheme: light;
  background: var(--screen-lg), #f8f8f5; /* the desk behind the page, seen on wide screens */

  & ::selection { background: #111; color: #f8f8f5; }
  & :focus-visible { outline: 3px solid #111; outline-offset: 3px; border-radius: 0; }

  /* the page is one panel with a thick frame; under 1380px it fills the window */
  & body {
    font: 500 21px/1.35 var(--font-body);
    letter-spacing: 0.01em;
  }
  @media (min-width: 1380px) {
    & body { max-width: 1340px; margin-inline: auto; border-inline: 5px solid #111; }
  }

  /* ---------- type ---------- */
  & h1, & h2 {
    color: #f8f8f5;
    -webkit-text-stroke: 0.11em #111;
    paint-order: stroke fill;
    text-shadow: none;
    filter: drop-shadow(4px 4px 0 #111);
    line-height: 0.98;
    letter-spacing: 0.03em;
  }
  & h2 { font-size: clamp(40px, 5.4vw, 66px); max-width: 16ch; }
  & h3, & h4 { font-size: 28px; letter-spacing: 0.04em; line-height: 1.05; }
  & p { margin-bottom: 0.8em; }
  & .lead { font-size: clamp(21px, 1.8vw, 25px); color: #111; line-height: 1.3; }
  & .note { font-size: 17px; color: var(--muted); }
  & .mono { font-weight: 500; }
  & a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
  & .contact-direct a:hover, & .visit-card address a:hover { text-decoration-style: wavy; }

  /* section eyebrow: a small ink tag, tilted */
  & .eyebrow {
    display: inline-block; margin: 0 0 20px; padding: 6px 11px;
    background: #111; color: #f8f8f5;
    font: 700 13px/1 var(--font-mono); letter-spacing: 0.1em;
    rotate: -2deg; filter: var(--wob-l);
  }

  /* ---------- buttons, pills ---------- */
  & .btn {
    height: 52px; padding: 0 24px; border: 3px solid #111;
    font: 400 22px/1 var(--font-display); letter-spacing: 0.06em;
    background: #f8f8f5; color: #111;
    box-shadow: 4px 4px 0 #111;
    filter: var(--wob-l);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  & .btn-sm { height: 42px; padding: 0 16px; font-size: 19px; border-width: 3px; }
  & .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #111; }
  & .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #111; }
  & .btn-primary { background: #111; color: #f8f8f5; box-shadow: 4px 4px 0 #f8f8f5, 7px 7px 0 #111; }
  & .btn-primary:hover { box-shadow: 6px 6px 0 #f8f8f5, 9px 9px 0 #111; }
  & .btn-primary:active { box-shadow: 0 0 0 #f8f8f5, 0 0 0 #111; }
  & .btn-ghost { background: #f8f8f5; color: #111; border-color: #111; }
  & .btn:disabled { opacity: 0.6; box-shadow: 2px 2px 0 #111; }
  & .btn-primary:focus-visible { outline-offset: 5px; }
  & .actions { gap: 18px 16px; }

  & .pill {
    padding: 5px 10px; border: 2px solid #111; background: #f8f8f5; color: #111;
    font: 700 12px/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
    filter: var(--wob-l);
  }

  /* ---------- outlines drawn as overlays: boxes with text never get the filter ---------- */
  & .card, & .plan, & .pricing-slab, & .faq-item, & .map, & .cm-lede, & .cm-bubble, & .cm-panel {
    position: relative; border: 0;
  }
  & .card::after, & .plan::after, & .pricing-slab::after, & .faq-item::after, & .map::after,
  & .cm-lede::after, & .cm-bubble::after, & .cm-panel::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border: 3px solid #111; border-radius: inherit;
    box-shadow: 6px 6px 0 #111;
    filter: var(--wob);
    transition: box-shadow 0.15s ease;
  }
  & .card, & .faq-item { transition: transform 0.15s ease; }
  & .card:hover::after, & .faq-item:hover::after { box-shadow: 9px 9px 0 #111; }
  & .card:hover, & .faq-item:hover { transform: translate(-2px, -2px); }
  & .form:hover { transform: none; }
  & .form:hover::after { box-shadow: 6px 6px 0 #111; }

  /* ---------- nav ---------- */
  & .nav { background: #f8f8f5; border-bottom: 4px solid #111; }
  /* a strip of halftone hangs under the bar */
  & .nav::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
    background: var(--screen);
    -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent);
  }
  & .brand-mark {
    width: 40px; height: 40px; border-radius: 0; background: #111; color: #f8f8f5;
    font: 400 28px/1 var(--font-display); rotate: -6deg; filter: var(--wob-l);
    box-shadow: 3px 3px 0 #f8f8f5, 5px 5px 0 #111;
  }
  & .brand-name { font: 400 30px/1 var(--font-display); letter-spacing: 0.05em; }
  @media (max-width: 720px) {
    & .brand-name { font-size: 24px; }
    & .brand-mark { width: 34px; height: 34px; font-size: 24px; }
    & .nav-inner { gap: 12px; }
  }
  & .nav-links ul { gap: 8px; }
  & .nav-links a {
    display: block; padding: 6px 12px; color: #111;
    font: 700 18px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  }
  & .nav-links a:hover { background: #111; color: #f8f8f5; }
  & .nav-phone { color: #111; font: 700 14px/1 var(--font-mono); }
  & .nav-menu summary { border: 3px solid #111; border-radius: 0; background: #f8f8f5; box-shadow: 3px 3px 0 #111; }
  & .nav-menu ul { border: 3px solid #111; background: #f8f8f5; box-shadow: 6px 6px 0 #111; }
  & .nav-menu a { font: 700 20px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; border-radius: 0; }
  & .nav-menu a:hover { background: #111; color: #f8f8f5; }

  /* ---------- signature hero: the cover ---------- */
  & .cm-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: clamp(36px, 5vw, 76px) clamp(56px, 7vw, 96px);
    background: var(--screen-lg), #f8f8f5;
    border-bottom: 4px solid #111;
  }
  /* a huge paper circle bleeds off the top left, behind the copy */
  & .cm-hero::before {
    content: ""; position: absolute; z-index: -2; border-radius: 50%;
    width: clamp(900px, 84vw, 1080px); aspect-ratio: 1; left: -26%; top: -34%;
    background: #f8f8f5; border: 5px solid #111; filter: var(--wob);
  }
  /* focus lines burst from behind the speech bubble */
  & .cm-hero::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: -10%; top: 0; width: 70%; height: 100%;
    background: repeating-conic-gradient(from 3deg at 62% 48%, #111 0 0.9deg, transparent 0.9deg 5deg);
    -webkit-mask: radial-gradient(circle at 62% 48%, transparent 0 18%, #000 34%, transparent 72%);
    mask: radial-gradient(circle at 62% 48%, transparent 0 18%, #000 34%, transparent 72%);
  }
  & .cm-cover { display: grid; gap: 52px; align-items: start; }
  @media (min-width: 900px) {
    & .cm-cover { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px 56px; }
  }
  & .cm-main { min-width: 0; }

  & .cm-issue { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 22px; }
  & .cm-tag {
    padding: 8px 12px; border: 3px solid #111; background: #f8f8f5; color: #111;
    font: 700 14px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: 3px 3px 0 #111; filter: var(--wob-l);
  }
  & .cm-tag-ink { background: #111; color: #f8f8f5; rotate: -2deg; box-shadow: 3px 3px 0 #f8f8f5, 5px 5px 0 #111; }
  & .cm-tag:not(.cm-tag-ink) { rotate: 1.5deg; }

  & .cm-title {
    font-size: clamp(46px, 6.2vw, 96px); line-height: 0.95; max-width: 13ch;
    margin: 6px 0 34px; rotate: -2deg; transform-origin: 0 100%;
    filter: drop-shadow(5px 5px 0 #111);
  }
  & .cm-lede { background: #f8f8f5; padding: 18px 22px 8px; max-width: 54ch; rotate: 0.4deg; }
  & .cm-lede .lead { margin-bottom: 10px; font-weight: 500; }
  & .cm-rev { background: #111; color: #f8f8f5; padding: 0 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

  /* the speech bubble: hours */
  & .cm-side { position: relative; display: grid; gap: 44px; min-width: 0; padding-bottom: 14px; }
  & .cm-bubble {
    background: #f8f8f5; border-radius: 34px / 28px; padding: 24px 26px 26px; rotate: 1.2deg;
  }
  & .cm-bubble::before {
    content: ""; position: absolute; z-index: 2; left: 16%; bottom: -17px; width: 30px; height: 30px;
    background: #f8f8f5; border-right: 3px solid #111; border-bottom: 3px solid #111;
    transform: skewX(-18deg) rotate(45deg);
  }
  & .cm-pow { position: absolute; z-index: 3; right: -6px; top: -44px; width: 92px; height: 92px; rotate: 12deg; filter: var(--wob-l); }
  & .cm-pow polygon { fill: #f8f8f5; stroke: #111; stroke-width: 3.2; stroke-linejoin: round; }
  & .cm-pow text { font: 400 54px var(--font-display); fill: #111; }
  & .cm-bubble-title, & .cm-panel-title { margin: 0 0 12px; font: 400 32px/1 var(--font-display); letter-spacing: 0.05em; }
  & .cm-hours { width: 100%; border-collapse: collapse; }
  & .cm-hours th, & .cm-hours td {
    padding: 7px 0; text-align: left; font-weight: 600; font-size: 20px; border-bottom: 2px dashed #111;
  }
  & .cm-hours tr:last-child th, & .cm-hours tr:last-child td { border-bottom: 0; }
  & .cm-hours td { text-align: right; font-size: 15px; font-weight: 700; white-space: nowrap; padding-left: 12px; }
  & .cm-hours .closed th { text-decoration: line-through; text-decoration-thickness: 2px; }
  & .cm-say { margin: 0; font-size: 22px; line-height: 1.25; }
  & .cm-note { margin: 12px 0 0; font-size: 17px; color: var(--muted); }

  /* the panel: featured services */
  & .cm-panel { background: #f8f8f5; rotate: -1deg; margin-top: 4px; }
  & .cm-panel-title {
    display: block; margin: 0; padding: 10px 18px 8px; background: #111; color: #f8f8f5;
    border: 3px solid #111; position: relative; z-index: 0;
  }
  & .cm-picks { padding: 6px 18px 14px; list-style: none; margin: 0; }
  & .cm-picks li + li { border-top: 2px dashed #111; }
  & .cm-picks a {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 0; text-decoration: none; font-weight: 700; font-size: 21px; line-height: 1.15;
  }
  & .cm-picks a:hover .cm-pick-name { text-decoration: underline wavy; text-underline-offset: 4px; }
  & .cm-num {
    display: grid; place-items: center; width: 30px; height: 30px; background: #111; color: #f8f8f5;
    font: 400 20px/1 var(--font-display); filter: var(--wob-l);
  }
  & .cm-pick-price { font-size: 14px; font-weight: 700; white-space: nowrap; }

  /* ---------- sections ---------- */
  /* dot-screen bands: the section head sits on a paper panel so words never meet dots */
  & .reviews, & .areas, & .faq {
    background: var(--screen), #f8f8f5;
    border-block: 4px solid #111;
  }
  & .reviews .section-head, & .areas .section-head, & .faq .section-head {
    background: #f8f8f5; padding: 22px 26px 20px; width: fit-content; max-width: 100%; position: relative;
  }
  & .reviews .section-head::after, & .areas .section-head::after, & .faq .section-head::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border: 3px solid #111; box-shadow: 6px 6px 0 #111; filter: var(--wob);
  }
  & .section-head { margin-bottom: clamp(36px, 4vw, 56px); }
  & .section-head .lead { margin-bottom: 0; }
  & .faq .section-head { align-self: start; }

  /* highlights: an ink band with hatched edges */
  & .highlights {
    border: 0; padding-block: 28px;
    background:
      repeating-linear-gradient(-45deg, #111 0 6px, #f8f8f5 6px 12px) top / 100% 10px no-repeat,
      repeating-linear-gradient(-45deg, #111 0 6px, #f8f8f5 6px 12px) bottom / 100% 10px no-repeat,
      #111;
    color: #f8f8f5;
  }
  & .marquee-track { color: #f8f8f5; font: 400 26px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
  & .marquee-track li::after { content: "\2605"; color: #f8f8f5; font-size: 18px; }

  /* services */
  & .group-title {
    display: inline-block; margin-bottom: 28px; padding: 6px 18px 4px; border: 0;
    background: #111; color: #f8f8f5; font-size: 30px; rotate: -1deg;
    filter: var(--wob-l);
  }
  & .service { padding: 24px 24px 22px; gap: 14px; }
  & .grid { gap: 30px; }
  & .index { padding: 5px 9px; background: #111; color: #f8f8f5; font: 700 12px/1 var(--font-mono); letter-spacing: 0.08em; }
  & .service-name { font-size: 32px; line-height: 1; }
  & .service-desc { font-size: 20px; color: #111; }
  & .service-foot { border-top: 2px dashed #111; padding-top: 14px; }
  & .price {
    display: inline-block; padding: 4px 10px 2px; border: 3px solid #111; rotate: -2deg;
    font: 400 28px/1 var(--font-display); letter-spacing: 0.04em; filter: var(--wob-l);
  }

  /* about */
  & .about-media, & .gallery-item {
    border: 4px solid #111; box-shadow: 8px 8px 0 #111; border-radius: 0;
  }
  & .about-media { rotate: 1deg; }
  & .about-copy p:not(.eyebrow) { color: #111; }
  & .stats { gap: 24px; }
  & .stat { border-top: 4px solid #111; padding-top: 10px; }
  & .stat dt { font: 700 13px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #111; }
  & .stat dd { font: 400 50px/1 var(--font-display); letter-spacing: 0.03em; margin-top: 6px; display: inline-block; filter: var(--wob-l); }

  /* placeholders */
  & .ph-label {
    background: #f8f8f5; color: #111; border: 2px solid #111; border-radius: 0;
    font: 700 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
  }

  /* gallery: a loose collage of panels */
  & .gallery-grid { gap: 30px; }
  & .gallery-grid li:nth-child(odd) .gallery-item { rotate: -1.2deg; }
  & .gallery-grid li:nth-child(even) .gallery-item { rotate: 0.9deg; }

  /* reviews: speech bubbles */
  & .reviews .grid { gap: 40px 30px; }
  & .review { padding: 26px 26px 22px; }
  & .review::before {
    content: ""; position: absolute; z-index: 2; left: 34px; bottom: -17px; width: 28px; height: 28px;
    background: #f8f8f5; border-right: 3px solid #111; border-bottom: 3px solid #111;
    transform: skewX(-18deg) rotate(45deg);
  }
  & .stars { color: #111; font-size: 22px; letter-spacing: 4px; }
  & .review blockquote { font-size: 23px; line-height: 1.25; font-weight: 500; }
  & .review-author { font: 400 24px/1 var(--font-display); letter-spacing: 0.05em; }
  & .review-source { padding: 3px 8px; background: #111; color: #f8f8f5; font-size: 12px; font-weight: 700; }

  /* pricing */
  & .pricing-slab {
    padding: clamp(28px, 4.5vw, 56px) clamp(20px, 4.5vw, 56px) clamp(52px, 6vw, 72px);
    background: #f8f8f5;
  }
  & .pricing-slab::before {
    content: ""; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 26px; pointer-events: none;
    background: var(--screen);
  }
  & .pricing-slab > * { position: relative; z-index: 2; }
  & .pricing-slab .lead, & .pricing-slab .eyebrow { opacity: 1; }
  & .pricing-slab .eyebrow { color: #f8f8f5; }
  & .plans { gap: 34px 30px; }
  & .plan { padding: 28px 26px 26px; background: #f8f8f5; }
  & .plan::after { box-shadow: 5px 5px 0 #111; }
  & .plan-name { font-size: 34px; }
  & .plan-price .mono { font: 400 56px/1 var(--font-display); letter-spacing: 0.03em; filter: var(--wob-l); display: inline-block; }
  & .plan-period { opacity: 1; font-size: 18px; font-weight: 600; }
  & .plan-features { font-size: 20px; }
  & .plan-features li::before { color: #111; font-weight: 700; }
  & .plan.featured { background: #111; color: #f8f8f5; }
  & .plan.featured::after { box-shadow: 8px 8px 0 #111; }
  & .plan.featured::before {
    content: ""; position: absolute; inset: 7px; z-index: 0; pointer-events: none;
    border: 2px dashed #f8f8f5;
  }
  & .plan.featured > * { position: relative; z-index: 1; }
  & .plan.featured .plan-name, & .plan.featured .plan-price .mono { color: #f8f8f5; }
  & .plan.featured .plan-features li::before { color: #f8f8f5; }
  & .plan.featured .btn-primary { background: #f8f8f5; color: #111; border-color: #f8f8f5; box-shadow: 4px 4px 0 #111, 7px 7px 0 #f8f8f5; }
  & .plan.featured :focus-visible { outline-color: #f8f8f5; }
  & .plan-flag { rotate: -4deg; background: #f8f8f5; color: #111; font-size: 13px; padding: 6px 10px; }
  @media (min-width: 900px) { & .plan.featured { rotate: -1deg; } }

  /* faq */
  & .faq-list { counter-reset: q; display: grid; gap: 26px; }
  & .faq-item { border: 0; background: #f8f8f5; }
  & .faq-item:first-child { border: 0; }
  & .faq-item summary {
    position: relative; z-index: 2; padding: 16px 18px; gap: 14px; justify-content: flex-start;
    font: 400 26px/1.1 var(--font-display); letter-spacing: 0.04em;
  }
  & .faq-item summary::before {
    counter-increment: q; content: "Q." counter(q, decimal-leading-zero); flex: none;
    padding: 6px 9px; background: #111; color: #f8f8f5; rotate: -3deg;
    font: 700 12px/1 var(--font-mono); letter-spacing: 0.06em;
  }
  & .faq-item summary:hover { text-decoration: underline wavy; text-underline-offset: 5px; text-decoration-thickness: 2px; }
  & .faq-item summary:focus-visible { outline: 3px dashed #111; outline-offset: -8px; }
  & .faq-item summary::after {
    content: "+"; margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; flex: none;
    border: 3px solid #111; border-radius: 50%; background: #f8f8f5; color: #111;
    font: 700 26px/1 var(--font-body); transition: transform 0.25s ease;
  }
  & .faq-item[open] summary::after { content: "\2212"; background: #111; color: #f8f8f5; transform: rotate(180deg); }
  & .faq-item p {
    position: relative; z-index: 2; max-width: 60ch; margin: 0 18px 20px; padding: 2px 0 2px 16px;
    border-left: 6px solid #111; font-size: 21px; color: #111;
  }

  /* areas */
  & .chips { gap: 16px 14px; }
  & .chips .pill {
    padding: 9px 16px 7px; font: 400 24px/1 var(--font-display); letter-spacing: 0.05em; text-transform: none;
    box-shadow: 4px 4px 0 #111;
  }
  & .chips .pill:nth-child(3n+1) { rotate: -2deg; }
  & .chips .pill:nth-child(3n+2) { rotate: 1.5deg; }
  & .chips .pill:nth-child(3n) { rotate: -0.5deg; }

  /* visit */
  & .visit-grid { gap: 40px; }
  & .visit-card { background: #f8f8f5; }
  & .hours caption { font: 400 28px/1 var(--font-display); letter-spacing: 0.05em; margin-bottom: 12px; }
  & .hours th, & .hours td { border-bottom: 2px dashed #111; padding: 9px 0; font-size: 21px; }
  & .hours th { font-weight: 700; }
  & .hours td { font-size: 16px; font-weight: 700; }
  & .map { background: #f8f8f5; }
  & .map iframe { filter: grayscale(1) contrast(1.35); }
  & .map::after { z-index: 2; }

  /* contact */
  & .field label { font: 700 14px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
  & .field input, & .field textarea {
    padding: 12px 14px; background: #f8f8f5; color: #111; border: 3px solid #111; border-radius: 0;
    font: 500 21px/1.3 var(--font-body);
  }
  & .field input:focus, & .field textarea:focus { outline: 3px solid #111; outline-offset: 3px; box-shadow: 5px 5px 0 #111; }
  & .form { position: relative; padding: clamp(22px, 4vw, 38px); background: #f8f8f5; }
  & .form > * { position: relative; z-index: 2; }

  /* footer: an ink end panel */
  & .footer-card {
    padding: clamp(40px, 6vw, 64px) clamp(22px, 5vw, 56px) clamp(24px, 4vw, 40px);
    background: #111; border: 0; box-shadow: none;
  }
  & .footer-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none;
    background: var(--screen-paper);
  }
  & .footer-card :focus-visible { outline-color: #f8f8f5; }
  & .footer-name { font: 400 40px/1 var(--font-display); letter-spacing: 0.05em; }
  & .footer-title { display: inline-block; padding: 4px 9px; background: #f8f8f5; color: #111; opacity: 1; font-weight: 700; letter-spacing: 0.1em; }
  & .footer-brand .btn-primary { background: #f8f8f5; color: #111; border-color: #f8f8f5; box-shadow: 4px 4px 0 #111, 7px 7px 0 #f8f8f5; margin-top: 12px; }
  & .footer a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  & .footer a.btn { text-decoration: none; }
  & .footer-base { opacity: 1; border-top: 3px dashed #f8f8f5; font-size: 18px; font-weight: 600; }
  & .wordmark {
    display: block; margin: 36px 0 0; padding: 14px 8px 10px; text-align: center;
    font: 400 clamp(52px, 11vw, 168px)/0.95 var(--font-display); letter-spacing: 0.04em;
    color: #f8f8f5; -webkit-text-stroke: 0.1em #111; paint-order: stroke fill;
    background: var(--screen-paper); text-wrap: balance; user-select: none;
  }

  /* ---------- layouts: the strip, the balloons, the dialogue ---------- */
  /* services "strip": numbered panels of unequal widths, a gutter between, ink frames as overlays */
  & .strip { gap: 28px; }
  & .strip-panel { border: 0; background: #f8f8f5; padding: 52px 24px 22px; isolation: isolate; }
  & .bubble:nth-child(even) .bubble-text::after { left: 0; right: 0; }
  & .strip-panel::after, & :is(.bubble-text, .talk-q, .talk-a)::after {
    content: ""; position: absolute; inset: 0; z-index: 1; width: auto; height: auto; transform: none;
    background: none; pointer-events: none; border: 3px solid #111; border-radius: inherit;
    box-shadow: 6px 6px 0 #111; filter: var(--wob);
  }
  /* a dot screen fades in from the top right corner, behind the words */
  & .strip-panel::before {
    content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: 55%; height: 62px; pointer-events: none;
    background: var(--screen);
    -webkit-mask: linear-gradient(200deg, #000, transparent 70%); mask: linear-gradient(200deg, #000, transparent 70%);
  }
  & .strip-panel > :not(.strip-n) { position: relative; z-index: 2; }
  /* the panel number: an ink box in the top left corner, as in a comic's caption */
  & .strip-n {
    z-index: 3; top: 0; left: 0; padding: 7px 11px 6px; background: #111; color: #f8f8f5;
    font: 700 13px/1 var(--font-mono); letter-spacing: 0.1em;
  }
  & .strip-name { font-size: 34px; line-height: 1; }
  & .strip-desc { font-size: 20px; color: #111; }
  & .strip-foot { border-top: 2px dashed #111; padding-top: 14px; }
  & .strip-price {
    display: inline-block; padding: 4px 10px 2px; border: 3px solid #111; rotate: -2deg;
    font: 400 28px/1 var(--font-display); letter-spacing: 0.04em; filter: var(--wob-l);
  }
  & .strip-panel:nth-child(even) .strip-price { rotate: 1.5deg; }

  /* reviews "bubbles": paper balloons, a skewed-square tail, an ink initials badge */
  & .bubbles { gap: 46px; }
  & .bubble-text { background: #f8f8f5; border: 0; padding: 26px 28px 22px; }
  & .bubble-text::before {
    content: ""; position: absolute; z-index: 2; left: 38px; bottom: -17px; width: 28px; height: 28px;
    background: #f8f8f5; border-right: 3px solid #111; border-bottom: 3px solid #111;
    transform: skewX(-18deg) rotate(45deg);
  }
  & .bubble:nth-child(even) .bubble-text::before { left: auto; right: 38px; transform: skewX(18deg) rotate(45deg); }
  & .bubble-text blockquote, & .bubble-text p:not(.stars) { font-size: 24px; line-height: 1.25; font-weight: 500; }
  & .bubble-text > * { position: relative; z-index: 2; }
  & .bubble-badge {
    width: 50px; height: 50px; border: 3px solid #111; background: #111; color: #f8f8f5;
    font: 400 26px/1 var(--font-display); letter-spacing: 0.03em; filter: var(--wob-l);
    box-shadow: 3px 3px 0 #f8f8f5, 5px 5px 0 #111;
  }
  & .bubble:nth-child(even) .bubble-badge { background: #f8f8f5; color: #111; box-shadow: 3px 3px 0 #111; }
  & .bubble-by { gap: 6px 16px; padding-inline: 6px; }
  & .bubble-by .review-source { font-size: 12px; color: #f8f8f5; }
  & .bubble { transform-origin: 20% 100%; }
  & .bubble:nth-child(even) { transform-origin: 80% 100%; }

  /* faq "dialogue": the question an ink balloon at the left, the answer a paper balloon at the right */
  & .dialogue { gap: 52px; }
  & .talk { gap: 30px; }
  & .talk-q, & .talk-a { border: 0; isolation: isolate; padding: 18px 24px 16px; }
  & .talk-q {
    background: #111; color: #f8f8f5; font: 400 28px/1.1 var(--font-display); letter-spacing: 0.04em;
  }
  & .talk-a { background: #f8f8f5; font-size: 22px; line-height: 1.25; color: #111; }
  & .talk-q::after { border-color: #111; box-shadow: 6px 6px 0 #f8f8f5, 9px 9px 0 #111; }
  & :is(.talk-q, .talk-a)::before {
    content: ""; position: absolute; z-index: 2; bottom: -17px; width: 28px; height: 28px;
    border-right: 3px solid #111; border-bottom: 3px solid #111;
  }
  & .talk-q::before { left: 36px; background: #111; transform: skewX(-18deg) rotate(45deg); }
  & .talk-a::before { right: 36px; background: #f8f8f5; transform: skewX(18deg) rotate(45deg); }
  /* the "Q" and "A" tags */
  & :is(.talk-q, .talk-a) > :first-child { position: relative; z-index: 2; }

  /* call bar */
  & .callbar { background: #f8f8f5; border-top: 4px solid #111; backdrop-filter: none; -webkit-backdrop-filter: none; }

  @media (prefers-reduced-motion: reduce) {
    & *, & *::after { transition: none !important; }
  }

  /* ---------- motion: panels pop in, the line boils ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .cm-bubble { animation: cm-pop 0.5s 0.15s cubic-bezier(.3, 1.6, .5, 1) both; }
      & .cm-panel { animation: cm-pop 0.5s 0.3s cubic-bezier(.3, 1.6, .5, 1) both; }
      & .cm-title { animation: cm-slam 0.45s cubic-bezier(.3, 1.5, .5, 1) both; }
    }
    &[data-motion="showpiece"] {
      & .cm-tag, & .cm-pow, & .brand-mark, & .eyebrow { animation: cm-boil 0.9s steps(1) infinite; }
      & .cm-pow { animation-name: cm-boil, cm-wiggle; animation-duration: 0.9s, 2.4s; animation-timing-function: steps(1), ease-in-out; animation-iteration-count: infinite; }
    }
  }
}

@keyframes cm-pop { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cm-slam { from { transform: scale(1.18); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cm-wiggle { 0%, 100% { rotate: 12deg; } 50% { rotate: 18deg; } }
@keyframes cm-boil {
  0% { filter: var(--wob-l); }
  50% { filter: var(--wob-l-b); }
}