/* =================================================================
   HEARTH — Product surface styles
   Editorial magazine direction. Inherits palette + type from style.css.
   ================================================================= */

.app { background: var(--paper); }
html.app, body.app { overflow-x: hidden; }

/* The masthead is shared. On product surfaces it gets condensed. */
.masthead--app .masthead__inner { grid-template-columns: auto 1fr auto; gap: 24px; padding: 12px var(--margin); }
.masthead--app .logo { font-size: 28px; text-align: left; }
.masthead--app .logo__caps { position: static; transform: none; display: block; text-align: left; margin-top: -2px; }
.masthead--app__center {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.masthead--app__center > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.masthead--app__center a { color: var(--ink); }
.masthead--app__center a:hover { color: var(--oxblood); }
.masthead--app__center .slash { color: var(--oxblood); }
.masthead--app__right { display: flex; gap: 12px; align-items: center; flex-shrink: 0; min-width: 0; }
@media (max-width: 600px) {
  /* On mobile the masthead only has space for ONE compact action; the page-foot CTA
     already carries the primary call-to-action anyway. */
  .masthead--app__right .btn-line { display: none; }
  .masthead--app__right .btn-strong { padding: 10px 14px; font-size: 11px; }
}

@media (max-width: 720px) {
  .masthead--app__center { display: none; }
}

/* ----- buttons within product surfaces ----- */
.btn-tape {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sun);
  color: var(--ink);
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 16px;
  text-decoration: none;
}
.btn-tape:hover { background: var(--ink); color: var(--ivory); }

.btn-line {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 22px;
  text-decoration: none;
  transition: all .2s ease;
}
.btn-line:hover { background: var(--ink); color: var(--ivory); }

/* =================================================================
   WIZARD
   ================================================================= */
.wiz {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) var(--margin) 100px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.wiz__rail { position: sticky; top: 100px; }
.wiz__rail-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.wiz__steps { list-style: none; display: flex; flex-direction: column; }
.wiz__steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px dotted var(--ink);
  font-family: var(--body);
  font-size: 16px;
  color: var(--smoke);
  line-height: 1.3;
}
.wiz__steps li:last-child { border-bottom: none; }
.wiz__steps li span {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: var(--paper-3);
  text-align: right;
  letter-spacing: -0.02em;
}
.wiz__steps li.is-active { color: var(--ink); font-weight: 500; }
.wiz__steps li.is-active span { color: var(--oxblood); }
.wiz__steps li.is-done span::after {
  content: "✓";
  display: inline-block;
  margin-left: 4px;
  font-style: normal;
  color: var(--olive);
  font-size: 14px;
}

.wiz__pull {
  margin-top: 36px;
  padding: 22px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  position: relative;
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}
.wiz__pull::before {
  content: "★";
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--paper);
  padding: 0 8px;
  color: var(--oxblood);
}
.wiz__pull-by {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 14px;
}

