/* Somniary base accessibility styles. Linked on every page.
   Keep this small and global: focus-visible, skip link, reduced motion. */

/* Core color tokens. Single source of truth for the non-section palette.
   Section colors (the .sec-* accents) live in css/tokens.css. These are the
   brand neutrals and terracotta core, shared by every page. Values are the
   canonical ones from CLAUDE.md; changing a colour here changes it site-wide.
   Trap: --terra-deep (#A67B4F) is terracotta deep, NOT traditions dark
   (#B08833). Retired, never reintroduce: #5A7A6E, #C8956B. */
:root{
  --ink:#2A2E35; --ink-soft:#4A4A4A;
  --ac-terra:#E8A87C; --ac-terra-dark:#D4956B; --terra-deep:#A67B4F;
  --bronze:#B87333;
  --cream:#FEFDFB; --cream-2:#F5F0EB; --cream-tint:#FDF0E9;
  --gray:#5B6472; --gray-2:#6B7280;
  --border:#E8ECF0; --panel:#FAFBFC;
  --border-warm:#F1DAC9;
  /* Text-link colour. --ac-terra-dark (#D4956B) is a brand fill and fails
     WCAG AA as text (~2.5:1), so body links use this deeper terracotta
     (~4.8:1 on cream) instead. Fills and badges keep --ac-terra-dark. */
  --link:#9C5F32; --link-hover:#7E4B26;
  /* CTA fill. White on --ac-terra/--ac-terra-dark is only 2.03:1, so buttons
     do not use the light terracotta: white on these reads 5.13:1 to 7.19:1.
     Same values as --link today, but a separate role: change one, not both.
     Anything that is not a button (the moon, section rules, icons, badges,
     .response-avatar) keeps the light terracotta. */
  --cta:#9C5F32; --cta-dark:#7E4B26;
}

/* Body text links (classless prose links) get the accessible --link colour.
   Pages set their own ".legal-main a" / ".content a" style at the same
   specificity, and on 51 of the 137 pages base.css is linked BEFORE the page's
   own <style>, so source order loses and !important is the only thing that wins.

   :not([class]) alone was not the scope it looks like: nav, dropdown, footer
   and breadcrumb links carry no class either, so this rule repainted 31 of the
   38 classless links on the homepage. The nav over the hero went brown instead
   of white, and the dropdown fell to 2.66:1 on its dark panel: a contrast fix
   causing a contrast failure. Chrome is excluded structurally instead.

   The exclusion sits inside :where() so it adds no specificity: this rule stays
   at (0,1,1), exactly where it was, and only !important decides. Widening the
   list therefore cannot disturb anything else. Keep both lines in step.

   :not([style]) is load-bearing: !important beats an inline style too, so
   without it this rule repainted every inline-coloured link, including CTA
   buttons whose white text turned to --link and vanished on their dark fill.
   A link someone styled inline has stated its intent; defer to it. Bare prose
   links that need the accessible colour are fixed at source to var(--link). */
