/* Hallmark · design tokens · aboutlogo.com · design-system: design.md */
:root {
  /* colour — monochrome: white paper, near-black ink, neutral greys. No chromatic accent. */
  --color-paper: oklch(99.4% 0.001 85);
  --color-paper-2: oklch(96.8% 0.002 85);
  --color-rule: oklch(89% 0.003 85);
  --color-soft: oklch(55% 0.004 85);
  --color-ink-2: oklch(40% 0.004 85);
  --color-ink: oklch(18% 0.004 85);
  --color-accent: oklch(70% 0.004 85);
  --color-accent-ink: oklch(45% 0.004 85);
  --color-on-accent: oklch(17% 0.008 70);
  --color-dark: oklch(15% 0.004 85);
  --color-dark-2: oklch(27% 0.004 85);
  --color-on-dark: oklch(96% 0.002 85);
  --color-on-dark-2: oklch(70% 0.003 85);
  --color-line: oklch(15% 0.004 85);
  --color-line-hover: oklch(30% 0.004 85);
  --color-on-line: oklch(99.4% 0.001 85);
  --color-focus: oklch(48% 0.12 255);
  --color-glow: oklch(93% 0.002 85);
  --color-paper-glass: oklch(99.4% 0.001 85 / 0.9);
  --shadow-card: 0 18px 40px -16px oklch(18% 0.004 85 / 0.28);
  --shadow-soft: 0 1px 2px oklch(21% 0.01 70 / 0.05), 0 18px 40px -18px oklch(21% 0.01 70 / 0.18);
  --shadow-lift: 0 2px 4px oklch(21% 0.01 70 / 0.06), 0 28px 56px -20px oklch(21% 0.01 70 / 0.26);
  --color-grid: oklch(18% 0.004 85 / 0.05);
  --grid-size: 16px;
  --color-scrim: oklch(17% 0.008 70 / 0.72);

  /* type — Forma DJR Thai Text (Adobe Fonts kit hvh3vlm) for everything; weights 300 / 400 / 700 */
  --font-display: "forma-djr-thai-text", "Noto Sans Thai", "Thonburi", sans-serif;
  --font-body: "forma-djr-thai-text", "Noto Sans Thai", "Thonburi", sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-display-s: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  --text-price: clamp(3.25rem, 1.5rem + 7vw, 6.5rem);
  --text-display: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  --leading-display: 1.3;
  --tracking-label: 0.22em;
  --leading-body: 1.75;

  /* space — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --shell: 78rem;

  --radius-sm: 0px;
  --radius-lg: 0px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --dur-reveal: 700ms;
  --dur-tone: 1100ms;

  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
}

/* Hallmark · genre: editorial · macrostructure: Bento Grid · WordPress theme port of the Next.js build
 * theme: custom · shared direction with loveluckybebe.com (Forma DJR Thai Text · monochrome · hairlines · square corners) · enrichment: Tier-A CSS art tiles + client photography
 * nav: N1b three-section · footer: Ft1 mast-headed
 * F1 bento knobs: tiles=7, spans=irregular, border=none · C4 sticky bar: always, viewport bottom
 * pre-emit critique: P4 H5 E4 S4 R4 V4
 */

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--color-ink);
  background-color: var(--color-paper);
  /* graph-paper grid */
  background-image:
    linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
  min-width: 0;
}
h1 { font-size: var(--text-display); font-weight: 300; letter-spacing: 0.04em; }
h2 { font-size: var(--text-display-s); }
h3 { font-size: var(--text-lg); letter-spacing: 0; line-height: 1.4; }
p { color: var(--color-ink-2); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.shell { width: min(var(--shell), 100% - 2 * var(--page-gutter)); margin-inline: auto; }
.section { padding-block: var(--space-2xl); }
h3 { font-weight: 700; }
.lede { font-size: var(--text-lg); line-height: 1.7; max-width: 34em; }
.prose { display: grid; gap: var(--space-md); max-width: 38em; }
.prose p { font-size: var(--text-lg); line-height: 1.7; }

/* ---------- actions ---------- */
.button {
  min-height: 52px;
  padding: 0 2rem;
  border: var(--rule-hair) solid var(--color-line);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 700;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out);
}
.button-line { color: var(--color-on-line); background: var(--color-line); }
.button:active { transform: translateY(1px); }
.text-link {
  display: inline-block;
  text-decoration-skip-ink: none;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
  transition: color var(--dur-short) var(--ease-out);
}
.button, .text-link { -webkit-tap-highlight-color: transparent; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
@media (hover: hover) and (pointer: fine) {
  .button-line:hover { color: var(--color-line); background: var(--color-paper); }
  .site-footer a:hover { color: var(--color-on-dark); }
  .text-link:hover, .story-contents a:hover, .story-teaser h2 a:hover, .masthead-nav a:hover, .split-figure a:hover, .case-next a:hover, .back-link:hover { color: var(--color-soft); }
  .project-card:hover .project-image img, .split-figure:hover img, .story-figure:hover img { filter: grayscale(0); transform: scale(1.02); }
  .hero-media:hover .hero-main img, .hero-media:hover .hero-inset img { filter: grayscale(0); }
}

/* ---------- header (three-section) ---------- */
.masthead { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper-glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
[id] { scroll-margin-top: 6.5rem; }
.masthead-main {
  width: min(var(--shell), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
  min-height: 4.5rem;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.masthead-logo img { width: 9.5rem; height: auto; }
.masthead-line-link, .masthead-nav { display: none; }
.masthead-menu { position: relative; }
.masthead-menu summary {
  min-height: 44px;
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
}
.masthead-menu summary::-webkit-details-marker { display: none; }
.masthead-menu div {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-xs));
  z-index: var(--z-dropdown);
  width: 14rem;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  display: grid;
}
.masthead-menu div a { min-height: 48px; display: flex; align-items: center; white-space: nowrap; font-weight: 700; }
.masthead-menu div a + a { border-top: var(--rule-hair) solid var(--color-rule); }

/* ---------- hero ---------- */
.hero { padding-top: var(--space-2xl); }
.hero-label, .tile-text span, .case-meta, .project-card span, .contact-list dt, .terms dt { text-transform: uppercase; letter-spacing: var(--tracking-label); }
.hero-text > *, .hero-media, .hero-offer > *, .page-head > * { animation: rise var(--dur-reveal) var(--ease-out) both; }
.hero-text > :nth-child(2) { animation-delay: 70ms; }
.hero-text > :nth-child(3) { animation-delay: 140ms; }
.hero-text > :nth-child(4) { animation-delay: 210ms; }
.hero-text > :nth-child(5) { animation-delay: 280ms; }
.hero-media { animation-delay: 200ms; }
.hero-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-bottom: var(--space-2xl); }
.hero-text { display: grid; gap: var(--space-lg); justify-items: start; align-content: center; }
.hero-label { color: var(--color-soft); font-size: 0.6875rem; font-weight: 400; }
.hero-line { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.12em; }
.hero-line::before { content: ''; width: 2.5rem; height: 1px; background: var(--color-ink); }
.hero-story { max-width: 30em; color: var(--color-ink); }
.hero-media { position: relative; padding: 0 0 var(--space-xl) 12%; }
.hero-main { position: relative; aspect-ratio: 4 / 5; background: var(--color-paper-2); overflow: hidden; }
.hero-inset { position: absolute; left: 0; bottom: 0; width: 34%; aspect-ratio: 4 / 5; background: var(--color-paper-2); border: 8px solid var(--color-paper); box-shadow: var(--shadow-card); overflow: hidden; }
.hero-main img, .hero-inset img { object-fit: cover; opacity: 0; filter: grayscale(1); transition: opacity var(--dur-tone) var(--ease-in-out), filter var(--dur-tone) var(--ease-in-out); }
.hero-main img.is-active, .hero-inset img.is-active { opacity: 1; }
.hero-count { position: absolute; right: 0; bottom: 0; width: 52%; display: flex; align-items: center; gap: var(--space-sm); color: var(--color-soft); font-size: var(--text-xs); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.hero-count i { flex: 1; height: 1px; background: var(--color-rule); }
.hero-count b { display: block; height: 1px; background: var(--color-ink); transform-origin: left; transition: transform var(--dur-reveal) var(--ease-out); }
.hero-count button { width: 44px; height: 44px; margin: -0.75rem -0.75rem -0.75rem 0; border: 0; background: none; color: var(--color-ink); font: inherit; cursor: pointer; }
.hero-offer > :nth-child(1) { animation-delay: 80ms; }
.hero-offer > :nth-child(2) { animation-delay: 140ms; }
.hero-offer > :nth-child(3) { animation-delay: 200ms; }
.hero-offer > :nth-child(4) { animation-delay: 260ms; }
.page-head > :nth-child(2) { animation-delay: 100ms; }
.page-head > :nth-child(3) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
.reveal-ready [data-reveal] { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms), calc(var(--i, 0) * 40ms), 0ms; }
.reveal-ready [data-reveal='wait'] { opacity: 0; transform: translateY(0.5rem); }
.hero h1 { font-weight: 700; letter-spacing: 0.01em; }
.hero h1 span { display: inline-block; }
.hero-offer { display: grid; gap: var(--space-md); justify-items: start; }
.hero-price { color: var(--color-ink); font-size: var(--text-price); font-weight: 400; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.hero-offer p { color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.65; max-width: 26em; }
.project-image img, .split-figure img, .story-figure img { object-fit: cover; filter: grayscale(1); transition: filter var(--dur-tone) var(--ease-in-out), transform var(--dur-tone) var(--ease-out); }
.is-color img { filter: grayscale(0); }

/* ---------- section heads ---------- */
.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); justify-items: start; }
.section-head p { font-size: var(--text-lg); line-height: 1.65; max-width: 30em; }
.package > .text-link { margin-top: var(--space-lg); }
.package .section-head h2 { font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.25rem); font-weight: 700; line-height: 1.15; letter-spacing: 0; }

