/* ==========================================================================
   John Voss Learning — stylesheet
   Single stylesheet for all pages. Edit colors in :root below.
   ========================================================================== */

:root {
  --ink:        #10151c;
  --ink-soft:   #3d4753;
  --ink-mute:   #66707d;
  --line:       #e2e6ec;
  --line-soft:  #eef1f5;
  --paper:      #ffffff;
  --paper-alt:  #f6f8fa;
  --navy:       #16324f;
  --navy-deep:  #0d2137;
  --accent:     #af1f38;   /* brand crimson, taken from the JV logo */
  --accent-dk:  #8e1a2e;
  --accent-wash:#fdf0f2;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --gut: 24px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,21,28,.05), 0 8px 24px rgba(16,21,28,.06);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.3rem); font-weight: 600; letter-spacing: -.015em; }
h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: 1.16rem; letter-spacing: -.005em; }
p { margin: 0 0 1.1em; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dk); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
ul { padding-left: 1.15em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* ------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 760px; }
.section { padding: clamp(2.25rem, 4vw, 3.25rem) 0; }
.section--tight { padding: clamp(1.6rem, 3vw, 2.25rem) 0; }
.section--alt { background: var(--paper-alt); border-block: 1px solid var(--line-soft); }
.section--dark { background: var(--navy-deep); color: #c9d4df; }
.section--dark h2, .section--dark h3 { color: #fff; }
/* the final element in a band should not add its margin to the band padding */
.wrap > *:last-child, .wrap--narrow > *:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- nav -- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; line-height: 1.15; }
.brand__mark { width: 40px; height: 40px; flex: none; display: block; }
.brand__text { display: flex; flex-direction: column; }
@media (max-width: 420px) { .brand__mark { width: 34px; height: 34px; } }
.brand__name {
  font-family: var(--serif); font-size: 1.28rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.brand__tag {
  font-size: .69rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500; margin-top: 2px;
}
.brand:hover .brand__name { color: var(--navy); }

.nav__toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 7px; padding: .5rem .7rem; cursor: pointer; color: var(--ink);
  font-size: .9rem; align-items: center; gap: .45rem;
}
.nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__links li { margin: 0; }
.nav__links a {
  text-decoration: none; color: var(--ink-soft); font-size: .95rem; font-weight: 500;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
/* The .nav__links a rule above outranks .btn on specificity, so the header
   button needs its padding restated here or it renders with none. */
.nav__links .btn {
  padding: .62rem 1.2rem;
  border-bottom: none;
  white-space: nowrap;
  color: #fff;
}
.nav__links .btn:hover { border-bottom: none; color: #fff; }
.nav__links li { flex: none; }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.25rem; box-shadow: var(--shadow);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--line-soft); color: var(--accent-dk); }
  .nav__links .btn { margin-top: .9rem; text-align: center; }
}

/* -------------------------------------------------------------- button -- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .95rem; font-weight: 600;
  padding: .78rem 1.5rem; border-radius: 7px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dk); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink-mute); color: var(--ink); background: var(--paper-alt); }
.btn--light { background: #fff; color: var(--navy-deep); }
.btn--light:hover { background: #eef2f6; color: var(--navy-deep); }
.btn--outline-light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

/* ---------------------------------------------------------------- hero -- */
.hero { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(1.75rem, 3.5vw, 2.5rem); }
.hero__eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-dk); font-weight: 700; margin-bottom: 1.1rem;
}
.hero__lede { font-size: clamp(1.05rem, 2vw, 1.24rem); color: var(--ink-soft); max-width: 62ch; }
.hero__grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* Portrait sits above the facts list in the About hero's right column.
   No aspect-ratio here on purpose: the source file is already cropped, so
   the image is left to display at its own proportions. */
.portrait {
  display: block;
  width: 100%;
  max-width: 285px;
  height: auto;
  border-radius: 3px;
  margin: .4rem 0 1.9rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}
@media (max-width: 900px) { .portrait { max-width: 240px; } }

.facts { border-left: 3px solid var(--accent); padding-left: 1.4rem; margin-top: .5rem; }
.facts dl { margin: 0; }
.facts dt {
  font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin-top: 1.4rem;
}
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: .2rem 0 0; color: var(--ink); font-weight: 500; font-size: .97rem; }

