/* Maro · College Essay: sub-brand on top of /css/maro.css.
   A sub of Maro Writing, the way /toefl/ is: same hand, different room.

   WHY WARM, AND WHY PASTEL. Cerulean is the AP reader's pen: a mark on your
   work. A personal statement is not marked, it is read, so the room is warm
   instead. Pastel is doing real work here and is not decoration: FORGE already
   owns a deep crimson (#7A1525) and Maro-for-TOEFL owns a saturated terracotta
   (#A8442C). Keeping this desaturated and light is what stops a third warm
   surface colliding with the two we already ship.

   The strategy is RESTRAINED on purpose. Kevin's note was that the app felt
   heavy, so the accent stays under ~10% of surface and everything else is
   removal. Warmth carries through two marks and a wash, never a filled panel.

   Contrast verified, not assumed:
     --ember #C2542B on white = 4.57:1  (passes body text)
     --rose  #B33A50 on white = 5.77:1  (passes body text)
   Both are used AS TEXT, so neither could be a pastel; the pastels are the
   washes behind them. */

:root{
  --ember:#C2542B;        /* warm orange: links, the underline, the caret */
  --ember-deep:#8F3A18;   /* pressed states, CTA text on wash */
  --ember-wash:#FDF3EE;   /* pastel: note panels, the reading ground */
  --ember-line:rgba(194,84,43,0.24);

  --rose:#B33A50;         /* crimson: the second voice, used sparingly */
  --rose-wash:#FCF0F2;    /* pastel */
  --rose-line:rgba(179,58,80,0.22);

  --warm-ground:#FBF8F6;  /* page ground: off-white toward the brand's own hue,
                             chroma pulled toward ember rather than default-warm */

  --shadow-soft:0 18px 40px -34px rgba(143,58,24,0.42);
  --shadow-lift:0 14px 30px -18px rgba(143,58,24,0.30);

  /* ONE radius scale. There were seven ad-hoc values (9,10,11,12,14,15,16) and
     no two boxes agreed, which is what "different box sizes" looks like. */
  --r-sm:10px;    /* inputs, inline quotes */
  --r-md:14px;    /* buttons, notes, options: everything that sits ON the page */
  --r-lg:18px;    /* the writing surface itself */
  --r-pill:999px;

  /* ONE padding scale, matched to the radii. */
  --pad-sm:11px 14px;
  --pad-md:16px 18px;
  --pad-lg:20px 22px;
}

body.ce{ background:var(--warm-ground); color:var(--ink); }

/* ── the bar: three elements, not nine ─────────────────────────────────────
   The AP workspace has a seven-item rail because AP students genuinely have
   courses, cards and assignments. A student writing a personal statement has
   none of that, so this is a wordmark, one destination, and an account. */
.ce-bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:20px;
  padding:14px clamp(18px,4vw,38px);
  background:rgba(251,248,246,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.ce-bar .brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.ce-bar .brand .wordmark{ font-size:24px; }
.ce-bar .sub{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ember-deep);
  padding:4px 9px; border:1px solid var(--ember-line); border-radius:999px;
}
.ce-bar a.nav{ font-size:15px; color:var(--muted); }
.ce-bar a.nav:hover{ color:var(--ink); }

.ce-wrap{ max-width:1080px; margin:0 auto; padding:0 clamp(18px,4vw,38px); }
.ce-narrow{ max-width:660px; }

/* TYPE ROLES (use these, do not invent a size in a page's <style> block):
     12 mono uppercase  · labels, meta, counts
     15 sans or serif   · UI text, buttons, margin notes, secondary prose
     19 serif           · the essay itself and the overall verdict. READING size.
     24+                · headings, via the clamp ramps below
   16px is reserved for text inputs ONLY (iOS zooms a focused field under 16).

   TYPE RAMP, four steps at ~1.25: 12 / 15 / 19 / 24.
   An earlier pass had 9,11,14,15,16,17,19,21 which is eight sizes inside a
   2.3x band and reads as no hierarchy at all. ONE exception survives: text
   inputs stay at 16px, because iOS auto-zooms any focused field below 16 and
   that zoom is a worse defect than the off-ramp size. */