/* ---------- bento (what you get) ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rule-hair); background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); }
.tile { display: grid; grid-template-rows: minmax(10rem, 1fr) auto; overflow: hidden; background: var(--color-paper); }
.tile, .steps li { transition: transform var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.art i { transition: transform var(--dur-long) var(--ease-out); }
.tile-text { padding: var(--space-md) var(--space-lg) var(--space-lg); display: grid; gap: var(--space-3xs); }
.tile-text span { color: var(--color-soft); font-size: 0.6875rem; }
.tile-text p { font-size: var(--text-sm); line-height: 1.6; }
.tile-logo { color: var(--color-on-dark); background: var(--color-dark); grid-template-rows: minmax(13rem, 1fr) auto; }
.tile-logo .tile-text span { color: var(--color-on-dark-2); }
.tile-logo p { color: var(--color-on-dark-2); }
.art { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-lg); }
.art i { display: block; font-style: normal; }
.art-logo { flex-wrap: wrap; }
.art-logo i { width: 4.5rem; height: 4.5rem; border-radius: 50% 50% 50% 0; background: var(--color-on-dark); }
.art-logo b { font-size: var(--text-display-s); font-weight: 400; letter-spacing: -0.03em; line-height: 1.2; }
.art-files i { padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-ink); font-size: var(--text-md); letter-spacing: 0.06em; }
.art-colors { gap: 0; padding: 0; align-items: stretch; }
.art-colors i { flex: 1; }
.art-colors i:nth-child(1) { background: var(--color-dark); }
.art-colors i:nth-child(2) { background: var(--color-accent); }
.art-colors i:nth-child(3) { background: var(--color-glow); }
.art-colors i:nth-child(4) { background: var(--color-rule); }
.art-colors i:nth-child(5) { background: var(--color-soft); }
.art-fonts { align-items: baseline; gap: var(--space-md); }
.art-fonts b { font-size: 4.5rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; }
.art-fonts b + b { font-weight: 400; color: var(--color-soft); }
.art-card { gap: 0; }
.art-card i { width: 7.5rem; aspect-ratio: 9 / 5.5; border-radius: var(--radius-sm); background: var(--color-dark); transform: rotate(-7deg); }
.art-card i + i { margin-left: -2.5rem; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); transform: rotate(5deg) translateY(0.75rem); }
.art-social i { width: 4.25rem; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-dark); }
.art-social i:nth-child(2) { background: var(--color-soft); }
.art-social i:nth-child(3) { background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.art-guide { gap: 0; }
.art-guide i { width: 5rem; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.art-guide i + i { margin-left: -2.75rem; transform: translateY(0.5rem); }
.art-guide i:last-child { background: var(--color-dark); border-color: var(--color-dark); transform: translateY(1rem); }

/* ---------- work ---------- */
.band-dark { padding-block: var(--space-2xl); background: var(--color-paper-2); }
.band-dark .project-image { background: var(--color-paper); }
.work-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-lg); }
.work-grid-all { padding-block: var(--space-xl) var(--space-2xl); }
.project-card { display: grid; gap: var(--space-2xs); align-content: start; }
.project-image { position: relative; aspect-ratio: 4 / 5; margin-bottom: var(--space-sm); border-radius: var(--radius-lg); background: var(--color-paper-2); overflow: hidden; }
.project-card.is-landscape .project-image { aspect-ratio: 4 / 3; }
.project-card h3 { font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.01em; }
.project-card span { color: var(--color-soft); font-size: 0.6875rem; line-height: 1.6; }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-lg); }
.steps li { counter-increment: step; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xs); align-content: start; }
.steps li::before { content: counter(step, decimal-leading-zero); margin-bottom: var(--space-lg); color: var(--color-soft); font-size: var(--text-xs); letter-spacing: var(--tracking-label); line-height: 1; font-variant-numeric: tabular-nums; }
.steps p { font-size: var(--text-sm); line-height: 1.65; }


