/* Chart No. 1070 — Insel Thomas. House style follows nautical chart convention:
   roman capitals for land, italics for water, magenta for lights and notices. */

:root {
  color-scheme: light;
  --paper: #f3ead3;
  --paper-deep: #e9dcbc;
  --ink: #1c2838;
  --ink-soft: #4a5566;
  --land: #e6cf98;
  --land-line: #9a7a45;
  --shoal: #b9d5e0;
  --shoal-2: #d9e9ec;
  --magenta: #a8285f;
  --glaze: #2c6a8a;
  --serif: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  padding: 28px;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--magenta); }
a:focus-visible, [tabindex]:focus-visible { outline: 2px dashed var(--magenta); outline-offset: 3px; }

/* ---------- The neatline: the chequered border every chart wears ---------- */
.frame {
  max-width: 1180px;
  margin: 0 auto;
  border: 1.5px solid var(--ink);
  padding: 9px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 60px, transparent 60px 120px) top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 60px, var(--ink) 60px 120px) bottom / 100% 9px no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 60px, transparent 60px 120px) left / 9px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 60px, var(--ink) 60px 120px) right / 9px 100% no-repeat,
    var(--paper);
  position: relative;
}
.sheet {
  border: 1px solid var(--ink);
  background: var(--paper);
  position: relative;
}
.graticule {
  position: absolute;
  font: 500 10px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 0 4px;
}
.graticule.n { top: -5px; left: 62px; }
.graticule.n2 { top: -5px; right: 62px; }
.graticule.w { left: -5px; top: 170px; writing-mode: vertical-rl; transform: rotate(180deg); padding: 4px 0; }
.graticule.e { right: -5px; top: 170px; writing-mode: vertical-rl; padding: 4px 0; }

/* ---------- Title block ---------- */
.titleblock {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.titleblock .chartno { font-size: 11px; }
.titleblock .chartno b { display: block; font: 600 26px/1 var(--mono); color: var(--ink); letter-spacing: 0; }
.titleblock .name { text-align: center; text-decoration: none; color: var(--ink); }
.titleblock .name span { display: block; font: 400 30px/1 var(--display); letter-spacing: .32em; margin-right: -.32em; }
.titleblock .name small { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .2em; color: var(--ink-soft); }
.titleblock .edition { text-align: right; }

nav.gazetteer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ink);
  font-size: 15px;
}
nav.gazetteer a { text-decoration: none; white-space: nowrap; }
nav.gazetteer a .no { font: 500 10px var(--mono); color: var(--magenta); margin-right: 6px; vertical-align: 2px; }
nav.gazetteer a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; }
nav.gazetteer .water { font-style: italic; }

main { padding: 48px 56px 24px; }

.eyebrow {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 0 0 14px;
}

h1, h2, h3 { font-weight: 400; margin: 0; }
h1 {
  text-wrap: balance;
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 86px);
  line-height: 1;
  letter-spacing: -.01em;
  max-width: 16ch;
}
h1 em { color: var(--glaze); }
.lede { font-size: 20px; max-width: 36em; margin: 22px 0 0; color: var(--ink); }

