/* PIRION MARINE site. The house palette and fonts, ruled by the owner 2026-11-04; the only thing that moves is the compass. */

@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/HankenGrotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/HankenGrotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/Newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/Newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(fonts/Newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(fonts/Newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --ground: #fcfbf7;
  --ink: #292420;
  --muted: #6e6459;
  --line: #d8cebe;
  --accent: #a34c30;
  --chart: url(piri-reis-1513.webp);
  --chart-opacity: 0.07;
  --on-light: block;
  --on-dark: none;
  --gutter: clamp(16px, 4vw, 64px);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

/* DARK, for a night watch: the app's own dark colours (web/src/styles/tokens.css). The device decides,
   unless the visitor moved the telegraph lever (theme.js). The two blocks must stay the same. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #1c1a17;
    --ink: #ece7de;
    --muted: #a79e91;
    --line: #36322c;
    --accent: #d38a6f;
    --chart: url(piri-reis-1513-dark.webp);
    --chart-opacity: 0.08;
    --on-light: none;
    --on-dark: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #1c1a17;
  --ink: #ece7de;
  --muted: #a79e91;
  --line: #36322c;
  --accent: #d38a6f;
  --chart: url(piri-reis-1513-dark.webp);
  --chart-opacity: 0.08;
  --on-light: none;
  --on-dark: block;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The Piri Reis chart of 1513, its lines only, standing still behind the page. Faintness is this one opacity. */
.chart::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--chart) center / cover no-repeat;
  opacity: var(--chart-opacity);
}

/* The chart's own border, standing still around the page. Longitude bands are equal along the top and the
   bottom; latitude bands lengthen northward up the sides, as on a Mercator chart (20°N to 55°N, every 2.5°).
   No figures on purpose: the Piri Reis chart behind it carries no latitude or longitude to read. */
body::after {
  --long: repeating-linear-gradient(90deg, var(--muted) 0 56px, transparent 56px 112px);
  --lat: linear-gradient(to top, var(--muted) 0% 5.9%, transparent 5.9% 11.8%, var(--muted) 11.8% 17.9%, transparent 17.9% 24.2%, var(--muted) 24.2% 30.6%, transparent 30.6% 37.2%, var(--muted) 37.2% 43.9%, transparent 43.9% 51%, var(--muted) 51% 58.2%, transparent 58.2% 65.8%, var(--muted) 65.8% 73.7%, transparent 73.7% 82%, var(--muted) 82% 90.7%, transparent 90.7% 100%);
  --rule: linear-gradient(var(--muted), var(--muted));
  content: ''; position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: 0.45;
  background:
    var(--long) left top / 100% 4px no-repeat,
    var(--long) left bottom / 100% 4px no-repeat,
    var(--lat) left top / 4px 100% no-repeat,
    var(--lat) right top / 4px 100% no-repeat,
    var(--rule) left 0 top 4px / 100% 1px no-repeat,
    var(--rule) left 0 bottom 4px / 100% 1px no-repeat,
    var(--rule) left 4px top 0 / 1px 100% no-repeat,
    var(--rule) right 4px top 0 / 1px 100% no-repeat;
}
@media print { body::after { display: none; } }

/* the frame every page shares */
.page { min-height: 100svh; display: flex; flex-direction: column; padding: 0 var(--gutter); }
/* The header reads as a chart's title block: name and day or night above, then a rule with the
   pages hanging from it. The page you are on takes the copper mark on that rule. */
.bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 20px;
  padding: 26px 0 clamp(8px, 2vh, 20px);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.18em; text-decoration: none;
}
.wordmark .needle { display: block; flex: none; }
.wordmark .needle .north { fill: var(--accent); }
.wordmark .needle .south { fill: var(--ink); }
.what { color: var(--muted); font-size: 15px; font-family: var(--serif); font-style: italic; }
.theme { grid-column: 3; }
.nav {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 14px;
  font-size: 15px; font-weight: 500;
  border-top: 1px solid var(--line);
}
.nav a { position: relative; text-decoration: none; padding: 13px 0 8px; }
.nav a::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: transparent;
}
.nav a:hover::before { background: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"]::before { background: var(--accent); }
/* Day or night, as an engine order telegraph: the lever leans to the word in force. Drawn by theme.js. */
.theme {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; border: 0; background: none; color: var(--muted);
  font: inherit; cursor: pointer;
}
.theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme[hidden] { display: none; }
.theme .word { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; }
.theme[aria-checked="false"] .day,
.theme[aria-checked="true"] .night { color: var(--accent); }
.telegraph { display: block; flex: none; }
.telegraph .dial { fill: none; stroke: var(--muted); }
.telegraph .ticks { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; }
.telegraph .stem, .telegraph .hub { fill: var(--ink); }
.telegraph .grip { fill: var(--accent); }
.telegraph .lever {
  transform-box: view-box; transform-origin: 23px 26px;
  transform: rotate(-48deg); transition: transform 0.15s ease;
}
.theme[aria-checked="true"] .lever { transform: rotate(48deg); }
@media (prefers-reduced-motion: reduce) { .telegraph .lever { transition: none; } }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
  padding: 20px 0 24px; color: var(--muted); font-size: 14px;
}

/* Welcome Screen */
.welcome {
  flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center; gap: clamp(24px, 4vw, 72px); padding: clamp(24px, 4vh, 56px) 0;
}
.slogan {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(50px, 6.9vw, 112px); line-height: 1.02; letter-spacing: -0.022em;
}
.slogan .name { display: block; color: var(--accent); }
.slogan .line { display: block; }
.second {
  margin: clamp(20px, 3vh, 32px) 0 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; color: var(--muted); text-wrap: balance;
}
.mark { justify-self: end; width: 100%; max-width: min(420px, 38vh); } /* a laptop's height must still hold the six points */

