/* Luzomaks site components: header, footer, sections, dots, forms, FAQ.
   Uses only the colours in tokens.css. Square corners; circles only for dots. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:target { scroll-margin-top: var(--space-6); }

.skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 10;
  background: var(--text); color: var(--surface); padding: var(--space-3) var(--space-4);
  font: 500 15px/1 var(--font-display); text-decoration: none;
}
.skip:focus { top: var(--space-4); }

/* ---------- Header ---------- */
.site-header { border-bottom: var(--hairline) solid var(--rule); background: var(--surface); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-6); padding-block: var(--space-4);
}
.site-header .brand { display: block; width: 96px; flex: none; }
.site-header .brand img { width: 96px; height: auto; }
.site-nav { order: 3; width: 100%; border-top: var(--hairline) solid var(--rule); padding-top: var(--space-3); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); }
.site-nav a {
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
  text-decoration: none; display: inline-block; padding-block: var(--space-2);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.site-header .btn { padding: 14px 20px; font-size: 14px; }
@media (min-width: 760px) {
  .site-header .wrap { flex-wrap: nowrap; padding-block: var(--space-6); }
  .site-header .brand, .site-header .brand img { width: 112px; }
  .site-nav { order: 0; width: auto; border: 0; padding: 0; margin-left: auto; }
  .site-nav ul { gap: var(--space-8); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-16); }
.section + .section { border-top: var(--hairline) solid var(--rule); }
@media (min-width: 760px) { .section { padding-block: var(--space-24); } }
.section-dark { background: var(--surface-inverse); color: var(--text-inverse); }
.section-dark + .section, .section + .section-dark { border-top: 0; }
.section-dark .label, .section-dark .label-s { color: var(--ash); }
.section-dark a { color: var(--text-inverse); }
.section-quiet { background: var(--bone); }
.section-quiet + .section, .section + .section-quiet { border-top: 0; }

.eyebrow { margin: 0 0 var(--space-4); }
.h2 { font-size: clamp(32px, 6vw, 48px); font-weight: 300; max-width: 18ch; }
.h3 { font-size: 22px; font-weight: 400; line-height: 1.3; }
.lede { font-size: 18px; line-height: 30px; max-width: var(--text-max); margin: var(--space-6) 0 0; }
.prose { max-width: var(--text-max); }
.prose p { margin: var(--space-4) 0 0; }
.muted { color: var(--text-secondary); }
.section-dark .muted { color: var(--mist); }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
  .split-wide-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-12) var(--space-16); }
@media (min-width: 900px) { .hero { padding-block: var(--space-16) var(--space-24); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-12); } }
.hero h1 { font-size: clamp(64px, 16vw, 104px); line-height: 0.95; }
.hero .tagline { font-size: clamp(24px, 5vw, 32px); font-weight: 300; line-height: 1.2; margin: var(--space-4) 0 0; }
.hero .lede { max-width: 30ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.hero-facts { margin: var(--space-6) 0 0; }
.hero-media img { width: 100%; }

.text-link {
  font: 500 15px/1.4 var(--font-display); color: var(--text); text-decoration: underline;
  text-underline-offset: 6px; text-decoration-thickness: 1px; display: inline-block; padding-block: var(--space-2);
}
.text-link:hover { text-decoration-thickness: 2px; }
.section-dark .text-link { color: var(--text-inverse); }

/* ---------- Dot grids (Kontinu motif) ---------- */
.dots { --d: 12px; --g: 7px; --cols: 12; display: grid; grid-template-columns: repeat(var(--cols), var(--d)); gap: var(--g); width: max-content; }
.dots span { width: var(--d); height: var(--d); border-radius: var(--radius-dot); border: var(--stroke) solid var(--text); }
.dots span.on { background: var(--text); }
.dots span.now { border-color: var(--accent); background: var(--accent); }
.section-dark .dots span { border-color: var(--text-inverse); }
.section-dark .dots span.on { background: var(--text-inverse); }
.dots-faint span:not(.on) { border-color: var(--ash); }
.section-dark .dots-faint span:not(.on) { border-color: var(--stone); }
@media (max-width: 400px) { .dots { --d: 10px; --g: 6px; } }

.years-grid { display: grid; gap: var(--space-8); margin-top: var(--space-12); }
@media (min-width: 900px) { .years-grid { grid-template-columns: repeat(3, max-content); justify-content: start; gap: var(--space-12); } }
.year-block .dots { --cols: 13; margin-top: var(--space-3); }
.year-block .h3 { margin-top: var(--space-1); }

/* ---------- Feature list (Why Kontinu) ---------- */
.features { display: grid; gap: 0; margin-top: var(--space-12); border-top: var(--hairline) solid var(--rule-strong); }
.feature { padding-block: var(--space-6); border-bottom: var(--hairline) solid var(--rule); }
.feature p { margin: var(--space-2) 0 0; color: var(--text-secondary); }
@media (min-width: 900px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); border-top: 0; }
  .feature { border-bottom: 0; border-top: var(--hairline) solid var(--rule-strong); padding-top: var(--space-6); }
}
.feature .num { display: block; margin-bottom: var(--space-4); }