/* panels */
.wiz__panel { display: none; max-width: 680px; }
.wiz__panel.is-active { display: block; animation: panelIn .35s ease-out; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wiz__step-of {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.wiz__step-of::before { content: ""; width: 32px; height: 1.5px; background: var(--oxblood); }

.wiz__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 0.96;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 16px;
}
.wiz__h em { color: var(--oxblood); }

.wiz__sub {
  font-family: var(--body);
  font-size: 19px;
  color: var(--ink-soft);
  margin-bottom: 36px;
  max-width: 50ch;
  line-height: 1.5;
}

.wiz__nav {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 920px) {
  .wiz { grid-template-columns: 1fr; }
  .wiz__rail { position: static; }
  .wiz__pull { display: none; }
}

/* form */
.form { display: flex; flex-direction: column; gap: 28px; }
.form__row { display: grid; gap: 16px; }
.form__row--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form__row--two { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}
.field__hint {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--smoke);
}
.field input, .field textarea, .field select {
  font-family: var(--body);
  font-size: 18px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
  transition: border-color .2s ease;
}
.field input::placeholder, .field textarea::placeholder {
  color: var(--paper-3);
  font-style: italic;
  font-family: var(--display);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--oxblood);
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; padding: 12px 0; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237E1C24' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px;
  padding-right: 32px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.chip {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink-soft);
  border-radius: 0;
  transition: all .15s ease;
}
.chip:hover { background: var(--paper-2); }
.chip.is-on { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* radio cards */
.modes { display: flex; flex-direction: column; gap: 14px; }
.mode {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  padding: 24px 26px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: all .15s ease;
}
.mode:hover { background: var(--paper-3); }
.mode.is-on {
  background: var(--ink);
  color: var(--ivory);
}
.mode.is-on .mode__name { color: var(--ivory); }
.mode.is-on .mode__sub { color: rgba(248,241,221,0.75); }
.mode input { display: none; }
.mode__dot {
  width: 18px; height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  margin-top: 5px;
  position: relative;
  transition: all .15s ease;
}
.mode.is-on .mode__dot { border-color: var(--sun); }
.mode.is-on .mode__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sun);
}
.mode__name {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.mode__sub {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* plan picker */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } }
.planpick {
  display: block;
  padding: 26px 24px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  cursor: pointer;
  position: relative;
  transition: all .15s ease;
}
.planpick:hover { background: var(--paper-3); }
.planpick.is-on {
  background: var(--ink);
  color: var(--ivory);
}
.planpick.is-on .planpick__name, .planpick.is-on .planpick__price { color: var(--ivory); }
.planpick.is-on .planpick__per { color: var(--sun); }
.planpick.is-on .planpick__sub { color: rgba(248,241,221,0.7); border-color: rgba(248,241,221,0.18); }
.planpick.is-on .planpick__body li { color: rgba(248,241,221,0.85); }
.planpick.is-on .planpick__body li::before { background: var(--sun); }
.planpick input { display: none; }
.planpick__badge {
  position: absolute;
  top: -12px;
  right: 22px;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  transform: rotate(2deg);
}
.planpick__name {
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  letter-spacing: -0.012em;
  margin-bottom: 10px;
}
.planpick__price {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 14px;
  font-family: var(--display);
  color: var(--ink);
}
.planpick__num {
  font-size: 44px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--oxblood);
}
.planpick.is-on .planpick__num { color: var(--sun); }
.planpick__per {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.planpick__sub {
  font-family: var(--body);
  font-size: 14px;
  color: var(--smoke);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 14px;
  line-height: 1.55;
}
.planpick__body ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.planpick__body li {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 16px;
  position: relative;
}
.planpick__body li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 1.5px; background: var(--oxblood);
}

.callout {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
}
.callout strong { color: var(--sun); }

/* invites */
.invites { display: flex; flex-direction: column; gap: 12px; }
.invite {
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
}
.invite__avatar {
  width: 42px; height: 42px;
  background: var(--ink);
  color: var(--ivory);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
}
.invite__body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.invite__body input {
  font-family: var(--body);
  font-size: 14px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
}
.invite__remove {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.invite__remove:hover { background: var(--oxblood); color: var(--ivory); border-color: var(--oxblood); }
.invite--add {
  cursor: pointer;
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px;
  background: transparent;
  border: 1.5px dashed var(--ink);
  color: var(--ink);
  transition: all .15s ease;
}
.invite--add:hover { background: var(--ink); color: var(--ivory); }

/* summary */
.summary {
  background: var(--paper-2);
  border: 1px solid var(--ink);
}
.summary__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 16px 22px;
  border-bottom: 1px dotted var(--ink);
}
.summary__row:last-child { border-bottom: none; }
.summary__row--total {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--body);
}
.summary__row--total .summary__label { color: var(--sun); }
.summary__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.summary__val {
  font-family: var(--display);
  font-size: 17px;
  color: var(--ink);
}
.summary__row--total .summary__val { color: var(--ivory); font-weight: 500; }

