:root {
  color-scheme: light;
  --ink: #20221e;
  --paper: #fbfaf7;
  --gold: #dfb35a;
  --muted: #55554a;
  --wash: #f0eee7;
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

:root.public-site {
  color-scheme: dark;
  --paper: #15171a;
  --ink: #efefeb;
  --muted: #afb2b7;
  --wash: #23262a;
  --gold: #dec68a;
  --line: #3d4147;
  --surface: #1b1e22;
  --field-border: #737982;
  --button-ink: #18191b;
  --foil: linear-gradient(125deg, #a6834e 0%, #e3c682 30%, #f9edc4 48%, #c7bdd5 59%, #e2c482 75%, #ab8752 100%);
  --hexagon: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
a { color: inherit; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: .13em; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
p, h1, h2 { margin: 0; }
input, textarea, select, button { font: inherit; }
.site-width { width: min(100% - 48px, 1120px); margin-inline: auto; }
.shell, .reading { width: min(100% - 48px, 710px); margin-inline: auto; }
.skip { position: absolute; inset: 8px auto auto 8px; padding: 8px 12px; background: var(--paper); color: var(--ink); transform: translateY(-150%); z-index: 2; }
.skip:focus { transform: none; }

.masthead { background: var(--ink); color: var(--paper); }
.masthead-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.masthead-inner { min-height: 66px; }
.masthead-inner.with-ribbon { display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); gap: 12px; }
.with-ribbon .wordmark { grid-column: 2; }
.employee-icon {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: inherit;
}
.employee-icon:hover { background: var(--wash); }
.wordmark { display: block; flex: none; inline-size: 172px; text-decoration: none; }
.wordmark svg { display: block; width: 100%; height: auto; color: var(--paper); }
.masthead nav a { text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .3em; }
nav a { font-size: .94rem; }
.public-site .masthead {
  background: #17191c;
  color: var(--ink);
}
.public-site main { position: relative; isolation: isolate; }
.public-site main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/hex-grid.svg") center top / 54px 94px;
  mask-image: radial-gradient(ellipse 82% 94% at 50% 36%, transparent 40%, #000 100%);
}
.public-site .wordmark svg { color: currentColor; }

.library-toggle { grid-column: 1; justify-self: start; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; color: inherit; border: 0; cursor: pointer; }
.library-toggle:hover, .library-toggle[aria-expanded="true"] { background: var(--wash); color: var(--ink); }
.public-site .library-toggle { position: relative; isolation: isolate; background: transparent; }
.public-site .library-toggle::before {
  content: "";
  position: absolute;
  inset: 5px 3px;
  z-index: -1;
  background: var(--line);
  clip-path: var(--hexagon);
}
.public-site .library-toggle:is(:hover, [aria-expanded="true"])::before { background: var(--wash); }
.library-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 390px;
  padding-block: 2px 6px;
}
.public-site .library-ribbon {
  max-width: none;
  width: 100%;
  padding-inline: max(18px, calc((100% - 390px) / 2));
  background: #101113;
}
.masthead .library-ribbon a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  color: inherit;
  font-weight: 650;
  text-decoration: none;
}
.library-ribbon a + a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 14px;
  border-inline-start: 1px solid var(--line);
}
.masthead .library-ribbon a:hover,
.masthead .library-ribbon a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.collection-search { display: block; max-width: 480px; margin-top: 20px; }
.collection-message { margin-top: 16px; color: var(--muted); }
.collection-message:empty, .collection-results:empty { display: none; }

.reading, .contact { padding-block: clamp(40px, 6vw, 78px); }
h1, h2, .guide-list h3 { font-weight: 700; }
h1 { font-size: clamp(2.25rem, 5vw, 3.65rem); line-height: 1.1; }
h2 { line-height: 1.17; }
.dek { margin-top: 18px; color: var(--muted); font-size: clamp(1.06rem, 2vw, 1.23rem); max-width: 54ch; }

.library h1 { font-size: clamp(2rem, 4.8vw, 3.1rem); }
.library .guide-list { margin-top: 32px; gap: 22px; }
.library .guide-list h2 { font-size: 1.22rem; line-height: 1.3; }
.guide-page { padding-block: clamp(24px, 3.4vw, 42px) clamp(46px, 6vw, 76px); }
.wide-cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; object-position: center 39%; margin-bottom: clamp(24px, 4vw, 42px); }
.story-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: start; gap: clamp(30px, 6vw, 78px); }
.guide-article h1 { font-size: clamp(2rem, 4.3vw, 3.3rem); line-height: 1.1; }
.guide-index > h2 { font-size: 1.3rem; }
.guide-list { padding: 0; margin: 16px 0 0; list-style: none; display: grid; gap: 19px; overflow-wrap: anywhere; }
.guide-list h3 { margin: 0; font-size: 1.09rem; line-height: 1.3; }
.guide-list a { text-decoration-thickness: 1px; text-decoration-color: var(--gold); }
.guide-list a:hover { text-decoration-color: currentColor; }
.guide-list p { margin-top: 5px; color: var(--muted); font-size: .93rem; }
.guide-list .guide-byline { margin-top: 4px; font-size: .86rem; }