/* ---------- Figures ---------- */
figure { margin: 0; }
figcaption { margin-top: var(--space-3); }
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-12); }
@media (min-width: 900px) { .gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
.gallery picture, .gallery img { width: 100%; }
img.narrow, .gallery img.narrow { width: 100%; max-width: 420px; }

.checklist { list-style: none; margin: var(--space-8) 0 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); max-width: var(--text-max); }
.checklist li { display: flex; gap: var(--space-4); align-items: baseline; padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--rule); }
.checklist li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radius-dot); background: var(--text); transform: translateY(-2px); }
.checklist-2 { columns: 1; }

/* ---------- Details table ---------- */
.facts { width: 100%; max-width: 760px; border-collapse: collapse; margin-top: var(--space-8); }
.facts th, .facts td { text-align: left; vertical-align: top; padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--rule); }
.facts tr:first-child th, .facts tr:first-child td { border-top: var(--hairline) solid var(--rule-strong); }
.facts th { width: 38%; padding-right: var(--space-4); font: 500 12px/24px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 520px) {
  .facts tr { display: block; padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--rule); }
  .facts tr:first-child { border-top: var(--hairline) solid var(--rule-strong); }
  .facts th, .facts td { display: block; width: auto; border: 0 !important; padding: 0; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-top: var(--space-8); border-top: var(--hairline) solid var(--rule-strong); }
.faq details { border-bottom: var(--hairline) solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4);
  align-items: baseline; padding-block: var(--space-4); font-size: 18px; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--font-mono); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { text-decoration: underline; text-underline-offset: 6px; }
.faq details p { margin: 0 0 var(--space-6); max-width: var(--text-max); color: var(--text-secondary); }

/* ---------- Signup forms ---------- */
.signup { max-width: 560px; margin-top: var(--space-8); }
.signup-row { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 520px) { .signup-row { flex-direction: row; } .signup-row .field { flex: 1; } }
.signup label { display: block; margin-bottom: var(--space-2); }
.signup input[type="email"] {
  width: 100%; min-height: 48px; border-radius: var(--radius-0); border: var(--stroke) solid var(--text);
  background: var(--surface-raised); color: var(--text); padding: 0 var(--space-4);
  font: 400 16px/1 var(--font-display); -webkit-appearance: none; appearance: none;
}
.signup input[type="email"]::placeholder { color: var(--text-muted); }
.signup input[aria-invalid="true"] { border-color: var(--signal); }
.signup .btn { width: 100%; }
@media (min-width: 520px) { .signup .btn { width: auto; align-self: flex-end; } }
.signup .btn[disabled] { opacity: 0.7; cursor: progress; }
.signup .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 26px; margin: var(--space-3) 0 0; font-size: 16px; }
.form-status.is-error { color: var(--signal); }
.form-status.is-ok { color: var(--text); }
.form-note { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: 16px; }
.section-dark .signup input[type="email"] { border-color: var(--text-inverse); }
.section-dark .signup .btn { background: var(--text-inverse); color: var(--text); }
.section-dark .signup .btn:hover { background: var(--white); }
.section-dark .form-status.is-ok { color: var(--text-inverse); }
.section-dark .form-status.is-error { color: var(--text-inverse); background: var(--signal); padding: var(--space-2) var(--space-3); }
.section-dark .form-status.is-error:empty { padding: 0; background: none; }
.section-dark .form-note { color: var(--mist); }

.notice { max-width: 560px; margin-top: var(--space-8); background: var(--accent-wash); color: var(--text); padding: var(--space-6); border-left: var(--heavy) solid var(--accent); }
.notice p { margin: var(--space-2) 0 0; }
.notice .label { color: var(--accent); }
.section-dark .notice { background: var(--graphite); color: var(--text-inverse); border-left-color: var(--text-inverse); }
.section-dark .notice .label { color: var(--text-inverse); }

/* ---------- Final call ---------- */
.final .h2 { max-width: 14ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--space-16) var(--space-8); }
.site-footer a { color: var(--text-inverse); }
.footer-top { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .footer-top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.footer-brand img { width: 112px; height: auto; }
.footer-brand p { margin: var(--space-4) 0 0; color: var(--mist); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.footer-nav a { font: 500 12px/18px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; display: inline-block; padding-block: var(--space-2); }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.footer-bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--hairline) solid var(--graphite); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; }
.footer-bottom .label-s { color: var(--ash); }

/* ---------- Simple text pages (privacy, terms, contact) ---------- */
.page-head { padding-block: var(--space-12) var(--space-8); }
.page-head h1 { font-size: clamp(36px, 7vw, 56px); }
.doc { padding-bottom: var(--space-24); }
.doc h2 { font-size: 24px; font-weight: 400; margin-top: var(--space-12); }
.doc p, .doc li { max-width: var(--text-max); }
.doc p { margin: var(--space-4) 0 0; }
.doc ul { margin: var(--space-4) 0 0; padding-left: 20px; }
.doc li { margin-top: var(--space-2); }
@media (min-width: 900px) { .split .dots { --d: 16px; --g: 9px; } }

