/* ==========================================================================
   world.css – the syllabus and the index card (Graysen's direction, Oct 3, 2026)
   The site is laid out like a semester's planner page: ruled lines, mono week
   labels, a yellow highlighter, tabs on the page edge. Index cards appear only
   where a feature is being shown. Loaded on every page after site.css.
   ========================================================================== */
:root {
  --desk: #e8f2f9;            /* pale blue desk, from the brand blue scale */
  --desk-2: #dcebf5;
  --card-rule: rgba(92, 146, 189, 0.38);
  --card-red: rgba(214, 36, 39, 0.6);
  --line: 1.7rem;
  --tab-yellow: #ffd266;
  --tab-teal: #8edfea;
  --tab-blue: #96d4f9;
  --tab-green: #b9e8ad;

  --grid: rgba(39, 102, 155, 0.09);
  --tab-1: #ffd266; --tab-2: #8edfea; --tab-3: #96d4f9; --tab-4: #b9e8ad;
  --due: #d62427;
}

/* ---- the planner page, the syllabus panel, term tabs, week strip (from option C) ---- */
/* ==========================================================================
   Home page, option C – the syllabus
   A semester is a list of things due. PERRLA formats every one of them.
   White planner page, faint grid, week labels in mono, due-date marks,
   colored tabs along the edge, the paper sheet as the thing each row becomes.
   ========================================================================== */

/* Hero: planner page */
.c-hero { position: relative; background-color: #fff; background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 34px; border-bottom: 1px solid var(--rule); }
.c-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.86) 38%, rgba(255,255,255,0) 62%); pointer-events: none; }
.c-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(3rem, 6vw, 5rem); }
.c-hero h1 { margin-bottom: 1.25rem; }
.c-hero h1 .hl { background: linear-gradient(transparent 58%, var(--yellow-300) 58%, var(--yellow-300) 92%, transparent 92%); padding: 0 0.08em; }
.c-hero .lede { font-size: var(--text-xl); max-width: 33rem; margin-bottom: 1.75rem; }
.c-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.c-hero__fine { color: var(--ink-2); font-size: 0.9375rem; margin: 0; }
.c-hero__login { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; color: var(--ink-2); max-width: 33rem; }
.c-hero__login a { font-weight: 600; }
@media (max-width: 1000px) { .c-hero__inner { grid-template-columns: minmax(0, 1fr); } .c-hero::after { background: rgba(255,255,255,0.8); } }