.paybox {
  margin-top: 28px;
  padding: 24px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
}
.paybox__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 14px;
}
.paybox__row { display: flex; gap: 10px; }
.paybox__row input {
  font-family: var(--mono);
  font-size: 16px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  letter-spacing: 0.05em;
  flex: 1;
  border-radius: 0;
}
.paybox__small {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--smoke);
  margin-top: 14px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .summary__row { grid-template-columns: 1fr; gap: 4px; }
  .paybox__row { flex-direction: column; }
  .paybox__row input { max-width: 100% !important; }
}

/* =================================================================
   DASHBOARD
   ================================================================= */
.dash {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--margin) 96px;
}
.dash__masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 26px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 36px;
}
.dash__masthead-chapter {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash__masthead-chapter::before { content: ""; width: 32px; height: 1.5px; background: var(--oxblood); }
.dash__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(52px, 7vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 8px 0 12px;
}
.dash__sub {
  font-family: var(--body);
  font-size: 16px;
  color: var(--smoke);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.dash__sub span { display: flex; align-items: center; gap: 8px; }
.dash__sub span::before { content: "·"; color: var(--oxblood); margin-right: 8px; }
.dash__sub span:first-child::before { display: none; }
.dash__actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 820px) {
  .dash__masthead { grid-template-columns: 1fr; }
}

.dash__bar {
  margin-bottom: 48px;
  padding: 18px 20px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}
.dash__bar-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  white-space: nowrap;
}
.dash__bar-meter {
  position: relative;
  height: 4px;
  background: var(--paper-3);
}
.dash__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--oxblood);
}
.dash__bar-pct {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.dash__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 920px) { .dash__grid { grid-template-columns: 1fr; } }
.dash__col { display: flex; flex-direction: column; gap: 28px; }

.dash__card {
  padding: 28px 28px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
}
.dash__card--feature {
  background: var(--ink);
  color: var(--ivory);
  padding: 36px 32px;
}
.dash__card--feature .dash__card-h { color: var(--ivory); }
.dash__card--feature .dash__card-meta { color: var(--sun); }
.dash__card--feature .dash__card-body { color: rgba(248,241,221,0.85); }
.dash__card--feature .btn-line { color: var(--ivory); border-color: var(--ivory); }
.dash__card--feature .btn-line:hover { background: var(--ivory); color: var(--ink); }

.dash__card-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 10px;
}
.dash__card--feature .dash__card-cap { color: var(--sun); }
.dash__card-h {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--ink);
}
.dash__card-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 8px;
}
.dash__card-body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 18px 0 22px;
}
.dash__card-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.dash__sec { margin-top: 8px; }
.dash__sec-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 6px;
}
.dash__sec-h {
  font-family: var(--display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.018em;
  margin-bottom: 6px;
}
.dash__sec-h em { color: var(--oxblood); }
.dash__sec-sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--smoke);
  margin-bottom: 22px;
}

/* page entries — like a table of contents */
.pages { list-style: none; display: flex; flex-direction: column; }
.page-entry {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--ink);
  transition: background .15s ease;
}
.page-entry:last-child { border-bottom: 1px solid var(--ink); }
.page-entry:hover { background: var(--paper-2); padding-left: 8px; padding-right: 8px; }
.page-entry__num {
  font-family: var(--display);
  font-style: italic;
  font-size: 40px;
  color: var(--paper-3);
  text-align: right;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.page-entry:hover .page-entry__num { color: var(--oxblood); }
.page-entry--live .page-entry__num { color: var(--oxblood); }
.page-entry__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.012em;
  margin-bottom: 4px;
  color: var(--ink);
}
.page-entry__story {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--smoke);
  margin-bottom: 6px;
  line-height: 1.4;
}
.page-entry__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke);
}
.page-entry--live .page-entry__meta { color: var(--oxblood); }
.page-entry__action {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 4px 0;
  text-decoration: none;
}
.page-entry__action:hover { color: var(--oxblood); border-color: var(--oxblood); }
.page-entry__action--live { color: var(--oxblood); border-color: var(--oxblood); }
.page-entry__live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--oxblood);
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse 1.4s ease-in-out infinite;
  vertical-align: 1px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
