/* assets/css/home-2026.css — the 2026 density and typography pass.
 *
 * WHAT THIS IS
 *   Sri Kumar Gurukkal's homepage layout, unchanged. Every section is in the
 *   order he arranged, with the sections, cards and words he approved. What is
 *   changed here is only how much room each of them takes and how the type,
 *   rules and cards are set — the craft, not the structure.
 *
 * WHY IT IS A SEPARATE FILE
 *   index-93e26ab19ee5.css and index-9e71ae97df3f.css are exactly as they were
 *   in the v16 release, byte for byte. Keeping them untouched means the layout
 *   Gurukkal approved is still on disk to compare against, and this whole pass
 *   can be reverted by removing one <link>. It loads after both of them and
 *   before the chrome stylesheet, which must stay last.
 *
 * WHAT IT MAY NOT DO
 *   Move a section. Merge two sections. Hide anything. Change a word. Nothing
 *   here uses `display:none`, and tools/verify_home_density.js fails the build
 *   if any element the v16 page rendered stops rendering.
 *
 * MEASURED BEFORE IT WAS WRITTEN (1920x1080, tools/measure_home.js)
 *   page 16,567px · section padding 1,866px of it · the ceremony grid alone
 *   3,632px · the daily panel 2,253px · the About block 1,890px · content
 *   column 1,200px inside a 1,920px screen, so 720px of the display was margin.
 */

/* ------------------------------------------------------------------ 1. scale
 * v16 had one spacing value doing every job: 92px above and below eleven of
 * twelve sections, whatever the section was for. A four-step scale plus two
 * section rhythms lets a major section read as major and stops a short one
 * taking a full screen, without moving anything.
 *
 * The section values are fluid so the rhythm holds from 390px to 1920px
 * instead of switching at one breakpoint.
 */
main {
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 26px;
  --sp-4: 42px;
  --sec: clamp(38px, 3.6vw, 60px);      /* the standard section rhythm */
  --sec-lg: clamp(46px, 4.4vw, 74px);   /* the few that carry more weight */
  --wrap: 1400px;
  --gut: clamp(18px, 3vw, 44px);
}

/* ------------------------------------------------------------- 2. the width
 * `--maxw: 1200px` was fixed, so the page was the same 16,541px at 1920 as at
 * 1440 and the extra 480px of screen bought nothing but margin. 1400px with a
 * fluid gutter fills a large display properly and shortens the page, and below
 * 1400px nothing changes at all — every section keeps its own layout.
 *
 * Scoped to main: the header and footer own their own width and must not move.
 */
main .wrap {
  max-width: var(--wrap);
  padding-left: var(--gut);
  padding-right: var(--gut);
}
/* the creed strip is a full-bleed band whose inner row is centred */
main .creed .wrap { max-width: var(--wrap); }

/* Running text does not get wider just because the page did — a 1,330px line
 * of prose is unreadable. The measure is capped where it matters and the extra
 * width goes to the grids, which is what it is for.
 */
main .section-head { max-width: 68ch; }
main .section-head.center { margin-left: auto; margin-right: auto; }
main .ab-intro .lede,
main .pc-lead,
main .cer-note,
main .muh-disclaimer p,
main .req-cta-note p { max-width: 74ch; }
main .cer-note { margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------- 3. the rhythm */
main section { padding: var(--sec) 0; }
main section.day { padding: var(--sp-2) 0 var(--sp-3); }
main section.ab { padding: var(--sec) 0 calc(var(--sec) * .8); }
main section.cer,
main section.contact { padding: var(--sec-lg) 0; }
main section.occ { padding: var(--sec) 0 var(--sp-2); }

/* A section heading and the thing it introduces belong together; 48px of empty
 * between them reads as two unrelated blocks. */
main .section-head { margin-bottom: var(--sp-4); }
main .section-head.center { margin-bottom: var(--sp-4); }
main .section-head h2 { margin: .22em 0 .3em; text-wrap: balance; }

/* The ✦ rule was 31px tall plus an 8px margin above a 29px eyebrow — 68px of
 * ornament before the heading, on nine sections. Kept, at half the height. */
main .section-head .rule { margin-bottom: var(--sp-1); transform: scale(.86); }

/* --------------------------------------------------- 4. the ceremony grid
 * 3,632px, the largest section on the page, of which the grid was 2,841px:
 * eight cards in two columns, four rows. At 1400px three columns fit
 * comfortably (about 430px each, and the longest rite name sets to one line at
 * 380px), which removes a whole row. The row padding on 69 list items was
 * 10px top and bottom for a 43px row; 7px gives a 37px row, still well above
 * a comfortable touch target.
 */
/* Three equal grid columns still cost 720px, because a CSS grid row is as tall
 * as its tallest card and these eight cards hold between 4 and 14 rites: the
 * three cards in row one held 483px, 315px and 252px of list inside 606px
 * boxes. Multi-column balances by height instead, so a card ends where its
 * content ends and there is no dead space inside any of them. The cards are
 * eight browsable categories, not a sequence, and each is kept whole with
 * break-inside; the DOM order the screen reader follows is untouched.
 */
/* Two columns from 720px, where v16 dropped straight from two to one and left
 * a tablet reading a 5,200px single-column catalogue. */
@media (min-width: 720px) and (max-width: 1179px) {
  main .cer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}
@media (min-width: 1180px) {
  main .cer-grid {
    display: block;
    columns: 3;
    column-gap: var(--sp-3);
  }
  main .cer-grid > * {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--sp-3);
  }
}
main .cer-card { padding: var(--sp-3) var(--sp-3); }
main .cer-card .hd { margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); }
main .cer-list li { padding: 7px 0; }
main .cer-guides { margin: 0 0 var(--sp-2); }

/* ------------------------------------------------------- 5. the daily panel
 * 2,253px for the date, the almanac, the invocation, the verse, the teaching,
 * what's ahead and the pooja invitation — every one of which stays. The two
 * cards and the learning band sat in three stacked rows with 20px card
 * padding and a 22px band inset; on a wide screen the invocation and the
 * learning band are one column beside the almanac instead, which is the same
 * content in two rows rather than three.
 *
 * display:contents on .day-grid lifts its two cards into the section grid so
 * #learn can join them WITHOUT the markup changing — the ids the JavaScript
 * binds are untouched.
 */
@media (min-width: 1100px) {
  main .day .wrap {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    /* The empty cell on row 4 is load-bearing. The almanac spans rows 3-4 and
     * is taller than the invocation beside it; with every row `auto` the slack
     * is shared out between them and opens a 1,153px hole under the
     * invocation — which is exactly what the first version of this did, and
     * what tools/measure_home.js caught. A `1fr` row absorbs all of it. */
    grid-template-areas:
      "eyebrow eyebrow"
      "line    line"
      "rm      alm"
      ".       alm"
      "foot    foot"
      "learn   learn"
      "ahead   cta";
    grid-template-rows: auto auto auto 1fr auto auto auto;
    align-items: start;
    column-gap: var(--sp-3);
    row-gap: 0;
  }
  main .day .day-eyebrow { grid-area: eyebrow; }
  main .day .day-line { grid-area: line; }
  main .day .day-grid { display: contents; }
  main .day .day-rm { grid-area: rm; }
  main .day .day-alm { grid-area: alm; height: 100%; }
  main .day .day-foot-slot { grid-area: foot; }
  /* The learning band keeps the full width, where its verse and its side
   * column sit beside each other. In the narrow column they stack, and the
   * band grows from 389px to 534px — the arrangement would have cost more
   * height than it saved. */
  main .day .day-learn { grid-area: learn; }
  /* "What's ahead" and the pooja invitation sit side by side. They are
   * adjacent in the DOM, so the visual order is still the reading order — a
   * grid that reorders content is a WCAG 1.3.2 failure, not a saving. */
  main .day .day-ahead { grid-area: ahead; height: 100%; }
  main .day .pooja-cta { grid-area: cta; height: 100%; margin-top: var(--sp-2); }
}
main .day-card { padding: var(--sp-2) var(--sp-3); }
main .day-learn { padding-top: var(--sp-2); margin-top: var(--sp-2); }
main .day-ahead { margin-top: var(--sp-2); }
main .day .obs-row a.obs { padding: 6px 10px; }
main .day .fstrip .fs-card { padding: 8px 12px; }

