/* Identity and reading grid, shared by the publication. The game has its own document. */
:root {
  --h-ink: #052e22;
  --h-cream: #e6d7c3;
  --h-paper: #f7f5ef;
  --h-muted: #53635a;
  --h-rule: #cbcfc3;
  --h-gutter: clamp(18px, 4.7vw, 72px);
  --h-width: 1512px;
  --h-serif: Caslon, Georgia, serif;
  --h-sans: DM, Arial, sans-serif;
  --h-ease: cubic-bezier(.2,.7,.25,1);
  --green: var(--h-ink);
  --cream: var(--h-cream);
  --paper: var(--h-paper);
  --muted: var(--h-muted);
}
body { display: flex; flex-direction: column; min-height: 100svh; background: var(--h-paper); }
body > #app { flex: 1 0 auto; width: 100%; max-width: none; }
body > .luxury-header, body > footer { flex: none; }
::selection { color: var(--h-paper); background: var(--h-ink); }
header.luxury-header.social-header {
  height: clamp(90px, 6.6vw, 98px);
  padding-block: 0;
  padding-inline: max(var(--h-gutter), calc((100% - var(--h-width)) / 2 + var(--h-gutter)));
  background: var(--h-paper);
  border-color: var(--h-rule);
}
.social-header .header-wordmark {
  padding: 14px;
  color: var(--h-ink);
}
.social-header .nav-wing { gap: clamp(22px, 2.8vw, 48px); }
.social-header .main-navigation a, .social-mobile-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  font: 400 14px/1.1 var(--h-sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--h-muted);
}
.social-header .main-navigation a[aria-current=page], .social-mobile-nav a[aria-current=page] {
  color: var(--h-ink);
  font-weight: 600;
  text-decoration: none;
}
/* The active section repeats the three dimples inside the O. */
.social-header .main-navigation a.active::after, .social-mobile-nav a[aria-current=page]::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  left: calc(50% - 4px);
  bottom: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 5px 0 currentColor, 2.5px 4px currentColor;
}
.edit-home { max-width: none; color: var(--h-ink); }
.edit-home .edit-drive-scene {
  max-width: calc(var(--h-width) - 2 * var(--h-gutter));
  margin-inline: max(var(--h-gutter), calc((100% - var(--h-width)) / 2 + var(--h-gutter)));
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  min-height: 0;
  gap: 0;
  padding: 0;
  background: var(--h-ink);
}
.edit-home .edit-drive-scene::before { content: none; }
.edit-drive-scene .drive-invitation {
  min-width: 0;
  padding: clamp(22px, 3vw, 52px);
  align-self: center;
}
.edit-home .edit-drive-scene h2 {
  color: var(--h-paper);
  margin: 0;
  font: 400 clamp(40px, 4vw, 64px)/1 var(--h-serif);
  letter-spacing: -.04em;
}
.drive-invitation p { font-size: 14px; margin: 8px 0 14px; color: var(--h-cream); }
.edit-home .drive-invitation .btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 9px 15px;
  color: var(--h-ink);
  background: var(--h-paper);
  border: 1px solid var(--h-paper);
  font: 600 13px/1.2 var(--h-sans);
  text-transform: none;
  letter-spacing: 0;
}
.edit-drive-scene .drive-art { align-self: stretch; width: 100%; min-height: 100%; object-fit: cover; }
.edit-home .drive-invitation .btn:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.homer-follow {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border-top: 1px solid var(--h-rule);
  max-width: var(--h-width);
  margin: auto;
  padding: clamp(20px, 3vw, 44px) var(--h-gutter);
  gap: 10px 24px;
  color: var(--h-ink);
}
.homer-follow h2 { margin: 0; font: 400 clamp(28px, 2.7vw, 40px)/1.12 var(--h-serif); letter-spacing: -.035em; }
.homer-follow > div, .edit-home .homer-follow > div { display: flex; flex-wrap: wrap; gap: 6px; }
.homer-follow a, .edit-home .homer-follow a, .daily-listen a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 12px;
  gap: 7px;
  border: 1px solid #a4ada0;
  border-radius: 99px;
  background: var(--h-paper);
  color: var(--h-ink);
  font: 600 12px/1.3 var(--h-sans);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 150ms var(--h-ease), background-color 150ms var(--h-ease);
}
.homer-follow a img,.edit-home .homer-follow a img,.daily-listen a img {
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  flex: none;
}
body > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px clamp(18px, 3vw, 44px);
  padding: 20px max(var(--h-gutter), calc((100% - var(--h-width)) / 2 + var(--h-gutter)));
  background: var(--h-ink);
  color: var(--h-paper);
  border: 0;
}
footer .footer-wordmark { width: auto; margin-right: auto; }
.wordmark .homer-wordmark { display: block; width: 144px; height: auto; }
footer .footer-wordmark { padding: 12px; }
footer .footer-wordmark .homer-wordmark { width: 120px; }
footer .text-btn {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 0; border: 0;
  font: 400 13px/1.35 var(--h-sans); letter-spacing: 0;
}
.edit-archive { max-width: var(--h-width); padding: clamp(28px,5vw,72px) var(--h-gutter); }
.edit-archive .social-section-head { align-items: baseline; margin: 0 0 24px; flex-wrap: wrap; gap: 10px; }
.edit-archive .social-section-head h1 { font-size: clamp(44px,6vw,80px); letter-spacing: -.045em; }
.edit-archive .archive-edition { padding: 18px 0; display: grid; grid-template-columns: 140px 1fr auto; align-items: baseline; gap: 12px; border: 0; border-top: 1px solid var(--h-rule); }
.edit-archive .archive-edition time { font: 400 14px var(--h-sans); color: var(--h-muted); }
.edit-archive .archive-edition h2 { margin: 0; font-size: clamp(23px, 2.6vw, 38px); }
.edit-archive .archive-edition > span { font-size: 20px; }
#app:focus { outline: none; }
body :is(a,button,summary,select,input,textarea,[tabindex]):focus-visible { outline: 2px solid #915719; outline-offset: 3px; }
body > footer :focus-visible { outline-color: var(--h-cream); }
.social-header a:active, .social-mobile-nav a:active { color: var(--h-ink); text-decoration: underline; }
.homer-follow a:active,.daily-listen a:active { border-color: var(--h-ink); background: var(--h-cream); }
@media (min-width:761px) {
  header.luxury-header.social-header { position: sticky; top: 0; z-index: 101; }
  html:has(.luxury-header) { scroll-padding-top: calc(clamp(90px, 6.6vw, 98px) + 16px); }
  .luxury-header ~ #app :is(a,button,input,select,textarea,[tabindex]) { scroll-margin-top: 114px; }
}
@media (hover:hover) {
  .social-header .main-navigation a:hover, footer .text-btn:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
  .edit-home .homer-follow a:hover, .homer-follow a:hover, .daily-listen a:hover { background: #eeeade; color: var(--h-ink); border-color: var(--h-ink); text-decoration: none; }
  .edit-archive .archive-edition:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
@media (max-width:760px) {
  :root { --mast-height: calc(76px + env(safe-area-inset-top)); --mast-logo-width: 144px; }
  body { padding-top: var(--mast-height); }
  html { scroll-padding-top: var(--mast-height); }
  #app { scroll-margin-top: var(--mast-height); }
  #app :is(a,button,input,select,textarea,[tabindex]) { scroll-margin-top: calc(var(--mast-height) + 16px); }
  header.luxury-header.social-header {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 101;
    width: calc(var(--mast-logo-width) + var(--h-gutter));
    height: var(--mast-height);
    padding: env(safe-area-inset-top) 0 0 var(--h-gutter);
    justify-content: flex-start;
  }
  .social-header .header-wordmark { padding: 12px; }
  .social-header .header-wordmark .homer-wordmark { width: 120px; }
  .social-mobile-nav {
    height: var(--mast-height);
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 calc(var(--mast-logo-width) + var(--h-gutter) + 5px);
    background: var(--h-paper);
    border-color: var(--h-rule);
  }
  .social-mobile-nav a { justify-content: center; font-size: clamp(12px,3vw,14px); min-width: 0; align-self: center; }
  .edit-home .edit-drive-scene { grid-template-columns: 1fr; }
  .edit-drive-scene .drive-invitation { display: grid; grid-template-columns: minmax(0,1fr) auto; padding: 16px; gap: 4px 10px; }
  .edit-home .edit-drive-scene h2 { font-size: clamp(30px,6.5vw,43px); }
  .drive-invitation p { margin: 0; font-size: 12px; line-height: 1.4; }
  .edit-home .drive-invitation .btn { grid-column: 2; grid-row: 1 / 3; align-self: center; gap: 8px; }
  .edit-drive-scene .drive-art { grid-row: 1; object-fit: cover; aspect-ratio: 3/1; height: 100%; min-height: 0; }
  footer .footer-wordmark { flex-basis: 100%; }
  .edit-archive .archive-edition { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .edit-archive .archive-edition time { grid-column: 1/-1; }
}
@media(max-width:380px) {
  :root { --mast-logo-width: 64px; }
  .social-header .header-wordmark .homer-wordmark { width: 40px; height: 40px; }
  .edit-drive-scene .drive-invitation { grid-template-columns: 1fr; }
  .edit-home .drive-invitation .btn { grid-column: auto; grid-row: auto; margin-top: 6px; justify-self: start; }
}
@media(prefers-reduced-motion:reduce) {
  .social-mobile-nav *, .homer-follow *, .daily-listen *, .edit-drive-scene * { transition: none !important; }
}