/* ============================================================
   waldenstudent.com — furniture for interior pages.
   The homepage comp defines the system; this file adds only the
   patterns interior pages need and the comp has no example of.
   Loaded via `css:` front matter, never merged into styles.css
   (that file is extracted from design/homepage.html).
   ============================================================ */

.crumb { font-family: var(--serif); font-size: .95rem; color: var(--quiet); }
.crumb a { color: var(--teal-deep); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.head-block .col { padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem); }
.head-block h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.038em; margin-top: 1rem; max-width: 22ch; }
.head-block .standfirst { margin-top: 1.25rem; font-family: var(--serif); font-size: 1.18rem; line-height: 1.55; color: var(--body); max-width: 54ch; }

/* a plain reading section */
.tract .col { padding-block: clamp(2.75rem, 5.5vw, 4rem); }
.tract h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.036em; max-width: 26ch; }
.tract > .col > p { margin-top: 1rem; font-size: 1.02rem; color: var(--quiet); max-width: 58ch; }
.tract-sheet { background: var(--sheet); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.tract-sage { background: var(--sage); }
.tract-sage > .col > p { color: var(--body); }

.prose { margin-top: 1.5rem; font-family: var(--serif); font-size: 1.14rem; line-height: 1.62; color: var(--body); max-width: 34rem; }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--ink); font-weight: 600; }

/* a two-column reckoning: two routes, two formats, two schools */
.pair { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--ink); }
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; } }
.pair > div { padding: 1.75rem 0; }
.pair > div:first-child { padding-right: clamp(1.25rem, 3vw, 2.5rem); border-right: 1px solid var(--rule); }
.pair > div:last-child { padding-left: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 800px) {
  .pair > div:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .pair > div:last-child { padding-left: 0; }
}
.pair h3 { font-family: var(--grot); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.pair .sum { display: block; font-family: var(--grot); font-weight: 800; font-size: clamp(2rem, 4.4vw, 2.9rem); letter-spacing: -.048em; margin-top: .75rem; line-height: 1; }
.pair .sum-note { display: block; margin-top: .5rem; font-size: .93rem; color: var(--quiet); }
.pair p { margin-top: 1rem; font-size: .98rem; color: var(--body); line-height: 1.6; }
.pair ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.pair li { font-size: .96rem; color: var(--body); padding-left: 1.1rem; position: relative; }
.pair li::before { content: "\2014"; position: absolute; left: 0; color: var(--pale); }
.pair .hot { color: var(--ochre); }

/* a ruled statement of figures */
.figures { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 2px solid var(--ink); }
.figures div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding-block: 1.15rem; border-bottom: 1px solid var(--rule); }
@media (max-width: 800px) { .figures div { grid-template-columns: 1fr auto; } .figures span { grid-column: 1 / -1; } }
.figures strong { font-family: var(--grot); font-weight: 700; font-size: 1.04rem; letter-spacing: -.02em; }
.figures span { font-size: .95rem; color: var(--quiet); }
.figures b { font-family: var(--grot); font-weight: 800; font-size: 1.22rem; letter-spacing: -.03em; text-align: right; }
.figures div.added b { color: var(--ochre); }

/* short ruled points */
.points { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; max-width: 58rem; }
.points li { border-left: 2px solid var(--teal); padding-left: 1.2rem; }
.points li.caution { border-left-color: var(--ochre-fill); }
.points h3 { font-family: var(--grot); font-weight: 700; font-size: 1.08rem; letter-spacing: -.022em; }
.points p { margin-top: .35rem; font-size: .97rem; color: var(--body); line-height: 1.6; max-width: 56ch; }

.aside-note { margin-top: 1.75rem; font-size: .86rem; color: var(--pale); line-height: 1.55; max-width: 70ch; }

/* onward links at the foot of a page */
.onward { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 2px solid var(--ink); }
.onward a { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); text-decoration: none; transition: padding-left .16s ease; }
.onward a:hover { padding-left: .6rem; }
.onward strong { font-family: var(--grot); font-weight: 700; font-size: 1.14rem; letter-spacing: -.028em; }
.onward span { font-family: var(--serif); font-size: 1.02rem; color: var(--body); }
.onward i { font-style: normal; color: var(--teal); font-size: 1.2rem; transition: transform .16s ease; }
.onward a:hover i { transform: translateX(4px); }
@media (max-width: 800px) { .onward a { grid-template-columns: 1fr auto; } .onward span { grid-column: 1 / -1; } }

/* rendered FAQ — the visible half of FAQPage markup */
.qa-list { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 2px solid var(--ink); }
.qa { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
      gap: clamp(.75rem, 3vw, 2.5rem); padding-block: 1.35rem; border-bottom: 1px solid var(--rule); }
@media (max-width: 800px) { .qa { grid-template-columns: 1fr; gap: .45rem; } }
.qa h3 { font-family: var(--grot); font-weight: 700; font-size: 1.08rem; letter-spacing: -.024em; }
.qa p { font-family: var(--serif); font-size: 1.06rem; line-height: 1.6; color: var(--body); max-width: 60ch; }

/* hero enquiry form */
.hero-ask { background: var(--sheet); border: 1px solid var(--rule-2); border-top: 3px solid var(--teal);
            border-radius: 4px; padding: clamp(1.4rem, 3vw, 1.9rem); display: grid; gap: .85rem; align-self: start; }
.hero-ask h2 { font-family: var(--grot); font-weight: 800; font-size: 1.32rem; letter-spacing: -.034em; }
.hero-ask > p { font-size: .93rem; line-height: 1.55; color: var(--quiet); }
.hero-ask .entry { display: grid; gap: .3rem; }
.hero-ask label { font-family: var(--serif); font-size: .93rem; color: var(--body); }
.hero-ask input, .hero-ask select { font-family: var(--sans); font-size: 16px; color: var(--ink);
      background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px; padding: .75rem .85rem; width: 100%; }
.hero-ask input::placeholder { color: var(--pale); }
.hero-ask small { font-size: .82rem; color: var(--quiet); line-height: 1.5; }

/* the dial, given its own band with reading matter on both sides */
.dial-band { background: var(--sheet); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.dial-band .col { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.dial-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,17rem) minmax(0,1fr);
             gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 1000px) { .dial-grid { grid-template-columns: 1fr; } }
.dial-side h2 { font-family: var(--grot); font-weight: 800; font-size: clamp(1.45rem,2.9vw,1.95rem); letter-spacing: -.036em; }
.dial-side h3 { font-family: var(--grot); font-weight: 700; font-size: 1.1rem; letter-spacing: -.024em; color: var(--teal-deep); }
.dial-side p { margin-top: .8rem; font-family: var(--serif); font-size: 1.06rem; line-height: 1.58; color: var(--body); }
.dial-side b { font-family: var(--sans); font-weight: 600; color: var(--ochre); }
.dial-foot { font-family: var(--sans) !important; font-size: .84rem !important; color: var(--pale) !important; line-height: 1.55 !important; }
.dial-mid { display: grid; gap: 1.25rem; }