/* ---------- split modules ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.split-text { display: grid; gap: var(--space-lg); justify-items: start; }
.split-text > p { font-size: var(--text-lg); line-height: 1.7; }
.figure-frame { position: relative; border-radius: var(--radius-lg); background: var(--color-paper-2); overflow: hidden; }
.figure-frame.portrait { aspect-ratio: 4 / 5; }
.figure-frame.landscape { aspect-ratio: 4 / 3; }
.figure-frame img { object-fit: cover; }
.split-figure figcaption, .story-figure figcaption { margin-top: var(--space-xs); color: var(--color-soft); font-size: var(--text-xs); }
.split-figure a, .story-figure a, .case-next a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.band { padding-block: var(--space-2xl); background: var(--color-paper-2); }
.reasons { display: grid; gap: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); width: 100%; }
.reasons p { margin-top: var(--space-2xs); }
.plain-list { margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.plain-list li { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-lg); }
.band .split h2 { font-size: var(--text-2xl); }
.example-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-bottom: var(--space-2xl); }

/* ---------- faq ---------- */
.faq-list { border-top: var(--rule-hair) solid var(--color-ink); }
.faq-list details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq-list summary { min-height: 64px; padding-block: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); list-style: none; cursor: pointer; font-size: var(--text-lg); font-weight: 400; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex: none; color: var(--color-ink); font-size: var(--text-xl); font-weight: 400; }
.faq-list details[open] summary::after { content: '–'; }
.faq-list p { padding-bottom: var(--space-lg); max-width: 36em; }
.faq-list summary::after { transition: transform var(--dur-short) var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(180deg); }
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--dur-long) var(--ease-in-out), opacity var(--dur-long) var(--ease-out), content-visibility var(--dur-long) allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------- final cta ---------- */
.final-cta { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.final-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.final-cta h2 { font-size: var(--text-display); }
.final-cta-grid > div { display: grid; gap: var(--space-md); justify-items: start; }
.final-cta p { font-size: var(--text-lg); line-height: 1.65; max-width: 28em; }
.final-cta small { color: var(--color-soft); font-size: var(--text-xs); }

/* ---------- inner pages ---------- */
.page-head { padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-lg); justify-items: start; background: var(--color-paper-2); box-shadow: 0 0 0 100vmax var(--color-paper-2); clip-path: inset(0 -100vmax); }
.page-head h1 { max-width: 12em; }
.about-body, .contact-body { padding-block: var(--space-2xl); }
.contact-list { border-top: var(--rule-hair) solid var(--color-ink); }
.contact-list > div { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xs); }
.contact-list dt { color: var(--color-soft); font-size: var(--text-xs); }
.contact-list dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-xl); font-weight: 700; }
.contact-body h2 { font-size: var(--text-xl); }
.contact-body h2 + p { margin-block: var(--space-xs) var(--space-lg); }
.legal { padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-md); }
.legal h1 { font-size: var(--text-display-s); }
.legal p { max-width: 38em; }