@media (max-width: 600px) {
  .page-entry { grid-template-columns: 50px 1fr; }
  .page-entry__action { grid-column: 1 / -1; justify-self: start; }
}

/* sidebar cards */
.cokeepers { list-style: none; display: flex; flex-direction: column; }
.cokeepers li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px dotted var(--ink);
  font-family: var(--body);
  font-size: 14px;
}
.cokeepers li:first-child { border-top: none; padding-top: 8px; }
.cokeepers__avatar {
  width: 36px; height: 36px;
  background: var(--ink);
  color: var(--ivory);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
}
.cokeepers strong { color: var(--ink); font-family: var(--body); font-weight: 500; }
.cokeepers span:last-child {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.upnext { list-style: none; display: flex; flex-direction: column; }
.upnext li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px dotted var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-soft);
}
.upnext li:first-child { border-top: none; padding-top: 6px; }
.upnext__date {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  padding-top: 3px;
}

.activity { list-style: none; display: flex; flex-direction: column; }
.activity li {
  padding: 12px 0 12px 16px;
  border-top: 1px dotted var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  position: relative;
}
.activity li:first-child { border-top: none; padding-top: 4px; }
.activity li::before {
  content: "★";
  position: absolute;
  left: 0; top: 12px;
  color: var(--oxblood);
  font-size: 10px;
}
.activity li:first-child::before { top: 4px; }
.activity strong { color: var(--ink); font-weight: 500; font-family: var(--display); font-style: italic; font-size: 15px; }

.dash__card--book { text-align: center; padding-bottom: 32px; }
.dash__minibook {
  width: 140px;
  margin: 8px auto 22px;
  aspect-ratio: 0.78;
  background: linear-gradient(135deg, var(--oxblood) 0%, #5C1119 100%);
  padding: 28px 16px 12px;
  display: flex;
  flex-direction: column;
  color: var(--ivory);
  box-shadow: 0 12px 30px rgba(26,20,16,0.3), inset 5px 0 0 rgba(0,0,0,0.35);
}
.dash__minibook-stamp {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--sun);
  margin-bottom: 14px;
}
.dash__minibook-title {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 0.9;
  color: var(--ivory);
}
.dash__minibook-by {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248,241,221,0.7);
}

/* =================================================================
   SESSION
   ================================================================= */
.session {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--margin) 60px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.session__head {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 3px solid var(--ink);
}
.session__cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: flex;
  align-items: center;
  gap: 14px;
}
.session__cap::before { content: ""; width: 32px; height: 1.5px; background: var(--oxblood); }
.session__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 8px 0 14px;
}
.session__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.session__dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--oxblood);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(126,28,36,0.15);
  animation: pulse 1.4s ease-in-out infinite;
}

.transcript {
  background: var(--paper-2);
  border: 1px solid var(--ink);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  max-height: 64vh;
  overflow-y: auto;
}
.turn {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px dotted var(--ink);
}
.turn:last-child { border-bottom: none; padding-bottom: 0; }
.turn:first-child { padding-top: 0; }
.turn__who {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-top: 4px;
}
.turn--ai .turn__who { color: var(--oxblood); }
.turn--user .turn__who { color: var(--ink); }
.turn p {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.turn--user p { font-style: normal; font-family: var(--body); font-size: 17px; line-height: 1.55; }
.turn--latest {
  background: var(--paper-3);
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.composer {
  margin-top: 18px;
  background: var(--ink);
  color: var(--ivory);
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.composer__live {
  display: flex;
  align-items: center;
  gap: 14px;
}
.composer__wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}
.composer__wave span {
  width: 2.5px;
  background: var(--sun);
  border-radius: 1px;
  animation: wave 1s ease-in-out infinite;
}
.composer__wave span:nth-child(1) { height: 50%; animation-delay: 0s; }
.composer__wave span:nth-child(2) { height: 100%; animation-delay: .12s; }
.composer__wave span:nth-child(3) { height: 70%; animation-delay: .24s; }
.composer__wave span:nth-child(4) { height: 90%; animation-delay: .36s; }
.composer__wave span:nth-child(5) { height: 60%; animation-delay: .48s; }
@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }
}
.composer__text {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  color: var(--sun);
}
.composer__actions { display: flex; align-items: center; gap: 14px; }
.composer__btn {
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid rgba(248,241,221,0.4);
  color: var(--ivory);
  font-size: 16px;
  cursor: pointer;
  transition: all .15s ease;
}
.composer__btn:hover { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.composer__time {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(248,241,221,0.7);
  margin-left: 8px;
}

/* live capture rail */
.session__rail {
  position: sticky;
  top: 110px;
}
.rail__cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.rail__cap::before { content: ""; width: 32px; height: 1.5px; background: var(--oxblood); }
.rail__title {
  font-family: var(--display);
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.rail__sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--smoke);
  margin-bottom: 22px;
}

