/* Shared Innerscapism styles: paper, tape, torn edges, hand-drawn marks, cards, nav and footer */
body { margin: 0; background: oklch(97% 0.01 70); }
img { height: auto; }  /* width/height attributes reserve space; CSS keeps each image's shape */
a { color: #a3453d; }
a:hover { color: #8a382f; }
/* ---- Paper, tape & hand-drawn marks ---- */
.paper {
  background-image: 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.torn { clip-path: polygon(0.0% 1.1%, 3.8% 0.5%, 7.7% 2.3%, 11.5% 0.3%, 15.4% 1.9%, 19.2% 1.3%, 23.1% 0.2%, 26.9% 1.8%, 30.8% 0.1%, 34.6% 1.5%, 38.5% 0.2%, 42.3% 0.3%, 46.2% 1.5%, 50.0% 2.9%, 53.8% 0.4%, 57.7% 0.8%, 61.5% 2.2%, 65.4% 3.3%, 69.2% 2.0%, 73.1% 1.4%, 76.9% 3.4%, 80.8% 0.2%, 84.6% 3.0%, 88.5% 1.0%, 92.3% 0.5%, 96.2% 0.4%, 100.0% 1.1%, 100.0% 97.1%, 96.2% 99.4%, 92.3% 98.0%, 88.5% 97.8%, 84.6% 98.7%, 80.8% 98.1%, 76.9% 99.8%, 73.1% 99.8%, 69.2% 99.3%, 65.4% 97.6%, 61.5% 98.5%, 57.7% 98.9%, 53.8% 98.0%, 50.0% 98.4%, 46.2% 99.0%, 42.3% 97.2%, 38.5% 97.6%, 34.6% 99.1%, 30.8% 98.0%, 26.9% 98.2%, 23.1% 96.9%, 19.2% 97.4%, 15.4% 99.0%, 11.5% 96.6%, 7.7% 99.6%, 3.8% 98.5%, 0.0% 97.4%); }
.torn-band { clip-path: polygon(0.0% 0.8%, 2.5% 2.4%, 5.0% 0.2%, 7.5% 3.3%, 10.0% 3.8%, 12.5% 2.9%, 15.0% 4.4%, 17.5% 1.6%, 20.0% 3.5%, 22.5% 3.0%, 25.0% 2.9%, 27.5% 2.3%, 30.0% 4.2%, 32.5% 4.7%, 35.0% 2.4%, 37.5% 3.3%, 40.0% 0.3%, 42.5% 3.5%, 45.0% 3.2%, 47.5% 5.0%, 50.0% 4.1%, 52.5% 1.4%, 55.0% 1.9%, 57.5% 3.3%, 60.0% 0.1%, 62.5% 2.3%, 65.0% 0.8%, 67.5% 0.6%, 70.0% 0.3%, 72.5% 3.8%, 75.0% 0.6%, 77.5% 1.2%, 80.0% 2.0%, 82.5% 4.4%, 85.0% 0.4%, 87.5% 2.2%, 90.0% 2.7%, 92.5% 4.4%, 95.0% 4.1%, 97.5% 4.3%, 100.0% 1.4%, 100.0% 97.9%, 97.5% 98.2%, 95.0% 95.6%, 92.5% 95.2%, 90.0% 99.2%, 87.5% 99.1%, 85.0% 98.8%, 82.5% 98.8%, 80.0% 97.6%, 77.5% 97.1%, 75.0% 98.7%, 72.5% 100.0%, 70.0% 97.9%, 67.5% 98.2%, 65.0% 97.2%, 62.5% 95.2%, 60.0% 96.5%, 57.5% 97.4%, 55.0% 96.9%, 52.5% 96.6%, 50.0% 99.7%, 47.5% 95.5%, 45.0% 96.1%, 42.5% 95.6%, 40.0% 96.0%, 37.5% 98.0%, 35.0% 98.0%, 32.5% 99.5%, 30.0% 96.8%, 27.5% 99.7%, 25.0% 99.7%, 22.5% 99.0%, 20.0% 99.2%, 17.5% 98.3%, 15.0% 99.7%, 12.5% 100.0%, 10.0% 99.2%, 7.5% 99.5%, 5.0% 98.2%, 2.5% 99.9%, 0.0% 95.6%); }
.torn-note { clip-path: polygon(0.0% 2.5%, 5.6% 0.6%, 11.1% 1.0%, 16.7% 1.4%, 22.2% 1.5%, 27.8% 0.5%, 33.3% 3.4%, 38.9% 4.0%, 44.4% 1.9%, 50.0% 1.9%, 55.6% 0.3%, 61.1% 0.4%, 66.7% 1.4%, 72.2% 1.1%, 77.8% 3.3%, 83.3% 0.6%, 88.9% 0.1%, 94.4% 3.8%, 100.0% 2.1%, 100.0% 99.4%, 94.4% 97.8%, 88.9% 99.9%, 83.3% 97.9%, 77.8% 96.1%, 72.2% 96.5%, 66.7% 97.2%, 61.1% 99.0%, 55.6% 98.5%, 50.0% 99.3%, 44.4% 96.9%, 38.9% 97.9%, 33.3% 96.9%, 27.8% 98.7%, 22.2% 99.1%, 16.7% 96.8%, 11.1% 96.1%, 5.6% 96.6%, 0.0% 96.8%); }
.tape {
  position: absolute; z-index: 3; width: 92px; height: 26px;
  background: oklch(93% 0.025 80 / 0.72);
  box-shadow: 0 1px 2px rgba(40, 28, 22, 0.08);
  pointer-events: none;
}
.circled { position: relative; white-space: nowrap; }
.circled svg { position: absolute; left: -14px; right: -14px; top: -10px; bottom: -14px; width: calc(100% + 28px); height: calc(100% + 24px); overflow: visible; pointer-events: none; }
.scribble-under { display: block; width: 240px; max-width: 70%; height: 14px; margin: 14px auto 0; overflow: visible; }
.hand-underline { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C20 2 38 9 56 5 S86 3 98 6' fill='none' stroke='%23a3453d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.4em; padding-bottom: 0.12em; }
.text-link { color: oklch(25% 0.02 40); text-decoration: underline; text-decoration-color: #a3453d; text-underline-offset: 6px; text-decoration-thickness: 1.5px; font-size: 16px; }
.text-link:hover { color: #a3453d; }
/* ---- Six doors ---- */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 44px; max-width: 1140px; margin: 0 auto; align-items: start; }
.door {
  position: relative; background-color: oklch(98% 0.008 70); padding: 22px 22px 30px;
  box-shadow: 0 14px 30px rgba(33, 25, 23, 0.06), 0 1px 0 rgba(33, 25, 23, 0.04);
  transform: rotate(var(--tilt, 0deg)); transition: transform 0.35s ease, box-shadow 0.35s ease;
  scroll-margin-top: 110px;
}
.door:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 20px 36px rgba(33, 25, 23, 0.09); }
.door:nth-child(1) { --tilt: -0.8deg; }
.door:nth-child(2) { --tilt: 0.6deg; margin-top: 56px; }
.door:nth-child(3) { --tilt: -0.4deg; }
.door:nth-child(4) { --tilt: 0.7deg; }
.door:nth-child(5) { --tilt: -0.6deg; margin-top: 56px; }
.door:nth-child(6) { --tilt: 0.5deg; }
.door-soon { position: absolute; top: 18px; left: 14px; z-index: 2; transform: rotate(-6deg); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #a3453d; background: oklch(97% 0.01 70 / 0.92); border: 1.5px solid #a3453d; padding: 6px 10px; }
.door-media { position: relative; margin-bottom: 26px; }
.door-media .tape { top: -12px; left: 18px; transform: rotate(-8deg); }
.door:nth-child(even) .door-media .tape { left: auto; right: 18px; transform: rotate(7deg); }
.door-media img { width: 100%; aspect-ratio: 4/5; display: block; object-fit: cover; }
.door-num { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-family: 'Fraunces', serif; font-size: 14px; color: oklch(98% 0.01 70); background: #a3453d; padding: 4px 9px 5px; }
.door-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 30px; line-height: 1.1; margin: 0 0 6px; }
.door-title span { font-size: 13px; font-family: 'Jost', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #a3453d; display: block; margin-bottom: 8px; }
.door-tag { font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; color: #a3453d; margin: 0 0 18px; }
.door-verbs { font-size: 17px; line-height: 1.6; color: oklch(30% 0.02 40); margin: 0 0 16px; }
.door-note { font-size: 15.5px; line-height: 1.65; color: oklch(42% 0.02 40); margin: 0 0 20px; }
.door-meta { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(48% 0.02 40); padding-top: 14px; border-top: 1px dashed oklch(80% 0.02 50); }
.doors-note {
  position: relative; background: #a3453d; color: oklch(97% 0.01 70); padding: 52px 34px 50px;
  transform: rotate(1deg); width: min(100%, 420px); margin: 0 auto 72px; text-align: left;
}
.doors-note .note-link { display: inline-block; margin-top: 26px; padding-top: 16px; border-top: 1px dashed oklch(97% 0.01 70 / 0.45); font-size: 15px; color: oklch(97% 0.01 70); text-decoration: none; opacity: 0.85; }
.doors-note .note-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; color: oklch(97% 0.01 70); }
.btn-outline { text-decoration: none; display: inline-block; padding: 16px 38px; background: transparent; color: #a3453d; border: 1.5px solid #a3453d; border-radius: 999px; font-size: 17px; transition: background 0.2s ease, color 0.2s ease; }
.btn-outline:hover { background: #a3453d; color: oklch(98% 0.01 70); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .door, .door:hover { transition: none; }
}

@media (max-width: 1000px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .door:nth-child(n) { margin-top: 0; }
  .door:nth-child(even) { margin-top: 48px; }
}

@media (max-width: 860px) {
  .nav { padding: 20px 28px !important; }
  .nav-links { gap: 18px !important; font-size: 14px !important; }
  .nav-hide-md { display: none !important; }
  h1 { font-size: 46px !important; }
  h2 { font-size: 32px !important; }
}

@media (max-width: 600px) {
  .nav { padding: 14px 18px !important; }
  .nav-links { gap: 14px !important; font-size: 13px !important; }
  .nav-hide-sm { display: none !important; }
  .nav { flex-wrap: wrap; row-gap: 10px; }
  .nav-links { width: 100%; justify-content: space-between; }
  .cta-pill { padding: 8px 16px !important; }
  .doors { grid-template-columns: 1fr !important; gap: 40px !important; }
  .door:nth-child(n) { margin-top: 0 !important; }
  .door { padding: 18px 18px 26px; }
  .footer { flex-direction: column !important; gap: 16px !important; text-align: center !important; }
  h1 { font-size: 36px !important; }
  h2 { font-size: 26px !important; }
}

/* ---- Shared text, buttons and lists (all pages) ---- */
.kicker { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: #a3453d; margin: 0 0 20px; }
.body-copy { font-size: 17px; line-height: 1.75; color: oklch(38% 0.02 40); margin: 0 0 20px; max-width: 560px; }
.btn-row { display: flex; gap: 16px 24px; align-items: center; flex-wrap: wrap; }
.btn-primary { text-decoration: none; display: inline-block; padding: 14px 26px; background: #a3453d; color: oklch(98% 0.01 70); border: 1.5px solid #a3453d; border-radius: 999px; font-size: 16px; transition: background 0.2s ease, border-color 0.2s ease; }
.btn-primary:hover { background: #8a382f; border-color: #8a382f; color: oklch(98% 0.01 70); }
.btn-secondary { text-decoration: none; display: inline-block; padding: 14px 26px; background: transparent; color: #a3453d; border: 1.5px solid #a3453d; border-radius: 999px; font-size: 16px; transition: background 0.2s ease, color 0.2s ease; }
.btn-secondary:hover { background: #a3453d; color: oklch(98% 0.01 70); }
.list-label { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #a3453d; margin: 22px 0 8px; }
.ticks { list-style: none; margin: 0 0 18px; padding: 0; }
.ticks li { position: relative; padding: 5px 0 5px 24px; font-size: 15.5px; line-height: 1.55; color: oklch(38% 0.02 40); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 11px; width: 13px; height: 13px; transform: rotate(8deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23a3453d' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M10.2 2.2 C10 7 10.4 13 10.6 17.8'/%3E%3Cpath d='M3 6.3 C7.5 8.6 12.5 11.6 17.2 14.2'/%3E%3Cpath d='M3.4 14.4 C8 11.8 12.6 8.6 16.8 5.6'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; }
.placeholder { background: oklch(93% 0.06 85); outline: 1px dashed #a3453d; padding: 2px 6px; }

/* ---- Keyboard focus and skip link ---- */
:focus-visible { outline: 2px solid #a3453d; outline-offset: 3px; border-radius: 3px; }
.doors-note :focus-visible, .teaches :focus-visible, .strip :focus-visible { outline-color: oklch(97% 0.01 70); }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 20; background: #a3453d; color: oklch(98% 0.01 70); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip-link:focus { top: 12px; color: oklch(98% 0.01 70); }

/* ---- Menu: language switch and current page ---- */
.lang-switch { font-size: 13px; letter-spacing: 0.12em; color: oklch(48% 0.02 40); white-space: nowrap; }
.lang-switch a { text-decoration: none; }
.lang-switch a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lang-switch [aria-current] { color: oklch(25% 0.02 40); font-weight: 500; }
.nav-links a[aria-current="page"]:not(.cta-pill) { text-decoration: underline !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 6px; }

/* ---- Footer links ---- */
.footer-links { display: flex; gap: 12px 28px; flex-wrap: wrap; justify-content: flex-end; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 600px) {
  .kicker { font-size: 12px; }
  .body-copy { font-size: 16px; }
  .lang-switch { position: absolute; top: 20px; right: 18px; }
  .footer-links { justify-content: center; gap: 10px 20px; }
}
@media (max-width: 400px) {
  .nav-links { gap: 10px !important; font-size: 12.5px !important; }
}

/* ---- Graph paper: the "system" that hand-drawn marks move through ---- */
.grid-paper {
  background-color: oklch(96% 0.015 75);
  background-image:
    linear-gradient(oklch(78% 0.02 60 / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, oklch(78% 0.02 60 / 0.35) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---- Gentle reveal on scroll (see assets/js/reveal.js) ---- */
.reveal { opacity: 0; translate: 0 28px; transition: opacity 0.7s ease, translate 0.7s ease; }
.reveal.is-visible { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; translate: none; transition: none; } }