.case { padding-block: var(--space-lg) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.case-text { display: grid; gap: var(--space-md); justify-items: start; }
.case-text h1 { font-size: var(--text-display-s); }
.case-text > p { font-size: var(--text-lg); line-height: 1.7; }
.case-meta { color: var(--color-soft); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
.back-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.case-next { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); width: 100%; font-size: var(--text-sm); }

/* ---------- package terms, quotes, case gallery ---------- */
.terms { margin-top: var(--space-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.terms > div { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); border: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-3xs); }
.terms dt { color: var(--color-soft); font-size: var(--text-xs); }
.terms dd { font-size: var(--text-lg); font-weight: 400; line-height: 1.4; }
.quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.quotes li { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-paper-2); display: grid; gap: var(--space-md); align-content: space-between; }
.quotes blockquote { margin: 0; font-size: var(--text-lg); line-height: 1.65; }
.quotes cite { color: var(--color-soft); font-size: var(--text-sm); font-style: normal; }
.case-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-2xl); }
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-md); }
.legal ul { display: grid; gap: var(--space-xs); padding-left: var(--space-lg); list-style: disc; color: var(--color-ink-2); max-width: 38em; }
.legal a { text-decoration: underline; text-underline-offset: 0.25em; }
.legal small { color: var(--color-soft); font-size: var(--text-sm); }

