/* Honolulu Yacht Management — v2, the captain's logbook.
   One serif (Literata, variable, real optical sizes) speaks; one mono
   (IBM Plex Mono) carries prices, labels and checklists; hairline rules
   on one paper tone do the structure. No cards, no bands, no shadows,
   no radius. Vocabulary: CLAUDE.md. Contracts: ops/CONTRACTS.md. */

/* ---------- Faces (self-hosted woff2, latin subset incl. ʻokina U+02BB) ---------- */

@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-latin-var.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-latin-italic-var.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  --ink: #152A3D;            /* navy ink: text, headings, buttons, footer */
  --ink-soft: #46586B;       /* secondary text — 6.61:1 on paper */
  --paper: #F7F3EB;          /* the one paper tone */
  --line: rgba(21, 42, 61, 0.2); /* hairline rules: ink at 20% */
  --accent: #7E5C1F;         /* brass — link underlines, mono prices, focus rings ONLY. 5.52:1 on paper */
  --white: #FFFFFF;          /* text on navy — 14.68:1 */
  --tint: #C8D2DC;           /* ink-hued footer secondary text — 9.58:1 on ink (CONTRACTS §13) */
  --tint-deep: #A9B8C6;      /* darker sibling, footer column heads — 7.24:1 on ink */

  --font-serif: "Literata", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: 1.1875rem;        /* 19px / 1.5 on a 66ch measure */
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* One serif weight ships (400): hierarchy is optical size, scale, italic,
   mono caps and rules — never boldface. Prevent faux bold everywhere. */
h1, h2, h3, th, strong, b {
  font-weight: 400;
}
strong, b { font-style: italic; }

h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2.625rem, 7vw, 4.5rem); line-height: 0.98; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.04; letter-spacing: -0.012em; }
h3 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: 0; }

p { max-width: 66ch; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: var(--ink); }

em, i, .standfirst { font-style: italic; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.footer :focus-visible { outline-color: var(--white); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--ink);
  color: var(--white);
  padding: var(--s3) var(--s5);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (max-width: 480px) {
  .container { padding-inline: var(--s4); }
}

.section { padding-block: var(--s8); }
@media (min-width: 720px) {
  .section { padding-block: var(--s9); }
}

/* Hairline rule — the section separator. Rhythm is whitespace + rules. */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* 12-column grid. Headlines may hang left of the prose column (.hang);
   everything after the hang sits in a 7-column measure. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s5);
  row-gap: var(--s5);
}
.grid > * { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .grid > .hang { grid-column: 1 / span 4; }
  .grid > .hang ~ * { grid-column: 6 / span 7; }
  .grid > .col-full { grid-column: 1 / -1; }
}

.measure { max-width: 66ch; }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ---------- Type furniture ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s4);
}

.fine { font-size: 0.875rem; color: var(--ink-soft); }

.lede { font-size: 1.3125rem; line-height: 1.45; }

/* ---------- Buttons and links ---------- */

/* THE button. One style: filled navy, square, typed label. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s2) var(--s5);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 84%, var(--white)); }
/* On the navy footer the one button inverts to paper. Still one style. */
.footer .btn { background: var(--paper); color: var(--ink); }
.footer .btn:hover { background: var(--white); }

/* Secondary action: underlined text with a CSS-drawn arrow (never in HTML). */
.link-arrow {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  min-height: 44px;
  padding-block: calc((44px - 1.5em) / 2);
}
.link-arrow::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.4em;
}

/* ---------- Header ---------- */

.header { border-bottom: 1px solid var(--line); }

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s5);
  padding-block: var(--s4);
}

.brand {
  font-size: 1.1875rem;
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-decoration: none;
}
.brand:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); order: 3; width: 100%; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  text-decoration: none;
}
.nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }

.header-cta { order: 4; }

@media (min-width: 1020px) {
  .header-row { flex-wrap: nowrap; }
  .nav { order: 0; width: auto; margin-left: var(--s6); }
  .header-cta { order: 0; margin-left: auto; }
}

/* ≤480: the nav is one row, never an orphaned wrap line (CONTRACTS §20).
   Same serif, same 44px targets; the gap tightens one spacing step and the
   row becomes a horizontally scrollable strip for the narrowest phones
   (the five labels fit without scrolling at 390 and up). The strip bleeds
   into the gutters so overscroll clips at the screen edge, not mid-gutter;
   the PAGE never scrolls sideways — only this strip may. Scrollbar hidden:
   the cut label at the edge is the affordance. No hamburger, no JS. */