/* ── type ─────────────────────────────────────────────────────────────────
   Modular scale, ≥1.25 between steps, clamp max well under the 6rem ceiling.
   The display face is the brand's Newsreader; hierarchy is size and weight. */
.ce-h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.4rem,1.6rem + 3.4vw,4.1rem);
  line-height:1.04; letter-spacing:-0.022em;
  text-wrap:balance; margin:0;
}
.ce-h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);
  line-height:1.14; letter-spacing:-0.015em; text-wrap:balance; margin:0;
}
.ce-lede{
  font-size:clamp(1.05rem,1rem + 0.4vw,1.2rem);
  line-height:1.62; color:var(--muted);
  max-width:62ch; text-wrap:pretty;
}
.ce-body{ font-size:1rem; line-height:1.68; color:var(--muted); max-width:68ch; text-wrap:pretty; }

/* ── the mark: the one visual idea, reused everywhere ──────────────────────
   A reader's underline under a real line of a real essay. It is the product's
   actual output, so it is also the page's imagery. */
mark.ce-anchor{
  background:linear-gradient(transparent 58%, var(--ember-wash) 58%);
  color:inherit; border-bottom:2px solid var(--ember);
  padding-bottom:1px; border-radius:1px;
}

.ce-note{
  position:relative;
  background:var(--paper); border:1.5px solid var(--ember);
  border-radius:var(--r-md); padding:var(--pad-md); box-shadow:var(--shadow-lift);
}
.ce-note .caret{
  position:absolute; left:-9px; top:26px; width:16px; height:16px;
  background:var(--paper);
  border-left:1.5px solid var(--ember); border-bottom:1.5px solid var(--ember);
  transform:rotate(45deg);
}
.ce-note .who{
  font-family:var(--mono); font-size:12px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--ember-deep); margin-bottom:10px;
}
.ce-note .said{ font-family:var(--serif); font-size:15px; line-height:1.62; color:var(--ink); }
/* The overall verdict is the loud one: it judges the whole essay, so it reads at
   the essay's own size while the margin notes stay quiet underneath it. */
.ce-note.verdict .said{ font-size:19px; line-height:1.5; }

/* ── buttons ──────────────────────────────────────────────────────────────*/
.ce-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:500; font-size:15px;
  padding:12px 20px; border-radius:var(--r-md); border:1px solid var(--ember);
  background:var(--ember); color:#fff; cursor:pointer;
  transition:transform .18s cubic-bezier(0.22,1,0.36,1), background .18s, box-shadow .18s;
  box-shadow:var(--shadow-soft);
}
.ce-btn:hover{ background:var(--ember-deep); border-color:var(--ember-deep); transform:translateY(-1px); }
.ce-btn.ghost{ background:transparent; color:var(--ember-deep); box-shadow:none; }
.ce-btn.ghost:hover{ background:var(--ember-wash); color:var(--ember-deep); }
.ce-btn.sm{ padding:9px 15px; }

/* ── writing surface ──────────────────────────────────────────────────────*/
.ce-paper{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(26px,4vw,46px); box-shadow:var(--shadow-soft);
  font-family:var(--serif); font-size:19px; line-height:1.85; color:var(--ink);
}
textarea.ce-paper{ width:100%; min-height:440px; resize:vertical; outline:none; }
textarea.ce-paper:focus{ border-color:var(--ember); }
.ce-paper.read{ white-space:pre-wrap; }

.ce-field{
  width:100%; font-family:var(--serif); font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; outline:none;
}
.ce-field:focus{ border-color:var(--ember); }
.ce-field::placeholder{ color:var(--faint); }   /* --faint is ≥4.6:1, not a light gray */