/* ------------------------------------------------------------- 6. About
 * 1,890px. The portrait, the intro, the fact list and the credentials block
 * are all kept; the block simply stops leaving a 52px band at the top and
 * bottom of a section that already has section padding of its own.
 */
main .ab .ab-top { gap: var(--sp-4); }
main .ab-cred { margin-top: var(--sp-4); padding-top: var(--sp-4); }
main .ab-cred-body { gap: var(--sp-4); }
main .ab-line dd { margin-bottom: var(--sp-2); }
main .ab-facts { margin-top: var(--sp-3); padding-top: var(--sp-3); }

/* ------------------------------------------------- 7. the remaining sections
 * Each of these was a 92/92 section whose content is short. The padding is now
 * on the scale; these tighten the internal gaps that were set to match it, and
 * the card padding, which was sized to fill a 92px rhythm rather than to frame
 * its own content — a `.mode` card was 249px tall around 109px of content.
 */
main .steps { gap: var(--sp-3); }
main .modes-grid { gap: var(--sp-3); margin-bottom: var(--sp-2); }
main .test-grid { gap: var(--sp-3); }
main .occ-grid { gap: var(--sp-2); }
main .faq-list { gap: var(--sp-1); }
main .lineage-grid { gap: var(--sp-4); }
main .contact-grid { gap: var(--sp-4); }
main .muh-disclaimer { margin-bottom: var(--sp-3); padding: 14px 18px; }

main .mode { padding: var(--sp-3) var(--sp-3); }
main .mode .ic { margin-bottom: var(--sp-1); }
main .step { padding: var(--sp-3) var(--sp-3); }
main .t-card { padding: var(--sp-3) var(--sp-3); }
main .ab-cards { margin-top: var(--sp-3); }
main .info-row { padding: 12px 16px; }

/* The invocation and the almanac are a pair; letting the shorter of the two
 * end early leaves an obvious step between them. */
@media (min-width: 1100px) {
  main .day .day-rm { height: 100%; }
}

/* ------------------------------------------------------------ 8. the type
 * A real scale rather than nine independently chosen sizes, and headings that
 * break sensibly now that lines are longer.
 */
main h2 { text-wrap: balance; }
main h3 { text-wrap: balance; }
main .section-head p { font-size: 1.04rem; line-height: 1.6; }
main .eyebrow,
main .pc-eyebrow,
main .day-eyebrow,
main .rm-eyebrow { letter-spacing: .13em; font-size: .74rem; }

/* ----------------------------------------------------------- 9. the cards
 * Lighter chrome. A border plus a shadow plus a fill is three ways of saying
 * the same thing; a hairline and a ground say it once, which is what a 2026
 * card looks like. Radius is unified — v16 had 8px, 10px, 12px and 14px on
 * cards that sit beside each other.
 */
main .cer-card,
main .occ-card,
main .day-card,
main .t-card,
main .ab-card,
main .mode,
main .step {
  border-radius: 10px;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
}
main .cer-card:hover,
main .occ-card:hover,
main .t-card:hover {
  border-color: var(--line-gold);
  box-shadow: 0 1px 2px rgba(84, 32, 15, .05), 0 8px 24px -12px rgba(84, 32, 15, .16);
}
main .cer-card,
main .occ-card,
main .t-card { transition: border-color .18s ease, box-shadow .18s ease; }

/* --------------------------------------------------------- 10. focus rings
 * The four deep-guide links under the ceremony grid were keyboard-reachable
 * and showed nothing when focused, because they carry inline colour and no
 * class. This is the accessibility fix carried over from v17; it is the only
 * change in this file a sighted mouse user will never see.
 */