/* ---------- story (magazine feature) ---------- */
.story-issue { color: var(--color-soft); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.story-deck { font-size: var(--text-xl); line-height: 1.6; color: var(--color-ink-2); max-width: 30em; }
.story-cover { padding-block: var(--space-2xl) var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.story-cover h1 { font-size: var(--text-price); line-height: 1.1; letter-spacing: -0.04em; }
.story-cover > * { animation: rise var(--dur-reveal) var(--ease-out) both; }
.story-cover > :nth-child(2) { animation-delay: 80ms; }
.story-cover > :nth-child(3) { animation-delay: 160ms; }
.story-cover > :nth-child(4) { animation-delay: 240ms; }
.story-contents { border-top: var(--rule-hair) solid var(--color-ink); display: grid; grid-template-columns: minmax(0, 1fr); }
.story-contents a { min-height: 48px; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); display: flex; align-items: baseline; gap: var(--space-md); font-size: var(--text-sm); transition: color var(--dur-short) var(--ease-out); }
.story-contents span, .chapter-no { color: var(--color-soft); font-size: var(--text-xs); letter-spacing: var(--tracking-label); font-variant-numeric: tabular-nums; }
.story-cover-image { padding-bottom: var(--space-2xl); }
.story-cover-image .figure-frame { aspect-ratio: 16 / 9; }
.chapter { padding-block: var(--space-xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.chapter-head { display: grid; gap: var(--space-sm); align-content: start; }
.chapter-head h2 { font-size: var(--text-2xl); }
.chapter-body { display: grid; gap: var(--space-md); align-content: start; }
.chapter-body p { font-size: var(--text-md); line-height: 1.9; color: var(--color-ink-2); }
.chapter-body p:first-child { font-size: var(--text-lg); line-height: 1.75; color: var(--color-ink); }
.chapter-note { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); align-content: start; }
.chapter-note h3 { font-size: var(--text-xs); font-weight: 400; color: var(--color-soft); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.chapter-note ul { counter-reset: note; }
.chapter-note li { counter-increment: note; padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); display: grid; grid-template-columns: 2rem minmax(0, 1fr); font-size: var(--text-sm); }
.chapter-note li::before { content: counter(note); color: var(--color-soft); font-variant-numeric: tabular-nums; }
.pull-quote { margin: 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-display-s); line-height: 1.35; letter-spacing: -0.02em; text-wrap: balance; }
.story-end { padding-block: var(--space-xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); display: grid; gap: var(--space-md); justify-items: start; }
.story-end p { font-size: var(--text-xl); line-height: 1.5; color: var(--color-ink); max-width: 24em; }
.story-teaser { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); justify-items: start; border-top: var(--rule-hair) solid var(--color-ink); }
.story-teaser h2 { font-size: var(--text-display); }

