/* ============================================================================
   Class Price Calculator - shared site stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for colour and components across docs/. Replaces the
   <style> block that was duplicated in every page.

   The palette is the Lander Art Center canon, so this site and
   landerartcenter.com read as the same house.

   THE TWO RULES THAT SHAPE EVERYTHING BELOW
   1. Red is the brand's voice at DISPLAY scale (h1, section h2). Teal is
      wayfinding at SMALL scale (eyebrows, meta, tags, links, step circles).
      The two never do the same job on one page. Card titles stay ink.
   2. Three levels of depth: floor, one functional tint, one full-strength
      band. Lifting only the featured element is what makes it featured.

   Companion files:
     assets/tailwind-config.js - aliases Tailwind colour names onto these tokens
     assets/tools.css          - the four calculator pages under docs/tools/

   NOT covered here: docs/demo/ is generated by scripts/refresh_demo.py and is
   gated by CI. Never hand-edit it.
   ========================================================================== */

:root {
  /* ---- canon: full strength ------------------------------------------- */
  --red:        #BE1E2E;   --red-deep:   #8E1622;
  --teal:       #236B62;   --teal-deep:  #173F3A;
  --gold:       #ECB14B;   --terra:      #D66637;
  --sage:       #475D4D;   --lsage:      #A2C293;
  --brick:      #903129;

  /* ---- canon: pastels (the four "doors") ------------------------------ */
  --p-gold:     #F6D99E;   --p-terra:    #EFC4A6;
  --p-teal:     #A6D8D1;   --p-sage:     #C9DBB8;
  --p-rose:     #F2D1C4;   --p-mauve:    #D6B5B8;

  /* ---- canon: neutrals ------------------------------------------------ */
  --cream:      #FBF8F1;   --cream-3:    #FCF3D4;
  --ink:        #1A1A1A;   --ink-warm:   #3A3833;   --muted: #6B6660;
  --line:       rgba(26, 26, 26, .14);   /* web value; print uses .16 */
  --white:      #FFFFFF;

  /* ---- roles. Components reference THESE, not the canon names above. --- */
  --floor:      #FFFEEA;              /* level 1: page ground */
  --tint:       var(--cream-3);       /* level 2: functional tinted field */
  --field:      var(--cream);         /* card fill */
  --band:       var(--teal-deep);     /* level 3: the one full-strength band */
  --nav-bg:     var(--red);           /* flip once to restyle every nav */
  --mark:       var(--teal);          /* 4px accent bar, per-item overridable */
  --accent:     var(--teal);          /* functional accent (was muted rose) */

  /* ---- type ----------------------------------------------------------- */
  --display:    'livory', Georgia, Cambria, serif;
  --body:       'Lato', system-ui, sans-serif;

  /* ---- geometry ------------------------------------------------------- */
  --r: 12px;  --r-sm: 8px;  --r-xs: 6px;  --r-pill: 999px;
}

/* ============================================================================
   Base
   ========================================================================== */

body {
  background-color: var(--floor);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  /* A slash-joined token like "Supported/Standard/Supporter" offers no break
     opportunity and forces horizontal scroll on narrow phones. break-word only
     engages when a word genuinely cannot fit. */
  overflow-wrap: break-word;
}

/* Unified from the old split: docs/index.html styled h1-h6, every other page
   styled h1-h3. Only index.html has h4-h6 and those already override font and
   colour via Tailwind utilities, so the wider selector is a no-op elsewhere. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--red);
}
h1, h2 { letter-spacing: -.01em; }

/* An eyebrow: uppercase, wide-tracked, teal. The canon's small-scale label. */
.eyebrow {
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--teal);
}

/* ============================================================================
   Page chrome
   ========================================================================== */

.site-nav { background: var(--nav-bg); color: var(--floor); }
.site-nav a { color: var(--floor); text-decoration: none; }
.site-nav a:hover { opacity: .85; }
.site-nav a[aria-current="page"] {
  font-weight: 700;
  border-bottom: 2px solid var(--floor);
  padding-bottom: 2px;
}

