/* Fjord: page CSS. Only what sits inside a visual, one --p-h per card group, and the reading pages
   (dev log, changelog, press), which hold long text and take the height of their content. */

/* ---------------------------------------------------------------- the hero's film */
.hero__media > .hero__yt { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; border: 0; background: #000; }
.hero__media.is-playing > .hero__over { visibility: hidden; }
.hero__media > .loop-pause { top: 12px; bottom: auto; }

/* ---------------------------------------------------------------- places: three rows beside the fjord */
.rows .rows__name small { display: block; margin-top: 4px; font-weight: 400; color: var(--muted); font-size: var(--t-body); line-height: 1.5; }
.places > li { padding-block: var(--s-5); }
/* every capture keeps the game's 16:9 frame, so nothing is cropped or blown up */
.places__photo, .pc__photo { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
@media (min-width: 1024px) { .pc__photo { aspect-ratio: auto; height: 100%; } }
.faq__photo { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-lg); margin: 0; }
.faq__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.places__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- on board: four open cards */
#sailing .panel { --p-h: 0px; min-height: 0; height: auto; flex: none; aspect-ratio: 16 / 9; }
/* a <picture> inside a panel or frame: its img fills the box like the kit's own .frame__img */
:is(.panel, .frame, .post-cover) > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
:is(.panel, .frame) > picture { display: contents; }


/* ---------------------------------------------------------------- the statement */
#tides .t-label { margin-bottom: var(--s-6); }

/* ---------------------------------------------------------------- screenshots: a wall of six */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 2px; min-height: 0; }
.wall__item { position: relative; display: block; overflow: hidden; min-height: 0; }
.wall__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wall__item:first-child { border-top-left-radius: var(--r-lg); }
.wall__item:nth-child(3) { border-top-right-radius: var(--r-lg); }
.wall__item:nth-child(4) { border-bottom-left-radius: var(--r-lg); }
.wall__item:last-child { border-bottom-right-radius: var(--r-lg); }
@media (max-width: 1023px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .wall__item { aspect-ratio: 16 / 9; border-radius: 0 !important; }
}

/* ---------------------------------------------------------------- dev log: the newest post large, two rows beside it */
.post-card { display: flex; flex-direction: column; gap: var(--s-3); color: inherit; text-decoration: none; }
.post-card > .panel { order: -1; margin: 0 0 var(--s-3); }
.post-card h3 { font-size: var(--t-card); font-weight: 500; line-height: 1.3; margin: 0; }
.post-card .t-label, .post-card__sum { margin: 0; }
.post-card__sum { max-width: 56ch; }
.devlog__links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; }
.devlog__grid { grid-template-rows: auto auto; align-content: stretch; }
.post-card--lead { grid-row: 1 / span 2; height: 100%; }
.post-card--lead > .panel { --p-h: 0px; min-height: 240px; flex: 1 1 auto; height: auto; }
.post-card--row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s-5); row-gap: var(--s-2); align-content: start; }
.post-card--row > .panel { --p-h: 0px; min-height: 0; aspect-ratio: 16 / 9; grid-row: 1 / span 2; margin: 0; }
.post-card--row + .post-card--row { padding-top: var(--s-6); }
@media (max-width: 1023px) {
  .post-card--lead { grid-row: auto; height: auto; }
  .post-card--lead > .panel { min-height: 0; aspect-ratio: 16 / 9; flex: none; }
}
@media (max-width: 639px) {
  .post-card--row { grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--s-4); }
  .post-card h3 { font-size: var(--t-body); }
  .post-card--lead .post-card__sum { display: none; }
  .post-card--row + .post-card--row { padding-top: var(--s-4); }
}

/* ---------------------------------------------------------------- system requirements */
.specs > li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
.specs .rows__value { grid-column: 2; text-align: left; white-space: normal; max-width: none; }
@media (max-width: 639px) { .specs > li { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-3); } }

