/* =====================================================================
   WHAT WAS GIVEN · shared styles
   Every page loads this file. Change a color, button, header or footer
   here and it changes on every page.
   ===================================================================== */

/* ---------------------------------------------------------------------
   COLOR SCHEMES
   Three schemes the visitor picks with the header dots, each with Day
   and Night. Meeting Room is the default. Every page uses these token
   names, so a scheme only has to be defined once, here.
   --gilt is the accent color (the name stayed from the original design).
   --------------------------------------------------------------------- */

/* Meeting Room · Day (default) */
:root {
  color-scheme: light;
  --bg: #E4E8DF;  --surface: #F3F5EF;  --surface-2: #ECEFE7;  --edge: #CDD4C5;
  --text: #2A2824;  --text-soft: #5B5E56;  --reflection: #3C3F39;
  --gilt: #7A5436;  --gilt-bright: #93674A;  --on-accent: #FFFFFF;
  --verdigris: #5E7F69;  --rose: #A2574A;
  --hairline: rgba(42, 40, 36, .14);
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px -24px rgba(0,0,0,.25);
}
/* Meeting Room · Night */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171A16;  --surface: #20241F;  --surface-2: #1C1F1B;  --edge: #30362E;
  --text: #ECEBE4;  --text-soft: #A8AB9F;  --reflection: #CBCDC3;
  --gilt: #D2A57E;  --gilt-bright: #E3BC98;  --on-accent: #1A1510;
  --verdigris: #8DB09A;  --rose: #D8917F;
  --hairline: rgba(236, 235, 228, .14);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 24px 54px -26px rgba(0,0,0,.7);
}

/* Sage and Stone · Day */
:root[data-scheme="sage"] {
  --bg: #E6EBE4;  --surface: #F4F6F2;  --surface-2: #EDF1EB;  --edge: #CCD5CA;
  --text: #23302A;  --text-soft: #56635B;  --reflection: #36433B;
  --gilt: #43664F;  --gilt-bright: #557C62;  --on-accent: #FFFFFF;
  --verdigris: #3F6E66;  --rose: #9A5B4E;
  --hairline: rgba(35, 48, 42, .14);
}
/* Sage and Stone · Night */
:root[data-scheme="sage"][data-theme="dark"] {
  --bg: #141A16;  --surface: #1C231E;  --surface-2: #181E1A;  --edge: #2C362F;
  --text: #E7ECE6;  --text-soft: #A5B1A8;  --reflection: #C8D1CA;
  --gilt: #9CC3A8;  --gilt-bright: #B6D6BF;  --on-accent: #10160F;
  --verdigris: #8FC0B6;  --rose: #D9A195;
  --hairline: rgba(231, 236, 230, .14);
}

/* Morning Sky · Day */
:root[data-scheme="sky"] {
  --bg: #E7ECF0;  --surface: #F6F8FA;  --surface-2: #EEF2F5;  --edge: #CFD8DF;
  --text: #1D2731;  --text-soft: #53606B;  --reflection: #36424D;
  --gilt: #3B6689;  --gilt-bright: #4C7BA2;  --on-accent: #FFFFFF;
  --verdigris: #4F8174;  --rose: #B06A5E;
  --hairline: rgba(29, 39, 49, .14);
}
/* Morning Sky · Night */
:root[data-scheme="sky"][data-theme="dark"] {
  --bg: #0F151C;  --surface: #17202A;  --surface-2: #131B24;  --edge: #283544;
  --text: #E6ECF1;  --text-soft: #9EABB8;  --reflection: #C4CED8;
  --gilt: #93BBDB;  --gilt-bright: #B2D0E8;  --on-accent: #0F151C;
  --verdigris: #7FB3A5;  --rose: #D9968A;
  --hairline: rgba(230, 236, 241, .14);
}

/* ---------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 5vw, 3.5rem) clamp(1.15rem, 5vw, 2.75rem) 3.5rem;
}
.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; }
:focus-visible { outline: 2px solid var(--gilt-bright); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------------
   HEADER: the small home link, the wordmark, and the controls
   --------------------------------------------------------------------- */
.crumb { margin: 0 0 .9rem; font-size: .82rem; }
.crumb a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gilt); }
.crumb a:hover { color: var(--text); }

.masthead {
  display: flex;
  flex-wrap: wrap;
  row-gap: .75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}