/* --------------------------------------------------------------- eyebrow */
.eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-dk); font-weight: 700; margin-bottom: .9rem;
}
.section--dark .eyebrow { color: #e0a377; }
.lede { font-size: 1.1rem; max-width: 68ch; }

/* ---------------------------------------------------------------- grid -- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- card -- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; display: flex; flex-direction: column;
}
.card__num {
  font-family: var(--serif); font-size: 1.6rem; color: var(--accent);
  line-height: 1; margin-bottom: .75rem;
}
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin: 0; font-size: .95rem; }

/* ------------------------------------------------------------- service -- */
.track {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: var(--shadow);
}
.track__label {
  display: inline-block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-dk); background: var(--accent-wash);
  padding: .35rem .7rem; border-radius: 4px; margin-bottom: 1rem;
}
.track h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .7rem; }
.track ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.track ul li {
  position: relative; padding-left: 1.5rem; margin-bottom: .7rem; font-size: .97rem;
}
.track ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* -------------------------------------------------------------- detail -- */
.detail { border-top: 1px solid var(--line); padding-top: 2rem; margin-top: 2rem; }
.detail:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.detail__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem; }
.detail h3 { font-family: var(--serif); font-size: 1.42rem; margin: 0; }
.detail__meta { font-size: .82rem; color: var(--ink-mute); letter-spacing: .02em; }

.deliverables {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.5rem;
}
@media (max-width: 680px) { .deliverables { grid-template-columns: 1fr; } }
.deliverables li { position: relative; padding-left: 1.6rem; font-size: .95rem; margin: 0; }
.deliverables li::before {
  content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 600;
}

/* ------------------------------------------------------------ portfolio -- */
.case {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
}
.case__media {
  aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1b3a5c 0%, #0d2137 100%);
  display: flex; align-items: center; justify-content: center; position: relative;
  color: rgba(255,255,255,.55); text-align: center; padding: 1.5rem;
}
/* When a real screenshot replaces the placeholder panel, crop rather than stretch */
img.case__media { object-fit: cover; padding: 0; width: 100%; }
.case__media span {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.case__body { padding: 1.6rem 1.6rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.case__tag {
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-dk); margin-bottom: .55rem;
}
.case h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.case dl { margin: 0; font-size: .93rem; }
.case dt {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin-top: .95rem;
}
.case dt:first-child { margin-top: 0; }
.case dd { margin: .2rem 0 0; }
.case__stack {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--ink-mute);
}