/* The syllabus: pick an assignment, see the formatted paper */
.syllabus { background: #fff; border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 1px 2px rgba(10,40,81,0.06), 0 22px 44px -22px rgba(10,40,81,0.35); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); overflow: hidden; }
.syllabus__list { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.syllabus__course { padding: 0.875rem 1rem; border-bottom: 1px solid var(--rule); background: var(--gray-50); }
.syllabus__course b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.syllabus__course span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.syllabus__row { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr); gap: 0.25rem 0.5rem; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule-soft); padding: 0.7rem 1rem; cursor: pointer; font: inherit; color: var(--ink); position: relative; }
.syllabus__row:last-child { border-bottom: 0; }
.syllabus__row .wk { white-space: nowrap; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.syllabus__row .what { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.syllabus__row .due { grid-column: 2; font-size: 0.8125rem; color: var(--ink-2); }
.syllabus__row:hover { background: var(--gray-50); }
.syllabus__row[aria-selected="true"] { background: var(--yellow-300); }
.syllabus__row[aria-selected="true"] .due { color: #5a3d00; }
.syllabus__row[aria-selected="true"] .wk { color: #5a3d00; }
.syllabus__view { background: var(--gray-100); padding: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
/* every page sits in the same cell, so the panel is as tall as the tallest one and never changes size between rows */
.syllabus__view > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; }
.syllabus__view .paper { aspect-ratio: 8.5 / 9.6; font-size: clamp(7.5px, 0.6vw, 8.6px); line-height: 2.3; padding: 11.8% 7% 7%; box-shadow: 0 1px 2px rgba(33,37,41,0.1), 0 12px 24px -14px rgba(33,37,41,0.4); }
.syllabus__view > [role="tabpanel"][hidden] { display: block; visibility: hidden; }
.syllabus__view .paper .pnum { top: 5.2%; right: 7%; }
.syllabus__view .paper .rhead { top: 5.2%; left: 7%; right: 7%; }   /* page number half an inch down, the heading at one inch, as on a real page */
.syllabus__note { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.4; margin: 0; }
.syllabus__note > span { display: block; }
.syllabus__note > .copychip { display: inline-block; }
.syllabus__note b { color: var(--ink); }
.syllabus__caption { margin: 0.875rem 0 0; font-size: 0.8125rem; color: var(--ink-2); }
.paper .toc-line { display: flex; gap: 0.4em; align-items: last baseline; }
.paper .toc-line i { flex: 1; height: 0.5em; background: radial-gradient(circle, #000 0.06em, transparent 0.075em) 0 100% / 0.5em 0.2em repeat-x; }   /* spaced dot leaders, as PERRLA draws them */
.paper .toc-2 { padding-left: 3.2%; }   /* level 2 entries: 20px of the 626px line */
.paper .annot { margin-left: 7.7%; }   /* the annotation: a half-inch block indent, no first-line indent */
.copychip { align-self: flex-start; white-space: nowrap; display: inline-block; margin-bottom: 0.375rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; background: #fff; border: 1px solid var(--gray-400); border-radius: 6px; padding: 0.3rem 0.55rem; color: var(--ink); }
@media (max-width: 640px) { .syllabus { grid-template-columns: minmax(0, 1fr); } .syllabus__list { border-right: 0; border-bottom: 1px solid var(--rule); } .syllabus__view .paper { font-size: 8.5px; aspect-ratio: auto; min-height: 15rem; padding-bottom: 2.5em; } }

/* Term sections: planner divider tabs on the page's right edge (wayfinding, not a label over the heading) */
.term { position: relative; }
.term__tab { position: absolute; right: 0; top: clamp(3.5rem, 7vw, 6.5rem); writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 1rem 0.5rem; border-radius: 8px 0 0 8px; background: var(--tab-1); color: #5a3d00; }
.term--2 .term__tab { background: var(--tab-2); color: #004e57; }
.term--3 .term__tab { background: var(--tab-3); color: var(--blue-900); }
.term--4 .term__tab { background: var(--tab-4); color: #1a4d18; }
@media (max-width: 1320px) { .term__tab { display: none; } }

/* Week strip (PERRLA 101 live) */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: #fff; }
.week > div { padding: 0.75rem 0.75rem 1rem; border-right: 1px solid var(--rule-soft); min-height: 7.5rem; }
.week > div:last-child { border-right: 0; }
.week .d { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 0.625rem; }
.week .ev { display: block; background: var(--blue-500); border-radius: 6px; padding: 0.45rem 0.55rem; font-size: 0.8125rem; line-height: 1.3; color: #fff; }
.week .ev b { display: block; }
.week .sup { display: block; margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--ink-2); line-height: 1.3; }   /* support hours first in every day, the session below (Graysen, Oct 4) */
@media (max-width: 860px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } .week > div { border-bottom: 1px solid var(--rule-soft); min-height: 0; } }

/* Where you write: three columns with a tab edge */
.c-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.c-where > div { border-top: 2px solid var(--ink); padding-top: 1rem; }
.c-where h3 { font-size: 1.375rem; margin-bottom: 0.375rem; }
.c-where p { color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 860px) { .c-where { grid-template-columns: minmax(0, 1fr); } }

/* How long are you in school: term bar */
.c-terms { display: grid; grid-template-columns: 1fr 2.2fr 3.6fr; gap: 0.5rem; margin-bottom: 2rem; }
.c-terms div { border-radius: 8px; padding: 0.75rem 0.875rem; font-size: 0.875rem; line-height: 1.35; background: var(--blue-50); color: var(--blue-900); }
.c-terms div:nth-child(2) { background: var(--blue-100); }
.c-terms div:nth-child(3) { background: var(--blue-500); color: #fff; }
.c-terms b { display: block; font-family: var(--font-display); font-size: 1.0625rem; }
@media (max-width: 700px) { .c-terms { grid-template-columns: 1fr; } }

.c-schools { background: var(--blue-900); color: #fff; }
.c-schools .lede { color: var(--on-field-2); }

/* ---- the index card, sorting desk, divider tabs (from option B) ---- */
/* ==========================================================================
   Home page, option B – index cards and the research desk
   One source, one card. PERRLA files it, sorts it, and turns the stack into
   the references page. Light desk, white ruled cards, colored divider tabs.
   ========================================================================== */

/* The index card: white stock, a blank header band, one red rule, blue rules below it (none above, as on a real card) */
.icard {
  position: relative; background: #fff; border-radius: 5px;
  box-shadow: 0 1px 1px rgba(10,40,81,0.10), 0 14px 28px -14px rgba(10,40,81,0.40);
  padding: 0 1.25rem 1.1rem;
  background-image:
    linear-gradient(var(--card-red), var(--card-red)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--card-rule) calc(var(--line) - 1px), var(--card-rule) var(--line));
  background-size: 100% 1.5px, 100% calc(100% - var(--line) * 1.5);
  background-position: 0 calc(var(--line) * 1.5), 0 calc(var(--line) * 1.5);
  background-repeat: no-repeat, no-repeat;
  font-size: 0.9375rem; line-height: var(--line); color: var(--ink);
}
.icard__head { height: calc(var(--line) * 1.5); display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em; line-height: 1.2; }
.icard__head .yr { font-family: var(--font-mono); font-weight: 400; font-size: 0.8125rem; color: var(--ink-2); letter-spacing: 0.02em; }
.icard p { margin: 0; }
.icard .mark { background: var(--highlight); padding: 0 0.12em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.icard .mono { font-size: 0.8125rem; }
.icard__tab { position: absolute; top: -1.35rem; left: 1rem; height: 1.4rem; min-width: 2.25rem; padding: 0 0.6rem; border-radius: 6px 6px 0 0; background: var(--tab-yellow); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; display: grid; place-items: center; color: #5a3d00; }
.icard__tab--teal { background: var(--tab-teal); color: #004e57; }
.icard__tab--blue { background: var(--tab-blue); color: var(--blue-900); }
.icard__tab--green { background: var(--tab-green); color: #1a4d18; }
.icard__tab--r { left: auto; right: var(--tab-r, 1rem); }
.icard--note { background-color: #fffdf3; }
.icard--plain { background-image: linear-gradient(var(--card-red), var(--card-red)); background-size: 100% 1.5px; background-position: 0 calc(var(--line) * 1.5); background-repeat: no-repeat; line-height: 1.55; }
.icard--plain .icard__body { padding-top: 0.875rem; }

/* Hero: the desk */
.b-hero { background: var(--desk); position: relative; overflow: hidden; }
.b-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 480px at 80% 10%, #f4fafe, transparent 65%); pointer-events: none; }
.b-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 6vw, 5.5rem); }
.b-hero h1 { margin-bottom: 1.25rem; }
.b-hero .lede { font-size: var(--text-xl); max-width: 35rem; margin-bottom: 1.75rem; }
.b-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.b-hero__fine { color: var(--ink-2); font-size: 0.9375rem; margin: 0; }
.b-hero__login { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(39,102,155,0.25); font-size: 0.9375rem; color: var(--ink-2); }
.b-hero__login a { font-weight: 600; }
@media (max-width: 960px) { .b-hero__inner { grid-template-columns: minmax(0, 1fr); } }

/* The sorting desk: three source cards shuffle into alphabetical order, the references sheet fills in */
.sortdesk { position: relative; height: 540px; }
.sortdesk .icard { position: absolute; width: min(74%, 400px); transition: transform 0.9s var(--ease-out), top 0.9s var(--ease-out), left 0.9s var(--ease-out); }
.sortdesk .icard[data-k="aiken"]     { left: 30%; top: 196px; transform: rotate(4deg); z-index: 3; }
.sortdesk .icard[data-k="needleman"] { left: 2%;  top: 34px;  transform: rotate(-6deg); z-index: 2; }
.sortdesk .icard[data-k="nasem"]     { left: 18%; top: 356px; transform: rotate(-2.5deg); z-index: 4; }
.sortdesk.is-sorted .icard[data-k="aiken"]     { left: 0; top: 28px;  transform: rotate(-0.6deg); }
.sortdesk.is-sorted .icard[data-k="nasem"]     { left: 3%; top: 73px;  transform: rotate(0.3deg); z-index: 5; }
.sortdesk.is-sorted .icard[data-k="needleman"] { left: 6%; top: 118px; transform: rotate(0.9deg); z-index: 6; }
.sortdesk__sheet { position: absolute; right: 0; bottom: 0; width: min(78%, 430px); z-index: 7; opacity: 0; transform: translateY(18px) rotate(1deg); transition: opacity 0.7s var(--ease-out) 0.5s, transform 0.7s var(--ease-out) 0.5s; }
.sortdesk.is-sorted .sortdesk__sheet { opacity: 1; transform: translateY(0) rotate(1deg); }
.sortdesk__sheet .paper { aspect-ratio: auto; font-size: 10.5px; line-height: 1.85; padding: 1.5em 2em 1.75em; }
.sortdesk__caption { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--ink-2); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.sortdesk__caption button { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font-size: inherit; }
@media (prefers-reduced-motion: reduce) { .sortdesk .icard, .sortdesk__sheet { transition: none; } }
@media (max-width: 560px) { .sortdesk { height: 520px; } .sortdesk .icard { width: 88%; font-size: 0.8125rem; --line: 1.5rem; }
  /* shuffled cards stay inside the page: nothing may reach past the right edge */
  .sortdesk .icard[data-k="aiken"] { left: 8%; transform: rotate(2.5deg); } .sortdesk .icard[data-k="nasem"] { left: 5%; } .sortdesk .icard[data-k="needleman"] { left: 3%; transform: rotate(-3.5deg); }
  .sortdesk__sheet { width: 90%; } .sortdesk__sheet .paper { font-size: 9px; }
  /* stacked cards step by exactly one header, so no second line peeks out */
  .sortdesk.is-sorted .icard[data-k="aiken"] { top: 28px; } .sortdesk.is-sorted .icard[data-k="nasem"] { top: 64px; } .sortdesk.is-sorted .icard[data-k="needleman"] { top: 100px; }
  /* and each tab sits clear of the name on the card above it */
  .sortdesk .icard__head { font-size: 0.9375rem; } .sortdesk .icard[data-k="nasem"] .icard__tab--r { right: 1rem; } }

/* Card box with divider tabs (where you write) */
.cardbox { background: var(--desk); border-radius: 16px; padding: 2.75rem clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem); position: relative; }
.cardbox__tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; position: absolute; top: 0.6rem; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.cardbox__tabs button { font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: 0.55rem 1rem 0.5rem; border: 0; border-radius: 9px 9px 0 0; cursor: pointer; background: var(--desk-2); color: var(--ink-2); }
.cardbox__tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 -2px 0 var(--tab-yellow) inset; }
.cardbox__tabs button:nth-child(2)[aria-selected="true"] { box-shadow: 0 -2px 0 var(--tab-blue) inset; }
.cardbox__tabs button:nth-child(3)[aria-selected="true"] { box-shadow: 0 -2px 0 var(--tab-green) inset; }
.cardbox__tabs button:nth-child(4)[aria-selected="true"] { box-shadow: 0 -2px 0 var(--tab-teal) inset; }
.cardbox__panel { background: #fff; border-radius: 0 10px 10px 10px; padding: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; box-shadow: 0 1px 1px rgba(10,40,81,0.08), 0 14px 28px -18px rgba(10,40,81,0.35); }
.cardbox__panel[hidden] { display: none; }
.cardbox__panel h3 { margin-bottom: 0.5rem; }
.cardbox__panel p { color: var(--ink-2); }
@media (max-width: 760px) { .cardbox__panel { grid-template-columns: minmax(0,1fr); } .cardbox { padding-top: 5.75rem; } }

/* Card to page */
.b-flow { display: grid; grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.15fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.b-flow__cards { display: grid; gap: 2.4rem; }
.b-flow__cards .icard:nth-child(1) { transform: rotate(-1.5deg); }
.b-flow__cards .icard:nth-child(2) { transform: rotate(1deg); margin-left: 1.5rem; }
.b-flow__arrow { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--blue-500); display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(10,40,81,0.6); }
.b-flow__arrow img { width: 1.9rem; }
.b-flow .paper { aspect-ratio: auto; font-size: clamp(9px, 0.95vw, 12px); padding: 2em 2.6em 2.2em; }
@media (max-width: 860px) { .b-flow { grid-template-columns: minmax(0,1fr); } .b-flow__arrow { margin: 0 auto; transform: rotate(90deg); } }

/* Quotes as note cards */
.b-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 1.75rem; padding-top: 1.4rem; }
.b-notes .icard:nth-child(1) { transform: rotate(-1.2deg); }
.b-notes .icard:nth-child(2) { transform: rotate(0.8deg) translateY(0.75rem); }
.b-notes .icard:nth-child(3) { transform: rotate(-0.5deg); }
.b-notes .icard p { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; }
@media (max-width: 860px) { .b-notes { grid-template-columns: minmax(0,1fr); } .b-notes .icard { transform: none !important; } }

/* Desk sections and schools band */
.section--desk { background: var(--desk); }
.b-schools { background: var(--blue-800); color: #fff; }
.b-schools .lede { color: var(--on-field-2); }
.b-schools a:not(.btn) { color: #fff; }
.b-schools__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.b-schools__cards { display: grid; gap: 2.4rem; padding-top: 1.4rem; }
.b-schools__cards .icard:nth-child(1) { transform: rotate(1deg); }
.b-schools__cards .icard:nth-child(2) { transform: rotate(-0.8deg); margin-left: 1.25rem; }
@media (max-width: 860px) { .b-schools__grid { grid-template-columns: minmax(0,1fr); } }

/* Plans as tabbed cards */
.b-plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; padding-top: 1.4rem; align-items: stretch; }
.b-plans .icard { display: flex; flex-direction: column; }
.b-plans .price { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -0.02em; line-height: var(--line); padding-top: calc(var(--line) * 0.5); height: calc(var(--line) * 2); }
.b-plans .price sup { font-size: 0.45em; font-weight: 500; position: relative; top: -0.55em; vertical-align: baseline; }
.b-plans .btn { margin-top: auto; justify-content: center; }
.b-plans ul { list-style: none; padding: 0; margin: 0 0 var(--line); }
.b-plans li { margin: 0; }
@media (max-width: 900px) { .b-plans { grid-template-columns: minmax(0,1fr); max-width: 480px; gap: 2.6rem; } }

/* ---- feature cards (the merge, option D) ---- */
/* Home page, option D – the syllabus layout, with index cards reserved for features */
.d-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem 1.5rem; padding-top: 1.4rem; align-items: start; }
.d-cards .icard { min-height: calc(var(--line) * 9.5); }
.d-cards .icard:nth-child(1) { transform: rotate(-1.1deg); }
.d-cards .icard:nth-child(2) { transform: rotate(0.7deg) translateY(0.6rem); }
.d-cards .icard:nth-child(3) { transform: rotate(-0.5deg); }
.d-cards .icard:nth-child(4) { transform: rotate(1deg) translateY(0.5rem); }
.d-cards .icard__head { font-size: 1.0625rem; }
.d-cards__why { color: var(--ink-2); font-size: 0.875rem; margin-top: var(--line) !important; }
.d-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.875rem; white-space: nowrap; }
.d-fix { flex: none; font-family: var(--font-mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-500); border: 1px solid var(--blue-300); border-radius: 4px; padding: 0 0.4rem; line-height: 1.5; background: #fff; }
@media (max-width: 359px) { .d-row { white-space: normal; align-items: baseline; } .d-row > span { min-width: 0; } }
@media (max-width: 1100px) { .d-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .d-cards { grid-template-columns: minmax(0, 1fr); } .d-cards .icard { transform: none !important; min-height: 0; } }
/* the sorting desk sits in a column here, not the hero */
#library .sortdesk { height: 520px; }
#library .grid-2 { align-items: center; }

/* ==========================================================================
   Inner-page intros: every page opens on the same planner page as the home
   (the dark-field intro of the first draft is retired; .intro--field is kept
   as a class name only so page markup did not have to change)
   ========================================================================== */
.hl { background: linear-gradient(transparent 58%, var(--yellow-300) 58%, var(--yellow-300) 92%, transparent 92%); padding: 0 0.08em; }
.intro, .intro--field { position: relative; background-color: #fff; background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 34px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.intro::after, .intro--field::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.88) 42%, rgba(255,255,255,0) 66%); pointer-events: none; }
.intro > .container, .intro--field > .container { position: relative; z-index: 1; }
.intro--field h1 { color: var(--ink); }
.intro--field .lede { color: var(--ink-2); }
.intro--field .crumbs, .intro--field .crumbs a { color: var(--ink-2); }
.intro--field a:not(.btn) { color: var(--link); }
.intro .hero__fine, .intro--field .hero__fine { color: var(--ink-2); }
.intro .hero__fine a, .intro--field .hero__fine a { color: var(--link); }
.intro--field .btn--primary { background: var(--action); color: #fff; border-color: var(--action); box-shadow: 0 1px 2px rgba(10,40,81,0.2), 0 6px 14px -6px rgba(39,102,155,0.5); }
.intro--field .btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.intro--field .btn--secondary { background: #fff; color: var(--ink); border-color: #8d949b; }
.intro--field .btn--secondary:hover { border-color: var(--ink); color: var(--ink); background: var(--gray-50); }
.intro--field .btn--ghost { color: var(--link); }
.intro--field .paper { box-shadow: var(--shadow-paper); border: 1px solid var(--gray-200); }
.intro .sheet-tag, .intro .twin__tag, .intro .sheet-intro__tag, .intro .pagebreak__tag, .intro .fan__tag,
.intro--field .sheet-tag, .intro--field .fan__tag, .intro--field .pagebreak__tag { color: var(--ink-2); }
.intro--field :focus-visible { outline-color: var(--blue-500); }
.intro--field .verify { color: var(--blue-950); }
.intro .record, .intro--field .record { background: #fff; }

/* Feature cards are a system component now (index cards, features only) */
.fcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 1.5rem; padding-top: 1.4rem; align-items: start; }
.fcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fcards .icard { min-height: calc(var(--line) * 8.5); }
.fcards .icard:nth-child(odd) { transform: rotate(-0.8deg); }
.fcards .icard:nth-child(even) { transform: rotate(0.7deg) translateY(0.5rem); }
.fcards .icard__head { font-size: 1.0625rem; }
.fcards__why { color: var(--ink-2); font-size: 0.875rem; margin-top: var(--line) !important; }
@media (max-width: 1100px) { .fcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .fcards, .fcards--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .fcards--4 { grid-template-columns: minmax(0, 1fr); } .fcards .icard { transform: none !important; min-height: 0; } }

/* A single index card beside text (an intro or a two-column section) */
.icard--solo { margin-top: 1.4rem; max-width: 30rem; }
.icard--fill { max-width: none; }
.c-where--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .c-where--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .c-where--4 { grid-template-columns: minmax(0, 1fr); } }
.c-where--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .c-where--2 { grid-template-columns: minmax(0, 1fr); } }
/* steps are the same ruled columns, as an ordered list, with the stage in the heading */
ol.c-where { list-style: none; margin: 0; padding: 0; }
.c-where > li { border-top: 2px solid var(--ink); padding-top: 1rem; margin: 0; }

/* The closing: one plain sentence in the display face and one button, the last thing on a page */
/* The closing box at the foot of every page: the last index card on the desk (Graysen, Oct 4: "a little plain").
   A "Next up" tab, the blank band and red line of the site's index cards, the sentence large, the buttons beside it. */
.callout.closing { position: relative; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-end; justify-content: space-between;
  margin-top: 2.25rem; padding: calc(var(--line) * 1.6 + 1.25rem) clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 1.75rem);
  border: 0; border-radius: 6px; background-color: #fff;
  background-image: linear-gradient(var(--card-red), var(--card-red)); background-size: 100% 1.5px; background-position: 0 calc(var(--line) * 1.6); background-repeat: no-repeat;
  box-shadow: 0 1px 1px rgba(10,40,81,0.10), 0 18px 34px -16px rgba(10,40,81,0.42); transform: rotate(-0.35deg); }
.callout.closing::before { content: "Next up"; position: absolute; top: -1.4rem; left: clamp(1.25rem, 3.5vw, 2.5rem); height: 1.45rem; padding: 0 0.75rem; border-radius: 6px 6px 0 0;
  background: var(--tab-yellow); color: var(--ink); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.45rem; }
.closing > p { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 1.875rem); line-height: 1.22; letter-spacing: -0.01em; max-width: 30ch; margin: 0; text-wrap: balance; }
.closing > .btn, .closing > .cluster { flex: 0 1 auto; min-width: 0; }
.callout.closing::after { content: "Formatted"; position: absolute; right: clamp(1.25rem, 4vw, 3rem); top: calc(var(--line) * 1.6 + 1.5rem); transform: rotate(-7deg);
  padding: 0.35rem 0.7rem; border: 2px solid rgba(39, 102, 155, 0.55); border-radius: 4px; color: rgba(39, 102, 155, 0.6);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; }   /* an instructor's stamp: the formatting is done */
.callout.closing::after { display: none; }
.container--narrow > .callout.closing::after { display: block; }   /* only on a full-width closing; inside an article column the sentence needs the room */
@media (max-width: 760px) { .container--narrow > .callout.closing::after { display: none; } }
@media (max-width: 560px) { .callout.closing { transform: none; } .closing > p { max-width: none; } .closing > .cluster { flex-wrap: wrap; } .closing .btn { white-space: normal; } }

.footer .footer__record { margin-top: 1.25rem; }
.footer .footer__record dt { color: var(--on-field-3); }
.footer .footer__record dd { color: #fff; font-size: 0.875rem; }
.footer .footer__record dt, .footer .footer__record dd { border-color: var(--on-field-rule); padding-block: 0.4rem; }

/* Campaign offer line (ad landing pages built from the home page) */
.offer { display: inline-block; background: var(--highlight-soft); border: 1px solid var(--yellow-300); border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0 0 1.25rem; font-weight: 600; }
.offer .code { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.06em; background: #fff; border: 1px dashed var(--yellow-700); border-radius: 4px; padding: 0.05rem 0.4rem; }

/* ---------- Testimonials: the video row and the review wall (Oct 4) ---------- */
.vid { margin: 0; }
.vid__frame { position: relative; aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--gray-100); box-shadow: 0 1px 1px rgba(10,40,81,0.10), 0 14px 28px -14px rgba(10,40,81,0.40); }
.vid__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid__play { position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border-radius: 50%; background: rgba(10,40,81,0.78); }
.vid__play::after { content: ""; position: absolute; left: 1.4rem; top: 1.05rem; border-left: 1rem solid #fff; border-top: 0.7rem solid transparent; border-bottom: 0.7rem solid transparent; }
.vid__len { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.1rem 0.4rem; border-radius: 3px; background: rgba(10,40,81,0.78); color: #fff; font-family: var(--font-mono); font-size: 0.75rem; }
.vid figcaption { margin-top: 0.75rem; font-size: 0.9375rem; }
.vid figcaption span { display: block; margin-top: 0.15rem; color: var(--ink-2); font-size: 0.875rem; }
@media (max-width: 560px) { .vids { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

/* Every review as a notecard: blank above the red line, the words on the ruled lines, the name at the foot.
   Without the script the list falls back to CSS columns; with it, cards go into fixed columns so loading more never reshuffles them. */
.wall__cards { list-style: none; margin: 2rem 0 0; padding: 0; columns: 4 15rem; column-gap: 1.5rem; }
.wall__cols { display: flex; align-items: flex-start; gap: 1.5rem; margin-top: 2rem; }
.wall__col { flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0; }
.icard--quote { display: block; break-inside: avoid; margin: 0 0 1.75rem; background-size: 100% 1.5px, 100% calc(100% - var(--line) * 2); background-position: 0 calc(var(--line) * 2), 0 calc(var(--line) * 2); }
.icard--quote:nth-child(3n+1) { transform: rotate(-0.45deg); }
.icard--quote:nth-child(3n+2) { transform: rotate(0.35deg); }
.icard--quote blockquote { margin: 0; }
.icard--quote blockquote p { margin: 0; overflow-wrap: anywhere; }
.wall__who { height: calc(var(--line) * 2); margin: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 0.25rem; font-size: 0.75rem; line-height: 1.2; color: var(--ink-2); overflow: hidden; }   /* the source on top, above the red line; the words under it (Graysen, Oct 4) */
.wall__who b { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; }
.wall__role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icard--quote blockquote { padding-bottom: 0.15rem; }
.wall__more { margin: 0.5rem 0 0; text-align: center; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); }

/* Student stories: back to top, once the reader is three quarters of the way down (Graysen, Oct 4) */
.totop { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 50; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; color: var(--blue-500); font: 600 0.875rem/1 var(--font-body); box-shadow: 0 1px 2px rgba(10,40,81,0.12), 0 10px 24px -10px rgba(10,40,81,0.45); cursor: pointer; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s ease, transform 0.2s ease; }
.totop.is-shown { opacity: 1; transform: none; }
.totop:hover { background: var(--gray-100); }
.totop:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.totop svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }