/* Riysh Tech Marine IFSC — multi-page, ledger-style site
   Paper / ink / cobalt. Instrument Serif display, Geist text, Geist Mono labels.
   Layout: open top line (not sticky), hairline-ruled ledger rows, no cards. */

:root {
  --paper:   #ebe7df;
  --paper-2: #e2ddd3;
  --ink:     #121212;
  --graph:   #3a3a3a;
  --mute:    #7c776f;
  --rule:    #c9c3b8;
  --cobalt:  #3046ff;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Geist", "Segoe UI", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --max: 1240px;
  --pad: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.6; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--cobalt); color: #fff; padding: 10px 14px; }
.skip:focus { left: 0; }

.frame { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.label { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* ---------- top line ---------- */
.topline { border-bottom: 1px solid var(--ink); }
.topline .frame { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark img { width: 30px; height: 30px; }
.wordmark span { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; letter-spacing: .02em; }
.wordmark small { font-family: var(--mono); font-size: .68rem; color: var(--mute); letter-spacing: .06em; margin-left: 2px; }
.topnav { margin-left: auto; display: flex; gap: 2px; }
.topnav a {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding: 8px 12px; color: var(--graph);
}
.topnav a:hover { color: var(--ink); background: var(--paper-2); }
.topnav a[aria-current="page"] { color: var(--paper); background: var(--ink); }
@media (max-width: 720px) {
  .topline .frame { flex-wrap: wrap; padding-top: 12px; padding-bottom: 6px; gap: 6px; }
  .topnav { margin-left: -12px; width: calc(100% + 12px); overflow-x: auto; }
  .wordmark small { display: none; }
}

/* ---------- page opening ---------- */
.lead { padding: clamp(64px, 11vw, 140px) 0 clamp(48px, 7vw, 84px); }
.lead h1 {
  font-family: var(--serif); font-weight: 400; margin: 18px 0 0;
  font-size: clamp(3rem, 8.4vw, 7.2rem); line-height: .98; letter-spacing: -.02em; max-width: 14ch;
}
.lead h1 i { color: var(--cobalt); }
.lead .sub { max-width: 54ch; margin-top: 34px; font-size: 1.12rem; color: var(--graph); }
.lead.short h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 18ch; }

/* ---------- ledger ---------- */
.ledger { border-top: 1px solid var(--ink); }
.ledger-head, .ledger-row {
  display: grid; grid-template-columns: 90px minmax(200px, 1.1fr) 2fr 120px; gap: 24px; align-items: baseline;
}
.ledger-head { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ledger-row { padding: 28px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
a.ledger-row:hover { background: var(--paper-2); }
.ledger-row .no { font-family: var(--mono); font-size: .86rem; color: var(--cobalt); }
.ledger-row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.05; margin: 0; }
.ledger-row p { margin: 0; color: var(--graph); }
.ledger-row .go { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; text-align: right; color: var(--mute); }
a.ledger-row:hover .go { color: var(--cobalt); }
@media (max-width: 820px) {
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 54px 1fr; gap: 6px 14px; }
  .ledger-row p, .ledger-row .go { grid-column: 2; text-align: left; }
}

/* ---------- split: sticky label left, prose right ---------- */
.split { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--ink); }
.split > header { position: sticky; top: 28px; align-self: start; }
.split h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.02; margin: 12px 0 0; }
.split .body { max-width: 68ch; font-size: 1.05rem; }
.split .body p:first-child { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.split .body p { color: var(--graph); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 20px; } .split > header { position: static; } }

/* definition list used inside desks */
.terms { margin: 26px 0 0; border-top: 1px solid var(--rule); }
.terms div { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.terms dt { font-weight: 600; font-size: .98rem; }
.terms dd { margin: 0; color: var(--graph); font-size: .98rem; }
@media (max-width: 640px) { .terms div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- ink band ---------- */
.band { background: var(--ink); color: var(--paper); }
.band .frame { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.band .label { color: #a8a39a; }
.band blockquote { margin: 18px 0 0; font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.08; max-width: 22ch; }
.band blockquote i { color: #8796ff; }
.band .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid #3a3a3a; }
.band .cols div { padding: 22px 24px 4px 0; border-right: 1px solid #3a3a3a; margin-right: 24px; }
.band .cols div:last-child { border-right: 0; margin-right: 0; }
.band .cols b { display: block; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #8796ff; margin-bottom: 8px; font-weight: 500; }
.band .cols p { color: #cfcac1; font-size: .98rem; }
@media (max-width: 820px) { .band .cols { grid-template-columns: 1fr; } .band .cols div { border-right: 0; margin-right: 0; border-bottom: 1px solid #3a3a3a; } }

/* ---------- desk anchor blocks ---------- */
.desk { border-top: 1px solid var(--ink); padding: clamp(52px, 7vw, 92px) 0; display: grid; grid-template-columns: 120px 1fr; gap: 36px; }
.desk .no { font-family: var(--mono); color: var(--cobalt); font-size: .9rem; padding-top: 10px; }
.desk h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1; margin: 0 0 18px; }
.desk .lede { font-size: 1.18rem; max-width: 60ch; color: var(--ink); }
@media (max-width: 720px) { .desk { grid-template-columns: 1fr; gap: 8px; } .desk .no { padding-top: 0; } }

/* ---------- contact ---------- */
.contact-sheet { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.contact-sheet > div { padding: 40px 40px 40px 0; }
.contact-sheet > div + div { border-left: 1px solid var(--rule); padding-left: 40px; padding-right: 0; }
.contact-sheet address { font-style: normal; font-size: 1.15rem; line-height: 1.6; margin-top: 14px; }
.contact-sheet .mail { display: inline-block; margin-top: 14px; font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); text-decoration-thickness: 1px; text-underline-offset: 6px; color: var(--cobalt); word-break: break-word; }
@media (max-width: 760px) { .contact-sheet { grid-template-columns: 1fr; } .contact-sheet > div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; } }

.cta-line { border-top: 1px solid var(--ink); padding: 40px 0 56px; display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; justify-content: space-between; }
.cta-line p { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0; line-height: 1.1; }
.cta-line a { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; background: var(--cobalt); color: #fff; padding: 14px 20px; }
.cta-line a:hover { background: var(--ink); }

/* ---------- foot ---------- */
.foot { border-top: 1px solid var(--ink); padding: 26px 0 40px; }
.foot .frame { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.foot p { margin: 6px 0 0; font-size: .88rem; color: var(--graph); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cobalt); }
@media (max-width: 760px) { .foot .frame { grid-template-columns: 1fr; } }