@media (max-width: 480px) {
  .nav {
    flex: 1 1 100%;
    width: auto; /* let the row + negative margins size the strip edge to edge */
    flex-wrap: nowrap;
    gap: 0 var(--s4);
    overflow-x: auto;
    margin-inline: calc(-1 * var(--s4));
    padding-inline: var(--s4);
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; white-space: nowrap; }
}

/* ---------- The page opener (every page, home included): type only, on paper,
   closing on a hairline. Home follows it with the hero plate at natural crop
   (no scrim, no text over a photograph anywhere). ---------- */

.opener { padding-block: var(--s9) 0; }
.opener h1 { max-width: 18ch; margin-bottom: var(--s5); }
.opener .standfirst {
  font-size: 1.3125rem;
  line-height: 1.45;
  max-width: 56ch;
}
.opener > .container::after { content: ""; display: block; border-top: 1px solid var(--line); margin-top: var(--s7); }

.priceline {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-top: var(--s5);
}

/* ---------- Photo break: the full-width plate ---------- */

.photo-break { margin-block: var(--s8); }
.photo-break img { width: 100%; }
@media (min-width: 720px) {
  .photo-break { margin-block: var(--s9); }
}

/* ---------- Mono list: the typed checklist ---------- */

.mono-list {
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 60ch;
}
.mono-list li { padding-block: var(--s3); border-top: 1px solid var(--line); }
.mono-list li:last-child { border-bottom: 1px solid var(--line); }

/* ---------- Harbors: a typographic ruled list ---------- */

.harbors { list-style: none; border-bottom: 1px solid var(--line); }
.harbors li {
  display: grid;
  gap: var(--s1) var(--s6);
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}
.harbors-name { font-size: 1.1875rem; }
.harbors-line { color: var(--ink-soft); max-width: 60ch; }
@media (min-width: 720px) {
  .harbors li { grid-template-columns: minmax(230px, 4fr) 8fr; align-items: baseline; }
}

/* ---------- The ledger: one plan table, ruled rows, mono cells ---------- */

.ledger {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-block: var(--s6);
}
.ledger th, .ledger td { padding: var(--s3); vertical-align: top; }
.ledger thead th {
  font-size: 1.0625rem;
  line-height: 1.25;
  text-align: center;
  border-bottom: 1px solid var(--ink);
  hyphens: auto;
  overflow-wrap: break-word;
}
.ledger thead th:first-child { width: 34%; }
.ledger-price {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-top: var(--s1);
}
.ledger tbody th {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
}
.ledger td {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  text-align: center;
}
.ledger tbody th, .ledger tbody td { border-top: 1px solid var(--line); }
.ledger tbody tr:first-child th, .ledger tbody tr:first-child td { border-top: 0; }
.ledger tbody tr:last-child th, .ledger tbody tr:last-child td { border-bottom: 1px solid var(--line); }
@media (max-width: 719px) {
  .ledger th, .ledger td { padding: var(--s2) var(--s1); }
  .ledger thead th { font-size: 0.75rem; }
  .ledger thead th:first-child { width: 28%; }
  .ledger tbody th { font-size: 0.8125rem; line-height: 1.4; }
  .ledger td, .ledger-price { font-size: 0.75rem; }
}

/* ≤480: the ledger transposes into three ruled per-plan lists (CONTRACTS
   §20): plan name + price, then that plan's included rows. Same table DOM,
   one instance of the data — the transpose is CSS alone (grid + source
   order); the roles in the markup keep it a real table for AT at every
   width, and each cell restates its row's label from data-label, drawn
   here and silenced for screen readers (the rowheader already speaks).
   Not-included cells clip-hide, vh-style: absent from the plan's list,
   still announced "Not included". Rhythm stays spacing + 1px rules. */
@media (max-width: 480px) {
  .ledger { display: grid; grid-template-columns: 100%; }
  .ledger thead, .ledger tbody, .ledger tr { display: contents; }

  /* Kept for AT, visually clipped: the vh-only corner cell, each row's
     label th (restated per cell below), and not-included cells. */
  .ledger thead th:first-child,
  .ledger tbody th,
  .ledger td.ledger-none {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Plan-major visual order: each plan's header, then its cells. Equal
     order values keep DOM order, so rows stay in ledger.json order. */
  .ledger thead th:nth-child(2) { order: 1; }
  .ledger tbody td:nth-child(2) { order: 2; }
  .ledger thead th:nth-child(3) { order: 3; }
  .ledger tbody td:nth-child(3) { order: 4; }
  .ledger thead th:nth-child(4) { order: 5; }
  .ledger tbody td:nth-child(4) { order: 6; }

  .ledger thead th {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s4);
    font-size: 1.1875rem;
    line-height: 1.25;
    text-align: left;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--ink);
  }
  .ledger thead th:nth-child(n+3) { margin-top: var(--s6); }
  .ledger .ledger-price { margin-top: 0; font-size: 0.875rem; }
  .ledger tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s4);
    font-size: 0.9375rem;
    text-align: right;
    white-space: nowrap;
    padding: var(--s3) 0;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  .ledger tbody td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    flex: 0 1 auto;
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
  }
}

