/* Demo: Anna Reed, restaurant GM moving into operations.

   The career changer loses whenever the reader has to do the translation
   themselves, so the page does it for them: a two-column mapping of what she
   did against what it is called in the job she wants, running down the middle
   of the page as its spine. Everything else supports that table.

   It also states plainly what she has not done, which is the move that makes
   the rest credible rather than optimistic.

   Visually: a quiet editorial page, plum rather than the corporate blue of a
   career-change template, with the mapping set as a real table rather than
   decorated cards. */

:root {
  --paper:   #FCFBFA;
  --raise:   #FFFFFF;
  --sunk:    #F4F1F3;
  --ink:     #1B1719;
  --ink-2:   #574F53;
  --ink-3:   #746A6E;
  --line:    #E6E0E3;
  --line-2:  #CFC5CA;
  --plum:    #6D3B7A;
  --blush:   #E2A87A;
  --plum-soft: #F1E9F3;

  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--plum); text-underline-offset: 3px; }

.shell { max-width: 1000px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
}

/* ----------------------------------------------------------------- top --- */
.top {
  background: var(--plum);
  color: #F6EFF8;
  border-bottom: 5px solid var(--blush);
  padding-block: 58px 52px;
  background-image: radial-gradient(58% 78% at 90% 8%, rgba(226, 168, 122, 0.30), transparent 62%);
}
.top__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blush); }
.top h1 {
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(2rem, 5.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.top .sub { margin-top: 20px; color: rgba(246, 239, 248, 0.8); max-width: 54ch; }

/* ----------------------------------------------------------------- map --- */
.map { padding-block: 52px 0; }
.map__grid { margin-top: 22px; border: 1px solid var(--line); background: var(--raise); }

.map__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--plum);
  color: #fff;
}
.map__head span {
  padding: 12px 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.map__head span + span { border-left: 1px solid rgba(255, 255, 255, 0.25); }

.map__row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.map__row > div { padding: 20px; }
.map__row > div + div { border-left: 1px solid var(--line); background: var(--plum-soft); }
.map__row b { font-family: var(--display); font-size: 1.02rem; font-weight: 600; display: block; }
.map__row p { margin-top: 8px; font-size: 0.9rem; color: var(--ink-2); }

/* --------------------------------------------------------------- proof --- */
.proof { padding-block: 52px 0; }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proof__grid > div { background: var(--raise); padding: 18px 20px; }
.proof__n {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
}
.proof__l { margin-top: 8px; font-size: 0.85rem; color: var(--ink-2); }

/* -------------------------------------------------------------- bridge --- */
.bridge { padding-block: 52px 0; }
.bridge__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; margin-top: 22px; }
.bridge h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 600; padding-top: 12px; border-top: 2px solid var(--plum); }
.bridge p { margin-top: 10px; font-size: 0.92rem; color: var(--ink-2); }

/* -------------------------------------------------------------- honest --- */
.honest { margin-top: 52px; background: var(--sunk); padding: 28px; border-left: 3px solid var(--plum); }
.honest p { margin-top: 12px; color: var(--ink-2); max-width: 68ch; }

/* --------------------------------------------------------------- quote --- */
.quote { margin: 52px 0 0; padding-top: 28px; border-top: 2px solid var(--ink); }
.quote p { font-family: var(--display); font-size: clamp(1.1rem, 2.6vw, 1.4rem); line-height: 1.45; max-width: 52ch; }
.quote footer { margin-top: 14px; font-size: 0.82rem; font-weight: 600; color: var(--ink-3); }

/* ------------------------------------------------------------- history --- */
.history { padding-block: 52px 0; }
.roles { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.roles li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-2);
}
.roles span { font-size: 0.82rem; color: var(--ink-3); }
.roles b { font-family: var(--display); font-size: 1.02rem; font-weight: 600; color: var(--ink); display: block; }

/* ------------------------------------------------------------- contact --- */
.contact { margin-top: 56px; padding: 40px 0 76px; border-top: 2px solid var(--ink); }
.contact h2 { font-family: var(--display); font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 600; max-width: 26ch; }
.contact p { margin-top: 14px; color: var(--ink-2); max-width: 58ch; }
.contact__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.btn {
  display: inline-block;
  padding: 11px 22px;
  background: var(--plum);
  color: #fff;
  border: 1px solid var(--plum);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
}
.btn:hover { background: #572E62; border-color: #572E62; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--quiet:hover { background: var(--sunk); border-color: var(--ink); color: var(--ink); }

.updated { margin-top: 28px; font-size: 0.78rem; color: var(--ink-3); }

/* ------------------------------------------------------------ narrower --- */
@media (max-width: 860px) {
  .top__in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .top__portrait { max-width: 300px; }
}

@media (max-width: 720px) {
  .map__head { display: none; }
  .map__row { grid-template-columns: minmax(0, 1fr); }
  .map__row > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .map__row > div + div::before {
    content: "Which is";
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--plum);
    margin-bottom: 8px;
  }
}

@media (max-width: 560px) {
  .shell { padding-left: 18px; padding-right: 18px; }
  .roles li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}


/* ------------------------------------------------------------ media slot ---
   Where the client's own headshot, work photograph or video goes. Marked
   rather than faked: a framed panel in the page palette with a glyph and a
   label, so the slot looks deliberate while it is empty and the layout does
   not move when the real image lands in it. */
.shot { margin: 0; }
.shot__fill {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 9px),
    linear-gradient(158deg, #4C2B57 0%, #2A1830 54%, #6D3B7A 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.shot__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 74% 16%, rgba(176, 104, 196, 0.40), transparent 62%);
}
.shot__glyph {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  color: rgba(255, 255, 255, 0.62);
}
.shot--wide .shot__fill,
.shot--video .shot__fill { aspect-ratio: 16 / 9; }
.shot--square .shot__fill { aspect-ratio: 1 / 1; }
.shot--tall .shot__fill { aspect-ratio: 3 / 4; }
.shot figcaption {
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.shot--on-dark figcaption { color: rgba(255, 255, 255, 0.55); }
.shot__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #6D3B7A;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}
.shot__play svg { width: 25px; height: 25px; margin-left: 4px; color: #fff; }

/* A row of slots, for the pages where the work is the photographs. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}