:root {
  --deep: #071c24;
  --water: #0a4a58;
  --foam: #7ec8c4;
  --rust: #c45a28;
  --paper: #efe4cc;
  --ink: #f3eadc;
  --muted: #9cb4b8;
  --dark: #1c1814;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Literata, Georgia, serif;
  background: var(--deep);
  color: var(--ink);
  line-height: 1.55;
}
a { color: var(--foam); }
h1, h2, h3, .mark, .pier b, .stamp p:last-child, .shed p:first-child {
  font-family: Teko, sans-serif;
  font-weight: 600;
}

.boom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 3vw;
  background: #041014;
  border-bottom: 5px solid var(--rust);
  position: sticky;
  top: 0;
  z-index: 8;
}
.mark { letter-spacing: 0.14em; font-size: 22px; color: var(--rust); }
.chip { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.jump { display: flex; gap: 12px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-family: Teko, sans-serif; }
.jump a { color: var(--ink); text-decoration: none; }
.lang { margin-left: auto; display: flex; border: 1px solid #2a4a52; }
.lang button {
  border: 0; background: transparent; color: var(--ink);
  padding: 6px 11px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  font-family: Teko, sans-serif;
}
.lang button.active { background: var(--rust); color: #fff; }

.tide {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #0c3038;
  color: var(--foam);
}
.tide p { padding: 10px 3vw; border-right: 1px solid #1a4a54; }
.tide p:last-child { border: 0; }

.port {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 70vh;
}
.river {
  background:
    repeating-linear-gradient(
      180deg,
      #0a5a68 0 14px,
      #083e4a 14px 28px
    );
  position: relative;
  overflow: hidden;
}
.flow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: Teko, sans-serif;
  letter-spacing: 0.4em;
  font-size: 18px;
  color: rgba(126, 200, 196, 0.45);
  white-space: nowrap;
}
.flow:first-child { top: 28%; }
.flow:last-child { top: 68%; }
.docks { padding: 32px 4vw 28px; }
.kicker {
  color: var(--rust);
  font-size: 13px;
  letter-spacing: 0.2em;
  font-family: Teko, sans-serif;
  margin-bottom: 8px;
}
.docks h1 { font-size: clamp(34px, 5.4vw, 58px); max-width: 16ch; line-height: 0.95; margin-bottom: 12px; }
.lead { max-width: 68ch; color: var(--muted); margin-bottom: 22px; }
.fingers {
  display: grid;
  grid-template-columns: 88px repeat(3, 1fr) 88px repeat(4, 1fr) 88px repeat(2, 1fr);
  gap: 6px;
  align-items: stretch;
}
.shed-lab {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: grid;
  place-content: center;
  background: #0a2830;
  color: var(--foam);
  font-family: Teko, sans-serif;
  letter-spacing: 0.12em;
  font-size: 14px;
  padding: 8px 4px;
}
.pier {
  min-height: 110px;
  border: 0;
  border-left: 10px solid var(--foam);
  background: #0a2830;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  display: grid;
  place-content: center;
  text-align: center;
}
.pier b { font-size: 28px; color: var(--foam); line-height: 1; }
.pier span { font-family: Teko, sans-serif; font-size: 16px; }
.pier.on { background: var(--rust); border-left-color: #fff; }
.pier.on b { color: #fff; }

.lading {
  margin: 0 4vw 0 calc(72px + 4vw);
  background: var(--paper);
  color: var(--dark);
  padding: 0 0 22px;
  box-shadow: -12px 12px 0 #041014;
}
.stamp {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--rust);
  color: #fff;
  padding: 10px 22px;
  font-family: Teko, sans-serif;
  letter-spacing: 0.12em;
  font-size: 18px;
}
.fields {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 24px;
  padding: 22px 22px 0;
}
.lab { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rust); font-weight: 700; }
.lading h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1; margin: 4px 0 10px; }
.lading a { color: var(--rust); }
.fields dl { display: grid; gap: 12px; }
.fields dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); font-weight: 700; }
.fields dd { border-bottom: 1px dashed #b8a888; padding-bottom: 8px; }
.cue { padding: 12px 22px 0; color: var(--rust); font-weight: 700; }

.yards, .mix, .log, .hours { padding: 42px 4vw; }
.yards { background: #102830; }
.yards h2, .mix h2, .log h2, .hours h2 { font-size: clamp(28px, 4vw, 44px); max-width: 18ch; line-height: 1; margin-bottom: 20px; }
.plan {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr;
  gap: 0;
  border: 2px solid var(--foam);
}
.shed { padding: 20px; background: #0c2228; }
.shed.dry { border-right: 2px solid var(--foam); }
.shed.yard { border-right: 2px solid var(--foam); background: #122830; }
.shed p:first-child { font-size: 32px; color: var(--rust); line-height: 1; }
.shed h3 { font-size: 26px; margin: 4px 0 10px; }
.shed ul { margin-top: 12px; padding-left: 1.1em; display: grid; gap: 6px; color: var(--muted); }
body[data-hold="dry"] .shed.dry,
body[data-hold="yard"] .shed.yard,
body[data-hold="press"] .shed.press {
  background: #1a3a32;
  outline: 3px solid var(--rust);
  outline-offset: -3px;
}

.mix { background: var(--paper); color: var(--dark); }
.mix .kicker { color: var(--rust); }
.pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pairs article { padding: 16px 18px; background: #e6d8bc; }
.bad, .ok {
  font-family: Teko, sans-serif;
  letter-spacing: 0.14em;
  font-size: 14px;
  margin-bottom: 4px;
}
.bad { color: #9b1c1c; }
.ok { color: #1c5c48; }
.pairs h3 { font-size: 24px; line-height: 1.05; margin-bottom: 8px; }

.log { background: var(--deep); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #2a4a52; vertical-align: top; }
th { color: var(--rust); font-family: Teko, sans-serif; letter-spacing: 0.1em; font-size: 16px; }
.after { margin-top: 16px; color: var(--muted); }

.hours {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  background: #0a2830;
}
.hours ul { list-style: none; display: grid; gap: 12px; }
.hours li { border-left: 5px solid var(--rust); padding: 8px 0 8px 14px; }

.wharf {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  background: var(--paper);
  color: var(--dark);
}
.decl { padding: 40px 4vw; }
.wharf .kicker { color: var(--rust); }
.wharf h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1; margin-bottom: 10px; }
.wharf a { color: var(--rust); }
address { font-style: normal; margin-top: 16px; display: grid; gap: 4px; }
form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 40px 4vw;
  background: #e4d4b4;
  border-left: 8px dashed var(--rust);
}
.form-stamp {
  grid-column: 1 / -1;
  font-family: Teko, sans-serif;
  letter-spacing: 0.2em;
  color: var(--rust);
  font-size: 18px;
}
label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.wide { grid-column: 1 / -1; }
input, textarea {
  font: inherit; padding: 10px 12px; border: 2px solid var(--dark); background: #f7eedc; color: var(--dark);
}
form button {
  grid-column: 1 / -1;
  font-family: Teko, sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  background: var(--rust);
  color: #fff;
  border: 0;
  padding: 12px;
  cursor: pointer;
}
.note { grid-column: 1 / -1; font-size: 14px; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 4vw;
  background: #041014;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .fingers { grid-template-columns: repeat(3, 1fr); }
  .shed-lab { writing-mode: horizontal-tb; transform: none; grid-column: 1 / -1; min-height: 36px; }
  .plan, .hours, .wharf, .fields, form, .tide { grid-template-columns: 1fr; }
  .port { grid-template-columns: 28px 1fr; }
  .lading { margin-left: calc(28px + 4vw); }
  .flow { font-size: 12px; }
  .shed.dry, .shed.yard { border-right: 0; border-bottom: 2px solid var(--foam); }
}
@media (max-width: 700px) {
  .pairs { grid-template-columns: 1fr; }
  .jump { display: none; }
}