.guide-article { overflow-wrap: anywhere; }
.guide-page .guide-index { margin-top: 42px; }
.back-link { display: inline-block; margin-bottom: 18px; font-size: .93rem; }
.reviewed { margin-top: 16px; color: var(--muted); font-size: .91rem; }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 14px; }
.guide-meta .reviewed { margin-top: 0; }
.guide-bookmark { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: .91rem; }
.guide-bookmark svg { fill: none; }
.guide-bookmark[data-saved="true"] svg { fill: var(--gold); }
.guide-bookmark:hover { text-decoration: underline; }
.article-body { margin-top: 28px; max-width: 68ch; font-size: 1.06rem; line-height: 1.7; }
.article-body h2 { margin: 26px 0 9px; font-size: clamp(1.36rem, 2.8vw, 1.7rem); }
.article-body p { margin-bottom: 16px; }
.article-body ul { margin: 0 0 18px; padding-inline-start: 24px; }
.article-body li + li { margin-top: 4px; }
.article-contact { margin-top: 36px; }
.article-contact h2 { font-size: 1.35rem; margin-bottom: 12px; }

.journal-home .masthead-inner {
  min-height: 98px;
}
.journal-home .wordmark { inline-size: clamp(174px, 22vw, 240px); }
.journal-front { padding-block: clamp(30px, 5vw, 62px) clamp(42px, 6vw, 76px); }
.journal-intro h1 { font: 700 clamp(2.4rem, 5.5vw, 3.65rem)/1.08 Georgia, Cambria, serif; text-wrap: balance; }
.journal-intro .dek { margin-top: 17px; max-width: 55ch; font-size: 1.05rem; }
.journal-intro .dek::before {
  content: "";
  display: block;
  width: 38px;
  height: 1px;
  margin-bottom: 13px;
  background: var(--gold);
}
.journal-edition { margin-top: clamp(28px, 4vw, 46px); padding-top: 16px; border-top: 1px solid var(--line); }
.journal-edition > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  font: 700 1.65rem/1.15 Georgia, Cambria, serif;
}
.journal-edition > h2::before {
  content: "";
  width: 17px;
  height: 15px;
  flex: none;
  background: var(--foil);
  clip-path: var(--hexagon);
}
.journal-stories { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; gap: clamp(14px, 2vw, 24px); }
.story-card {
  display: block;
  background: #24272b;
  text-decoration: none;
  transition: transform .18s ease-out, background-color .18s ease-out;
}
.story-card:focus-visible { background: #30343a; transform: translateY(-3px); }
@media (hover: hover) {
  .story-card:hover { background: #30343a; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .story-card, .story-card:hover, .story-card:focus-visible { transition: none; transform: none; }
}
.story-copy { padding: 16px; }
.journal-feature .story-copy { padding: clamp(18px, 3vw, 28px); }
.journal-feature .wide-cover { aspect-ratio: 2.25 / 1; margin: 0; }
.journal-stories h3 { margin: 0; font: 700 1.42rem/1.18 Georgia, Cambria, serif; }
.journal-feature h3 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.journal-stories p { margin-top: 7px; color: var(--muted); }
.journal-index { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.journal-index .story-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
.journal-index .wide-cover { width: 100%; height: 100%; min-height: 105px; margin: 0; aspect-ratio: auto; }
.journal-index h3 { font-size: 1.16rem; }
.journal-index p { font-size: .95rem; }

.footer { padding-block: 21px 30px; color: var(--muted); background: var(--wash); }
.footer-inner { justify-content: flex-start; font-size: .9rem; }
.footer img { width: 87px; height: auto; }

.contact-inner { width: min(100% - 48px, 960px); display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 7vw, 90px); }
.contact h2 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
.contact-copy p { margin-top: 14px; color: var(--muted); }
form { display: grid; gap: 15px; max-width: 480px; }
fieldset { padding: 0; border: 0; margin: 0; }
legend { padding: 0; font-weight: 700; }
label { display: block; font-weight: 650; }
.choice { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.choice input { accent-color: var(--ink); }
input:not([type=checkbox]), textarea, select { display: block; width: 100%; min-width: 0; padding: 10px 11px; margin-top: 5px; border: 1px solid var(--muted); border-radius: 0; background: #fff; color: var(--ink); }
.public-site :is(input:not([type=checkbox]), textarea, select) {
  background: var(--surface);
  border-color: var(--field-border);
}
textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.button { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: 0; background: var(--gold); color: var(--button-ink, var(--ink)); text-decoration: none; font-weight: 700; cursor: pointer; }
.button:hover { text-decoration: underline; }
.button:disabled { cursor: default; background: var(--wash); color: var(--muted); text-decoration: none; }
.optional, .form-hint, #employee-status { font-size: .93rem; color: var(--muted); font-weight: 400; }
.form-error { font-weight: 700; }
.sign-in form { margin-top: 22px; max-width: 380px; }
#retry-availability { margin-top: 18px; }
#employee-status { margin-top: 16px; }
.text-button { width: fit-content; padding: 0; background: transparent; color: inherit; border: 0; text-decoration: underline; cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.editor-desk { width: min(100% - 48px, 1120px); padding-top: clamp(30px, 5vw, 54px); }
.desk-header, .shelf-heading, .writing-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.desk-header h1 { font-size: clamp(2.3rem, 5vw, 3.45rem); }
.desk-header nav, .writing-modes, .editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.desk-header button { font-size: .94rem; }
.editor-desk #employee-status:empty { display: none; }
.profile-form { margin-top: 32px; max-width: 360px; }
.profile-form h2 { font-size: 1.65rem; }
#profile-status:empty { display: none; }
.homepage-settings { margin-top: 18px; max-width: 460px; }
.homepage-settings summary { width: fit-content; cursor: pointer; font-weight: 650; }
.homepage-settings form { margin-top: 12px; }
#feature-status:empty { display: none; }
.desk-layout { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: clamp(26px, 6vw, 70px); margin-top: 32px; }
.shelf-heading { margin-bottom: 10px; }
.shelf-heading h2 { font-size: 1.32rem; }
.shelf-heading button { font-size: .93rem; white-space: nowrap; }
.article-shelf select { margin-top: 8px; }
.article-rows { list-style: none; margin: 12px 0 0; padding: 0; }
.article-row { width: 100%; display: grid; gap: 2px; text-align: left; color: inherit; background: transparent; border: 0; border-inline-start: 3px solid transparent; padding: 10px 9px; cursor: pointer; overflow-wrap: anywhere; }
.article-row:hover > :first-child { text-decoration: underline; }
.article-row[aria-current="true"] { background: var(--wash); border-inline-start-color: var(--gold); font-weight: 700; }
.article-work form { max-width: none; gap: 11px; }
.article-work details summary { cursor: pointer; width: fit-content; }
.article-work details > label, #editor-byline, #download-article { margin-top: 12px; }
.writing-header { margin-top: 5px; }
.writing-modes button[aria-pressed="true"] { font-weight: 720; text-decoration: none; }
.article-work textarea { font-weight: 400; }
#article-writing textarea { margin-top: 0; min-height: 260px; }
#markdown-help { margin-top: 5px; }
.editor-preview { background: #fff; margin: 0; padding: clamp(18px, 4vw, 30px); max-width: none; min-height: 260px; overflow-wrap: anywhere; }
.editor-preview > h2:first-child { margin-top: 0; }
.editor-preview .reviewed { margin-bottom: 18px; font-family: system-ui, sans-serif; }
.editor-actions { gap: 10px 16px; }
#word-count { margin-inline-start: auto; }
.publish-button { background: var(--ink); color: var(--paper); }
#editor-status:empty { display: none; }
.cover-control, .photo-heading, .photo-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cover-control img { width: 70px; height: 42px; object-fit: cover; }
#photo-library {
  width: min(720px, 100% - 32px);
  max-height: min(720px, 100% - 32px);
  padding: clamp(16px, 4vw, 26px);
  border: 0;
  background: var(--paper);
  color: var(--ink);
}
#photo-library::backdrop { background: #17191cbb; }
.photo-heading { justify-content: space-between; margin-bottom: 16px; }
.photo-filters { align-items: end; margin-bottom: 12px; }
.photo-filters label:first-child { flex: 1 1 210px; }
.photo-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: 14px; padding: 0; list-style: none; }
.photo-choice { width: 100%; padding: 0; border: 0; color: inherit; background: var(--wash); text-align: start; cursor: pointer; }
.photo-choice[aria-pressed="true"] { outline: 2px solid currentColor; }
.photo-choice img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.photo-choice span { display: block; padding: 8px; font-size: .86rem; line-height: 1.3; overflow-wrap: anywhere; }
.photo-source { font-size: .82rem; }
.editor-preview .wide-cover { aspect-ratio: 16 / 6; margin-bottom: 16px; }
@media (max-width: 680px) {
  .desk-layout, .contact-inner, .story-grid, .journal-stories { grid-template-columns: minmax(0, 1fr); }
  .journal-home .masthead-inner { min-height: 72px; }
  .masthead-inner.with-ribbon .wordmark { inline-size: clamp(144px, 44vw, 196px); }
  .journal-feature .wide-cover { aspect-ratio: 16 / 9; }
  .wide-cover { aspect-ratio: 16 / 9; }
  .guide-page .guide-index { margin-top: 0; }
  .desk-header { align-items: flex-start; flex-direction: column; }
  .article-shelf { max-width: 460px; }
  .article-rows { max-height: 210px; overflow: auto; }
}
@media (max-width: 440px) {
  .site-width, .editor-desk, .shell, .reading, .contact-inner { width: calc(100% - 36px); }
  .masthead .wordmark { inline-size: min(46vw, 180px); }
  .form-grid { grid-template-columns: 1fr; }
}