/* ---------- Article One: the cartouche ---------- */
.cartouche {
  margin: 56px auto 8px;
  max-width: 780px;
  text-align: center;
  padding: 40px 36px 34px;
  border: 1.5px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -8px;
  position: relative;
  background: radial-gradient(ellipse at center, #f8f1dd 0%, var(--paper) 70%);
}
.cartouche::before, .cartouche::after {
  content: "\2766";
  position: absolute;
  top: -15px;
  font-size: 22px;
  line-height: 1;
  background: var(--paper);
  padding: 0 10px;
  color: var(--magenta);
  left: 50%;
  transform: translateX(-50%);
}
.cartouche::after { top: auto; bottom: -13px; content: "\2767"; }
.cartouche .article {
  font: 500 11px/1 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cartouche blockquote {
  margin: 18px 0 16px;
  font-family: var(--display);
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.05;
}
.cartouche blockquote em { font-style: italic; color: var(--magenta); }
.cartouche .ratified { font-style: italic; font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ---------- The chart itself ---------- */
.chart-wrap { margin: 48px -56px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); position: relative; }
.chart { display: block; width: 100%; height: auto; background: #fbf7ec; touch-action: manipulation; }
.chart-hint .pan { display: none; }
.chart-hint {
  display: block; padding: 8px 16px; border-top: 1px solid var(--ink); text-align: right;
  font: italic 13px var(--serif); color: var(--ink-soft);
  pointer-events: none;
}

.chart text { font-family: var(--serif); }
.chart .land-name { font-size: 17px; letter-spacing: .28em; text-transform: uppercase; fill: var(--ink); }
.chart .island-name { font-size: 30px; letter-spacing: .5em; fill: var(--ink); }
.chart .water-name { font-style: italic; font-size: 19px; fill: var(--glaze); letter-spacing: .06em; }
.chart .sounding { font-style: italic; font-size: 13px; fill: var(--ink-soft); }
.chart .sounding.new { fill: var(--magenta); font-size: 15px; }
.chart .note { font-family: var(--mono); font-size: 11px; fill: var(--magenta); letter-spacing: .04em; }
.chart .place { cursor: pointer; }
.chart .place .pname { font-size: 19px; font-weight: 700; fill: var(--ink); }
.chart .place .pname.water { font-weight: 400; font-style: italic; fill: var(--glaze); }
.chart .place .psub { font-family: var(--mono); font-size: 11px; fill: var(--magenta); letter-spacing: .05em; }
.chart .place .marker { fill: var(--paper); stroke: var(--magenta); stroke-width: 2; }
.chart .place .marker-dot { fill: var(--magenta); }
.chart .place:hover .pname, .chart .place:focus .pname { fill: var(--magenta); text-decoration: underline; }
.chart .place:hover .marker, .chart .place:focus .marker { fill: var(--magenta); }
.chart .place .halo { fill: none; stroke: var(--magenta); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; }
.chart .place.here .halo { opacity: 1; animation: spin 18s linear infinite; transform-box: fill-box; transform-origin: center; }
.chart.inset .place:not(.here) { opacity: .45; }
@keyframes spin { to { transform: rotate(360deg); } }

.light-flare { fill: var(--magenta); opacity: .1; animation: flash 4s infinite; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes flash { 0%, 88%, 100% { opacity: .08; } 92% { opacity: .75; } }

.ripple { fill: none; stroke: var(--magenta); stroke-width: 1.2; animation: ripple 1.1s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.sounding.new { animation: settle .5s ease-out; }
@keyframes settle { from { opacity: 0; transform: translateY(-6px); } }

/* Basking Rock & its resident */
.rock { cursor: pointer; }
.rock:focus:not(:focus-visible) { outline: none; }
.rock:hover .rock-body { fill: #d7bb7f; }
.dragon-wrap { opacity: 0; transform: translateY(18px) scale(.8); transition: opacity .35s ease, transform .6s cubic-bezier(.3,1.6,.5,1); pointer-events: none; transform-box: fill-box; transform-origin: 50% 100%; }
.dragon-on .dragon-wrap { opacity: 1; transform: none; }
.chart .hand-note { font-family: var(--hand); font-size: 25px; fill: var(--magenta); opacity: 0; transition: opacity .8s ease .9s; pointer-events: none; }
.hand-arrow { fill: none; stroke: var(--magenta); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset .8s ease .7s; }
.dragon-on .hand-note { opacity: 1; }
.dragon-on .hand-arrow { stroke-dashoffset: 0; }

.dragon .scale { fill: #c89a55; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.dragon .belly { fill: #e2bd7c; }
.dragon .line { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.dragon .spike { fill: #a8773a; stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.dragon .eye { fill: var(--ink); }

/* ---------- Below the chart: gazetteer & legend ---------- */
.below { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; margin-top: 48px; }
.section-title {
  font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin: 0 0 6px;
}
.places { list-style: none; margin: 0; padding: 0; }
.places li { border-bottom: 1px dotted var(--ink-soft); }
.places a { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0; text-decoration: none; }
.places .no { font: 500 12px var(--mono); color: var(--magenta); }
.places .nm { font-size: 22px; line-height: 1.2; }
.places .nm.water { font-style: italic; color: var(--glaze); }
.places .ds { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 3px; }
.places .co { font: 11px var(--mono); color: var(--ink-soft); white-space: nowrap; }
.places a:hover .nm { color: var(--magenta); }

.legend { display: grid; grid-template-columns: 34px 1fr; gap: 10px 12px; align-items: center; font-size: 15px; margin-top: 16px; }
.legend svg { width: 30px; height: 22px; display: block; }

/* ---------- Notices to Mariners (footer) ---------- */
footer.notices {
  margin-top: 56px;
  border-top: 1px solid var(--ink);
  padding: 24px 56px 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 48px;
  font-size: 14px;
  color: var(--ink-soft);
}
footer.notices h2 { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--magenta); margin-bottom: 10px; }
footer.notices ol { margin: 0; padding-left: 0; list-style: none; counter-reset: n; }
footer.notices li { counter-increment: n; padding-left: 58px; position: relative; margin-bottom: 4px; }
footer.notices li::before { content: "No. " counter(n); position: absolute; left: 0; font: 500 11px/2.1 var(--mono); color: var(--ink); }
footer.notices .imprint { font: 11px/1.8 var(--mono); text-align: right; letter-spacing: .04em; align-self: end; }

/* ---------- Sailing directions (project pages) ---------- */
.directions-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.directions-head h1 { max-width: none; }
.directions-head .sub { font-style: italic; font-size: 21px; color: var(--ink-soft); margin: 14px 0 0; }
.inset-box { border: 1px solid var(--ink); background: #fbf7ec; }
.inset-box figcaption { font: 11px var(--mono); letter-spacing: .06em; padding: 8px 12px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); }
figure { margin: 0; }

.particulars { width: 100%; border-collapse: collapse; margin: 40px 0 8px; font-size: 16px; }
.particulars th, .particulars td { text-align: left; padding: 9px 0; border-bottom: 1px dotted var(--ink-soft); vertical-align: baseline; }
.particulars th { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); width: 34%; font-weight: 500; }

.directions { max-width: 40em; margin-top: 40px; }
.para { display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; margin-bottom: 30px; }
.para .pno { font: 600 14px/2 var(--mono); color: var(--magenta); }
.para h2 { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 4px 0 6px; }
.para p { margin: 0 0 12px; }
.caution { border-left: 3px solid var(--magenta); padding: 4px 0 4px 18px; font-style: italic; }
.caution b { font-style: normal; font: 600 11px var(--mono); letter-spacing: .14em; color: var(--magenta); display: block; margin-bottom: 2px; }

.profile { margin: 12px 0 40px; border: 1px solid var(--ink); background: #fbf7ec; }
.profile svg { width: 100%; height: auto; display: block; }
.profile figcaption { font: 11px var(--mono); letter-spacing: .06em; padding: 8px 12px; border-top: 1px solid var(--ink); color: var(--ink-soft); }
.profile .o { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.profile .sec { fill: url(#hatch); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.profile .axis { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 10 4 2 4; }
.profile .dim { stroke: var(--magenta); stroke-width: 1; fill: none; }
.profile .dimt { font: 12px var(--mono); fill: var(--magenta); }
.profile .glz { fill: var(--glaze); opacity: .85; }
.profile .lbl { font: italic 14px var(--serif); fill: var(--ink-soft); }

.next-port { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ink); margin-top: 32px; padding-top: 18px; font-size: 17px; }
.next-port a { text-decoration: none; }
.next-port small { display: block; font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--magenta); }
.next-port .fwd { text-align: right; }

/* ---------- Harbour master ---------- */
.two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; margin-top: 40px; }
.two p { margin: 0 0 16px; }
.hail { border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -7px; padding: 30px 28px; background: #fbf7ec; }
.hail .flags { display: flex; gap: 6px; margin: 4px 0 18px; }
.hail .flags svg { width: 44px; height: 32px; border: 1px solid var(--ink); display: block; }
.hail .flags figure { text-align: center; font: 500 10px var(--mono); color: var(--ink-soft); }
.hail .email { font-family: var(--display); font-size: clamp(22px, 3vw, 30px); word-break: break-word; display: inline-block; margin: 2px 0 12px; }
.timetable { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 18px; }
.timetable td { padding: 7px 0; border-top: 1px dotted var(--ink-soft); vertical-align: top; }
.timetable td:first-child { font: 500 11px/2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); width: 42%; padding-right: 12px; }

/* ---------- 404 ---------- */
.offchart { text-align: center; padding: 20px 0 10px; }
.offchart h1 { margin: 0 auto; max-width: 14ch; }
.offchart .lede { margin: 20px auto 0; }
.offchart svg { width: 100%; max-width: 760px; height: auto; margin: 26px auto 0; display: block; }
.offchart .back { display: inline-block; margin-top: 18px; font-size: 19px; border: 1.5px solid var(--ink); padding: 10px 22px; text-decoration: none; background: #fbf7ec; }
.offchart .back:hover { border-color: var(--magenta); }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  body { padding: 10px; font-size: 17px; }
  .frame { padding: 6px; background-size: 100% 6px, 100% 6px, 6px 100%, 6px 100%, auto; }
  .graticule { display: none; }
  .titleblock { grid-template-columns: 1fr auto; padding: 12px 14px; font-size: 9px; }
  .titleblock .name { grid-column: 1 / -1; grid-row: 1; }
  .titleblock .name span { font-size: 22px; letter-spacing: .24em; margin-right: -.24em; }
  .titleblock .chartno b { font-size: 18px; }
  nav.gazetteer { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; gap: 20px; padding: 10px 14px; font-size: 14px; scrollbar-width: none; }
  nav.gazetteer::-webkit-scrollbar { display: none; }
  main { padding: 30px 16px 12px; }
  .lede { font-size: 18px; }
  .cartouche { margin-top: 40px; padding: 30px 16px 26px; }
  .chart-wrap { margin: 36px -16px 0; }
  .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .chart-scroll::-webkit-scrollbar { display: none; }
  .chart-scroll .chart { width: 700px; max-width: none; }
  .chart-hint .pan { display: inline; }
  .chart-hint .pan { display: none; }
.chart-hint { position: static; display: block; padding: 8px 12px; border-top: 1px solid var(--ink); font-size: 12px; }
  .below, .two, .directions-head { grid-template-columns: 1fr; gap: 36px; }
  .places .co { display: none; }
  .places a { grid-template-columns: 30px 1fr; }
  footer.notices { grid-template-columns: 1fr; padding: 20px 16px; margin-top: 40px; }
  footer.notices .imprint { text-align: left; }
  .para { grid-template-columns: 1fr; }
  .para .pno { line-height: 1.4; }
  .particulars th { width: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dragon-on .hand-arrow { stroke-dashoffset: 0; }
}

footer.notices .corr { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); border: 1px solid var(--magenta); padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
#notice-rock[data-corrected] { color: var(--ink); }