/* Selling Sickness 2013 archive
   ---------------------------------------------------------------------------
   The 2012 theme was a fixed-width, non-responsive layout with an amber accent
   on gray. That palette is kept as continuity; the layout is not - this is a
   fluid, single-column reading page that works on a phone, which the original
   never did. */

:root {
  --amber:      #c77d10;
  --amber-lift: #f7ae41;
  --ink:        #23282b;
  --ink-soft:   #4f585d;
  --ink-faint:  #767f85;
  --rule:       #d9dcde;
  --rule-soft:  #eceeef;
  --ground:     #ffffff;
  --ground-alt: #f4f5f6;
  --bar:        #3d4245;

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;

  --shell: 68rem;
  --measure: 38rem;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* Read aloud by screen readers, invisible on screen. Used for the
   "(opens in a new tab)" note on links that leave the archive. Clip rather than
   display:none or visibility:hidden - both of those remove it from the
   accessibility tree, which is the opposite of the point. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- archive notice ------------------------------------------------------ */

.archive-flag {
  background: var(--amber-lift);
  color: #2c2410;
  border-bottom: 1px solid #d99a2c;
}
/* Sized to sit on one line at full width, so the notice reads as a strip rather
   than a second masthead competing with the logo below it.
   `margin: 0 auto`, not `margin-inline: auto` - the latter leaves the browser's
   default 1em top and bottom margin on the paragraph, which was a third of this
   banner's height and the main reason it felt oversized. */
.archive-flag p {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.3rem clamp(1rem, 4vw, 2rem);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* --- back to top --------------------------------------------------------- */

/* Deliberately no JavaScript. `position: sticky` with `bottom` pins the button
   to the foot of the viewport for as long as <main> is on screen, then lets it
   settle at the end of the content - which is the show-on-scroll behavior a
   script would otherwise provide, and it costs nothing. Being the last child of
   <main> is what makes that work: the button releases before the footer instead
   of floating over it.

   On a page shorter than the viewport there is nothing to stick to, so it just
   sits quietly after the article rather than hovering over a half-empty screen. */
.totop {
  position: sticky;
  bottom: 1.25rem;
  z-index: 5;

  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  width: max-content;
  margin-left: auto;

  /* Pull out of the centered content column to the window edge, so it reads as a
     floating control rather than something moored to the text. `100%` is main's
     content width, `100vw` the window, so the negative margin is exactly the gap
     beside the column - and it collapses to a small positive value on a phone,
     where there is no gap. Verified at 500px and 1698px: no horizontal
     scrollbar at either. */
  margin-right: calc(1.25rem - (100vw - 100%) / 2);

  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--bar);
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.28);
}
.totop:hover,
.totop:focus-visible {
  background: var(--amber);
  color: #fff;
}
.totop-arrow { font-size: 1rem; line-height: 1; }

/* With JavaScript available the button becomes a genuine floating control:
   fixed to the window and revealed only after a screen of scrolling, which
   sticky positioning cannot do - it can pin an element but knows nothing about
   scroll depth. The sticky rules above remain the no-JS fallback, so the button
   still works with scripting off; it is simply always present. */
.js .totop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}
.js .totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .totop { transition: none; transform: none; }
  .js .totop.is-visible { transform: none; }
}

html { scroll-behavior: smooth; }

/* Honour the OS setting - a long signatory list jumping 900 rows under a smooth
   scroll is exactly the motion this preference exists to prevent. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- masthead ------------------------------------------------------------ */

.masthead { padding: 1.5rem 0 1.25rem; }
.brand { display: inline-block; }
.brand img { display: block; max-width: 100%; height: auto; }

/* --- navigation ---------------------------------------------------------- */

.mainnav {
  background: var(--bar);
  border-top: 3px solid var(--amber);
}
/* Mobile first: the nav is a closed disclosure until 48rem. Below that the old
   layout put all seven top-level items on wrapped rows with every sub-menu
   expanded underneath, which filled most of a phone screen before the page
   content began. */
.navtoggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0;
  color: #eef0f1;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;          /* kills the disclosure triangle */
  user-select: none;
}
.navtoggle::-webkit-details-marker { display: none; }
.navtoggle:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* Three bars, drawn rather than fetched - the archive ships no icon font and no
   SVG sprite for one glyph. */
.navtoggle-icon,
.navtoggle-icon::before,
.navtoggle-icon::after {
  display: block;
  width: 1.35rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.navtoggle-icon {
  position: relative;
}
.navtoggle-icon::before,
.navtoggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.navtoggle-icon::before { top: -6px; }
.navtoggle-icon::after  { top: 6px; }

/* Open state: bars become an X. */
.navbox[open] .navtoggle-icon { background: transparent; }
.navbox[open] .navtoggle-icon::before { top: 0; transform: rotate(45deg); }
.navbox[open] .navtoggle-icon::after  { top: 0; transform: rotate(-45deg); }

/* Must be explicit. Any `display` set on a <details> child overrides the UA rule
   that hides it while closed - which is the very trick used at desktop width to
   force the bar open, and it leaks down here. Without this the drawer renders
   permanently expanded and the toggle does nothing visible. */
.navbox:not([open]) > ul { display: none; }

/* A long menu should scroll inside the drawer rather than push the page down. */
.navbox[open] > ul {
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: 0.5rem;
}

.mainnav ul {
  display: block;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mainnav li { position: relative; }
.mainnav a {
  display: block;
  padding: 0.75rem 1rem;
  color: #eef0f1;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.mainnav a:hover,
.mainnav a:focus-visible { background: rgba(255, 255, 255, 0.12); }
.mainnav a[aria-current="page"] {
  background: var(--amber);
  color: #fff;
}

/* Sub-menus are a nested list, shown inline on small screens and on hover at
   desktop width. No JavaScript - the archive ships none. */
.mainnav ul ul {
  display: block;
  padding-left: 1rem;
  background: rgba(0, 0, 0, 0.18);
}
.mainnav ul ul a { font-size: 0.82rem; padding-block: 0.5rem; }

@media (min-width: 48rem) {
  /* Back to an ordinary horizontal bar. The list is forced visible even though
     the <details> is closed - `display` on the child covers engines that hide
     it with the old UA rule, `::details-content` covers the newer ones. Both
     were checked in a browser; neither alone is sufficient everywhere. */
  .navtoggle { display: none; }
  .navbox > ul { display: flex !important; flex-wrap: wrap; max-height: none; overflow: visible; }
  .navbox::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .mainnav ul ul {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 15rem;
    padding-left: 0;
    background: var(--bar);
    border-top: 2px solid var(--amber);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    visibility: hidden;
    opacity: 0;
    transition: opacity 120ms ease;
    z-index: 5;
  }
  .mainnav li:hover > ul,
  .mainnav li:focus-within > ul { visibility: visible; opacity: 1; }
}

/* --- content ------------------------------------------------------------- */

main { padding-block: 2.5rem 3.5rem; }

.prose { max-width: var(--measure); }
.prose h1 {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 4vw, 2.3rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.prose h2,
.prose h3 {
  font-family: var(--serif);
  line-height: 1.25;
  margin: 2rem 0 0.6rem;
  text-wrap: balance;
}
.prose h2 { font-size: 1.35rem; }
.prose h3 { font-size: 1.12rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.35rem; }

.prose a { color: var(--amber); text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); }

.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--amber-lift);
  color: var(--ink-soft);
}

.prose table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
.prose th, .prose td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.prose table,
.prose pre { display: block; overflow-x: auto; }

.dateline {
  color: var(--ink-faint);
  font-size: 0.88rem;
  margin: -0.5rem 0 1.6rem;
}

/* --- collapsible sections (was the [spoiler] shortcode) ------------------ */

.prose details {
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin: 0 0 0.75rem;
  background: var(--ground);
}
.prose summary {
  cursor: pointer;
  padding: 0.6rem 0.85rem;
  font-weight: 600;
  background: var(--ground-alt);
  list-style-position: inside;
}
.prose summary:hover { color: var(--amber); }
.prose details > *:not(summary) { padding-inline: 0.85rem; }
.prose details > *:last-child { padding-bottom: 0.6rem; }

/* --- signatories --------------------------------------------------------- */

.signers { margin-top: 2.5rem; }
.signers h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}
.signers > p { margin: 0 0 1rem; }