a:not([class]):not([style]):not(:where(.nav a, .somniary-footer a, #mobOv a, .breadcrumb a, .crumb a, .hero-breadcrumb a)){color:var(--link)!important}
a:not([class]):not([style]):not(:where(.nav a, .somniary-footer a, #mobOv a, .breadcrumb a, .crumb a, .hero-breadcrumb a)):hover{color:var(--link-hover)!important}

/* Tier accent. The paid journal shifts its signal colour deeper as you go up:
   Free stays terracotta, Companion warms to gold, Reverie deepens to plum. All
   three already live in the site palette (gold and plum are library sections;
   plum is the monthly-letter colour). Journal pages set html[data-tier] from the
   signed-in plan; nothing else needs to change, the accents read these vars. */
html[data-tier="companion"]{--ac-terra:#CDA349;--ac-terra-dark:#B2882F;--terra-deep:#836026;--deep:#836026;--cream-tint:#FBF2DE;--ac:#CDA349;--ac-dark:#B2882F;}
html[data-tier="reverie"]{--ac-terra:#8A5A7A;--ac-terra-dark:#734862;--terra-deep:#5C3A4F;--deep:#5C3A4F;--cream-tint:#F4EAF1;--ac:#8A5A7A;--ac-dark:#734862;}

/* Stop the off-canvas mobile menu (fixed, translated off-screen) from adding
   horizontal scroll on small screens. clip, not hidden, so position:sticky
   keeps working (hidden would force a scroll container). */
html,body{overflow-x:clip}

/* ── Mobile refinements ──────────────────────────────────────────────
   base.css is the last stylesheet on every page, so these win ties with
   the shared/library sheets; !important only where a page's inline
   <style> would otherwise win. All values measured at 375px, not guessed.
   The site has no horizontal overflow, so the phone problems are the
   quieter ones: sub-16px inputs, 16-24px tap targets, 11-13px text and
   18px symbol glyphs. */

/* iOS Safari zooms the whole page in when a focused field is under 16px.
   That jolt lands on the product's main action (writing a dream), and on
   sign-in. 16px is the floor that prevents it. */
@media (max-width:768px){
  input,textarea,select{font-size:16px!important}
}

@media (max-width:560px){
  /* Readable minimums. Measured worst offenders were 10.88-12.5px. Real
     content gets >=14px; uppercase micro-labels may sit a little lower. */
  .hero-trust,.mob-cta-sub,.sym-excerpt,.gift-option-desc,.sf-disclaimer,
  .plan-annual,.plan-period,.gift-link{font-size:14px!important}
  .sf-meta,.sf-meta-line,.sf-brand-location{font-size:13px!important}
  .plan-badge,.eeat-block-label,.dd-label{font-size:12.5px!important}
  /* Homepage + interpreter long tail: disclaimers and notes people are
     meant to actually read, measured at 10.9-12.5px. */
  .privacy-note,.moon-card-tip,.tool-disclaimer,.hp-dtch-cta{font-size:14px!important}
  .hp-dtch-meta{font-size:13px!important}
  /* Status/eyebrow micro-labels: readable, but they may stay compact. */
  .hp-dtch-eyebrow,.char-count,.draft-saved{font-size:12.5px!important}
  /* Card badges and meta bottomed out at 9.6-10.4px. Compact is fine, that
     small is not. (.dd-arrow is left alone: a decorative glyph, not text.) */
  .hp-card-tag,.hp-card-time,.hp-ai-box-head{font-size:12px!important}
  .hp-dtch-meta span{font-size:12.5px!important}
  .sym-name{font-size:17px!important}
  .mob-chip{font-size:14px!important}

  /* Dream symbol glyphs render at 18px, too small to read as icons. */
  .sym-glyph svg{width:30px!important;height:30px!important}

  /* Tap targets. WCAG 2.5.8 wants 24px minimum; 44px is comfortable.
     Footer link lists stay a touch smaller so the footer does not balloon,
     but still clear the 24px floor. */
  .nav-toggle{min-width:44px;min-height:44px}
  .mob-chip{min-height:44px;display:inline-flex;align-items:center}
  .sf-col li a{display:inline-block;padding:10px 0}
  .somniary-footer .sf-social a{width:44px!important;height:44px!important}
  .gift-link{display:inline-block;padding:10px 0}
  /* Reverie's "Soon" badge renders at 9.6px, unreadable on a phone. */
  .soon-tag{font-size:11px!important}
  /* "Facts That Will Surprise You" cards read heavy on a phone. The text is
     already .95rem (same as body prose), so trim the bulk instead: smaller
     card padding and a smaller moon glyph, so the section stops feeling big. */
  .fact{padding:20px}
  .fact-moon{font-size:1.05rem;margin-bottom:8px}
}

:focus-visible{outline:2px solid var(--ac,#E8A87C);outline-offset:2px;border-radius:2px}

/* When width/height attributes are present, keep aspect ratio (prevents distortion
   and layout shift). Pages that set an explicit img height override this. */
img{height:auto}

.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:#2A2E35;color:#FEFDFB;padding:10px 18px;border-radius:0 0 8px 0;font:600 .95rem/1.2 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:none}
.skip-link:focus{left:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Brand logotype: Lora just for the wordmark (nav + hero). Element+class
   specificity (a.nav-logo) wins over the per-page and shared .nav-logo rules
   without !important, so the logo gets its own literary voice while headings
   and body keep Outfit / Plus Jakarta Sans. */
a.nav-logo{font-family:'Lora',Georgia,serif;font-weight:600;font-size:1.8rem;letter-spacing:.01em}
/* Footer wordmark matches the nav logotype (Lora). Descendant selector wins
   over the per-page .sf-brand-name rule without !important. */
.sf-brand-logo .sf-brand-name{font-family:'Lora',Georgia,serif;font-weight:600}

/* Inline moon mark for buttons, labels and section dividers. One crescent (the
   brand's tilted moon) that inherits the surrounding text color via currentColor,
   so it works on terracotta buttons, tinted labels and dividers alike. Replaces
   the old mixed Unicode glyphs (half-disc, first-quarter) with a single shape. */
.mn{display:inline-block;width:.85em;height:.85em;vertical-align:-.12em;fill:currentColor;transform:rotate(-18deg)}

/* Unified line-icon family (batch 2). Icons inherit the section color via
   currentColor on their container, so one shape works across all sections. */
.crosslink-ico svg{width:20px;height:20px;display:inline-block;vertical-align:-.28em}
.bc-sep svg{width:9px;height:9px;display:inline-block;vertical-align:0}
.filter-btn svg{width:15px;height:15px;display:inline-block;vertical-align:-.18em;margin-right:3px}
.promise-icon svg{width:26px;height:26px;display:inline-block}
/* Decorative section "eyebrow" moons above headings: one crescent, sized to the
   font-size the class already sets, colored by that class via currentColor. */
.deity-icon svg,.newsletter-icon svg,.horizon-icon svg,.no-results-icon svg,.diff-icon svg,.principle-icon svg{width:1em;height:1em;display:inline-block;vertical-align:-.12em}
.sym-glyph svg{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.12em}

/* Reading-progress bar (only shows on pages that include #prog). */
.pb{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--ac),var(--ac-dark),var(--ac));z-index:1002;transition:width .1s;width:0}

/* Inline mid-article CTA to the Dream Companion (blog growth lever). */
.inline-cta{display:flex;gap:12px;align-items:center;margin:34px 0;padding:15px 20px;background:rgba(184,115,51,.06);border:1px solid rgba(184,115,51,.16);border-left:3px solid var(--ac);border-radius:0 12px 12px 0}
.inline-cta svg{flex-shrink:0;color:var(--ac-dark)}
.inline-cta p{margin:0;font-size:.93rem;line-height:1.6;color:#4A4A4A}
.inline-cta a{color:var(--ac-dark);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(184,115,51,.35)}
.inline-cta a:hover{border-bottom-color:var(--ac-dark)}

/* Reading rhythm + GEO. Lives here (base.css, loaded by ALL 109 library pages),
   not in symbols.css (43 pages only), so symbols, traditions, science and phenomena
   all render the short answer / in short / honest note. Colours follow --ac per section. */
.geo-answer{margin:0 0 20px}
.geo-answer .short-badge{display:inline-flex;align-items:center;gap:6px;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-deep);background:var(--ac-bg);border:1px solid var(--ac);border-radius:20px;padding:3px 11px;margin-bottom:11px}
.geo-answer .short-badge svg{width:.9em;height:.9em;transform:rotate(-18deg)}
.geo-answer .short-badge svg path{fill:var(--ac-dark)}
.geo-answer p{font-size:1.03rem;line-height:1.65;color:#2A2E35;font-weight:500;margin:0}
.in-short{background:var(--ac-bg);border:1px solid var(--ac);border-radius:14px;padding:16px 18px;margin:0}
.in-short .in-short-t{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-deep);margin:0 0 10px}
.in-short ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.in-short li{display:flex;gap:10px;font-size:.9rem;color:#2A2E35;line-height:1.5}
.in-short li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;transform:rotate(-18deg)}
.in-short li svg path{fill:var(--ac-dark)}
.honest-note{background:#FAFBFC;border:1px dashed var(--ac);border-radius:14px;padding:15px 18px;margin:8px 0}
.honest-note .honest-t{font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ac-deep);margin:0 0 5px}
.honest-note p{font-size:.88rem;color:#5B6472;line-height:1.65;margin:0}
/* Footer grid: collapse columns on smaller screens (global, wins over per-page inline via higher specificity) */
@media(max-width:860px){.somniary-footer .sf-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.somniary-footer .sf-grid{grid-template-columns:1fr;gap:28px}}
/* Back-to-top button (global): appears after scrolling, bronze, bottom-right */
.btt{position:fixed;bottom:24px;right:24px;width:40px;height:40px;border-radius:50%;background:#B87333;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 4px 16px rgba(184,115,51,.3);opacity:0;transform:translateY(10px);transition:all .3s;z-index:100;pointer-events:none}
.btt.show{opacity:1;transform:translateY(0);pointer-events:auto}
.btt:hover{background:#96552a;transform:translateY(-2px)}

/* Print / "Save as PDF". Strip the chrome, keep the reading. Also improves
   reader modes and clipping into note apps. No print button anywhere: this
   serves everyone who prints, which is more people than would click one. */
@page{margin:18mm 16mm}
@media print{
  .nav,#mobOv,#mobClose,.nav-toggle,.somniary-footer,.sf-signup,.btt,
  .hero-bg,.hero-grad,.photo-div,.cta-sec,.newsletter-box,.newsletter-section,
  .breadcrumb,.hero-breadcrumb,.crumb,.keep-reading,.mid-cta{display:none!important}
  html,body{background:#fff!important;color:#000!important;font-size:11.5pt;line-height:1.55}
  *{box-shadow:none!important;text-shadow:none!important;background-image:none!important;filter:none!important;backdrop-filter:none!important}
  main,.content-area,.article-body,.sec,.sec-inner{max-width:none!important;padding:0!important;margin:0 auto!important;width:auto!important}
  .hero,.hero-symbol,.hero-tradition{min-height:0!important;padding:0 0 8mm!important;display:block!important}
  h1,h2,h3,h4{color:#000!important;page-break-after:avoid;break-after:avoid-page}
  p{orphans:3;widows:3}
  img,figure,blockquote,table,.in-short,.honest-note,.sources-box{page-break-inside:avoid;break-inside:avoid}
  img{max-width:100%!important;height:auto!important}
  a{color:#000!important;text-decoration:underline}
  /* Expand outbound URLs so a printed page stays checkable. Internal links and
     anchors are left alone: printing "/dream-library/..." helps nobody. */
  .article-body a[href^="http"]::after,.content-area a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}
  body::after{content:"somniary.com";display:block;margin-top:10mm;padding-top:3mm;border-top:1px solid #bbb;font-size:9pt;color:#555}
}