.rail__page {
  background: var(--ivory);
  border: 1px solid var(--ink);
  padding: 28px 28px 30px;
  position: relative;
}
.rail__page::before {
  content: "LIVE CAPTURE";
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--sun);
  color: var(--ink);
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  transform: rotate(-2deg);
}
.rail__page-title {
  font-family: var(--display);
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin: 14px 0 12px;
  color: var(--ink);
}
.rail__page-story {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--smoke);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-3);
  margin-bottom: 14px;
  line-height: 1.5;
}

.rail__quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--oxblood);
  padding: 12px 14px;
  background: rgba(126,28,36,0.07);
  border-left: 2px solid var(--oxblood);
  margin-bottom: 18px;
  line-height: 1.4;
}

.rail__h {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 500;
  margin: 20px 0 10px;
}
.rail__h:first-of-type { margin-top: 0; }
.rail__h em {
  font-family: var(--display);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--smoke);
  font-size: 12px;
  font-weight: 400;
}
.rail__list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rail__list li {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  padding: 4px 0;
  border-bottom: 1px dotted var(--paper-3);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}
.rail__list li:last-child { border-bottom: none; }
.rail__list--ing li strong { font-family: var(--mono); font-size: 11px; color: var(--oxblood); letter-spacing: 0.05em; }
.rail__list--ing li em { font-family: var(--display); font-style: italic; color: var(--smoke); font-size: 12px; }
.rail__pending { color: var(--oxblood); font-style: italic; font-family: var(--display); }
.rail__list--notes li,
.rail__list--open li {
  display: block;
  padding-left: 18px;
  position: relative;
}
.rail__list--notes li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--oxblood);
  font-size: 8px;
}
.rail__list--open li {
  font-family: var(--display);
  font-style: italic;
  color: var(--smoke);
}
.rail__list--open li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--oxblood);
  font-weight: 600;
  font-family: var(--body);
  font-style: normal;
}

@media (max-width: 1080px) {
  .session { grid-template-columns: 1fr; }
  .session__rail { position: static; }
}

/* =================================================================
   COOKBOOK PAGE PREVIEW
   ================================================================= */
.bookview {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--margin) 80px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.bookview__chrome {
  position: sticky;
  top: 100px;
}
.bookview__toc-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.bookview__toc { list-style: none; counter-reset: toc; }
.bookview__toc li {
  counter-increment: toc;
  padding: 9px 0;
  border-bottom: 1px dotted var(--ink);
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  cursor: pointer;
  line-height: 1.3;
}
.bookview__toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--smoke);
}
.bookview__toc li.is-on { color: var(--oxblood); }
.bookview__toc li.is-on::before { color: var(--oxblood); }
.bookview__toc li.muted { color: var(--paper-3); }
.bookview__toc li.muted::before { color: var(--paper-3); }

