/* The Unclaimed Self, web version.
   Same palette and type stack as the landing page, because they sit on one
   domain and should read as one thing. No web fonts, no CDN, no analytics:
   the product claims nothing you write reaches anyone else, and a page that
   quietly fetches a font from elsewhere has already broken that claim before
   the reader has answered a single question. */

:root {
  --ink:        #17140f;
  --ink-soft:   #3a342b;
  --muted:      #6a6255;
  --rule:       #d8d0c1;
  --paper:      #f4f1ea;
  --paper-warm: #ebe6da;
  --card:       #ffffff;
  --gold:       #a97d2e;
  --gold-lift:  #c39a4d;
  --attend:     #b4762a;

  /* Three tones for the report, and only three, because a reader who has to
     learn a key of six colours is doing work the writing should have done.
     Each has a rail colour, a text colour dark enough to read on white, and a
     wash pale enough to sit under body copy. Amber and moss are the warm and
     cool ends of the same paper palette rather than a traffic light: nothing
     in this report is a red light, and colouring it like one would contradict
     the first card on the page. */
  --attend-ink:  #8a5817;   /* worth your attention */
  --attend-wash: #fbead0;   /* the page is already cream, so amber has to lean warmer than you would pick on white */
  --grow:        #4e6b3c;   /* working in your favour */
  --grow-ink:    #3c5330;
  --grow-wash:   #e9f0e2;
  --next:        #4a6480;   /* what to do next */
  --next-ink:    #3a4f66;
  --next-wash:   #e8eff7;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           Helvetica, Arial, sans-serif;

  --measure: 34rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap.narrow { max-width: 38rem; }

h1, h2, h3 { font-weight: 400; line-height: 1.25; margin: 0 0 0.6rem; }
p { margin: 0 0 1.1em; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.muted { color: var(--muted); font-size: 0.95rem; }
.small { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); }

/* ---------- chrome ---------- */

.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  max-width: 60rem;
}
.topbar .brand {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  margin-right: auto;
  text-decoration: none;
}
.topbar .brand:hover { color: var(--ink); text-decoration: underline; }
/* Home is an anchor and the other two are buttons, because one navigates and
   two act on this page. They are dressed the same so the row reads as one. */
.topbar button, .topbar .navlink {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0.3rem 0;
  text-transform: uppercase;
}
.topbar .navlink { text-decoration: none; white-space: nowrap; }
.topbar button:hover, .topbar .navlink:hover { color: var(--ink); text-decoration: underline; }

main { padding: 2.75rem 0 5rem; }

/* Shown only when the browser refuses to store anything. Loud on purpose:
   the cost of not noticing it is an hour of somebody's work. */
.warnbar {
  background: var(--attend-wash);
  border-bottom: 3px solid var(--attend);
}
.warnbar p {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  padding: 0.85rem 0;
}
.warnbar strong { color: var(--attend-ink); }
[hidden] { display: none !important; }

/* ---------- progress ---------- */

.progress { margin: 0 0 1.6rem; }
.progress-track {
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--gold);
  width: 0;
  transition: width .25s ease;
}
.progress-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.45rem 0 0;
  display: flex;
  justify-content: space-between;
}

/* ---------- cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1.4rem 1.5rem;
  margin: 0 0 1.25rem;
}
.card.attend {
  border-left: 5px solid var(--attend);
  border-color: var(--attend);
  background: var(--attend-wash);
}
.card.attend .eyebrow { color: var(--attend-ink); }
.card h2, .card h3 { margin-top: 0; }

/* ---------- report ---------- */

/* The tone classes. A card carries one, and the rail, the eyebrow and any
   chips inside it all take their colour from the same variable, so a card
   cannot end up half one meaning and half another. */
.tone-attend { --tone: var(--attend); --tone-ink: var(--attend-ink); --tone-wash: var(--attend-wash); }
.tone-grow   { --tone: var(--grow);   --tone-ink: var(--grow-ink);   --tone-wash: var(--grow-wash); }
.tone-next   { --tone: var(--next);   --tone-ink: var(--next-ink);   --tone-wash: var(--next-wash); }