/* ---------- Price tables (detailing / repair): ruled rows, prices in mono ---------- */

.price-table {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  margin-block: var(--s5);
}
.price-table th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--ink);
}
.price-table td {
  padding: var(--s4) 0;
  vertical-align: baseline;
}
.price-table tbody tr + tr td { border-top: 1px solid var(--line); }
.price-table th:last-child, .price-table td:last-child {
  text-align: right;
  white-space: nowrap;
  padding-left: var(--s4);
}
.price-table td:last-child {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--accent);
}
.table-note {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-top: var(--s1);
}

/* ---------- Prose (long-form pages) ---------- */

.prose h1 { margin-bottom: var(--s5); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: var(--s7); margin-bottom: var(--s4); }
.prose h3 { margin-top: var(--s5); margin-bottom: var(--s3); }
.prose p { margin-bottom: var(--s4); }
.prose ul, .prose ol { padding-left: var(--s5); max-width: 62ch; margin-bottom: var(--s4); }
.prose li { margin-bottom: var(--s2); }

/* ---------- Form (booking) — v1 class names and behavior kept ---------- */

.form { display: grid; gap: var(--s5); max-width: 640px; }

.field { display: grid; gap: var(--s2); }
.field label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-row { display: grid; gap: var(--s5); }
@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.input {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--ink-soft);
  border-radius: 0;
  padding: var(--s3);
  min-height: 48px;
  width: 100%;
}
textarea.input { resize: vertical; min-height: 140px; }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pulls the hint to 12px under its field-row: .form's grid gap (24px)
   cannot vary per row, and the markup is fixed, so this is the minimal
   mechanism for the proximity the rhythm needs. */
.form .fine { margin-top: calc(-1 * var(--s3)); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-panel {
  display: none;
  border-left: 2px solid var(--ink);
  padding: var(--s2) var(--s5);
  max-width: 640px;
  margin-block: var(--s5);
}
.form-panel h2 { font-size: 1.3125rem; margin-bottom: var(--s3); }
.form-panel p { margin-bottom: var(--s3); }
.form-result { border-left-color: var(--accent); }
.form-error { border-left-color: var(--ink); }
.form-panel:target, .form-panel.show { display: block; }
#sent:target ~ .form { display: none; }

/* ---------- Footer: the navy back page ---------- */

.footer {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--s8) var(--s6);
  margin-top: var(--s8);
}

.footer-grid { display: grid; gap: var(--s7) var(--s7); }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 5fr 3fr 4fr; }
}

.footer-brand {
  font-size: 1.3125rem;
  line-height: 1.15;
  margin-bottom: var(--s4);
}

.footer-line {
  color: var(--tint);
  margin-bottom: var(--s4);
  max-width: 44ch;
}

.footer-data {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--white);
  margin-bottom: var(--s5);
}

.footer-head {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tint-deep);
  margin-bottom: var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--white) 24%, var(--ink));
  padding-top: var(--s3);
}
p.footer-line + .footer-head, .footer-grid nav a + .footer-head { margin-top: var(--s5); }

.footer a { color: var(--white); text-decoration-color: color-mix(in srgb, var(--white) 45%, var(--ink)); }
.footer a:hover { text-decoration-color: var(--white); }

.footer-grid nav a {
  display: block;
  width: fit-content;
  min-height: 44px;
  padding-block: var(--s2);
  text-decoration: none;
}
.footer-grid nav a:hover { text-decoration: underline; }

.footer .btn { margin-top: var(--s2); }

.footer-legal {
  border-top: 1px solid color-mix(in srgb, var(--white) 24%, var(--ink));
  margin-top: var(--s7);
  padding-top: var(--s5);
  font-size: 0.875rem;
  color: var(--tint);
}
.footer-legal p { margin-bottom: var(--s3); max-width: 80ch; }

.credits summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  min-height: 44px;
  padding-block: var(--s3);
}
.credits ul { list-style: none; margin-block: var(--s3); }
.credits li { margin-bottom: var(--s2); }
.credits a { color: var(--tint); }