@font-face {
  font-family: "Rokkitt";
  src: url("../fonts/rokkitt-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-roman.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #0b1119;
  --night-2: #131c27;
  --felt: #6a1524;
  --felt-deep: #4a0e19;
  --paper: #e6e9ec;
  --paper-ink: #0d141c;
  --paper-soft: #46515e;
  --soft: #a9b3be;
  --chip: #9cc4e8;
  --rim: #1c2733;
  --gutter: clamp(16px, 4vw, 56px);
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --show: "Rokkitt", "Rockwell", "Roboto Slab", Georgia, serif;
  --text: "Literata", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--text);
  font-size: var(--step-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
a:not(.ome-btn):not(.ome-nav-apply):not(.ome-skip):hover { color: var(--chip); }
:focus-visible { outline: 3px solid var(--chip); outline-offset: 3px; }
.ome-paper :focus-visible { outline-color: var(--felt); }
p { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3 { margin: 0; font-family: var(--show); font-weight: 800; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.005em; }
ul, ol { margin: 0; padding: 0; }
.ome-skip { position: absolute; left: -999px; top: 8px; background: var(--chip); color: var(--night); padding: 10px 14px; z-index: 20; }
.ome-skip:focus { left: 8px; }

/* bar */
.ome-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--rim);
}
.ome-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--show);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1;
}
.ome-mark svg { width: 34px; height: 34px; flex: none; }
.ome-nav { display: none; }
.ome-nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; align-items: center; }
.ome-nav a { text-decoration: none; font-size: 0.95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.ome-nav a:hover, .ome-nav a[aria-current] { border-bottom-color: var(--chip); color: var(--paper); }
.ome-nav .ome-nav-apply { background: var(--chip); color: var(--night); padding: 9px 16px; border: 0; font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; }
.ome-nav .ome-nav-apply:hover, .ome-nav .ome-nav-apply[aria-current] { background: var(--chip); color: var(--night); }
.ome-nav .ome-nav-apply:hover { background: var(--paper); }
.ome-menu { position: relative; }
.ome-menu summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--show);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.15rem;
  padding: 8px 14px;
  background: var(--paper);
  color: var(--paper-ink);
}
.ome-menu summary::-webkit-details-marker { display: none; }
.ome-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(78vw, 300px);
  background: var(--paper);
  color: var(--paper-ink);
  list-style: none;
  z-index: 10;
  padding: 8px 0;
}
.ome-menu li a { display: block; padding: 11px 18px; text-decoration: none; }
.ome-menu li a:hover, .ome-menu li a[aria-current] { background: var(--felt); color: var(--paper); }
@media (min-width: 1020px) {
  .ome-nav { display: block; }
  .ome-menu { display: none; }
}

/* common fields */
.ome-wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.ome-field { padding: clamp(56px, 9vw, 120px) var(--gutter); }
.ome-felt { background: var(--felt); color: var(--paper); }
.ome-felt a:not(.ome-btn):not(.ome-nav-apply):not(.ome-skip):hover { color: var(--chip); }
.ome-paper { background: var(--paper); color: var(--paper-ink); }
.ome-paper a:not(.ome-btn):hover { color: var(--felt); }
.ome-paper .ome-quiet { color: var(--paper-soft); }
.ome-quiet { color: var(--soft); }
.ome-btn {
  display: inline-block;
  background: var(--chip);
  color: var(--night);
  font-family: var(--show);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 15px 28px 14px;
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.ome-btn:hover { background: var(--paper); color: var(--night); }
.ome-paper .ome-btn, .ome-card .ome-btn { background: var(--night); color: var(--paper); }
.ome-paper .ome-btn:hover, .ome-card .ome-btn:hover { background: var(--felt); color: var(--paper); }
.ome-h2 { font-size: var(--step-head); margin-bottom: 0.45em; }
.ome-h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.4em; }
.ome-lead { font-size: var(--step-lead); line-height: 1.45; max-width: 36ch; }