.bookview__nav-meta {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.bookview__nav {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}
.bookview__nav button {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 8px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
}
.bookview__nav button:hover { background: var(--ink); color: var(--ivory); }

.bookview__main { display: flex; flex-direction: column; gap: 36px; }

.bookview__spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ivory);
  border: 1.5px solid var(--ink);
  min-height: 800px;
  position: relative;
  box-shadow: 0 24px 60px rgba(26,20,16,0.18);
}
.bookview__spread::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 36px; bottom: 36px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--paper-3) 14%, var(--paper-3) 86%, transparent);
}

.bp {
  padding: clamp(38px, 5vw, 64px) clamp(34px, 4.5vw, 52px);
  position: relative;
  display: flex;
  flex-direction: column;
}
.bp__topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--paper-3);
}
.bp__topbar-chap { color: var(--oxblood); }

.bp__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  color: var(--ink);
}
.bp__byline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-3);
}
.bp__pull {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--oxblood);
  padding: 4px 0 4px 18px;
  margin-bottom: 22px;
}

.bp__body p {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.bp__body p em { color: var(--ink); font-style: italic; }

.bp__h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 500;
  margin: 24px 0 14px;
}

.bp__ing { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.bp__ing li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--paper-3);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.bp__qty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--oxblood);
  text-align: right;
  padding-top: 2px;
}
.bp__ing em { font-family: var(--display); font-style: italic; color: var(--smoke); }

.bp__photo {
  background: linear-gradient(135deg, #B89D77 0%, #8A6F4D 100%);
  aspect-ratio: 4/3;
  margin-bottom: 26px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(26,20,16,0.2);
}
.bp__photo::before {
  content: "";
  position: absolute;
  inset: 14px;
  background: rgba(26,20,16,0.18);
}
.bp__photo-cap {
  position: relative;
  background: var(--ivory);
  padding: 7px 12px;
  font-family: var(--display);
  font-style: italic;
  font-size: 11px;
  color: var(--ink);
  border-radius: 1px;
}

.bp__steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.bp__steps li {
  counter-increment: step;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  padding-left: 44px;
  position: relative;
}
.bp__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -4px;
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: var(--oxblood);
  line-height: 1;
  letter-spacing: -0.02em;
}
.bp__steps em { font-family: var(--display); font-style: italic; color: var(--ink); }

.bp__sidebar {
  background: var(--paper-2);
  padding: 18px 22px;
  margin-bottom: 18px;
  border: 1px solid var(--ink);
}
.bp__sidebar-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 10px;
}
.bp__sidebar p {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.bp__sidebar em { color: var(--oxblood); }

.bp__qr {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--paper-3);
}
.bp__qr-code {
  width: 60px; height: 60px;
  background:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%) 0/14px 14px,
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%) 7px 7px/14px 14px,
    var(--ivory);
  border: 2px solid var(--ink);
}
.bp__qr-cap {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.bp__qr-cap em {
  display: block;
  font-style: italic;
  font-size: 11px;
  color: var(--smoke);
  margin-top: 2px;
}

.bookview__foot {
  background: var(--ink);
  color: var(--ivory);
  padding: 40px;
  text-align: center;
}
.bookview__foot-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 14px;
}
.bookview__foot-h {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}
.bookview__foot-sub {
  font-family: var(--body);
  font-size: 16px;
  color: rgba(248,241,221,0.78);
  max-width: 50ch;
  margin: 0 auto 26px;
  line-height: 1.55;
}
.bookview__foot-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bookview__foot .btn-line { border-color: var(--ivory); color: var(--ivory); }
.bookview__foot .btn-line:hover { background: var(--ivory); color: var(--ink); }
.bookview__foot .btn-tape { background: var(--sun); }
.bookview__foot .btn-tape:hover { background: var(--ivory); }

@media (max-width: 980px) {
  .bookview { grid-template-columns: 1fr; }
  .bookview__chrome { position: static; order: 2; }
  .bookview__spread { grid-template-columns: 1fr; min-height: auto; }
  .bookview__spread::before { display: none; }
  .bp { border-bottom: 1px solid var(--paper-3); }
}