:root {
  color-scheme: light;
  --ink: #171616;
  --paper: #f5f2eb;
  --signal: #db254e;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
}

main {
  min-height: 100vh;
  display: grid;
  align-content: space-between;
  padding: clamp(1.5rem, 4vw, 4.5rem);
}

.wordmark {
  display: block;
  width: fit-content;
  margin: 0;
  line-height: 0;
  text-decoration: none;
}

.wordmark img {
  display: block;
  width: clamp(7rem, 10vw, 8.5rem);
  height: auto;
}

h1 {
  max-width: 12ch;
  margin: clamp(7rem, 24vh, 15rem) 0 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-size: clamp(3.25rem, 9vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .88;
}

.rule {
  width: min(9rem, 24vw);
  height: 2px;
  margin-top: clamp(2rem, 6vh, 5rem);
  background: var(--signal);
}

.access { max-width: 38rem; }

.eyebrow {
  margin: 0 0 1rem;
  color: var(--signal);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.access h1 { margin-top: 0; }

.lede {
  max-width: 34rem;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.6;
}

form:not(.logout) { max-width: 27rem; }

label {
  display: block;
  margin-bottom: .55rem;
  font-size: .8rem;
  font-weight: 700;
}

input[type="password"],
input[type="search"],
input[type="text"],
input:not([type]),
select,
textarea {
  width: 100%;
  min-height: 3rem;
  border: 1px solid color-mix(in srgb, var(--ink) 38%, transparent);
  border-radius: 0;
  padding: .75rem;
  color: var(--ink);
  background: transparent;
  font: inherit;
}

textarea { resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1rem) 1.25rem, calc(100% - .7rem) 1.25rem; background-repeat: no-repeat; background-size: .3rem .3rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--signal) 72%, transparent); outline-offset: 3px; }

button {
  min-height: 2.8rem;
  margin-top: 1rem;
  border: 0;
  padding: .7rem 1.1rem;
  color: white;
  background: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.form-error { color: #a31334; font-weight: 650; }
.text-link { color: var(--ink); text-underline-offset: .22em; }

.portal {
  max-width: 40rem;
  margin-top: clamp(2.5rem, 7vh, 6rem);
}

.portal ul { margin: 0; padding: 0; list-style: none; }
.portal li { border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.portal li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.portal a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  color: var(--ink);
  text-decoration: none;
}
.portal a:hover span { color: var(--signal); }
.portal small { color: color-mix(in srgb, var(--ink) 62%, transparent); }
.admin-link { margin: 1.2rem 0 .8rem; }
.logout { margin-top: 1rem; }
.text-button {
  min-height: auto;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.not-found-page { overflow: hidden; }
.not-found-shell {
  position: relative;
  isolation: isolate;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
}
.not-found {
  align-self: end;
  max-width: 50rem;
  padding: clamp(5rem, 14vh, 10rem) 0 1rem;
}
.not-found h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.4rem, 8vw, 8rem);
}
.not-found .lede { max-width: 32rem; }
.not-found-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.primary-link {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: .8rem 1.15rem;
  color: var(--paper);
  background: var(--ink);
  font-size: .86rem;
  font-weight: 750;
  text-decoration: none;
}
.primary-link:hover,
.primary-link:focus-visible { background: var(--signal); }
.not-found-code {
  position: absolute;
  right: -.06em;
  bottom: -.23em;
  z-index: -1;
  color: color-mix(in srgb, var(--signal) 9%, transparent);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-size: clamp(15rem, 42vw, 42rem);
  font-weight: 400;
  letter-spacing: -.1em;
  line-height: .8;
  user-select: none;
}

.admin-login-page,
.management-page { background: #f1eee6; }

.admin-login-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
}
.admin-login-panel {
  align-self: end;
  max-width: 64rem;
  padding: clamp(5rem, 13vh, 10rem) 0 1rem;
}
.admin-login-panel h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3.5rem, 8vw, 7.6rem);
}
.admin-login-panel .lede { max-width: 43rem; margin: 2rem 0 2.5rem; }
.admin-login-panel form { max-width: 31rem; }
.login-help {
  max-width: 31rem;
  margin-top: 1.25rem;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-size: .78rem;
  line-height: 1.5;
}