main a:focus-visible,
main button:focus-visible,
main [tabindex]:focus-visible,
main .cer-list li:focus-visible {
  outline: 2px solid var(--saffron-dark, #a8481a);
  outline-offset: 3px;
  /* `transition:none` is the actual fix, and it took a CDP dump of the matched
   * rules to find. The four in-depth-guide links under the ceremony grid
   * declare `transition: all`, so `outline-width` was an animated property:
   * the ring grew from 0 over the transition, and a keyboard user tabbing at
   * normal speed passed through the link before it arrived. Every audit read
   * `outline-width: 0px` at the moment focus landed and reported no ring,
   * which was correct. A focus indicator has to be there the instant focus
   * is. */
  transition: none;
}

/* ------------------------------------------------------------- 11. motion */
@media (prefers-reduced-motion: reduce) {
  main .cer-card,
  main .occ-card,
  main .t-card { transition: none; }
}

/* ---------------------------------------------------------- 12. the phone
 * The phone page is long because the content is long, and that is fine — but
 * three grids collapsed all the way to one column at 390px when their cards
 * are short enough to sit two abreast. Measured at 390: the occasion grid was
 * 856px for six cards of two lines each, and the four process steps were
 * 828px for one sentence apiece.
 */
@media (max-width: 719px) {
  main .occ-grid { grid-template-columns: 1fr 1fr; }
  main .steps { grid-template-columns: 1fr 1fr; }
  main .occ-card { padding: 14px 16px; }
  main .step { padding: var(--sp-2) var(--sp-2); }
  /* the ✦ rule and the eyebrow together were 60px of ornament above every
     heading on a 390px screen */
  main .section-head .rule { transform: scale(.72); }
  main .day-card { padding: var(--sp-2); }
}

/* ------------------------------------------------- 13. the layout reserves
 * The invocation renders from JavaScript, so its box is held open before it
 * arrives or the almanac beside it jumps. v16's numbers were measured for
 * v16's column; the two-column day panel changed that column's width, so they
 * were re-measured with tools/measure_reserves.js — eleven invocations at
 * eleven widths, worst case taken — rather than adjusted by eye. A reserve
 * 200px too large passes a numeric check and still ruins the page, so
 * tools/verify_interactive.js asserts the outcome (CLS) as well as the number.
 */
main #remember { min-height: 362px; }
@media (max-width: 1280px) { main #remember { min-height: 360px; } }
@media (max-width: 1100px) { main #remember { min-height: 351px; } }
@media (max-width: 1000px) { main #remember { min-height: 347px; } }
@media (max-width: 900px)  { main #remember { min-height: 346px; } }
@media (max-width: 320px)  { main #remember { min-height: 366px; } }

/* The learning band renders from JavaScript too, and it starts `hidden`. On a
 * 1920x1080 screen the compacted day panel brings it inside the first viewport
 * — at y=865 — so its arrival now counts against CLS, which measured 0.018.
 * v16 could leave it unreserved because the panel was 2,253px tall and the band
 * was below the fold at every width.
 *
 * `visibility:hidden` rather than `display:none` so the space is held while it
 * is empty. Only above 1100px: at narrower widths the band is far below the
 * fold, its height varies from 606px to 1,139px depending on the teaching, and
 * holding a 939px blank open on a phone to prevent a shift nobody can see
 * would be strictly worse. tools/verify_interactive.js measures the real CLS
 * rather than trusting this paragraph.
 */
@media (min-width: 1101px) {
  main #learn[hidden] {
    display: block;
    visibility: hidden;
    min-height: 528px;
  }
}

/* -------------------------------------------------- 14. what should not grow
 * A wider page is only better where the extra width is used. Three blocks hold
 * short content and, given 1,400px, simply became thinner and further apart:
 * the FAQ set one-line questions across the full measure, the three venue
 * cards floated with 450px each around two lines of text, and the request
 * band's buttons drifted to the edges. They are capped and centred instead, so
 * the width goes to the grids that earn it — the ceremony catalogue, the
 * almanac and the About block.
 */
main .faq-list { max-width: 1000px; margin-left: auto; margin-right: auto; }
main .modes-grid { max-width: 1160px; margin-left: auto; margin-right: auto; }
main .test-grid { max-width: 1240px; margin-left: auto; margin-right: auto; }
main .req-cta-actions,
main .req-cta-note { max-width: 900px; margin-left: auto; margin-right: auto; }