:root {
  --bg:        #F5F3EF;
  --surface:   #FFFFFF;
  --ink:       #1A1B1A;
  --ink-mid:   #2E302E;
  --ink-faint: #5A5C58;
  --rule:      rgba(0,0,0,0.10);
  --rule-hard: rgba(0,0,0,0.18);
  --moss:      #3D5A47;
  --moss-dim:  rgba(61,90,71,0.07);
  --red:       #C44D3A;
  --red-dim:   rgba(196,77,58,0.07);
}

/* ──────────────────────────────────────────────────────────────────────────
   FONT FLOOR RULE (locked):
   Nothing below 0.78rem in production UI.
   Nothing below 0.82rem for any text the user reads (vs. micro-meta labels).
   Body copy stays at 1rem (= base 17px).
   This is the older-reader floor. Do not bump anything down past these.
   ────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.header {
  border-bottom: 1px solid var(--rule);
  padding: 1rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 300;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.header-title::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-image: url("/design/icon-192.png");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.header-site {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.6rem;     /* easier tap target */
  margin: -0.4rem -0.6rem;    /* keep visual position the same */
  border-radius: 2px;
}
.header-site:hover { color: var(--ink); }

/* ── Main ──────────────────────────────────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.4rem 6rem;
}

.meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 300;
  margin: 0 0 1.5rem 0;
  line-height: 1.1;
}

p {
  line-height: 1.8;
  color: var(--ink-mid);
  margin: 0 0 1.4rem 0;
  font-size: 1rem;
}

/* ── Action / buttons ──────────────────────────────────────────────────── */
.action {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: 0.95rem 2rem;          /* larger tap target */
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;             /* up from 0.7rem */
  letter-spacing: 0.12em;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 44px;               /* iOS minimum touch target */
  line-height: 1.2;
}
.btn:hover {
  background: var(--ink);
  color: var(--surface);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}
footer .note {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
footer a {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
  padding: 0.3rem 0.2rem;        /* easier tap target without visual bulk */
}
footer a:hover { color: var(--ink); }

.footer-links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Accessibility: visible keyboard focus ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}
.btn:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
}

/* ── Accessibility: respect reduced-motion preference ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html { font-size: 16px; }                /* up from 15px */
  main { padding: 2rem 1.2rem 5rem; }
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .btn { width: 100%; text-align: center; }  /* full-width buttons on phones */
}

/* ──────────────────────────────────────────────────────────────────────────
   BUILDER OVERRIDE (developer-only, retained as-is)
   ────────────────────────────────────────────────────────────────────────── */

.builder-mode-active .wanble-symbol {
    border: 1px dashed var(--moss);
    background-color: var(--moss-dim);
    cursor: pointer;
    padding: 2px 4px;
}

.builder-mode-active .ghost-layer {
    display: none !important;
    visibility: hidden;
}

.builder-mode-active::after {
    content: "ARCHITECT ACCESS: UNRESTRICTED";
    position: fixed;
    bottom: 0.8rem;
    right: 1.4rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;             /* dev badge stays small but readable */
    color: var(--moss);
    letter-spacing: 0.1em;
    opacity: 0.8;
    pointer-events: none;
    z-index: 9999;
}

/* ── Section labels ────────────────────────────────────────────────────── */
.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.92rem;              /* up slightly from 0.88rem */
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}