/* ---------------------------------------------------------------- note -- */
.note {
  background: var(--accent-wash); border: 1px dashed var(--accent);
  border-radius: var(--radius); padding: 1.25rem 1.5rem; font-size: .93rem; color: var(--ink-soft);
}
.note strong { color: var(--accent-dk); }
.note p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- stacks -- */
.stack-group { margin-bottom: 2rem; }
.stack-group h3 {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin-bottom: .85rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.chips li {
  margin: 0; font-size: .87rem; padding: .4rem .8rem; border-radius: 5px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
}
.section--alt .chips li { background: #fff; }

/* -------------------------------------------------------------- timeline */
.tl { list-style: none; padding: 0; margin: 0; }
.tl > li {
  position: relative; padding-left: 2rem; padding-bottom: 2rem;
  border-left: 1px solid var(--line); margin: 0;
}
.tl > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.tl > li::before {
  content: ""; position: absolute; left: -5px; top: .45em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid #fff;
}
.tl__when {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700;
}
.tl h3 { font-size: 1.12rem; margin: .3rem 0 .4rem; }
.tl p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- quote -- */
.pull {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.45;
  color: var(--ink); border-left: 3px solid var(--accent); padding-left: 1.5rem; margin: 0;
}
.section--dark .pull { color: #fff; }

/* ---------------------------------------------------------------- form -- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block; font-size: .82rem; font-weight: 600; color: var(--ink);
  margin-bottom: .4rem; letter-spacing: .01em;
}
.field .req { color: var(--accent-dk); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .72rem .85rem; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,50,79,.1); outline: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: .82rem; color: var(--ink-mute); margin: .4rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Demo video player */
.demo-video {
  width: 100%; display: block; background: #000;
  border-radius: var(--radius); margin-top: 1.75rem;
  border: 1px solid var(--line);
}

/* Form success / error messages */
.form-status { border-radius: var(--radius); padding: 1.75rem 1.9rem; border: 1px solid; }
.form-status h2 {
  font-family: var(--serif); font-size: 1.35rem; margin-bottom: .5rem;
}
.form-status p { font-size: .97rem; margin-bottom: 0; }
.form-status--ok  { background: #f0f7f2; border-color: #bcd9c6; }
.form-status--ok h2 { color: #1e5133; }
.form-status--err { background: #fdf2f0; border-color: #e6bdb4; }
.form-status--err h2 { color: #8c3320; }
.form-status:focus { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- cta -- */
.cta { text-align: center; }
.cta h2 { color: #fff; }
.cta p { max-width: 56ch; margin-left: auto; margin-right: auto; color: #c9d4df; }
.cta .btn-row { justify-content: center; }

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--navy-deep); color: #93a3b4; padding: 3.5rem 0 2rem; font-size: .92rem;
}
.site-footer a { color: #dde5ec; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer h2 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; font-weight: 700; margin-bottom: .9rem;
}
.site-footer .footer-brand {
  font-family: var(--serif); font-size: 1.3rem; color: #fff; margin-bottom: .5rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem;
}

/* -------------------------------------------------------------- utility -- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ card icons */
/* Cards in sections that do not carry an 01/02/03 numeral get a stroke icon
   instead, so every card grid on the site has the same visual anchor. */
.card__icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: .95rem;
  color: var(--accent);
}

/* --------------------------------------------------------------- diagram */
.diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: 800px;
  margin: 2.75rem auto .25rem;
}
.dgm-box  { fill: var(--paper-alt); stroke: var(--line); stroke-width: 1.5; }
.dgm-bar  { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1.5; }
.dgm-seam { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; }
.dgm-tie  { stroke: var(--line); stroke-width: 1.5; }
.dgm-t { font-family: var(--sans); font-size: 16px;   font-weight: 650; fill: var(--ink); }
.dgm-s { font-family: var(--sans); font-size: 12.5px; fill: var(--ink-mute); }
.dgm-k { font-family: var(--sans); font-size: 11.5px; font-weight: 700; fill: var(--accent);
         letter-spacing: .12em; text-transform: uppercase; }
.dgm-b { font-family: var(--sans); font-size: 15px;   font-weight: 650; fill: var(--accent-dk); }

/* Below this width the 760-unit viewBox scales the diagram's type down past
   readability, so it is withdrawn rather than shown too small. The three cards
   directly beneath it carry the same argument in prose, so nothing is lost. */
@media (max-width: 620px) { .diagram { display: none; } }

/* Larger variant, used on the Services "When clients actually call" cards —
   those sit in a three-column grid where a 30px mark reads as too small. */
.card__icon--lg { width: 56px; height: 56px; }

/* ------------------------------------------------- work sample previews --
   Two-column card: text leads, a preview of the piece sits to its right.
   Collapses to a single column on narrow screens, text first.             */
.sample { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }
.sample__shot { margin: 0; }
.sample__shot img,
.sample__shot svg { width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-alt); }
.sample__cap { font-size: .82rem; color: var(--ink-mute); margin: .6rem 0 0; line-height: 1.5; }
@media (max-width: 860px) { .sample { grid-template-columns: 1fr; gap: 1.25rem; }
  .sample__shot { max-width: 420px; } }

/* ----------------------------------------------------------- dark panel --
   A navy panel the facts list can sit on, for weight and variety against
   the pale pages. The seam variant repeats the motif from the homepage
   diagram: vertical rules rising out of the base, divided by a gap.      */
.panel {
  position: relative; overflow: hidden; color: #fff;
  background: var(--navy); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.panel > * { position: relative; z-index: 2; }
.panel .facts { border-left-color: #e0a377; margin-top: 0; }
.panel .facts dt { color: #b9c6d6; }
.panel .facts dd { color: #f4f7fa; }
.panel__eyebrow {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: #e0a377; font-weight: 700; margin: 0 0 1.1rem;
}

.panel--seam::before {
  content: ""; position: absolute; z-index: 1; inset: 0;
  background: repeating-linear-gradient(90deg,
              transparent 0 46px, rgba(44, 74, 104, .55) 46px 47px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%);
          mask-image: linear-gradient(180deg, transparent 0, #000 55%);
}
.panel--seam::after {
  content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent 70%);
}

/* ------------------------------------------------------- hero with image --
   Image left, heading and lede right. The image leads in the source order
   because it is the first thing seen; on narrow screens it stays on top.   */
.hero__split { display: grid; grid-template-columns: 400px minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.hero__shot { margin: 0; }
.hero__shot img { width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--line); }
/* Reversed: text leads, image sits to its right. */
/* Reversed: text leads, image sits to its right. Same 400px column as the
   hero so every image panel on a page lines up at the same width.      */
.hero__split--rev { grid-template-columns: minmax(0, 1fr) 400px; }
@media (max-width: 860px) {
  .hero__split { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__shot { max-width: 460px; }
}

/* --------------------------------------------------- full-window viewer --
   Used by the pages that hand the whole screen to an embedded piece. The bar
   is the only site chrome. body.is-viewer scopes the overflow lock so it
   cannot leak onto ordinary pages.                                        */
body.is-viewer, html:has(body.is-viewer) { height: 100%; margin: 0; overflow: hidden; }
.viewer { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.viewer__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 1rem 0 .85rem; height: 56px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.viewer__brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.viewer__brand img { width: 32px; height: 32px; flex: none; border-radius: 4px; }
.viewer__brand span { display: block; line-height: 1.15; }
.viewer__name { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); }
.viewer__tag {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 520px) { .viewer__tag { display: none; } }

.viewer__back {
  flex: none; font-size: .85rem; font-weight: 600; text-decoration: none;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: .45rem 1rem; white-space: nowrap; line-height: 1.4;
}
.viewer__back:hover { border-color: var(--accent); color: var(--accent-dk); }
.viewer__back span { margin-right: .35rem; }

.viewer__frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: #fff; }