.card.tone-attend, .card.tone-grow, .card.tone-next {
  border-left: 5px solid var(--tone);
  border-color: var(--tone);
  background: var(--tone-wash);
}
/* Framing and limits stay white on the cream page. Two cards in the whole
   report are white, which is now what marks them out as not being about you. */
.card.tone-attend .eyebrow,
.card.tone-grow .eyebrow,
.card.tone-next .eyebrow { color: var(--tone-ink); }

/* Framing and limits carry no colour at all. Absence is the fourth category:
   it tells the eye these are instructions, not findings about the reader. */

.report h1 {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.report h2 { font-size: 1.4rem; font-weight: 700; }
.report h3 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 1.5rem;
}
.report .card h3:first-of-type { margin-top: 0.75rem; }
.report .eyebrow { font-weight: 700; }
/* The section headings between cards need to out-rank the card headings, or
   the page reads as one undifferentiated stack. Written as h2.section-head
   rather than .report .section-head so the orientation essay can use it too,
   while still beating .report h2 on the report. */
h2.section-head {
  font-size: clamp(1.6rem, 3.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 3rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rule);
}
.report .lede-synth { font-size: 1.12rem; color: var(--ink-soft); margin-bottom: 1.75rem; }

/* Chips. The signal and the confidence were one run-on line of grey sans,
   which is where the eye gave up. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--tone, var(--rule));
  color: var(--tone-ink, var(--muted));
  background: var(--card);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* A chip can differ from the card it sits in: a pattern card is amber because
   it is a finding, while the finding itself may be that this is not how you
   work, which is moss. So the chip sets its own tone. */