/* ---------- Comfortable reading on laptops and desktops ---------- */
.label-s { font-size: 11px; line-height: 16px; }
@media (min-width: 1000px) {
  :root { --text-max: 700px; }
  body { font-size: 18px; line-height: 1.7; }
  .lede { font-size: 22px; line-height: 36px; }
  .hero .lede { max-width: 32ch; }
  .hero .tagline { font-size: 36px; }
  .h2 { font-size: 54px; }
  .h3 { font-size: 26px; }
  .label { font-size: 13px; line-height: 20px; }
  .label-s { font-size: 12px; line-height: 18px; }
  .site-nav a, .footer-nav a { font-size: 13px; }
  .btn { font-size: 17px; padding: 18px 30px; }
  .site-header .btn { font-size: 16px; padding: 15px 24px; }
  .text-link { font-size: 17px; }
  .feature p, .steps p { font-size: 18px; }
  .faq summary { font-size: 21px; padding-block: var(--space-6); }
  .faq details p { font-size: 18px; }
  .facts th { font-size: 13px; line-height: 30px; }
  .facts td { font-size: 18px; }
  .form-note, .form-status { font-size: 17px; }
  .signup input[type="email"] { font-size: 18px; min-height: 56px; }
  .signup .btn { min-height: 56px; }
  .doc h2 { font-size: 28px; }
}

/* ---------- Click to enlarge diary pages ---------- */
.zoom { position: relative; display: block; cursor: zoom-in; }
.zoom:has(.narrow) { max-width: 420px; }
.zoom::after {
  content: "Enlarge"; position: absolute; right: var(--space-3); bottom: var(--space-3);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--carbon); color: var(--bone); padding: 8px 10px;
}
.section-dark .zoom::after { background: var(--bone); color: var(--carbon); }
.zoom:hover::after, .zoom:focus-visible::after { text-decoration: underline; text-underline-offset: 3px; }
.zoom-dialog {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--carbon); color: var(--bone);
}
.zoom-dialog::backdrop { background: var(--carbon); }
.zoom-dialog[open] { display: flex; flex-direction: column; }
.zoom-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--hairline) solid var(--graphite); }
.zoom-bar .label-s { color: var(--ash); }
.zoom-close { font: 500 15px/1 var(--font-display); background: var(--bone); color: var(--carbon); border: 0; border-radius: var(--radius-0); min-height: 44px; padding: 0 var(--space-4); cursor: pointer; }
.zoom-close:hover { background: var(--white); }
.zoom-stage { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-4); -webkit-overflow-scrolling: touch; }
.zoom-stage img { width: auto; max-width: none; height: auto; background: var(--white); }
.zoom-stage.fit img { max-width: 100%; max-height: 100%; }
.zoom-stage.fit { align-items: center; cursor: zoom-in; }
.zoom-stage:not(.fit) { cursor: zoom-out; }
.zoom-loading { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }

/* ---------- A week, up close (guided close-up tour) ---------- */
.tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-16); }
@media (min-width: 900px) { .tour { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; } }
.tour-frame { order: -1; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--white); border: var(--hairline) solid var(--rule); }
@media (min-width: 900px) { .tour-frame { order: 0; } }
.tour-frame img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform-origin: 0 0; transition: transform 1.6s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
.tour-steps { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.tour-steps li { border-bottom: var(--hairline) solid var(--rule); }
.tour-steps button {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-4); color: var(--text-secondary);
}
.tour-steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-title { display: block; font: 400 18px/1.35 var(--font-display); }
.tour-desc { display: none; margin-top: var(--space-1); color: var(--text-secondary); }
.tour-steps .is-active button { color: var(--text); }
.tour-steps .is-active .tour-desc { display: block; }
.tour-steps button::before { content: ""; position: absolute; left: 0; top: var(--space-3); bottom: var(--space-3); width: var(--heavy); background: transparent; }
.tour-steps .is-active button::before { background: var(--rule); }
.tour-bar { position: absolute; left: 0; top: var(--space-3); width: var(--heavy); height: 0; background: var(--text); }
.tour.is-playing .tour-steps .is-active .tour-bar { animation: tour-fill var(--tour-step, 4.5s) linear forwards; }
.tour.is-paused .tour-steps .is-active .tour-bar { animation-play-state: paused; }
@keyframes tour-fill { to { height: calc(100% - var(--space-6)); } }
.tour-toggle {
  margin-top: var(--space-4); font: 500 12px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: var(--stroke) solid var(--text); border-radius: var(--radius-0); color: var(--text);
  min-height: 40px; padding: 0 var(--space-4); cursor: pointer;
}
.tour-toggle:hover { background: var(--text); color: var(--surface); }
@media (min-width: 1000px) { .tour-title { font-size: 21px; } .tour-desc { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .tour-frame img { transition: none; } .tour-toggle { display: none; } }

/* ---------- Hover to read (mouse and trackpad only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .zoom { overflow: hidden; }
  .zoom img { transition: transform .35s ease; }
  .zoom.is-peeking img { transform: scale(2.2); }
  .zoom::after { content: "Hover to read · Click to enlarge"; }
  .zoom.is-peeking::after { opacity: 0; }
}