.sig-filter { margin-bottom: 1.25rem; }
.sig-filter label {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}
.sig-filter input {
  width: 100%;
  max-width: 22rem;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground);
  color: var(--ink);
}
.sig-filter input:focus-visible { border-color: var(--amber); }
#sig-count {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
  min-height: 1.2em;
}

.sig-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}
@media (max-width: 34rem) { .sig-list { columns: 1; } }

.sig-list li {
  break-inside: avoid;
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.35;
}
.sig-name { display: block; }
.sig-place { display: block; color: var(--ink-faint); font-size: 0.84rem; }

/* Signatories are the one place the archive is wider than the reading measure:
   911 names in a 38rem column is a very long scroll. */
.prose:has(.signers) { max-width: var(--shell); }
.prose:has(.signers) > p,
.prose:has(.signers) > h1,
.prose:has(.signers) > ul,
.prose:has(.signers) > ol { max-width: var(--measure); }

/* --- video embeds -------------------------------------------------------- */

/* Click-to-play facades. The poster is a local file and the YouTube player is
   only injected once a reader presses play, so a visitor who scrolls past
   eleven interviews without watching one never contacts YouTube. */

.video {
  margin: 2rem 0;
  max-width: var(--measure);
}
.video-play {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #16191b;
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
}

/* The posters arrive from YouTube as 640x480 with the picture letterboxed
   inside; build/fetch-video-posters.php crops that padding off, so these are
   about 640x408. `cover` then only has a few pixels to trim to reach 16:9. */
.video-play img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly dimmed so the play button holds its contrast against a bright
     frame - several of these open on a white conference banner. */
  filter: brightness(0.86);
  transition: filter 0.15s ease, transform 0.3s ease;
}
.video-play:hover img,
.video-play:focus-visible img { filter: brightness(1); }

.video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.4rem;
  height: 3.1rem;
  border-radius: 0.7rem;
  background: rgba(20, 22, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.15s ease;
}
/* The triangle, drawn with a border rather than shipped as an image so it stays
   crisp at any size and needs no extra request. */
.video-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.58rem 0 0.58rem 0.95rem;
  border-color: transparent transparent transparent #fff;
}
.video-play:hover .video-btn,
.video-play:focus-visible .video-btn { background: var(--amber); }

.video-play:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

/* Once play is pressed the <a> is replaced by the player, which keeps the same
   box so the page does not jump. */
.video-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #16191b;
  border-radius: 3px;
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video figcaption {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.video figcaption strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .video-play img { transition: none; }
}

@media print {
  .video-btn { display: none; }
}

/* --- blog index ---------------------------------------------------------- */

.postlist { list-style: none; margin: 0; padding: 0; }
.postlist li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.postlist a { font-weight: 600; }
.postlist .dateline { margin: 0.15rem 0 0; display: block; }

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

.siteftr {
  margin-top: 3rem;
  background: var(--ground-alt);
  border-top: 1px solid var(--rule);
  padding-block: 2.25rem 2.75rem;
}
.footcols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem 2.5rem;
}
.siteftr h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}
.siteftr p, .siteftr li { font-size: 0.92rem; color: var(--ink-soft); }
.siteftr p { margin: 0 0 0.5rem; }
.siteftr ul { list-style: none; margin: 0; padding: 0; }
.siteftr a { color: var(--amber); }
.fine { font-size: 0.82rem !important; color: var(--ink-faint) !important; }

@media print {
  .mainnav, .skip { display: none; }
  body { font-size: 12pt; }
}