.management-shell {
  display: block;
  max-width: 92rem;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.management-header {
  display: grid;
  grid-template-columns: minmax(7rem, .38fr) minmax(22rem, 1.6fr) minmax(12rem, .48fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
}
.management-title h1 {
  max-width: 11ch;
  margin: 1.35rem 0 0;
  font-size: clamp(3.6rem, 7vw, 7.2rem);
}
.management-title .lede { max-width: 42rem; margin-bottom: 0; }
.version-details { margin: 0; border-top: 2px solid var(--ink); }
.version-details > summary {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: .9rem 0;
  text-decoration: none;
}
.version-details > summary::after { content: '+'; color: var(--signal); font-size: 1rem; }
.version-details[open] > summary::after { content: '−'; }
.management-state { margin: 0; }
.management-state div,
.result-state div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  padding: .75rem 0;
}
.management-state dt,
.result-state dt {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.management-state dd,
.result-state dd { margin: 0; }
code { font-family: "SFMono-Regular", Consolas, monospace; font-size: .82em; }

.management-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
}
.management-tabs a {
  position: relative;
  padding: 1.25rem 0;
  color: color-mix(in srgb, var(--ink) 56%, transparent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.management-tabs a + a { border-left: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.management-tabs a[aria-current="page"] { color: var(--ink); }
.management-tabs a[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  background: var(--signal);
  content: '';
}

.tab-panel {
  display: grid;
  grid-template-columns: minmax(16rem, .62fr) minmax(24rem, 1.55fr);
  gap: clamp(3rem, 8vw, 9rem);
  padding: clamp(3.5rem, 7vw, 7rem) 0;
}
.panel-intro { align-self: start; }
.panel-intro h2,
.recovery-panel h2 {
  max-width: 12ch;
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-size: clamp(2.7rem, 4.6vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .94;
}
.panel-intro > p:last-child,
.recovery-panel > div > p:last-child {
  max-width: 29rem;
  margin-top: 1.5rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  line-height: 1.6;
}
.policy-workspace { min-width: 0; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.policy-search { max-width: none !important; margin-bottom: 1.5rem; }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.search-row input { min-width: 0; border-right: 0; }
.search-row button { min-width: 5.5rem; margin: 0; }
.clear-search { display: inline-block; margin-top: .65rem; color: var(--ink); font-size: .74rem; text-underline-offset: .2em; }
.policy-filters {
  display: flex;
  gap: 1.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
}
.policy-filters a {
  position: relative;
  padding: 0 0 .8rem;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
}
.policy-filters a[aria-current="page"] { color: var(--ink); }
.policy-filters a[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--signal);
  content: '';
}
.policy-list { border-top: 2px solid var(--ink); }
.policy-filters + .policy-list { border-top: 0; }
.policy-row { border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); padding: 1.6rem 0; }
.policy-row > header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.policy-row h3 { margin: .2rem 0 0; font-size: 1.05rem; }
.policy-row header p:not(.policy-kind) { margin: .4rem 0 0; color: color-mix(in srgb, var(--ink) 63%, transparent); font-size: .84rem; }
.policy-kind { margin: 0; color: var(--signal); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.version-badge { color: var(--signal); font-size: .67rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
details { margin-top: 1rem; }
summary { width: fit-content; cursor: pointer; font-size: .82rem; font-weight: 750; text-decoration: underline; text-underline-offset: .2em; }
details form { margin-top: 1.3rem; padding: 1.5rem; background: color-mix(in srgb, var(--paper) 80%, #d8d1c3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.compact-grid { gap: 1rem; }
.step-up { margin-top: .5rem; border-top: 1px dashed color-mix(in srgb, var(--signal) 55%, transparent); padding-top: 1.25rem; }
.optional { color: color-mix(in srgb, var(--ink) 55%, transparent); font-weight: 450; }
.field-help { display: block; margin-top: .45rem; color: color-mix(in srgb, var(--ink) 56%, transparent); font-size: .72rem; line-height: 1.45; }
.danger-zone summary { color: #92122f; }
.danger-button { background: #92122f; }
.confirm-line { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; font-weight: 550; line-height: 1.45; }
.confirm-line input { margin-top: .25rem; }
.empty-state { padding: 3rem 0; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.empty-state h3 { margin: 0; color: var(--ink); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif; font-size: 2rem; font-weight: 400; }
.empty-state p { margin: .8rem 0 1.25rem; }
.new-access-form { max-width: none !important; }

.recovery-panel {
  display: grid;
  grid-template-columns: minmax(16rem, .62fr) minmax(24rem, 1.55fr);
  gap: clamp(3rem, 8vw, 9rem);
  border-top: 1px solid color-mix(in srgb, #92122f 38%, transparent);
  padding: clamp(3.5rem, 7vw, 7rem) 0;
}
.recovery-panel form { max-width: none; }
.recovery-target { margin: 0 0 1.5rem; color: color-mix(in srgb, var(--ink) 64%, transparent); }
.management-footer { display: flex; justify-content: space-between; gap: 2rem; border-top: 2px solid var(--ink); padding-top: 1.5rem; color: color-mix(in srgb, var(--ink) 58%, transparent); font-size: .78rem; }
.result-shell h1 { font-size: clamp(3rem, 7vw, 6rem); }
.result-state { max-width: 30rem; margin: 2rem 0; }

@media (max-width: 62rem) {
  .management-header { grid-template-columns: minmax(7rem, .35fr) minmax(20rem, 1.65fr); }
  .version-details { grid-column: 2; }
  .tab-panel,
  .recovery-panel { grid-template-columns: minmax(13rem, .6fr) minmax(20rem, 1.4fr); gap: 3rem; }
}

@media (max-width: 38rem) {
  .portal a { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .not-found { padding-bottom: 0; }
  .not-found-actions { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .not-found-code { right: -.04em; bottom: -.05em; font-size: 72vw; }
  .admin-login-shell,
  .management-shell { padding: 1.25rem; }
  .admin-login-panel { padding-bottom: .5rem; }
  .admin-login-panel h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
  .management-header { display: block; padding-bottom: 3rem; }
  .management-title { margin-top: 4rem; }
  .management-title h1 { font-size: clamp(3.25rem, 15vw, 5rem); }
  .version-details { margin-top: 2.5rem; }
  .management-tabs a { padding: 1rem .5rem; font-size: .7rem; }
  .tab-panel,
  .recovery-panel { display: block; padding: 3.25rem 0; }
  .panel-intro h2,
  .recovery-panel h2 { font-size: clamp(2.6rem, 12vw, 4rem); }
  .policy-workspace,
  .new-access-form,
  .recovery-panel form { margin-top: 3rem; }
  .policy-filters { justify-content: space-between; gap: 1rem; }
  .search-row button { min-width: 4.5rem; padding-right: .8rem; padding-left: .8rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .policy-row > header,
  .management-footer { align-items: flex-start; flex-direction: column; }
  details form { margin-right: -.5rem; margin-left: -.5rem; padding: 1.25rem .75rem; }
}