/* ---------- footer ---------- */
.site-footer { padding: var(--space-xl) var(--page-gutter) calc(var(--space-lg) + 5rem); color: var(--color-on-dark-2); background: var(--color-dark); font-size: var(--text-sm); }
.site-footer > * { width: min(var(--shell), 100%); margin-inline: auto; }
.footer-mast { display: grid; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.footer-logo img { width: 11rem; height: auto; filter: invert(1); }
.footer-mast p { color: var(--color-on-dark-2); }
.footer-rows { display: grid; gap: var(--space-md); padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-dark-2); }
.footer-rows nav, .footer-rows div, .footer-bottom span { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.footer-rows a, .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.footer-rows nav a { color: var(--color-on-dark); font-weight: 700; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-lg); padding-top: var(--space-sm); font-size: var(--text-xs); }

/* ---------- sticky LINE bar (small screens) ---------- */
.sticky-line {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  padding: var(--space-xs) var(--page-gutter) max(var(--space-xs), env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--color-ink-2);
  background: var(--color-paper-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs);
  line-height: 1.3;
}
.sticky-line strong { display: block; color: var(--color-ink); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.sticky-line .button { min-height: 44px; font-size: var(--text-sm); }

/* ---------- 40rem ---------- */
@media (min-width: 40rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-logo { grid-column: 1 / -1; }
  .steps-grid, .terms, .quotes, .case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid, .example-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid .project-card:nth-child(even) { margin-top: var(--space-2xl); }
  .work-grid-all .project-card.is-landscape { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- 60rem ---------- */
@media (min-width: 60rem) {
  .section, .band, .band-dark, .final-cta { padding-block: var(--space-4xl); }
  .section-head { margin-bottom: var(--space-2xl); }
  .hero { padding-top: var(--space-3xl); }
  .hero-entry { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); align-items: center; padding-bottom: var(--space-4xl); }
  .hero-text { grid-column: 1 / 6; gap: 1.875rem; }
  .hero-media { grid-column: 6 / -1; padding-left: 14%; }
  .sticky-line, .masthead-menu { display: none; }
  .site-footer { padding-bottom: var(--space-lg); }

  .masthead-main { min-height: 5.5rem; }
  .masthead-logo img { width: 11.5rem; }
  .masthead-nav { display: flex; gap: var(--space-xl); margin-left: auto; font-size: var(--text-sm); }
  .masthead-nav a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
  .masthead-line-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: var(--space-lg); font-size: var(--text-sm); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; transition: color var(--dur-short) var(--ease-out); }

  .page-head-offer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }

  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
  .section-head > .text-link { justify-self: end; }
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile-logo { grid-column: span 6; grid-row: span 2; }
  .tile-files, .tile-fonts { grid-column: span 3; }
  .tile-colors { grid-column: span 6; }
  .tile-card, .tile-social, .tile-guide { grid-column: span 4; }
  .tile-colors { order: -1; }
  .tile-logo { order: -2; }
  .art-logo i { width: 7rem; height: 7rem; }
  .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }

  .story-cover { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-lg); padding-block: var(--space-3xl) var(--space-2xl); align-items: end; }
  .story-issue, .story-cover h1 { grid-column: 1 / -1; }
  .story-deck { grid-column: 1 / 7; }
  .story-contents { grid-column: 8 / -1; }
  .story-cover-image { padding-bottom: var(--space-3xl); }
  .chapter { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); padding-block: var(--space-2xl) var(--space-3xl); }
  .chapter-head { grid-column: 1 / 5; position: sticky; top: 7.5rem; }
  .chapter-body { grid-column: 5 / -1; }
  .chapter-columns .chapter-body { display: block; columns: 2; column-gap: var(--space-xl); }
  .chapter-columns .chapter-body p { break-inside: avoid; margin-bottom: var(--space-md); }
  .chapter-note { grid-column: 5 / 10; }
  .pull-quote { grid-column: 3 / -1; padding-top: var(--space-xl); }
  .chapter-image-right .chapter-body { grid-column: 5 / 9; }
  .chapter-image-right .story-figure { grid-column: 9 / -1; }
  .chapter-image-left .chapter-head { grid-column: 6 / -1; position: static; }
  .chapter-image-left .chapter-body { grid-column: 6 / -1; }
  .chapter-image-left .story-figure { grid-column: 1 / 5; grid-row: 1 / span 2; }
  .story-teaser { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-lg); padding-top: var(--space-lg); }
  .story-teaser > * { grid-column: 1 / 9; }
  .story-end { padding-block: var(--space-2xl) var(--space-3xl); }
  .terms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
  .split-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-figure { position: sticky; top: var(--space-lg); }
  .example-row .split-figure { position: static; }
  .faq-section > h2 { position: sticky; top: var(--space-lg); }

  .final-cta-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
  .page-head { padding-block: var(--space-2xl) var(--space-3xl); }

  .case { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); padding-top: var(--space-xl); }
  .case-text { position: sticky; top: var(--space-lg); }
  .case-landscape { grid-template-columns: minmax(0, 1fr); }
  .case-landscape .case-text { position: static; max-width: 40rem; }
}
@media (min-width: 60rem) and (hover: hover) and (pointer: fine) {
  .masthead-line-link:hover { color: var(--color-soft); }
}

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

/* ---------- WordPress additions ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: var(--space-xs); left: var(--space-xs); z-index: 999; width: auto; height: auto; clip: auto; padding: var(--space-sm) var(--space-md); color: var(--color-on-line); background: var(--color-line); }
.hero-main img, .hero-inset img, .figure-frame img, .project-image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.masthead-logo img, .footer-logo img { height: auto; }
.legal h3 { margin-top: var(--space-sm); }
.case-content { display: grid; gap: var(--space-md); }
.case-content p { font-size: var(--text-md); line-height: 1.85; }
.case-content img { height: auto; }

/* logged-in admin bar sits above the sticky header */
.admin-bar .masthead { top: 32px; }
.admin-bar [id] { scroll-margin-top: 8.5rem; }
@media (max-width: 782px) { .admin-bar .masthead { top: 46px; } }
@media (max-width: 600px) { .admin-bar .masthead { top: 0; } }