/* ==========================================================================
   Karleigh.docx — The document
   Pages, paper, editorial typography, margins, editing marks, marginalia.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,255,255,0.09), transparent 70%),
    linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 100%);
  /* Fixed so the light stays at the top of the *screen*, not the top of a
     9,000px document — the desk the pages sit on, lit from above. */
  background-attachment: fixed;
  color: var(--ink);
  font: var(--t-body)/var(--lh-body) var(--font-doc);
  overflow-x: hidden;
}

::selection { background: var(--select); color: #fff; }

.skip-link {
  position: absolute; top: -60px; left: 8px; z-index: 900;
  padding: 8px 14px;
  background: var(--paper); color: var(--ink);
  font: bold var(--t-ui) var(--font-ui);
  border: 2px solid var(--select);
}
.skip-link:focus { top: 8px; }

/* ==========================================================================
   The scroll surface
   ========================================================================== */
.doc-scroll {
  padding-inline: var(--gutter);
  padding-top: calc(var(--chrome-h) + 26px);
  padding-bottom: 96px;
  transition: padding-left var(--dur) var(--ease);
}
@media (min-width: 1181px) {
  body[data-pane="open"] .doc-scroll { padding-left: var(--pane-w); }
  body[data-pane="open"] .ruler__track { margin-left: calc(var(--pane-w) / 2); }
}

/* The zoom control genuinely scales the sheets, like Word's does.
   Driven by the `zoom` property (set in chrome.js) rather than
   `transform: scale()`: zoom reflows, so the sheets stay centred and the
   document height stays honest instead of needing a margin correction. */
.doc-stack {
  margin: 0 auto;
  width: 100%;
}

/* ==========================================================================
   A page
   ========================================================================== */
.doc-page {
  position: relative;
  /* Never edge to edge: the grey either side is what says "this is a page
     inside Word". The gutter is guaranteed at every width. */
  width: min(var(--page-w), 100%);
  margin: 0 auto;
  padding: var(--page-pad-y) var(--page-pad-x) calc(var(--page-pad-y) - 12px);
  background-color: var(--paper);
  color: var(--ink);
  /* Word draws a hairline round the sheet and a soft shadow down-right */
  box-shadow:
    0 0 0 1px #9a9a9a,
    2px 2px 5px rgba(0, 0, 0, 0.34);
}
.doc-page + .doc-page { z-index: 2; }

/* Word's optional text boundaries — the dotted rectangle round the type
   area. Off by default; View ▸ Text Boundaries turns it on. */
.doc-page::before {
  content: "";
  position: absolute;
  inset: var(--page-pad-y) var(--page-pad-x) calc(var(--page-pad-y) - 12px);
  pointer-events: none;
  z-index: 1;
  border: 1px dotted transparent;
  transition: border-color var(--dur) var(--ease);
}
body[data-bounds="on"] .doc-page::before { border-color: #b9b9b9; }

.doc-page > * { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Nothing may outgrow its sheet.
   A safety net: any media inside a page is capped to the page's content
   width, whatever its intrinsic size or a stray width attribute says. The
   cork board opts out deliberately — it breaks into the margins but still
   sits inside the white.
   -------------------------------------------------------------------------- */
.doc-page img,
.doc-page svg,
.doc-page video,
.doc-page canvas,
.doc-page picture,
.doc-page table {
  max-width: 100%;
}
.doc-page img,
.doc-page video { height: auto; }

/* --- Running head & foot -------------------------------------------------- */
.page__header,
.page__footer {
  position: absolute;
  left: var(--page-pad-x);
  right: var(--page-pad-x);
  display: flex;
  align-items: baseline;
  gap: 14px;
  font: var(--t-meta)/1 var(--font-ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}
.page__header { top: 34px; border-bottom: 1px solid var(--paper-edge); padding-bottom: 7px; }
.page__footer { bottom: 30px; border-top: 1px solid var(--paper-edge); padding-top: 7px; }
.page__header .grow,
.page__footer .grow { flex: 1; }
.page__footer .folio { font-variant-numeric: tabular-nums; letter-spacing: 0.14em; }

/* --- The page break between sheets ---------------------------------------- */
.page-break {
  position: relative;
  /* Never edge to edge: the grey either side is what says "this is a page
     inside Word". The gutter is guaranteed at every width. */
  width: min(var(--page-w), 100%);
  margin: 0 auto;
  height: 42px;
  display: grid;
  place-items: center;
  z-index: 3;
}
.page-break::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dotted rgba(255, 255, 255, 0.5);
}
.page-break span {
  position: relative;
  padding: 1px 10px;
  background: var(--canvas);
  font: var(--t-meta)/1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   Document typography
   ========================================================================== */
.doc-page h1, .doc-page h2, .doc-page h3, .doc-page h4 {
  margin: 0 0 0.4em;
  line-height: var(--lh-tight);
  font-weight: normal;
}

/* Word's built-in Heading 1. Arial, bold, that specific Office blue —
   the single most recognisable "this is a Word document" signal there is. */
.doc-page .sec-title,
.sec-title {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: bold;
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--word-heading);
  margin-bottom: 6px;
}
/* Heading 1 stays Heading 1 — the zine variant now just runs larger. */
.doc-page .sec-title--zine,
.sec-title--zine {
  font-family: var(--font-head);
  font-size: clamp(32px, 4.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
}
/* Word's Heading 2 — same family, smaller, lighter blue */
.sec-kicker {
  font: bold var(--t-caption)/1.3 var(--font-goth);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--word-heading-2);
  margin-bottom: 10px;
}
/* the rule Word draws under a Heading 1 with a bottom border applied */
.sec-rule { border: 0; border-top: 1px solid var(--word-heading-2); margin: 0 0 22px; }
body[data-headings="97"] .sec-rule { border-top-color: #808080; }
.sec-rule--hair { border-top: 1px solid var(--paper-edge); margin: 26px 0; }

/* Word's Heading 2 — same family as Heading 1, smaller, lighter blue */
.doc-page .sec-sub,
.sec-sub {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--word-heading-2);
  margin: 30px 0 8px;
}

/* A Word table: 1px grid, shaded header row, caption above.
   This is what Insert ▸ Table gives you, and it reads instantly as Word. */
.wtable {
  width: 100%;
  margin: 6px 0 18px;
  border-collapse: collapse;
  font: var(--t-caption)/1.5 var(--font-ui);
}
.wtable caption.wtable__cap {
  caption-side: top;
  text-align: left;
  padding: 0 0 6px;
  font-size: var(--t-meta);
  font-style: italic;
  color: var(--ink-faint);
}
.wtable th,
.wtable td {
  border: 1px solid #9a9a9a;
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.wtable thead th {
  background: #e7edf5;
  font-weight: bold;
  color: var(--word-heading);
}
.wtable tbody th {
  width: 96px;
  font-weight: bold;
  white-space: nowrap;
}
.wtable td:last-child { color: var(--ink-soft); }
@media (max-width: 560px) {
  .wtable, .wtable tbody, .wtable tr, .wtable th, .wtable td { display: block; }
  .wtable thead { display: none; }
  .wtable tr { margin-bottom: 10px; border: 1px solid #9a9a9a; }
  .wtable th, .wtable td { border: 0; padding: 5px 10px; width: auto; }
  .wtable tbody th { padding-bottom: 0; color: var(--word-heading); }
}

.doc-page p { margin: 0 0 1.05em; }
.doc-page p.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Word's Drop Cap (Format ▸ Drop Cap, 3 lines) — same face as the body */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-doc);
  font-size: 3.5em;
  line-height: 0.86;
  font-weight: normal;
  padding: 0.02em 0.06em 0 0;
  color: var(--ink);
}

/* Courier passages — the parts that feel typed rather than set */
.typed {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: -0.012em;
}

/* editorial columns */
.cols-2 { column-count: 2; column-gap: 34px; column-rule: 1px solid var(--paper-edge); }
.cols-3 { column-count: 3; column-gap: 24px; }
.cols-2 > :first-child, .cols-3 > :first-child { margin-top: 0; }
@media (max-width: 700px) { .cols-2, .cols-3 { column-count: 1; } }

/* pull quote */
.pullquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--word-heading-2);
  font-family: var(--font-book);
  font-size: 19px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-soft);
  break-inside: avoid;
}
.pullquote cite {
  display: block;
  margin-top: 10px;
  font: var(--t-meta)/1 var(--font-ui);
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.caption {
  font: var(--t-caption)/1.45 var(--font-ui);
  color: var(--ink-faint);
}
.caption b { color: var(--ink-soft); }

.meta-label {
  font: bold var(--t-meta)/1 var(--font-goth);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

/* ==========================================================================
   Editing marks
   ========================================================================== */

/* red spellcheck squiggle — a real repeating wave, not an underline */
.spell {
  text-decoration: underline wavy var(--spell-red) 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  cursor: help;
  position: relative;
}
.grammar { text-decoration: underline wavy var(--grammar-green) 1px; text-underline-offset: 3px; }

/* At display sizes a `wavy` underline scales with the font and turns into a
   giant ribbon. The headline gets a drawn wave at a fixed amplitude instead,
   painted on the inline box — vertical padding on an inline element doesn't
   affect line height, so this adds the squiggle without moving anything. */
.spell--display {
  text-decoration: none;
  /* Anchored from the *top* of the inline box, not the bottom: the bottom of
     an inline background box sits below the font's descent and would drop the
     squiggle onto the next line. 1.05em lands it just under the descenders.
     The padding only extends the paint area so the wave isn't clipped — vertical
     padding on an inline element doesn't affect line height, so nothing moves. */
  padding-bottom: 0.3em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 4.2Q1.75 1.1 3.5 4.2T7 4.2T10.5 4.2T14 4.2' fill='none' stroke='%23e0342c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 14px 6px;
  background-position: 0 0.95em;
}
@media (max-width: 560px) { .spell--display { background-size: 10px 4.5px; } }

/* the context menu that Word pops on a misspelling */
.spell-menu {
  position: fixed;
  z-index: 620;
  min-width: 172px;
  padding: 2px;
  background: var(--chrome-face);
  border: 1px solid var(--chrome-dark);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.26), 4px 4px 12px rgba(0,0,0,0.24);
  font: var(--t-ui)/1 var(--font-ui);
}
.spell-menu[hidden] { display: none; }
.spell-menu b { display: block; padding: 6px 12px; font-style: italic; }
.spell-menu button {
  display: block; width: 100%; padding: 5px 12px;
  background: none; border: 0; font: inherit; color: var(--ink);
  text-align: left; cursor: pointer;
}
.spell-menu button:hover { background: var(--select); color: #fff; }
.spell-menu hr { margin: 3px 2px; border: 0; border-top: 1px solid var(--chrome-dim);
                 border-bottom: 1px solid var(--chrome-lit); }

/* highlighter — sits behind the text with a slightly wobbly edge */
.hl {
  background:
    linear-gradient(var(--highlighter), var(--highlighter)) no-repeat;
  background-size: 100% 0.86em;
  background-position: 0 0.62em;
  padding: 0 2px;
  border-radius: 2px 5px 3px 6px / 6px 3px 5px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl--mint { --highlighter: var(--highlighter-2); }

/* tracked changes, shown only when Track Changes is on */
.ins, .del { transition: all var(--dur) var(--ease); }
body[data-track="off"] .ins { color: inherit; text-decoration: none; }
body[data-track="off"] .del { display: none; }
body[data-track="on"] .ins {
  color: var(--track-ins);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body[data-track="on"] .del {
  color: var(--track-del);
  text-decoration: line-through;
  opacity: 0.75;
}
/* the change bar in the left margin */
body[data-track="on"] .tracked {
  position: relative;
}
body[data-track="on"] .tracked::before {
  content: "";
  position: absolute;
  left: calc(var(--page-pad-x) * -0.42);
  top: 0; bottom: 0;
  border-left: 1.5px solid var(--ink-soft);
}

/* ==========================================================================
   Margin comments — Word's balloons, in the canvas beside the sheet
   ========================================================================== */
/* A Word comment card: circular avatar, name, the comment, a Reply field.
   The dashed leader back to the highlighted text is the classic touch. */
.comment {
  position: absolute;
  left: calc(100% + 20px);
  width: 216px;
  padding: 10px 11px 9px;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  font: var(--t-caption)/1.5 var(--font-ui);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.07);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.comment.is-shown { opacity: 1; transform: none; }
.comment.is-active {
  border-color: #b9b9b9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.10);
}

.comment__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comment__avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #e6e6e6;
}
.comment__who { flex: 1; min-width: 0; line-height: 1.25; }
.comment__who b {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comment__when { display: block; font-size: 10.5px; color: #767676; }
.comment__more { flex: none; color: #909090; font-size: 14px; line-height: 1; }

.comment__text { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: #262626; }

.comment__reply {
  padding: 4px 8px;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  font-size: 11.5px;
  color: #8a8a8a;
  background: #fff;
}

/* the dashed leader from the highlighted text out to the card */
.comment::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 18px;
  width: 20px;
  border-top: 1px dashed var(--emerald-soft);
}

/* the anchor in the text: Word tints it and rules it in the comment colour */
/* Word tints the commented phrase and rules it in the reviewer's colour.
   Ours is the document's emerald rather than Word's red. */
.commented {
  background: rgba(82, 117, 99, 0.16);
  border-bottom: 1px solid var(--emerald-soft);
  cursor: help;
}
.commented:hover, .commented.is-active { background: rgba(82, 117, 99, 0.30); }

/* --- Where comments live ------------------------------------------------
   Never on the paper. Word puts them in the grey beside the sheet, and so
   do we — down to the hairline leader running from the highlighted phrase
   to the card.

   Below 1180px there is no grey left to put them in: the sheet fills the
   window. Rather than drop a card onto the page, the comment becomes a
   panel pinned to the bottom of the viewport, shown while its phrase is
   hovered, focused or tapped. Still off the page, still legible, and it
   costs the reader nothing when they aren't looking at it. */
/* Whether a comment can live in the margin depends on the room actually left
   beside the sheet — which the navigation pane changes. JS measures it and
   sets body[data-margin-comments], so the pane, the zoom and the window all
   get accounted for instead of guessed at with a width breakpoint. */
body:not([data-margin-comments="yes"]) {
  /* No grey wide enough to hold a card here, so the comment becomes a popover
     pinned to its phrase — JS sets left/top from the anchor's position.

     Both selectors are listed because `.comment.is-shown` (set by the scroll
     observer for the wide layout) outranks a bare `.comment`, and a media
     query adds no specificity of its own. Without this the card latched on
     at first scroll and could never be dismissed. */
  .comment,
  .comment.is-shown {
    position: fixed;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    width: min(320px, calc(100vw - 24px));
    max-width: none;
    margin: 0;
    z-index: 320;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 12px 32px rgba(0,0,0,0.22);
  }
  .comment.is-open { opacity: 1; transform: none; pointer-events: auto; }

  /* the little caret pointing back up at the highlighted phrase */
  .comment::before {
    display: block;
    content: "";
    position: absolute;
    right: auto;
    left: var(--caret-x, 24px);
    top: -7px;
    width: 12px;
    height: 12px;
    border: 1px solid var(--emerald-soft);
    border-width: 1px 0 0 1px;
    border-top-color: var(--emerald-soft);
    background: #fff;
    transform: rotate(45deg);
  }
  .comment.is-above::before { top: auto; bottom: -7px; border-width: 0 1px 1px 0; }
}

/* ==========================================================================
   Bookmarks & the blinking caret
   ========================================================================== */
.caret {
  display: inline-block;
  width: 2px;
  height: 0.72em;
  /* zero out the inline box so a tall caret can't stretch its line */
  margin: 0 0 0 2px;
  vertical-align: baseline;
  position: relative;
  top: 0.06em;
  background: var(--ink);
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.endmark {
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 6px;
  background: var(--ink);
  vertical-align: 0.02em;
}

/* the "keep scrolling" nudge under the hero */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 9px;
  font: var(--t-meta)/1 var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-cue svg { animation: nudge 2.1s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ==========================================================================
   Reveal on scroll — a page "renders" the way a slow machine drew it
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .caret { animation: none; }
}

/* ==========================================================================
   Responsive pages
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --page-pad-x: clamp(20px, 6vw, 52px);
    --page-pad-y: 52px;
    --t-body: 16.5px;
    --t-h2: 32px;
    --gutter: clamp(12px, 3.4vw, 28px);
  }
  /* zoom is a desktop affordance; on a phone the page is already fluid */
  .doc-stack { transform: none; }
}
@media (max-width: 560px) {
  :root { --page-pad-x: 24px; --page-pad-y: 44px; }
  .page__header, .page__footer { position: static; margin: 0 0 18px; }
  .page__footer { margin: 24px 0 0; }
  .doc-page { padding-top: 30px; padding-bottom: 30px; }
  .pullquote { font-size: 21px; }
}

/* ==========================================================================
   Print — because a document should print like a document
   ========================================================================== */
@media print {
  .app-chrome, .navpane, .statusbar, .page-break, .comment, .navpane-scrim,
  .clippy, .toast-stack, .win { display: none !important; }
  body { background: #fff; }
  .doc-scroll { padding: 0; }
  .doc-page {
    box-shadow: none; margin: 0; page-break-after: always;
    background: #fff; --paper: #fff;
  }
  .doc-page::before, .doc-page::after { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* Available to screen readers, invisible on screen. Used for form labels
   whose purpose is obvious visually but has to be announced. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}