.wordmark {
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.wordmark span { color: var(--gilt); }
a.wordmark:hover { color: var(--gilt); }

.controls { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

.textsize { display: flex; align-items: center; border: 1.5px solid var(--text-soft); border-radius: 999px; padding: .08rem; }
.textsize button { border: 0; background: transparent; color: var(--text); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; line-height: 1; padding: .28rem .55rem; border-radius: 999px; cursor: pointer; }
.textsize .smaller { font-size: .85rem; }
.textsize .larger { font-size: 1.2rem; }
.textsize button:disabled { opacity: .35; cursor: default; }

.schemes { display: flex; align-items: center; gap: .4rem; }
.swatch {
  width: 1.15rem; height: 1.15rem;
  border-radius: 999px;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--text-soft);
  cursor: pointer;
  padding: 0;
  transition: transform .12s, box-shadow .12s;
}
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }

.theme-toggle {
  border: 1.5px solid var(--text-soft);
  background: transparent;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .65rem;
  border-radius: 999px;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--text); }

/* ---------------------------------------------------------------------
   BUTTONS AND LINKS (new pages use .button; the two older modules keep
   their own .btn, tuned to the same contrast)
   --------------------------------------------------------------------- */
.button {
  font-family: "Archivo", sans-serif;
  font-size: .9rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1.5px solid var(--gilt);
  background: var(--gilt);
  color: var(--on-accent);
  padding: .72rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .15s, border-color .15s;
}
.button:hover { background: var(--gilt-bright); border-color: var(--gilt-bright); }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button.quiet { background: transparent; border-color: var(--text); color: var(--text); }
.button.quiet:hover { border-color: var(--gilt); }

a.book, .linkbtn, .text-link {
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  padding: .2rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gilt);
}
a.book:hover, .linkbtn:hover, .text-link:hover { color: var(--gilt); }

/* ---------------------------------------------------------------------
   FOOTER: the module's own line (colophon) and the site links
   --------------------------------------------------------------------- */
.colophon {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--text-soft);
}
.site-links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  font-size: .85rem;
}
.site-links a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gilt); text-decoration-thickness: 2px; }
.site-links a:hover { color: var(--gilt); }
.colophon + .site-links { margin-top: .8rem; }
.site-links:first-child { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }

/* ---------------------------------------------------------------------
   PHONES AND TOUCHSCREENS
   Bigger invisible tap areas on touchscreens only. Mouse users see no change.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .controls { gap: 1rem; }
  .schemes { gap: 1.4rem; }
  .swatch, .theme-toggle { position: relative; }
  .swatch::after { content: ""; position: absolute; inset: -.8rem -.7rem; }
  .theme-toggle::after { content: ""; position: absolute; inset: -.5rem -.25rem; }
  .textsize button { padding: .55rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .swatch, .button { transition: none; }
}

/* =====================================================================
   TEMPLATE-ANATOMY COMPONENTS
   Section shapes copied from the Lovable template (header/nav/date,
   hero, two-column card+aside, three module cards, in-progress strip).
   Rendered with this site's own scheme tokens (--bg/--surface/--gilt/
   etc.) and solid --surface panels, not the template's translucent
   dark-glass treatment, which only works against its single fixed
   dark canvas.
   ===================================================================== */

.masthead { gap: 1.25rem 1.5rem; }
.wordmark { display: inline-flex; align-items: center; gap: .55rem; }
.wordmark::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--gilt); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gilt) 25%, transparent); flex-shrink: 0; }
.site-nav {
  display: none;
  align-items: center;
  gap: 1.6rem;
  font-family: "Archivo", sans-serif;
  font-size: .83rem;
  order: 2;
}
.site-nav a { color: var(--text-soft); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-date {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-soft);
  white-space: nowrap;
  order: 3;
}
.controls { order: 4; }
@media (min-width: 640px) { .site-nav { display: flex; } }

/* ---- hero (landing page only) ---- */
.hero { margin-top: clamp(2.25rem, 7vw, 3.75rem); max-width: 44rem; }
.hero-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--text-soft);
  margin: 0;
}
.hero-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 6.5vw, 3.1rem);
  line-height: 1.08;
  margin: .9rem 0 0;
  text-wrap: pretty;
}
.hero-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--reflection);
  margin: .9rem 0 0;
  max-width: 40rem;
}
.hero-note { font-size: .88rem; line-height: 1.6; color: var(--text-soft); margin: .9rem 0 0; }

