:root {
  --bg: #141210;
  --ink: #efe8dc;
  --dim: #cfc6b8;
  --muted: #9a9286;
  --line: rgba(239, 232, 220, .12);
  --blue: #7eb6d9;
  --gold: #d4a017;
  --orange: #e07a2f;
  --orange-hi: #f0a15f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Inter", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Orbitron", "Audiowide", var(--sans);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { background: #3c342b; color: #f6f0e6; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 50; background: var(--ink); color: var(--bg); padding: .5rem .8rem; border-radius: 4px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 1rem; }

/* Background: NASA-topography contours of the Norse North Atlantic, more present here but still quiet */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.contours {
  position: absolute; inset: -40px;
  background: url("assets/bg/north-atlantic-contours.webp") 50% 42% / max(1500px, 115vw) auto no-repeat;
  opacity: .12; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 20%, rgba(0,0,0,.45) 60%, transparent 100%);
          mask-image: radial-gradient(75% 70% at 50% 45%, #000 20%, rgba(0,0,0,.45) 60%, transparent 100%);
  transition: translate 1.2s var(--ease);
}
.glow { position: absolute; left: 50%; top: 12%; width: 900px; height: 520px; translate: -50% 0; background: radial-gradient(closest-side, rgba(126, 182, 217, .08), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .contours { animation: drift 90s ease-in-out infinite alternate; }
  @keyframes drift { from { background-position: 48% 40%; } to { background-position: 52% 45%; } }
}

.top { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 2rem 0; }
.mark img { display: block; opacity: .85; }
.now { margin: 0; font-size: .78rem; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }

.page { flex: 1; width: min(1240px, 100% - 3rem); margin: 0 auto; display: flex; flex-direction: column; align-items: center; padding: 3.2vh 0 2rem; }
.logo { margin: 0; line-height: 0; }
.logo img { width: min(560px, 80vw); height: auto; }
.lede { margin: 1.2rem 0 0; font-size: .82rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* The one story */
.story { width: min(860px, 100%); margin: 6vh 0 0; text-align: center; }
.label { margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.label::before, .label::after { content: ""; width: 28px; height: 1px; background: rgba(212, 160, 23, .55); }
.message { margin: 0; font-family: var(--serif); font-size: 1.5rem; color: var(--muted); }
.story:not([data-state="loading"]):not([data-state="none"]) .message { display: none; }
.story[data-state="loading"] :is(.headline, .meta, .why), .story[data-state="none"] :is(.headline, .meta, .why) { display: none; }
.headline { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; }
.story[data-len="short"] .headline { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.story[data-len="long"] .headline { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.headline a { color: var(--orange); text-decoration: none; background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat; transition: color .2s, background-size .5s var(--ease); }
.headline a:hover { color: var(--orange-hi); background-size: 100% 1px; }
.meta { margin: 1.3rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .1rem .45rem; font-size: .88rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.meta .fav { width: 16px; height: 16px; border-radius: 3px; margin-right: .2rem; }
.meta .dot { color: var(--muted); margin-right: .45rem; }
.meta a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(224, 122, 47, .35); }
.meta a:hover { color: var(--orange-hi); border-bottom-color: currentColor; }
.why { margin: .8rem auto 0; max-width: 46rem; font-size: .8rem; color: var(--muted); }
.why-k { color: var(--dim); }

/* Tiles */
.pages { width: 100%; margin-top: auto; padding-top: 6vh; }
.pages { --gap: 1.4rem; }
.tiles { list-style: none; margin: 0 auto; padding: 0; width: min(1180px, 100%); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
/* eight tiles: balanced 4 x 2 */
.tiles { row-gap: .5rem; }
.tiles li { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); min-width: 0; }
.tile { height: 100%; }
.tile { position: relative; display: flex; flex-direction: column; text-decoration: none; padding: .55rem .55rem .9rem; border-radius: 14px; transition: background .3s var(--ease); }
.tile:hover, .tile:focus-visible { background: rgba(239, 232, 220, .045); }
.pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 9px; border: 1px solid var(--line); background: #0d0c0b; }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.35) brightness(.78); transition: filter .45s var(--ease), transform .7s var(--ease); }
.tile:hover .pic img, .tile:focus-visible .pic img { filter: none; transform: scale(1.05); }
.name { margin-top: .85rem; font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: color .2s; }
.tile:hover .name { color: var(--blue); }
.tag { margin-top: .2rem; font-size: .74rem; color: var(--muted); }
.desc { margin-top: .45rem; font-size: .76rem; line-height: 1.45; color: var(--dim); opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.tile:hover .desc, .tile:focus-visible .desc { opacity: 1; transform: none; }
@media (hover: none) { .desc { opacity: 1; transform: none; } }

.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 1.2rem 2rem 1.6rem; font-size: .76rem; color: var(--muted); }
.foot details { max-width: 44rem; }
.foot summary { cursor: pointer; color: var(--dim); list-style: none; }
.foot summary::-webkit-details-marker { display: none; }
.foot summary::before { content: "+"; display: inline-block; width: 1em; color: var(--gold); }
.foot details[open] summary::before { content: "–"; }
.foot details p { margin: .6rem 0 0; }
.copy { margin: 0; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .logo, .lede, .story, .tiles li { animation: rise 1s var(--ease) both; }
  .lede { animation-delay: .1s; } .story { animation-delay: .2s; }
  .tiles li:nth-child(1) { animation-delay: .3s; } .tiles li:nth-child(2) { animation-delay: .35s; } .tiles li:nth-child(3) { animation-delay: .4s; }
  .tiles li:nth-child(4) { animation-delay: .45s; } .tiles li:nth-child(5) { animation-delay: .5s; } .tiles li:nth-child(6) { animation-delay: .55s; } .tiles li:nth-child(7) { animation-delay: .6s; } .tiles li:nth-child(8) { animation-delay: .65s; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .desc { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  /* eight tiles: still 4 x 2, narrower */
  .tiles { width: min(960px, 100%); }
  .desc { opacity: 1; transform: none; }
}
@media (max-width: 860px) and (min-width: 641px) {
  /* eight tiles: 2 x 4 */
  .tiles { width: min(640px, 100%); }
  .tiles li { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 640px) {
  .top { padding: 1rem 1.1rem 0; }
  .page { width: calc(100% - 2.2rem); padding-top: 4.5vh; }
  .logo img { width: 84vw; }
  .lede { font-size: .66rem; letter-spacing: .2em; }
  .story { margin-top: 5vh; }
  .headline, .story[data-len] .headline { font-size: 2.1rem; }
  .story[data-len="long"] .headline { font-size: 1.6rem; }
  .pages { padding-top: 3rem; }
  .pages { --gap: .5rem; }
  .tiles li { flex-basis: calc((100% - var(--gap)) / 2); }
  /* eight tiles: four pairs */
  .tile { padding: .4rem .4rem .8rem; }
  .desc { display: none; }
  .foot { flex-direction: column; gap: 1rem; padding: 1rem 1.1rem 1.6rem; }
  .contours { background-size: 1300px auto; background-position: 46% 30%; opacity: .14; }
}

/* ---- Contact in the footer row (shared) ---- */
.foot { align-items: baseline; }
.contact { margin: 0; font-style: normal; white-space: nowrap; }
.contact-mail { color: var(--blue); text-decoration: underline 1px rgba(126, 182, 217, .35); text-underline-offset: 3px; letter-spacing: .02em; transition: color .2s, text-decoration-color .2s; }
.contact-mail:hover { color: #a9d0ea; text-decoration-color: currentColor; }
@media (max-width: 640px) {
  /* Mobile: email centered on its own line first, then the note (left) and © (right) */
  .foot { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 1.2rem; }
  .foot .contact { order: -1; flex: 1 0 100%; display: flex; justify-content: center; align-items: baseline; padding-bottom: 1rem; border-bottom: 1px solid rgba(239, 232, 220, .09); font-size: .84rem; }
}

.foot { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 2rem; }
.foot .copy { justify-self: end; }
@media (max-width: 640px) { .foot { display: flex; } }

/* G: quiet email with a small steel-blue mail glyph */
.contact-mail { color: var(--dim); text-decoration: none; }
.contact-mail .ico { color: var(--blue); vertical-align: -.17em; margin-right: .5em; }
.contact-t { text-decoration: underline 1px transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.contact-mail:hover { color: var(--blue); }
.contact-mail:hover .contact-t { text-decoration-color: currentColor; }