.points {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.points li {
  padding: clamp(20px, 3vh, 30px) clamp(16px, 2.4vw, 36px);
  font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.22;
  text-wrap: balance;
}
.points .keep { display: inline-block; }
.points .aside { display: block; margin-top: 6px; font-style: italic; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.3; color: var(--muted); }
.points li + li { border-left: 1px solid var(--line); }
/* Six points: three and three on a wide screen. */
@media (min-width: 1100px) {
  .points li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .points li:nth-child(3n) { padding-right: 0; }
  .points li:nth-child(n+4) { border-top: 1px solid var(--line); }
}

/* inner pages */
.inner { flex: 1; width: 100%; padding: clamp(24px, 5vh, 56px) 0 clamp(32px, 6vh, 72px); }
.title {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(44px, 5.4vw, 80px); line-height: 1.04; letter-spacing: -0.02em;
}
.lead {
  margin: 16px 0 0; max-width: 34em; font-family: var(--serif); font-weight: 500;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; color: var(--muted); text-wrap: balance;
}
.versions { margin: 16px 0 0; font-size: 16px; font-weight: 500; }
.group + .versions { margin-top: clamp(36px, 6vh, 64px); }
.group { margin-top: clamp(36px, 6vh, 64px); }
.group h2 {
  margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink);
}
.mod {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 4fr);
  gap: 8px clamp(20px, 3vw, 48px); padding: 20px 0; border-bottom: 1px solid var(--line);
}
.mod h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; }
/* the app's own module icons (Tabler, MIT: licenses/tabler-icons-LICENSE.txt); the same drawing per module as the app's menu */
.ico {
  display: inline-block; width: 0.92em; height: 0.92em; margin-right: 0.42em; vertical-align: -0.1em;
  fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.mod p { margin: 0; line-height: 1.5; max-width: 40em; }
.mod .screens { color: var(--muted); font-size: 14px; }
.scope { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--accent); }

/* Agentic page: the slogans lead, the compass stands beside the title */
.opening {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 17vw, 260px);
  align-items: center; gap: clamp(24px, 4vw, 72px);
}
.group h2.claim {
  margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
  font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.12; letter-spacing: -0.012em;
}
.claim .aside {
  display: block; margin-top: 6px; font-style: italic; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.3;
  letter-spacing: 0; color: var(--muted);
}
.mod.pair { grid-template-columns: minmax(0, 3fr) minmax(0, 10fr); }
/* a real answer from a test run: the question in italics, the answer as it was written */
.said { max-width: 40em; line-height: 1.5; }
.mod .said > * + * { margin-top: 14px; }
.said .asked { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.35; color: var(--muted); }
.said .tag { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.said ul { margin: 0; padding-left: 18px; }
.stays p { margin: 16px 0 0; max-width: 40em; }

/* Screens of the application, on the Visual page: real pictures, nothing drawn over them. */
.shot { margin: 18px 0 0; }
.shot img {
  display: block; width: 100%; max-width: 1040px; height: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--ground);
}
.shot img.on-light { display: var(--on-light); }
.shot img.on-dark { display: var(--on-dark); }
.shot figcaption { margin: 14px 0 0; max-width: 40em; line-height: 1.5; }

/* A tablet reads the points two and two. */
@media (min-width: 821px) and (max-width: 1099px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .points li:nth-child(even) { padding-right: 0; }
  .points li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 820px) {
  .mod, .mod.pair { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
  .opening { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .opening .mark { order: -1; }
  body::after {
    background:
      var(--long) left top / 100% 4px no-repeat,
      var(--long) left bottom / 100% 4px no-repeat,
      var(--rule) left 0 top 4px / 100% 1px no-repeat,
      var(--rule) left 0 bottom 4px / 100% 1px no-repeat;
  }
  .what { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .theme { grid-column: 2; grid-row: 1; }
  .nav { gap: 0 20px; margin-top: 12px; }
  .welcome { grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
  .slogan { font-size: min(12.8vw, 64px); }
  .mark { order: -1; justify-self: start; max-width: 116px; margin-left: -6px; }
  .points { grid-template-columns: minmax(0, 1fr); }
  .points li { padding: 18px 0; }
  .points li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* THE COMPASS: the app's agentic orb (web/src/styles/orb.css, components/ThinkingOrb.tsx), its calmest state "listening",
   at --speed 0.6 of the app's pace because here it is drawn large and stays on screen. */
.compass { display: block; width: 100%; height: auto; overflow: visible; color: var(--accent); --speed: 0.6; }
.compass .disc { fill: currentColor; fill-opacity: 0.13; }
.compass .dot, .compass .north, .compass .spark { fill: currentColor; }
.compass .south { fill: currentColor; opacity: 0.42; }
.compass .turns { transform-box: view-box; transform-origin: 190px 190px; }
.compass .ring { animation: compass-spin calc(30s / var(--speed)) linear infinite; }
.compass .needle { animation: compass-tremor calc(3s / var(--speed)) ease-in-out infinite; }
.compass .dot {
  transform-box: fill-box; transform-origin: center;
  animation: compass-swell calc(2.4s / var(--speed)) ease-in-out infinite;
  animation-delay: calc(var(--d) / var(--speed));
}
@keyframes compass-spin { to { transform: rotate(360deg); } }
@keyframes compass-tremor { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes compass-swell { 0%, 70%, 100% { transform: scale(1); opacity: var(--o); } 20% { transform: scale(1.9); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .compass * { animation: none !important; } }