/* fredericmarc.com, shared styles */

:root {
  /* Cool white and near-black ink, with one deep blue for growth and emphasis */
  --paper: #ffffff;
  --paper-tint: #f3f5f7;
  --ink: #111418;
  --ink-soft: #454b54;
  --ink-faint: #656c77;
  --rule: #dde1e6;
  --grew: #1d3a86;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --measure: 36rem;
}

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

html { font-size: 18px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
@media (max-width: 720px) { html { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  font-feature-settings: 'kern', 'liga', 'onum';
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: var(--ink-soft); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 0.5rem; top: 0.5rem;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.frame { max-width: 72rem; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 720px) { .frame { padding: 0 1.25rem; } }

/* Header */
.site-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 2rem 0 0;
}
.site-name { font-family: var(--display); font-size: 1.05rem; font-weight: 400; text-decoration: none; }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: 0.9rem; }
.site-nav a { text-decoration: none; color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); }

/* Opening */
.opening { padding: 6rem 0 5rem; }
.opening h1 {
  font-family: var(--display);
  font-weight: 340;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  max-width: 20ch;
  font-variation-settings: 'opsz' 144;
}
.opening .lead {
  margin-top: 2rem;
  max-width: var(--measure);
  font-size: 1.12rem;
  color: var(--ink-soft);
}
.opening .reach {
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.opening .reach { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }

/* Sections */
section { padding: 4rem 0 0; }
.section-head {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem;
  align-items: baseline;
  border-top: 1px solid var(--ink);
  padding-top: 1rem;
  margin-bottom: 1rem;
}
.section-head h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.2;
}
.section-head p { max-width: var(--measure); color: var(--ink-soft); font-size: 0.95rem; }

/* Record */
.entry {
  display: grid;
  grid-template-columns: 13rem minmax(0, var(--measure)) minmax(16rem, 1fr);
  gap: 2.5rem;
  padding: 2.25rem 0 2.5rem;
  border-top: 1px solid var(--rule);
}
.entry:first-of-type { border-top: 0; }
.entry-meta .dates { font-size: 0.85rem; color: var(--ink-faint); font-variant-numeric: lining-nums; }
.entry-meta h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.15;
  margin: 0.3rem 0 0.35rem;
}
.entry-meta .role { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.4; }
.entry-body p + p { margin-top: 0.9rem; }
.outcomes { list-style: none; margin-top: 1.4rem; border-top: 1px solid var(--rule); }
.outcomes li {
  padding: 0.45rem 0; border-bottom: 1px solid var(--rule);
  font-size: 0.95rem; font-variant-numeric: lining-nums;
}

.team { align-self: start; }
.team-row { display: grid; gap: 0.3rem; margin-bottom: 0.8rem; }
.dots { display: flex; flex-wrap: wrap; gap: 6px; max-width: 16rem; }
.dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--ink-soft);
  flex: none;
}
/* Added while I led the team: filled, so the distinction never rests on colour alone */
.dot--grew { background: var(--grew); border-color: var(--grew); }
.team-label { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.3; }
.team figcaption {
  margin-top: 0.4rem; font-family: var(--display); font-style: italic;
  font-size: 1rem; color: var(--ink);
}

/* Growth reveal: the people added while I led the team arrive in order, once. */
.js .team .dot--grew { opacity: 0; transform: scale(0.4); }
.js .team.is-visible .dot--grew {
  opacity: 1; transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transition-delay: calc(var(--i) * 45ms + 250ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .team .dot--grew { opacity: 1; transform: none; transition: none; }
}

/* Work: no visible heading, the growth key sits over the team column */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.section-head--work { grid-template-columns: 13rem minmax(0, var(--measure)) minmax(16rem, 1fr); margin-bottom: 0; }
.section-head--work .legend { grid-column: 3; }

.legend {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
  font-size: 0.82rem; color: var(--ink-soft);
}
.legend span { display: inline-flex; align-items: center; gap: 0.45rem; }

.earlier { padding: 1.5rem 0 0; border-top: 1px solid var(--rule); }
.earlier p { max-width: var(--measure); margin-left: calc(13rem + 2.5rem); color: var(--ink-soft); font-size: 0.95rem; }

/* Two-column prose sections */
.pair {
  display: grid; grid-template-columns: 13rem minmax(0, var(--measure)); gap: 2.5rem;
  padding: 1.5rem 0;
}
.pair h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.3; }

/* References */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; margin-left: calc(13rem + 2.5rem); padding-top: 1.5rem; }
blockquote p { font-size: 1.02rem; }
blockquote footer { margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-faint); }
blockquote footer strong { font-weight: 500; color: var(--ink); }