/* The nav needs 386px of links, so it overflowed every phone narrower than
   that. Below 640px it stacks the wordmark above a centred, wrapping row. */
@media (max-width: 640px) {
  .nav-inner { flex-direction: column; gap: .5rem; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; }
}

.site-footer { background: var(--ink); color: var(--cream); }
.site-footer p { color: rgba(251, 248, 241, .72); }
.site-footer a { color: var(--cream); text-decoration: underline; }
.site-footer a:hover { color: #fff; }
.site-footer h4 {
  font-family: var(--body); color: var(--cream); text-transform: uppercase;
  letter-spacing: .24em; font-size: .72rem; font-weight: 700;
}
.footer-disclaimer { color: rgba(251, 248, 241, .55); }

/* ============================================================================
   Screenshots
   ========================================================================== */

.shot {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin: 1.5rem 0;
}
/* min() so the fixed cap cannot beat the viewport on a phone. */
.shot--narrow { max-width: min(375px, 100%); margin-inline: auto; display: block; }
.shot-figure { margin: 2rem 0; }
.shot-figure figcaption {
  text-align: center; font-size: .875rem; color: var(--muted);
  margin: .5rem auto 0; max-width: 65ch;
}
.shot-figure figcaption a { color: var(--teal); }

/* The old tip callout fill measured deltaE 1.81 from the page floor, below the
   2.3 just-noticeable threshold, so it never read as a field at all. */
.tip {
  background: var(--tint);
  border: 0;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  padding: .75rem 1rem;
  font-size: .92rem;
  margin: 1.5rem 0;
}

/* ============================================================================
   Article and guide body
   ========================================================================== */

.article-body h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--line);   /* canon section head */
}
.article-body a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(35, 107, 98, .4);
}
.article-body a:hover { text-decoration-color: var(--teal); }
.article-body h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; }
.article-body p  { margin-bottom: 1.25rem; line-height: 1.8; }
.article-body ul,
.article-body ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; line-height: 1.7; }
.article-body strong { color: var(--ink); }

/* Lifted fields carry no border; the field edge does the framing. */
.article-body blockquote,
.pull-quote {
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--field);
  border: 0;
  border-left: 4px solid var(--mark);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
}
.pull-quote--red { --mark: var(--red); }
.pull-quote .attrib {
  font-style: normal; color: var(--muted); font-weight: 700;
  font-size: .875rem; margin-bottom: 0;
}

/* ---- tables -------------------------------------------------------------- */

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.article-body th {
  background: var(--teal-deep);        /* cream on teal-deep measures 10.95:1 */
  color: var(--cream);
  padding: 0.75rem 1rem;
  text-align: left;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.article-body th:first-child { border-radius: var(--r-xs) 0 0 0; }
.article-body th:last-child  { border-radius: 0 var(--r-xs) 0 0; }
.article-body td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.article-body tr:nth-child(even) { background: var(--field); }

/* ---- wide tables --------------------------------------------------------
   Five-column data tables cannot fit a 342px content column, so they scroll.
   The gradient is the affordance: it appears only when there is more to see
   and fades out at each end, driven by background-attachment: local. Without
   it the hidden columns are invisible and the table reads as broken. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1.5rem 0;
  background:
    linear-gradient(to right, var(--floor) 30%, rgba(255,254,234,0)) left center,
    linear-gradient(to left,  var(--floor) 30%, rgba(255,254,234,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(26,26,26,.18), rgba(26,26,26,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(26,26,26,.18), rgba(26,26,26,0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-scroll > table { margin: 0; }

/* Tighter cells on phones roughly halve how much has to scroll. */
@media (max-width: 640px) {
  .article-body table { font-size: .84rem; }
  .article-body th,
  .article-body td { padding: .5rem .55rem; }
}

/* A positive delta must not read as a link, so canon green rather than teal. */
.delta-pos { color: var(--sage); }

/* ============================================================================
   Components
   ========================================================================== */

/* ---- CTA box ------------------------------------------------------------- */

.cta-box {
  background: var(--red);
  color: var(--cream);
  border-radius: var(--r);
  padding: 2.5rem;
  text-align: center;
  margin: 2.5rem 0;
}
.cta-box h3 { color: var(--cream); margin-top: 0; font-size: 1.5rem; }
.cta-box p  { color: rgba(255, 254, 234, 0.85); margin-bottom: 0.5rem; }
.cta-box a {
  display: inline-block;
  background: var(--cream);
  color: var(--red);
  font-weight: 700;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  text-decoration: none;
  margin-top: 1rem;
  transition: background 0.2s;
}
.cta-box a:hover { background: white; }

/* ---- related links ------------------------------------------------------- */

.related-articles a {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--teal);
  text-decoration: none;
  font-weight: 700;
}
.related-articles a:last-child { border-bottom: none; }
.related-articles a:hover { color: var(--teal-deep); }