/* ---------------------------------------------------------------- reading pages: html.doc */
html.doc main > section { height: auto; min-height: 0; }
html.doc main > section > .wrap { height: auto; }
html.doc main > section:first-child { padding-top: calc(var(--nav) + var(--s-9)); }
html.doc main > section + section { padding-top: var(--s-8); }
html.doc footer.closing { height: auto; min-height: 100svh; }
.doc-head { max-width: 62ch; margin-bottom: var(--s-8); }
.doc-head h1 { font: var(--display-weight) var(--t-h2)/1.08 var(--font-display); letter-spacing: var(--display-tracking); margin: 0 0 var(--s-4); }
.doc-head p { font-size: var(--t-lead); color: var(--muted); margin: 0; }
.doc-head .t-label { margin-bottom: var(--s-4); }

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7); }
.post-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; color: inherit; text-decoration: none; }
.post-row .panel { --p-h: auto; aspect-ratio: 16 / 9; margin: 0; }
.post-row h2 { font: var(--display-weight) var(--t-h3)/1.15 var(--font-display); letter-spacing: var(--display-tracking); margin: var(--s-2) 0 var(--s-3); }
.post-row p { margin: 0; max-width: 62ch; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.tags li { font-size: var(--t-label); font-weight: 500; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
@media (max-width: 767px) { .post-row { grid-template-columns: 1fr; } }

.prose { max-width: 68ch; font-size: 18px; line-height: 1.7; }
.prose h2 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); margin: var(--s-8) 0 var(--s-4); }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose code { font-family: var(--font-mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--surface); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 500; color: var(--muted); }
.post-cover { margin: 0 0 var(--s-8); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-nav { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }

.changes { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.changes li { display: grid; grid-template-columns: 7ch 14ch minmax(0, 1fr); gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.changes .v { font-family: var(--font-mono); font-size: 15px; color: var(--accent); }
.changes time { color: var(--muted); font-size: var(--t-small); padding-top: 2px; }
@media (max-width: 639px) { .changes li { grid-template-columns: 7ch minmax(0, 1fr); } .changes time { grid-column: 2; grid-row: 2; padding-top: 0; } }

.facts { display: grid; grid-template-columns: 16ch minmax(0, 1fr); gap: 0; margin: 0; max-width: 900px; }
.facts dt, .facts dd { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); margin: 0; }
.facts dt { color: var(--muted); font-weight: 500; padding-right: var(--s-5); }
@media (max-width: 639px) { .facts { grid-template-columns: 1fr; } .facts dt { border-bottom: 0; padding-bottom: 0; } }
.press-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.press-grid a { display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.press-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.logo-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); max-width: 900px; }
.logo-tiles a { display: grid; place-items: center; padding: var(--s-8); border-radius: var(--r-md); border: 1px solid var(--line); }
.logo-tiles a.light { background: #ffffff; }
.logo-tiles img { max-width: 100%; height: 72px; width: auto; }
.trailer-frame { position: relative; aspect-ratio: 16 / 9; max-width: 900px; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.trailer-frame iframe, .trailer-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.trailer-frame .ly-play { left: var(--s-6); bottom: var(--s-6); }
.press-h2 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); margin: 0 0 var(--s-6); }
.press-h3 { font-size: var(--t-lead); font-weight: 500; margin: var(--s-7) 0 var(--s-4); }
.trailer-frame.is-playing > .ly-play { visibility: hidden; }
.post-cover { position: relative; }

/* ---------------------------------------------------------------- the media band: words on la Toupie's dark sky */
#weather > .layer > img { object-position: 50% 70%; }
.band__head h2, .band__head p { color: #ffffff; }
.band__head p { max-width: 44ch; }

/* ---------------------------------------------------------------- one primary look: the palette's gold, everywhere */
.hero__over > :first-child, .footer--statement { --action: var(--p-action); --action-ink: var(--p-action-ink); }
.band__foot { margin-top: auto; display: grid; gap: var(--s-3); }
.band__foot .t-label { color: #ffffff; margin: 0; }
.band__presets { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; color: #ffffff; font-size: var(--t-lead); }
#faq .faq__item > :is(h3, p) { margin: 0; }
@media (max-width: 639px) {
  #devlog .devlog__links { display: none; }
  .wall__item { aspect-ratio: 1 / 1; }
}
/* the narrowest phones (320): these two sections take a second screen rather than run into the next */
@media (max-width: 359px) { #devlog, #pc { --hm: 2; } }
#faq .faq { margin-top: 0; }
@media (max-width: 1023px) { #faq .faq__photo { margin-top: var(--s-6); } }
@media (max-width: 639px) { #faq .faq__photo { aspect-ratio: 21 / 9; margin-top: var(--s-5); } }
/* the tablet: the dev log keeps its two columns, so the section stays one screen */
@media (min-width: 640px) and (max-width: 1023px) {
  .devlog__grid > .post-card--lead { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .devlog__grid > .post-card--row { grid-column: 7 / span 6; display: flex; flex-direction: column; }
  .devlog__grid > .post-card--row > .panel { grid-row: auto; }
  .post-card--lead .post-card__sum { display: none; }
}
.prose ul, ul.prose { list-style: disc; padding-left: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li::marker { color: var(--accent); }

/* ---------------------------------------------------------------- the tablet (640 to 1023): splits and card pairs stay side by side */
@media (min-width: 640px) and (max-width: 1023px) {
  #pc .grid > .specs, #faq .grid > .faq { grid-column: 1 / span 5; }
  #pc .grid > .pc__photo, #faq .grid > .faq__photo { grid-column: 6 / span 7; margin-top: 0; }
  #places .places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-5); }
  #places .places > li { padding-block: 0 var(--s-4); }
  #places .places > li:first-child { padding-top: 0; }
  #sailing { --h: 1; }
  #sailing > .wrap { display: flex; flex-direction: column; row-gap: var(--s-5); }
  #sailing .grid > .card { grid-column: span 6; }
  #sailing .card > p { display: none; }
}
/* the phone: each section holds its screens */
@media (max-width: 639px) {
  #places .section-head > p { display: none; }
  #places .places > li { padding-block: var(--s-3); }
  #sailing .card > p { display: none; }
  .wall__item { aspect-ratio: 4 / 3; }
  #faq .faq > .faq__item { padding-block: var(--s-2); }
  #faq .faq__photo { aspect-ratio: 4 / 1; }
  #faq .section-head > p { display: none; }
}
/* a tall tablet (820x1180 upright): the splits stack, so each section fills its taller screen */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 1100px) {
  #pc .grid > .specs, #faq .grid > .faq, #pc .grid > .pc__photo, #faq .grid > .faq__photo { grid-column: 1 / -1; }
  #pc .grid > .pc__photo, #faq .grid > .faq__photo { margin-top: var(--s-6); }
  #places .places { display: block; }
  #places .places > li { padding-block: var(--s-4); }
  #faq .faq__photo { aspect-ratio: 21 / 9; }
}