/* Writing */
.writing { list-style: none; margin-left: calc(13rem + 2.5rem); max-width: var(--measure); padding-top: 1rem; }
.writing li { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.writing a { font-family: var(--display); font-size: 1.15rem; }
.writing span { display: block; color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.15rem; }

.site-footer {
  margin-top: 6rem; padding: 1.5rem 0 3rem; border-top: 1px solid var(--ink);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.9rem; color: var(--ink-soft);
}

@media (max-width: 960px) {
  .entry { grid-template-columns: 13rem minmax(0, 1fr); }
  .team { grid-column: 2; grid-row: 1; }
  .entry-body { grid-column: 2; }
  .entry-meta { grid-row: 1 / span 2; }
  .section-head--work { grid-template-columns: 13rem minmax(0, 1fr); }
  .section-head--work .legend { grid-column: 2; }
  .team { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1.6rem; }
  .team figcaption { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .opening { padding: 3.5rem 0 3rem; }
  .section-head, .entry, .pair, .section-head--work { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .section-head--work .legend { grid-column: auto; }
  .entry-meta, .team, .entry-body { grid-column: auto; grid-row: auto; }
  .entry-meta { order: 0; } .team { order: 1; margin-bottom: 0.5rem; } .entry-body { order: 2; }
  .earlier p, .quotes, .writing { margin-left: 0; }
  .quotes { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ------------------------------------------------------------
   Record: link through to a case
   ------------------------------------------------------------ */
/* Entries with a case: a card in the meta column, so scanning the left edge finds them */
.entry-meta h3 a { text-decoration: none; }
.entry-meta h3 a:hover { text-decoration: underline; text-decoration-color: var(--ink-soft); }
.case-card { display: block; margin-top: 1.2rem; text-decoration: none; max-width: 20rem; }
.case-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-tint); border: 1px solid var(--rule); }
.case-card .k { display: block; margin-top: 0.55rem; font-size: 0.78rem; color: var(--grew); }
.case-card .t { display: block; font-family: var(--display); font-size: 1.02rem; line-height: 1.25; margin-top: 0.1rem; }
.case-card:hover .t { text-decoration: underline; text-decoration-color: var(--grew); text-underline-offset: 0.2em; }
.case-note { margin-top: 1.2rem; font-size: 0.85rem; color: var(--ink-faint); line-height: 1.4; }

.case-link { display: inline-block; margin-top: 1.1rem; font-size: 0.95rem; color: var(--grew); text-decoration-color: currentColor; }

/* ------------------------------------------------------------
   Case pages
   ------------------------------------------------------------ */
.case-head {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem;
  padding: 5rem 0 3rem;
}
.case-head .dates { font-size: 0.85rem; color: var(--ink-faint); }
.case-head .role { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.4; margin-top: 0.3rem; }
.case-head h1 {
  font-family: var(--display); font-weight: 340;
  font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; letter-spacing: -0.012em;
  max-width: 22ch; font-variation-settings: 'opsz' 144;
}
.case-head .dek { margin-top: 1.4rem; max-width: var(--measure); font-size: 1.12rem; color: var(--ink-soft); }

.case-figure { margin: 0 0 3rem; }
.case-figure img, .case-figure video { display: block; width: 100%; height: auto; background: var(--paper-tint); }
.case-figure figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-faint); }
.case-figure.is-inset { margin-left: calc(13rem + 2.5rem); }
.case-figure.is-hero img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 15%; }
.case-section .outcomes { margin-top: 0.2rem; }
.case-pair {
  /* Columns follow the images' aspect ratios so both sit at the same height */
  display: grid; grid-template-columns: 1.726fr 0.708fr; gap: 1rem; align-items: start;
  margin: 0 0 3rem calc(13rem + 2.5rem);
}
.case-pair img { display: block; width: 100%; height: auto; background: var(--paper-tint); }
.case-pair figcaption { grid-column: 1 / -1; font-size: 0.85rem; color: var(--ink-faint); }

.case-section {
  display: grid; grid-template-columns: 13rem minmax(0, var(--measure)) minmax(0, 1fr); gap: 2.5rem;
  padding: 2rem 0 2.5rem; border-top: 1px solid var(--rule);
}
.case-section h2 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; }
.case-section p + p { margin-top: 0.9rem; }
.case-section .team { padding-top: 0.3rem; }

.case-back { margin: 1rem 0 0 calc(13rem + 2.5rem); font-size: 0.95rem; }
.case-back a { color: var(--grew); text-decoration-color: currentColor; }