/* hero */
.ome-hero { display: grid; gap: 28px; padding: clamp(28px, 5vw, 64px) var(--gutter) clamp(36px, 5vw, 72px); align-items: center; }
.ome-where { font-size: var(--step-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); margin-bottom: 18px; max-width: none; }
.ome-hero h1 { font-size: clamp(3rem, 12vw, 4.6rem); margin-bottom: 0.3em; }
.ome-hero .ome-lead { margin-bottom: 1.2em; }
.ome-table { width: 100%; height: auto; }
.ome-felt-fill { fill: var(--felt); }
.ome-felt-edge { fill: none; stroke: var(--rim); stroke-width: 18; }
.ome-rail { fill: #1a232e; }
.ome-line { fill: none; stroke: rgba(230, 233, 236, 0.5); stroke-width: 2.5; }
.ome-arc-text { font-family: var(--show); font-weight: 800; font-size: 30px; letter-spacing: 0.2em; fill: rgba(230, 233, 236, 0.78); text-transform: uppercase; }
.ome-spot circle { fill: rgba(11, 17, 25, 0.35); stroke: var(--paper); stroke-width: 3; transition: fill 0.2s, stroke 0.2s; }
.ome-spot text { font-family: var(--show); font-weight: 800; fill: var(--paper); text-anchor: middle; pointer-events: none; }
.ome-spot .ome-spot-n { font-size: 58px; }
.ome-spot .ome-spot-name { font-family: var(--text); font-weight: 600; font-size: 22px; fill: var(--paper); display: none; }
.ome-spot:hover circle, .ome-spot.is-on circle { fill: var(--chip); stroke: var(--chip); }
.ome-spot:hover .ome-spot-n, .ome-spot.is-on .ome-spot-n { fill: var(--night); }
.ome-spot:focus-visible { outline: none; }
.ome-spot:focus-visible circle { stroke: var(--chip); stroke-width: 8; }
.ome-chipdrop { animation: ome-drop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; transform-box: fill-box; transform-origin: center; }
@keyframes ome-drop {
  from { opacity: 0; transform: translateY(-34px) scale(1.18); }
  to { opacity: 1; transform: none; }
}
.ome-spotbox { margin-top: 18px; border-top: 4px dotted var(--rim); padding-top: 16px; min-height: 8.5rem; }
.ome-spotbox h2 { font-size: 1.7rem; margin-bottom: 0.35em; }
.ome-spotbox p { font-size: 1rem; margin-bottom: 0.5em; }
@media (min-width: 720px) {
  .ome-spot .ome-spot-name { display: block; }
}
@media (min-width: 1020px) {
  .ome-hero { grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 72px); }
  .ome-hero h1 { font-size: clamp(3.4rem, 6vw, 6rem); }
}

/* facts row */
.ome-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; list-style: none; }
.ome-facts b { display: block; font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem); line-height: 0.95; margin-bottom: 8px; }
.ome-facts span { font-size: 0.95rem; display: block; max-width: 28ch; }
@media (min-width: 900px) {
  .ome-facts { display: flex; justify-content: space-between; gap: 32px; }
}

/* split intro */
.ome-split { display: grid; gap: 32px; }
.ome-split .ome-h2 { max-width: 12ch; }
@media (min-width: 900px) {
  .ome-split { grid-template-columns: 6fr 3fr; gap: 0 12%; align-items: end; }
}
.ome-plate { margin: 0; }
.ome-plate img { width: 100%; }
.ome-plate figcaption { font-size: var(--step-small); margin-top: 10px; color: var(--soft); }
.ome-paper .ome-plate figcaption { color: var(--paper-soft); }