/* ---- panels ---- */
.panel { background: var(--surface); border: 1.5px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow); }
.panel.soft { background: var(--surface-2); box-shadow: none; }
.panel-accentbar { height: 5px; background: linear-gradient(to right, color-mix(in srgb, var(--gilt) 65%, transparent), color-mix(in srgb, var(--gilt) 20%, transparent), color-mix(in srgb, var(--gilt) 65%, transparent)); border-top-left-radius: 14px; border-top-right-radius: 14px; }

/* ---- today card: main + aside ---- */
.card-grid { display: grid; overflow: hidden; }
@media (min-width: 960px) { .card-grid.with-aside { grid-template-columns: 1.5fr 1fr; } }
.card-main { padding: clamp(1.5rem, 4vw, 2.75rem); }
.card-aside {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--surface-2);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 960px) { .card-aside { border-top: 0; border-left: 1px solid var(--hairline); } }
.card-aside .block-label { margin-bottom: .6rem; }
.aside-progress { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }
.aside-progress .bar { margin-top: .6rem; height: 4px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.aside-progress .bar span { display: block; height: 100%; background: var(--gilt); border-radius: 999px; }

/* ---- three module cards ---- */
.module-cards { display: grid; gap: 1.1rem; margin-top: clamp(1.75rem, 5vw, 2.5rem); }
@media (min-width: 640px) { .module-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .module-cards { grid-template-columns: repeat(3, 1fr); } }
.module-card { display: flex; flex-direction: column; padding: 1.5rem 1.6rem 1.65rem; }
.module-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gilt);
}
.module-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.35rem; line-height: 1.25; margin: .55rem 0 0; }
.module-desc { font-size: .87rem; line-height: 1.55; color: var(--text-soft); margin: .5rem 0 0; max-width: 30rem; }
.module-status { margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid var(--hairline); font-size: .82rem; color: var(--text-soft); }
.module-status .bar { margin-top: .45rem; height: 4px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.module-status .bar span { display: block; height: 100%; background: var(--gilt); border-radius: 999px; }
.module-link { margin-top: 1.1rem; font-size: .87rem; font-weight: 500; color: var(--gilt); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.module-link:hover { color: var(--gilt-bright); }

/* ---- in-progress strip ---- */
.inprogress { margin-top: clamp(1.75rem, 5vw, 2.5rem); padding: clamp(1.5rem, 4vw, 2.25rem); display: flex; flex-direction: column; gap: 1.75rem; }
@media (min-width: 768px) { .inprogress { flex-direction: row; align-items: center; } }
.inprogress-text { max-width: 30rem; }
.inprogress-text h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.55rem; margin: .55rem 0 0; }
.inprogress-text p { font-size: .87rem; line-height: 1.55; color: var(--text-soft); margin: .45rem 0 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; flex: 1; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--edge); }

/* ---- landing footer (site link + right-aligned tagline) ---- */
.site-footer {
  margin-top: 2.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .06em;
}
@media (min-width: 640px) { .site-footer { flex-direction: row; align-items: center; justify-content: space-between; } }
.site-footer .site-links { margin: 0; padding: 0; border: 0; font-family: inherit; font-size: inherit; }
.site-footer .tagline { text-transform: uppercase; letter-spacing: .18em; color: var(--text-soft); }

/* ---- gentle settle-in, reused from the template ---- */
@keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.settle { animation: settle .8s cubic-bezier(.2,.7,.2,1) both; }
.settle-d1 { animation: settle .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: .08s; }
.settle-d2 { animation: settle .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: .16s; }
.settle-d3 { animation: settle .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) { .settle, .settle-d1, .settle-d2, .settle-d3 { animation: none; } }

/* =====================================================================
   QUIET GLASS — fourth scheme, matching the Lovable template exactly.
   Unlike the other three schemes (uniformly light or uniformly dark),
   this one has a dark canvas with light glass panels on top, so it
   needs two text colors: --text/--text-soft/--reflection stay "ink"
   (dark, for text inside a .panel), while a separate set of canvas-
   level selectors below (header, hero, footer — everything that sits
   directly on the dark canvas, not inside a panel) gets its own light
   color. The template never defined a light/Day mode, so Day and Night
   render identically here rather than inventing an unrequested look.
   ===================================================================== */