.chip.tone-attend, .chip.tone-grow, .chip.tone-next, .chip.tone-flat { border-width: 1px; }
.chip.tone-flat { --tone: #bdb5a5; --tone-ink: #5f584c; }

/* The key. Three lines, stated once, so the colours are a legend rather than
   decoration a reader has to guess at. */
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 2rem; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tone-ink);
  margin: 0;
}
.legend-swatch {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  background: var(--tone);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* ---------- the statement ---------- */

.statement {
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  line-height: 1.35;
  margin: 0 0 1.75rem;
}

/* The six options. Buttons, not radios: a radio's hit area is the dot plus
   its label, and on a touch screen that is a miss waiting to happen. These
   are full-width targets. */
.choices { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }
.choice {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.choice:hover { border-color: var(--gold); background: var(--paper-warm); }
.choice .num {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--muted);
  min-width: 1ch;
}
.choice[aria-checked="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 600;
}
.choice[aria-checked="true"] .num { color: rgba(255,255,255,0.85); }
/* Focus has to be visible against both the paper and the gold fill, so it is
   an offset outline rather than a border colour change. */
.choice:focus-visible, .btn:focus-visible,
.topbar button:focus-visible, .topbar .navlink:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- buttons ---------- */

.actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.actions .spacer { margin-left: auto; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.7rem;
  /* 2px, matching the landing page. At 1px in --rule a ghost button's outline
     measured 1.36:1 against the paper, which is not a border, it is a rumour. */
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-ghost { border-color: var(--ink-soft); color: var(--ink-soft); }
/* Already dark, so hover signals with colour and fill rather than by darkening. */
.btn-ghost:hover { border-color: var(--gold); color: var(--ink); background: var(--paper-warm); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* Hovering a disabled button does nothing at all. The old blanket rule forced
   the background transparent, so hovering the greyed-out Begin on the cover
   made a filled black button turn into an outline, which looked like it had
   done something. */
.btn-primary[disabled]:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.btn-ghost[disabled]:hover {
  background: transparent; border-color: var(--ink-soft); color: var(--ink-soft);
}

.keyhint {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--muted);
  margin: 1rem 0 0;
}
/* A pointer user never presses these keys and does not need to be told about
   them. Shown from the first keyboard interaction onward. */
body:not(.using-keys) .keyhint { visibility: hidden; }

/* ---------- cover ---------- */

.cover { text-align: center; padding-top: 1.5rem; }
.cover .mark { width: 116px; height: auto; display: block; margin: 0 auto 1.5rem; }
.cover h1 {
  font-size: clamp(2.1rem, 6vw, 3rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.cover .tagline {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 2rem;
}
.cover .lede { max-width: var(--measure); margin: 0 auto 2rem; font-size: 1.15rem; color: var(--ink-soft); }
.cover .actions { justify-content: center; }

/* The cover's privacy statement. Full ink and bold against copy that is
   deliberately quiet everywhere else on the page. */
.notice p { color: var(--ink); font-weight: 600; }
.notice .eyebrow { color: var(--ink-soft); }

.checkline {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  text-align: left;
  max-width: var(--measure);
  margin: 0 auto 0.75rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.checkline input { margin-top: 0.25rem; flex-shrink: 0; }

/* ---------- essay ---------- */

.essay { display: flex; flex-direction: column; gap: 1.1rem; }

.essay-section {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--gold);
  padding: 1.5rem 1.6rem;
}
/* Alternating grounds. One tint repeated seven times is still a wall; the
   change between them is what tells the eye a new section has started, even
   before it has read the heading. */
.essay-section:nth-child(even) { background: var(--paper-warm); border-left-color: var(--attend); }

/* Scoped to the section, because .essay-section p sets a colour and would
   otherwise win on specificity and leave the number the same ink as the body.
   Gold itself is only 3.7:1 on white, so the number takes the darker gold the
   report already uses for text. */
.essay-section .essay-num { color: var(--attend-ink); margin: 0 0 0.5rem; }

.essay-section h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.9rem; }
.essay-section p { color: var(--ink-soft); }
.essay-section p:last-child { margin-bottom: 0; }

.essay .points { margin: 0; padding-left: 1.1rem; }
.essay .points li { margin-bottom: 0.7rem; color: var(--ink-soft); }

/* ---------- footer ---------- */

/* On every screen, because the two facts it carries are the two a reader
   should never have to go looking for: what this is not, and who wrote it.
   Hidden in print: the report ends with its own disclaimer, and a second one
   on paper would read as boilerplate rather than as a statement. */
.sitefoot {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 1.75rem 0 3rem;
}
.foot-links {
  font-family: var(--sans);
  font-size: 0.78rem;
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.foot-links span { color: var(--rule); }
.foot-links a, .foot-links button {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot-links a:hover, .foot-links button:hover { color: var(--ink); }
.foot-legal {
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  max-width: 44rem;
}

/* ---------- print ---------- */

@media print {
  /* The report is the only thing worth printing, and it prints as a document
     rather than a screenshot of a web page: no navigation, no buttons, no
     backgrounds burning through a cartridge. */
  .topbar, .actions, .progress, .keyhint, .noprint, .sitefoot { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .card { border: 1px solid #bbb; background: #fff; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  /* The rails, chips and swatches print. A report saved as a PDF is the thing
     the reader keeps, and stripping the colour out of it would leave them
     holding the flat page they told me they could not read. */
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* The tone rules above are more specific than the .card reset here, so the
     wash and the rail survive into print on their own. Nothing to restate. */
  h2.section-head { border-bottom: 2px solid #999; }
  a { color: #000; text-decoration: none; }
}

/* ---------- narrow ---------- */

@media (max-width: 34rem) {
  main { padding-top: 1.75rem; }
  /* Four items will not sit on one phone-width line. The brand wraps out
     rather than the navigation, since Home says the same thing more plainly. */
  .topbar .brand { display: none; }
  .topbar .wrap { gap: 1.25rem; justify-content: flex-end; }
  .card { padding: 1.1rem 1.15rem; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
}