/* reply card */
.ome-reply { overflow: hidden; padding-bottom: 0; display: grid; gap: 32px; }
.ome-reply > p { font-size: var(--step-lead); line-height: 1.4; max-width: 28ch; }
.ome-card {
  background: var(--paper);
  color: var(--paper-ink);
  padding: clamp(24px, 4vw, 48px);
  text-align: center;
  transform: rotate(-1.5deg);
  margin-bottom: -50px;
  padding-bottom: 80px;
  width: min(100%, 560px);
  justify-self: center;
}
.ome-card h2 { font-size: 2rem; margin-bottom: 0.4em; }
.ome-card p { margin-inline: auto; font-size: 1.0625rem; }
.ome-card .ome-btn { display: block; width: 100%; padding-block: 20px; }
@media (min-width: 900px) {
  .ome-reply { grid-template-columns: 5fr 7fr; align-items: end; }
  .ome-reply > p { margin-bottom: 64px; }
  .ome-card { transform: rotate(2deg); justify-self: end; margin-bottom: -70px; padding-bottom: 100px; }
}

/* page head (inner pages) */
.ome-pagehead { padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(28px, 4vw, 48px); }
.ome-pagehead h1 { font-size: clamp(2.6rem, 8.5vw, 6.2rem); max-width: 22ch; margin-bottom: 0.3em; }
.ome-pagehead .ome-lead { margin-bottom: 0; }

/* module bars */
.ome-bars { list-style: none; display: grid; gap: 6px; max-width: 820px; }
.ome-bars details { background: var(--night-2); color: var(--paper); }
.ome-bars summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
}
.ome-bars summary::-webkit-details-marker { display: none; }
.ome-bars summary .ome-no { font-family: var(--show); font-weight: 800; font-size: 1.9rem; color: var(--chip); min-width: 1.2em; }
.ome-bars summary::after { content: "+"; margin-left: auto; font-family: var(--show); font-weight: 800; font-size: 1.8rem; }
.ome-bars details[open] summary::after { content: "\2212"; }
.ome-bars details > div { padding: 4px 18px 22px calc(18px + 1.2em + 16px); }
.ome-bars details p { margin-bottom: 0.7em; }
.ome-bars .ome-sess { color: var(--soft); font-size: 0.95rem; margin-bottom: 0; }
@media (max-width: 560px) {
  .ome-bars details > div { padding-left: 18px; }
}