:root[data-scheme="glass"] {
  color-scheme: dark;
  --bg: oklch(0.155 0.012 180);
  --surface: color-mix(in oklch, oklch(0.972 0.004 145) 85%, transparent);
  --surface-2: color-mix(in oklch, oklch(0.972 0.004 145) 68%, transparent);
  --edge: oklch(1 0 0 / 10%);
  --text: oklch(0.225 0.015 175);
  --text-soft: oklch(0.415 0.02 175);
  --reflection: oklch(0.415 0.02 175);
  --gilt: oklch(0.37 0.058 168);
  --gilt-bright: color-mix(in oklch, oklch(0.37 0.058 168) 88%, black);
  --on-accent: oklch(0.972 0.004 145);
  --verdigris: oklch(0.42 0.055 170);
  --rose: oklch(0.577 0.145 27);
  --hairline: oklch(0.6 0.01 160 / 35%);
  --shadow: 0 40px 90px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.05);
}

/* the dark, hushed canvas + fine grain, behind everything */
:root[data-scheme="glass"] body {
  background-image:
    linear-gradient(to bottom, transparent 0%, color-mix(in oklch, oklch(0.14 0.01 180) 55%, transparent) 100%),
    radial-gradient(120% 80% at 50% -10%, oklch(0.42 0.055 170) 0%, oklch(0.2 0.015 175) 60%, oklch(0.14 0.01 180) 100%);
  background-attachment: fixed;
}
:root[data-scheme="glass"] body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, #ffffff 1px, transparent 0);
  background-size: 4px 4px;
  opacity: .05;
  mix-blend-mode: overlay;
}
:root[data-scheme="glass"] .wrap { position: relative; z-index: 1; }

/* glass panels: translucent + blurred, sitting on the dark canvas */
:root[data-scheme="glass"] .panel,
:root[data-scheme="glass"] .module-card,
:root[data-scheme="glass"] .inprogress,
:root[data-scheme="glass"] .card,
:root[data-scheme="glass"] textarea,
:root[data-scheme="glass"] input[type="text"] {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
:root[data-scheme="glass"] .card-aside { background: var(--surface-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ---- canvas-level text: header, hero, footer — light, not ink ---- */
:root[data-scheme="glass"] .wordmark,
:root[data-scheme="glass"] .theme-toggle,
:root[data-scheme="glass"] .textsize button,
:root[data-scheme="glass"] .hero-title { color: oklch(0.972 0.004 145); }
:root[data-scheme="glass"] .site-nav a,
:root[data-scheme="glass"] .site-date,
:root[data-scheme="glass"] .crumb a,
:root[data-scheme="glass"] .textsize,
:root[data-scheme="glass"] .theme-toggle,
:root[data-scheme="glass"] .hero-eyebrow,
:root[data-scheme="glass"] .hero-note,
:root[data-scheme="glass"] .colophon,
:root[data-scheme="glass"] .site-links a,
:root[data-scheme="glass"] .site-footer .tagline { color: color-mix(in oklch, oklch(0.972 0.004 145) 65%, transparent); }
:root[data-scheme="glass"] .site-nav a:hover,
:root[data-scheme="glass"] .site-nav a[aria-current="page"],
:root[data-scheme="glass"] .crumb a:hover,
:root[data-scheme="glass"] .site-links a:hover { color: oklch(0.972 0.004 145); }
:root[data-scheme="glass"] .hero-sub { color: color-mix(in oklch, oklch(0.972 0.004 145) 75%, transparent); }
:root[data-scheme="glass"] .textsize,
:root[data-scheme="glass"] .theme-toggle { border-color: color-mix(in oklch, oklch(0.972 0.004 145) 35%, transparent); }
:root[data-scheme="glass"] .colophon,
:root[data-scheme="glass"] .site-footer { border-top-color: color-mix(in oklch, oklch(0.972 0.004 145) 15%, transparent); }
:root[data-scheme="glass"] .swatch { box-shadow: 0 0 0 1px color-mix(in oklch, oklch(0.972 0.004 145) 35%, transparent); }
:root[data-scheme="glass"] .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px oklch(0.972 0.004 145); }