/* ---- step numbers (guides) ----------------------------------------------- */

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--teal);            /* functional, not display */
  color: var(--cream);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.875rem;
  margin-right: 0.75rem;
  flex-shrink: 0;
}
.step-heading { display: flex; align-items: center; }

/* ---- FAQ (articles) ------------------------------------------------------ */

.faq-section {
  background: var(--field);
  border-radius: var(--r);
  padding: 2rem 2.5rem;
  margin: 2.5rem 0;
}
.faq-section h2 { font-size: 1.5rem; margin-top: 0; margin-bottom: 1.5rem; }
.faq-item { margin-bottom: 1.75rem; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item h3 { font-size: 1.05rem; margin-top: 0; margin-bottom: 0.5rem; }
.faq-item p  { margin-bottom: 0; font-size: 1rem; }

/* ---- TL;DR box (how-to-price-art-classes) -------------------------------- */

.tldr-box {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2rem 2.5rem;
  margin: 2.5rem 0;
}
.tldr-box h2 { font-size: 1.5rem; margin-top: 0; margin-bottom: 1rem; }
.tldr-box li { margin-bottom: 0.25rem; }

/* ---- feature cards (landing) --------------------------------------------- */

/* The four pastel "doors", mirroring the LAC homepage. */
.feature-card {
  background: var(--pastel, var(--field));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2rem;
  color: var(--ink);
  display: block;
  text-decoration: none;
  box-shadow: none;
  transition: border-color .2s;
}
.feature-card:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.feature-card h3 { color: var(--ink); }
.feature-card p  { color: var(--ink); }
.pastel-teal  { --pastel: var(--p-teal); }
.pastel-sage  { --pastel: var(--p-sage); }
.pastel-terra { --pastel: var(--p-terra); }
.pastel-gold  { --pastel: var(--p-gold); }
.pastel-rose  { --pastel: var(--p-rose); }
.pastel-mauve { --pastel: var(--p-mauve); }
.feature-card--featured { border-top: 4px solid var(--red); }

/* ---- depth levels -------------------------------------------------------- */
.level-floor { background: var(--floor); }
.level-tint  { background: var(--tint); }
.level-band  { background: var(--band); color: var(--cream); }
.level-band h1, .level-band h2, .level-band h3 { color: var(--cream); }
.level-band p { color: rgba(251, 248, 241, .85); }
.level-band strong { color: var(--cream); }
.band-btn {
  display: inline-block; background: var(--cream); color: var(--teal-deep);
  border: 0; border-radius: var(--r-pill); padding: 13px 24px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .2s;
}
.band-btn:hover { background: #fff; }
.panel { background: var(--field); border: 1px solid var(--line); border-radius: var(--r); }

/* ---- pricing tiers: teal to red to brick, ascending with price ---------- */
.tier-card {
  background: var(--field); border: 1px solid var(--line); border-radius: var(--r);
  padding: 2rem; text-align: center; display: block; text-decoration: none;
  box-shadow: none; transition: border-color .2s;
}
.tier-card:hover { border-color: var(--accent-tier); }
.tier-card__label {
  font-family: var(--body); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent-tier); margin-bottom: .75rem;
}
.tier-card__price { color: var(--ink); font-weight: 700; }
.tier-card__meta  { font-size: .875rem; color: var(--accent-tier); margin-bottom: 1.25rem; }
.tier-card__body  { color: var(--ink); font-size: .875rem; line-height: 1.6; }
.tier-card__btn {
  display: inline-block; border-radius: var(--r-pill); padding: 13px 24px;
  font-size: 14px; font-weight: 700; background: transparent;
  border: 1px solid var(--accent-tier); color: var(--accent-tier);
  transition: background .2s, color .2s;
}
.tier-card__btn:hover { background: var(--accent-tier); color: var(--cream); }
.tier-card--supported { --accent-tier: var(--teal); }
.tier-card--highfive  { --accent-tier: var(--brick); }
.tier-card--standard {
  --accent-tier: var(--red);
  border: 2px solid var(--red); border-top-width: 4px;
}
.tier-card--standard .tier-card__btn {
  background: var(--red); border-color: var(--red); color: var(--cream);
}
.tier-card--standard .tier-card__btn:hover { background: var(--red-deep); }
.tier-badge {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: var(--red); color: var(--cream); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; padding: .25rem .75rem;
  border-radius: var(--r-pill);
}
.text-muted { color: var(--muted); }
.note-sm { font-size: .75em; color: var(--muted); font-weight: 400; font-style: normal; }

/* ============================================================================
   Card primitives
   ----------------------------------------------------------------------------
   .library-card, .result-card and .tool-card were three near-identical copies
   of the same object. They share a base here and keep only their real
   differences.
   ========================================================================== */

.library-card,
.result-card,
.tool-card {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2rem;
  color: var(--ink);
  box-shadow: none;
  transition: border-color .2s, background .2s;
}
.library-card:hover,
.result-card:hover,
.tool-card:hover {
  border-color: var(--teal);
  background: var(--tint);
  transform: none;
  box-shadow: none;
}

/* Card titles stay ink and are explicitly NOT red. */
.library-card h3,
.result-card h3,
.tool-card h3 { margin-top: 0; color: var(--ink); }
.library-card:hover h3,
.result-card:hover h3,
.tool-card:hover h3 { color: var(--teal); }

.library-card a,
.tool-card a { text-decoration: none; color: inherit; }
.result-card a { text-decoration: none; color: inherit; display: block; }

.library-card .category,
.tool-card .category,
.result-card .type-badge {
  font-family: var(--body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  font-weight: 700;
}

.library-card .description,
.tool-card .description,
.result-card .description { color: var(--ink); line-height: 1.6; }

.result-card .sections { font-size: 0.8rem; color: var(--muted); margin-top: 0.5rem; }

.library-card.coming-soon { opacity: 0.6; }
.library-card.coming-soon:hover { transform: none; box-shadow: none; }

.coming-badge {
  display: inline-block;
  font-size: 0.7rem;
  background: var(--p-teal);
  color: var(--teal-deep);
  padding: 0.15rem 0.6rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.5rem;
}

.section-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: var(--body);
}

/* ---- search -------------------------------------------------------------- */

.search-input {
  background: var(--field);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 0.875rem 1.25rem 0.875rem 3rem;
  font-size: 1.125rem;
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
  color: var(--ink);
  font-family: var(--body);
}
.search-input:focus { border-color: var(--teal); }
.search-input::placeholder { color: var(--muted); }
.search-wrap { position: relative; }
.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--teal);
  pointer-events: none;
}