/* slip */
.ome-howgrid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .ome-howgrid { grid-template-columns: 5fr 6fr; gap: 0 8%; align-items: start; }
}
.ome-slip { background: var(--paper); color: var(--paper-ink); width: 100%; max-width: 480px; padding: 26px 24px 18px; position: relative; justify-self: end; font-variant-numeric: tabular-nums; }
.ome-slip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px;
  background: conic-gradient(from -45deg at bottom, var(--paper) 90deg, transparent 0) 0 0 / 18px 12px repeat-x;
}
.ome-slip h3 { font-family: var(--text); font-weight: 600; text-transform: none; font-size: 1.05rem; line-height: 1.3; margin: 26px 0 6px; }
.ome-slip h3:first-child { margin-top: 0; }
.ome-slip ul { list-style: none; }
.ome-slip li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 1rem; }
.ome-slip li i { flex: 1; border-bottom: 4px dotted #9aa5b0; transform: translateY(-4px); min-width: 12px; }
.ome-slip li b { font-weight: 400; white-space: nowrap; }
.ome-slip .ome-total { margin: 24px -24px 0; background: var(--night); color: var(--paper); padding: 12px 24px; display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }

/* text blocks */
.ome-prose { max-width: 640px; }
.ome-prose h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin: 1.6em 0 0.5em; }
.ome-prose h2:first-child { margin-top: 0; }
.ome-prose h3 { font-family: var(--text); text-transform: none; font-weight: 600; font-size: 1.15rem; line-height: 1.3; margin: 1.6em 0 0.4em; letter-spacing: 0; }
.ome-prose ul { padding-left: 1.2em; margin-bottom: 1em; }
.ome-prose li { margin-bottom: 0.45em; max-width: 58ch; }
.ome-prose dl { margin: 0 0 1em; }
.ome-prose dt { font-weight: 600; margin-top: 1em; }
.ome-prose dd { margin: 0; }
.ome-twocol { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .ome-twocol { grid-template-columns: 4fr 7fr; gap: 0 6%; align-items: start; }
}
.ome-ledger { list-style: none; }
.ome-ledger li { display: grid; gap: 4px 24px; padding: 18px 0; border-top: 1px solid var(--soft); }
.ome-paper .ome-ledger li { border-top-color: #9aa5b0; }
.ome-ledger li:last-child { border-bottom: 1px solid #9aa5b0; }
.ome-ledger strong { font-family: var(--show); text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
@media (min-width: 720px) {
  .ome-ledger li { grid-template-columns: 220px 1fr; }
  .ome-ledger.ome-stack li { grid-template-columns: 1fr; }
}
.ome-ledger span { max-width: 56ch; }

/* faq as reading text */
.ome-faq { columns: 1; column-gap: 56px; }
.ome-faq p { break-inside: avoid; margin-bottom: 20px; max-width: none; line-height: 1.55; }
.ome-faq strong { font-weight: 600; }
@media (min-width: 900px) {
  .ome-faq { columns: 2; }
}

/* form */
.ome-form { display: grid; gap: 20px; max-width: 640px; }
.ome-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.ome-form input[type="text"], .ome-form input[type="email"], .ome-form input[type="tel"], .ome-form textarea {
  width: 100%;
  font: inherit;
  color: var(--paper-ink);
  background: #fff;
  border: 2px solid #8f9ba7;
  padding: 12px 14px;
  border-radius: 0;
}
.ome-form textarea { min-height: 140px; resize: vertical; }
.ome-form input:focus, .ome-form textarea:focus { border-color: var(--felt); outline: 3px solid rgba(106, 21, 36, 0.3); }
.ome-form .ome-hint { font-size: var(--step-small); color: var(--paper-soft); margin: 6px 0 0; }
.ome-form .ome-opt { font-weight: 400; color: var(--paper-soft); }
.ome-form .ome-check { display: flex; gap: 12px; align-items: flex-start; }
.ome-form .ome-check input { width: 22px; height: 22px; margin-top: 4px; flex: none; accent-color: var(--felt); }
.ome-form .ome-check label { font-weight: 400; margin: 0; }
.ome-form [aria-invalid="true"] { border-color: #a3162f; background: #fff3f4; }
.ome-err { color: #8a1026; font-weight: 600; margin: 6px 0 0; font-size: 1rem; }
.ome-errbox { background: #fff3f4; border-left: 6px solid #a3162f; color: #5b0a18; padding: 16px 20px; max-width: 640px; margin-bottom: 28px; }
.ome-errbox p { margin: 0 0 6px; }
.ome-errbox ul { padding-left: 1.2em; margin: 0; }
.ome-away { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ome-form .ome-btn { justify-self: start; }

/* footer */
.ome-back { background: var(--night); padding: 0 var(--gutter) 28px; }
.ome-back-panel {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  margin: 0 auto;
  max-width: 1100px;
  padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 56px) 26px;
}
.ome-back-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 25px;
  background: radial-gradient(circle at 25px 0, var(--night) 24px, transparent 25px) 0 0 / 50px 25px repeat-x;
}
.ome-back-grid { display: grid; gap: 32px; }
@media (min-width: 800px) {
  .ome-back-grid { grid-template-columns: 1fr 1fr; gap: 0 48px; }
}
.ome-back h2 { font-size: 2rem; margin-bottom: 0.35em; }
.ome-back p { font-size: 1rem; line-height: 1.55; }
.ome-back ul { list-style: none; }
.ome-back li { padding: 5px 0; }
.ome-back a { text-decoration-thickness: 1px; }
.ome-back-panel a:not(.ome-btn):hover { color: var(--felt); }
.ome-back .ome-fine { margin: 28px 0 0; padding-top: 16px; border-top: 4px dotted #9aa5b0; font-size: var(--step-small); max-width: none; color: var(--paper-soft); }

/* motion */
@media (prefers-reduced-motion: reduce) {
  .ome-chipdrop { animation: none; }
  html { scroll-behavior: auto; }
}
.ome-field.ome-tight { padding-top: 0; }