@media (max-width: 960px) {
  .case-section { grid-template-columns: 13rem minmax(0, 1fr); }
  .case-section .team { grid-column: 2; }
}
@media (max-width: 720px) {
  .case-head, .case-section { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .case-head { padding: 3rem 0 2rem; }
  .case-section .team { grid-column: auto; }
  .case-figure.is-inset, .case-pair, .case-back { margin-left: 0; }
  .case-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   FELT reader (Bolt page): one moment, four questions
   ------------------------------------------------------------ */
.felt { padding: 1.5rem 0 0; }

.felt-controls { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0.9rem 2.5rem; align-items: baseline; }
.felt-controls .label { font-size: 0.85rem; color: var(--ink-faint); }
.felt-choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.felt-choices button {
  font: inherit; font-size: 0.92rem; color: var(--ink-soft); background: none; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.85rem;
}
.felt-choices button:hover { border-color: var(--ink-soft); color: var(--ink); }
.felt-choices button[aria-pressed="true"] { background: var(--grew); border-color: var(--grew); color: #fff; }

.felt-stage {
  display: grid; grid-template-columns: 13rem 20rem minmax(0, 1fr); gap: 2.5rem;
  padding: 2.5rem 0 0; align-items: start;
}
.felt-current { position: sticky; top: 1.5rem; }
.felt-current .q { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.felt-current p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; }

.phone {
  position: sticky; top: 1.5rem;
  width: 20rem; height: min(40rem, 82vh);
  border: 9px solid var(--ink); border-radius: 2.4rem; overflow: hidden; background: #fff;
}
.phone-scroll { height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.phone-scroll::-webkit-scrollbar { display: none; }
.phone-screen { position: relative; }
.phone-screen img { display: block; width: 100%; height: auto; }
.mark {
  position: absolute; left: 3%; right: 3%;
  border: 2px solid var(--grew); border-radius: 6px; background: rgba(29, 58, 134, 0.05);
  transition: background 0.2s ease;
}
.mark.is-focus { background: rgba(29, 58, 134, 0.16); }
.mark span {
  position: absolute; top: -2px; left: -2px; min-width: 1.4rem; padding: 0.1rem 0.4rem; text-align: center;
  background: var(--grew); color: #fff; font-size: 0.72rem; border-radius: 6px 0 6px 0;
}

.moments { list-style: none; max-width: var(--measure); }
.moment {
  border-top: 1px solid var(--rule); padding: 1rem 0 1.2rem; cursor: pointer;
}
.moment:last-child { border-bottom: 1px solid var(--rule); }
.moment h3 {
  display: flex; gap: 0.6rem; align-items: baseline;
  font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.3;
}
.moment h3 .n { font-family: var(--body); font-size: 0.8rem; color: var(--grew); font-variant-numeric: lining-nums; }
.moment.is-focus h3 { color: var(--grew); }
.moment button.moment-go {
  font: inherit; font-size: 0.8rem; color: var(--grew); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em; margin-top: 0.2rem;
}
.readings { list-style: none; margin-top: 0.6rem; }
.readings li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem;
  padding: 0.35rem 0; font-size: 0.95rem; transition: opacity 0.2s ease;
}
.readings li.is-dim { opacity: 0.28; }
.readings .tag {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--grew); color: var(--grew);
  font-size: 0.7rem; display: grid; place-items: center; margin-top: 0.15rem;
}
.readings li.is-lens .tag { background: var(--grew); color: #fff; }
.readings .t b { font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .mark, .readings li { transition: none; } }

@media (max-width: 1100px) {
  .felt-stage { grid-template-columns: 20rem minmax(0, 1fr); }
  .felt-current { grid-column: 1 / -1; position: static; }
}
@media (max-width: 720px) {
  .felt-controls { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .felt-controls .label { margin-top: 0.6rem; }
  .felt-stage { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .phone { position: relative; top: 0; width: min(18rem, 100%); height: 32rem; margin: 0 auto; }
}

/* ------------------------------------------------------------
   Password page
   ------------------------------------------------------------ */
.gate { max-width: 30rem; padding: 6rem 0 8rem; }
.gate h1 { font-family: var(--display); font-weight: 340; font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; }
.gate > p { margin-top: 1rem; color: var(--ink-soft); }
.gate form { margin-top: 2rem; }
.gate label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
.gate-row { display: flex; gap: 0.6rem; }
.gate input {
  flex: 1; min-width: 0; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--ink-faint); border-radius: 4px; padding: 0.6rem 0.8rem;
}
.gate input[aria-invalid="true"] { border-color: #a1260d; }
.gate button {
  font: inherit; color: #fff; background: var(--grew); border: 0; border-radius: 4px;
  padding: 0.6rem 1.2rem; cursor: pointer;
}
.gate button:hover { background: #172f6d; }
.gate-error { margin-top: 0.7rem; color: #a1260d; font-size: 0.92rem; }
.gate-back { margin-top: 2.5rem; font-size: 0.92rem; }