@font-face { font-family: 'Alex Brush'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/britannic-fonts/alex-brush.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/britannic-fonts/caveat.woff2') format('woff2'); }
body.painted-story {
  --ink: #463b31;
  --muted: #6a5849;
  --paper: #fffdf0;
  --display: 'Alex Brush', 'Apple Chancery', Georgia, cursive;
  --body: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --story-width: 36.25rem;
  --scene-space: clamp(6rem, 15vw, 12rem);
  margin: 0;
  font: 400 1.75rem/1.5 var(--body);
  font-synthesis: none;
  color: var(--ink);
  background: radial-gradient(ellipse at 85% 20%, #b4d8c831, transparent 65%), var(--paper);
}
.painted-story::after { content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .08; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23paper)' opacity='.65'/%3E%3C/svg%3E"); }
.painted-story > header, .painted-story > footer { display: none; }
.painted-story main { max-width: none; padding: 0; }
.painted-story h1, .painted-story h2, .painted-story h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; letter-spacing: 0; text-wrap: balance; }
.painted-story h1 { font-size: clamp(4.25rem, 9vw, 6.25rem); margin: 0; }
.painted-story h2, .painted-story h3 { font-size: clamp(3rem, 6vw, 4rem); margin: 0 0 1.5rem; }
.painted-story p { font: inherit; margin: 0 0 1.5rem; overflow-wrap: break-word; text-wrap: pretty; }
.painted-story a { color: inherit; text-underline-offset: .2em; }
.painted-story :focus-visible { outline: 3px solid #9a411d; outline-offset: 6px; }
.painted-story button, .painted-story input, .painted-story textarea { font: inherit; color: inherit; }
.story-top { width: min(82.5rem, 100%); margin: auto; padding: 1.5rem 5%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-size: 1.5rem; }
.story-top a { min-height: 48px; display: inline-flex; align-items: center; text-decoration: none; }
.story-top button, .activity-save { background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; min-height: 48px; padding: .5rem .75rem; cursor: pointer; }
.painted-story .story-hero { height: auto; display: block; border: 0; background: transparent; padding: clamp(3rem, 8vw, 6rem) 1.5rem 0; }
.story-copy { width: min(var(--story-width), 100%); margin-inline: auto; }
.story-hero .story-copy { width: min(48rem, 100%); text-align: center; }
.story-hero .story-question { margin: 2rem 0; font-size: 2rem; }
.story-hero .eyebrow { font: 1.375rem/1.5 var(--body); letter-spacing: 0; margin-bottom: 1.5rem; }
.story-scene { width: min(70rem, 100%); margin: clamp(4rem, 9vw, 8rem) auto; padding: 0 1.5rem; }
.story-scene .painting { display: block; width: 100%; height: min(65vw, 42rem); object-fit: contain; margin: auto; mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; }
.story-passage { padding: var(--scene-space) 1.5rem 0; }
.story-passage .story-copy p:last-child { margin-bottom: 0; }
.story-painting-button { display: block; width: 100%; border: 0; background: transparent; padding: 0; cursor: zoom-in; }
.story-look { display: block; text-align: center; font-size: 1.375rem; margin-top: 1.5rem; }
.story-painting-dialog { position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; padding: 6rem 1.5rem 2rem; background: var(--paper); color: var(--ink); border: 0; }
.story-painting-dialog::backdrop { background: var(--paper); }
.story-painting-dialog .painting { display: block; width: min(75rem, 100%); height: calc(100dvh - 8rem); margin: auto; object-fit: contain; }
.story-dialog-close { position: fixed; right: 1.5rem; top: 1rem; background: var(--paper); border: 0; min-height: 48px; cursor: pointer; }
.story-reflection { padding: var(--scene-space) 1.5rem; }
.story-evidence .story-copy { margin-bottom: 3rem; }
.story-evidence .story-copy h2 { text-align: center; font-size: clamp(3.3rem, 6.6vw, 4.4rem); }
.story-evidence-card h3 { font-family: var(--body); font-size: 2rem; }
.story-narrative { padding-bottom: var(--scene-space); }
.story-activity { width: min(68rem, calc(100% - 3rem)); margin: var(--scene-space) auto; }
.story-activity > h2, .story-activity > p, .activity-form { width: min(var(--story-width), 100%); margin-inline: auto; }
.painted-story .activity-reward { font-size: 1.375rem; }
.activity-form { display: grid; gap: 2rem; }
.activity-evidence { display: grid; gap: 1rem; }
.story-activity > .activity-evidence { width: min(var(--story-width), 100%); margin: 3rem auto; }
.painted-story summary { font-weight: 400; }
.activity-code input { display: block; width: 100%; padding: .5rem; background: transparent; border: 0; border-bottom: 1px solid #8b735d66; min-height: 48px; }
.chapter-painting img { display: block; width: 100%; height: 320px; object-fit: contain; }
.activity-clue { border: 0; border-bottom: 1px solid #8b735d44; padding: .5rem 0; font-size: 1.625rem; }
.activity-clue summary { min-height: 48px; padding: .5rem 0; cursor: pointer; }
.activity-clue-copy { padding: 1rem 0; }
.activity-clue-copy p { font-size: 1.625rem; }
.activity-clue-copy a { font-size: 1.375rem; }
.activity-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
.activity-choices legend { padding: 0; margin-bottom: 1rem; }
.activity-option { min-height: 48px; display: flex; gap: 1rem; align-items: start; cursor: pointer; }
.activity-option input { flex: 0 0 auto; margin-top: .6rem; accent-color: #614737; width: 20px; height: 20px; }
.activity-note-area label { display: block; margin-bottom: 1rem; }
.activity-note-area textarea { width: 100%; min-height: 10rem; border: 0; border-bottom: 1px solid #8b735d66; background: #fff5df66; padding: 1rem; resize: none; line-height: 1.5; overflow: hidden; border-radius: 0; }
.activity-letter-paper { position: relative; isolation: isolate; }
.activity-letter-paper::before { content: ''; position: absolute; inset: -1rem; z-index: -1; background: url('/assets/britannic-letter-v1.png') center / 100% 100% no-repeat; mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.activity-letter-paper textarea { background: transparent; border: 0; padding: 3rem 2rem; min-height: 18rem; }
.activity-save { justify-self: start; }
.painted-story .activity-feedback { margin: 0; font-size: 1.375rem; min-height: 2rem; }
.activity-code { font-variant-numeric: tabular-nums; letter-spacing: .04em; overflow-wrap: anywhere; }
.painted-story .activity-alphabet { font-size: 1.375rem; }
.story-evidence { width: min(68rem, calc(100% - 3rem)); margin: var(--scene-space) auto; }
.story-evidence > h2 { width: min(var(--story-width), 100%); margin: 0 auto 3rem; }
.story-evidence-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.story-evidence-card { display: block; padding: 2rem; border: 1px solid #8b735d44; border-radius: 4px; text-decoration: none; font-size: 1.625rem; }
.story-evidence-card:hover { background: #f7eadc77; }
.story-evidence-card strong { font-weight: 400; }
.story-evidence-card span { display: block; margin-top: 1rem; font-size: 1.375rem; }
.story-next { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem; margin: 6rem 1.5rem 4rem; font-size: 1.5rem; }
.story-next a { min-height: 48px; display: inline-flex; align-items: center; }
.painted-story .story-next a:nth-child(n) { display: inline-flex; }
@media (min-width: 1100px) { .painted-story { --story-width: 43rem; } }
@media (max-width: 600px) {
  body.painted-story { font-size: 1.625rem; }
  .story-top { padding: 1rem 1.25rem; font-size: 1.375rem; }
  .story-hero { padding-top: 3rem; }
  .story-hero .story-question { font-size: 1.75rem; }
  .story-scene { padding: 0 .75rem; }
  .story-scene .painting { height: 85vw; }
  .story-evidence-cards { grid-template-columns: 1fr; }
  .story-evidence-card { padding: 1.5rem; }
  .activity-letter-paper textarea { padding: 2rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .painted-story { scroll-behavior: auto; } }