/* ── one option among several, not a card grid ────────────────────────────*/
.ce-opt{
  display:block; width:100%; text-align:left;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--pad-lg); cursor:pointer; color:inherit;
  transition:border-color .16s, box-shadow .16s, transform .16s cubic-bezier(0.22,1,0.36,1);
}
.ce-opt:hover{ border-color:var(--ember); box-shadow:var(--shadow-lift); transform:translateY(-1px); }
.ce-opt .t{ font-family:var(--serif); font-size:19px; line-height:1.34; color:var(--ink); }
.ce-opt .d{ font-size:15px; line-height:1.55; color:var(--muted); margin-top:6px; }

.ce-quote{
  font-family:var(--serif); font-size:15px; line-height:1.55;
  color:var(--ember-deep); background:var(--ember-wash);
  border-radius:var(--r-sm); padding:var(--pad-sm); margin-top:11px;
}

details.ce-more > summary{
  font-family:var(--sans); font-size:15px; color:var(--ember-deep);
  cursor:pointer; padding:9px 0; list-style:none;
}
details.ce-more > summary::-webkit-details-marker{ display:none; }
details.ce-more > summary::before{ content:"\25B8\00a0\00a0"; }
details.ce-more[open] > summary::before{ content:"\25BE\00a0\00a0"; }

.ce-hr{ border:0; border-top:1px solid var(--line-soft); margin:0; }
.hidden{ display:none !important; }

.ce-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:var(--r-md);
  font-size:15px; box-shadow:var(--shadow-soft); z-index:60;
}

/* The read column is one stack with one gap. Notes must not carry their own
   margins; that is how two boxes end up 12px apart and the next pair 20px. */
#gutter{ display:flex; flex-direction:column; gap:12px; }
#gutter > *{ margin-top:0 !important; }

/* ── motion: one orchestrated arrival, exponential ease-out, no bounce ─────
   Content is visible by DEFAULT and the animation enhances it, so a headless
   render or a background tab never ships a blank page. */
@keyframes ce-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.ce-rise{ animation:ce-rise .62s cubic-bezier(0.16,1,0.3,1) both; }
.ce-rise.d1{ animation-delay:.06s; }
.ce-rise.d2{ animation-delay:.13s; }
.ce-rise.d3{ animation-delay:.21s; }

@media (prefers-reduced-motion: reduce){
  .ce-rise{ animation:none; }
  .ce-btn, .ce-opt{ transition:background .01s, border-color .01s; }
  .ce-btn:hover, .ce-opt:hover{ transform:none; }
}

/* ── phones ──────────────────────────────────────────────────────────────────
   Real-device report 2026-08-25 ("the mobile version is horrible"). The bar
   never wrapped, and the gutter (the read itself) landed below the fold after
   a grade. Pages also scroll the gutter into view from JS; these rules keep
   the shell usable. */
@media (max-width:640px){
  .ce-bar{ flex-wrap:wrap; row-gap:4px; padding:10px 16px; gap:12px 14px; }
  .ce-bar .sub{ display:none; }
  .ce-bar a.nav{ font-size:14px; }
  .ce-bar .ce-btn.sm{ font-size:14px; padding:8px 14px; }
  .ce-btn{ font-size:17px; padding:12px 22px; }
  textarea.ce-paper{ min-height:46vh; }
  .ce-paper{ padding:18px 16px; font-size:17px; line-height:1.75; }
  .ce-note .said{ font-size:15px; }
  .ce-note.verdict .said{ font-size:18px; }
}

/* The read gutter is the payoff; on a phone it sits under the essay, so give it
   air and a visible top edge rather than letting it look like page filler. */
@media (max-width:900px){
  #gutter{ border-top:1px solid var(--line-soft); padding-top:20px; margin-top:8px; }
  #gutter:empty{ border-top:none; padding-top:0; }
}

/* Nothing may push the page sideways on a phone. A horizontal scrollbar on a
   writing surface is the difference between "usable on my phone" and "horrible". */
body.ce{ overflow-x:hidden; }
.ce-paper, .ce-field, .ce-note, .ce-opt{ max-width:100%; }
.ce-quote, .qc-quote{ overflow-wrap:anywhere; }