/* A little of the splash mark's worn ink, without distressing readable content. */
:root {
  --brand-grain: url('./assets/brand-grain.svg');
  --brand-rule: url('./assets/brand-rule.svg');
}

body { background-image: var(--brand-grain); background-size: 256px 256px; }
.site-header { background-image: var(--brand-grain); }
.site-header::after {
  content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, #ad343d80 22%, #ad343d30 62%, transparent);
  pointer-events: none;
}

/* Dry ink accents sit beside the clean, modern type. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--brand-grain); opacity: .65;
}
.hero h1>span { font-weight: 850; }
.hero h1>span::after {
  content: ''; display: block; width: 146px; height: 9px; margin-top: 17px;
  background: var(--brand-rule) left center / 100% 100% no-repeat;
}
.hero-content>p { margin-top: 21px; }
.hero-eyebrow .status-dot {
  width: 27px; height: 5px;
  background: var(--brand-rule) center / 100% 100% no-repeat;
}
.section-heading::before, .split-heading>div::before, .questions-heading::before,
.updates-heading::before, .details-section>div:first-child::before,
.credits-page>h1::after {
  content: ''; display: block; width: 54px; height: 6px; margin-bottom: 20px;
  background: var(--brand-rule) center / 100% 100% no-repeat;
  opacity: .85; pointer-events: none;
}
.updates-heading::before { margin-inline: auto; }
.credits-page>h1::after { margin-top: 23px; margin-bottom: 0; width: 96px; }
.suite-intro h1::after {
  content: ''; display: block; width: 104px; height: 7px; margin-top: 23px;
  background: var(--brand-rule) center / 100% 100% no-repeat;
}

/* Static, low-contrast grain belongs to surfaces, never to photos or text. */
.button-primary {
  position: relative; border-radius: 3px 6px 4px 5px; border-color: #d4575a;
  background-image: var(--brand-grain), linear-gradient(110deg, #c5323e, #a92732);
  box-shadow: inset 0 1px 0 #f1a99a30, 0 6px 20px #0003;
}
.button-primary::after {
  content: ''; position: absolute; inset: 4px; border: 1px solid #ffe0c526;
  border-radius: 2px 5px 3px 4px; pointer-events: none;
}
.closing-section.branded-close>.button { position: relative; inset: auto; }
.button-primary:hover {
  background-image: var(--brand-grain), linear-gradient(110deg, #d43e48, #b22c38);
}
.showcase-copy, .principle, .capability-card, .price-card, .workflow-section,
.studio-feature-bar, .suite-intro-media figcaption, .capture-card figcaption,
.updates-card, .site-footer { background-image: var(--brand-grain); }
.product-showcase, .studio-feature, .suite-intro-media, .capture-card, .portrait-tile {
  border-color: #655249; border-radius: 4px;
}
.principle { border-color: #5b4942; border-radius: 5px 9px 4px 7px; }
.principle-line {
  height: 5px; width: 76px; opacity: .65;
  background: var(--brand-rule) center / 100% 100% no-repeat;
}
.principle-number, .purchase-step { color: #d88a81; font-family: var(--mono); letter-spacing: 1px; }
.chapter-number { color: #b2635e; font-weight: 700; letter-spacing: -2px; }
.tab-number { font-weight: 700; }
.feature-tabs button[aria-selected=true] { border-bottom-color: #ce4b50; }
.gallery-filters button[aria-pressed=true] { background-image: var(--brand-grain); }
.pill-label { border-style: solid; border-color: #94514f; background-image: var(--brand-grain); }

/* The loose inner frames echo the badge's imperfect rounded red outline. */
.studio-splash { background-color: #0a0807; border-color: #583e38; border-radius: 6px 12px 7px 10px; }
.studio-splash::before {
  content: ''; position: absolute; inset: 11px; border: 1px solid #ab3c4160;
  border-radius: 21px 16px 23px 17px; transform: rotate(-.4deg); pointer-events: none;
}
.studio-splash::after {
  content: ''; position: absolute; top: 11px; right: 28px; width: 32px; height: 3px;
  background: #0a0807; transform: rotate(-5deg); pointer-events: none;
}
.price-card { position: relative; border-color: #92534d; border-top: 3px solid #ca454b; border-radius: 4px 9px 5px 7px; }
.price-card::before {
  content: ''; position: absolute; inset: 7px; border: 1px solid #b16d5730;
  border-radius: 2px 6px 3px 5px; pointer-events: none;
}
.closing-section { border-top-color: #62443c; }
.closing-section::before {
  content: ''; position: absolute; top: -3px; left: 0; width: 128px; height: 6px;
  background: var(--brand-rule) center / 100% 100% no-repeat; pointer-events: none;
}
.site-footer { background-color: #100e0d; border-top-color: #62443c; }
.faq-list details[open] { border-bottom-color: #aa5655; }

@media (max-width: 700px) {
  .hero h1>span::after { width: 104px; height: 7px; margin-top: 13px; }
  .hero-content>p { margin-top: 18px; }
  .section-heading::before, .split-heading>div::before, .questions-heading::before,
  .updates-heading::before, .details-section>div:first-child::before { width: 42px; height: 5px; margin-bottom: 16px; }
}
@media (forced-colors: active) {
  .site-header::after, .hero::after, .button-primary::after,
  .studio-splash::before, .studio-splash::after, .price-card::before { display: none; }
}