/* "Covers" look: the visual language of Carlos's book covers.
   Two flat fields, black and sand, meeting on a hard edge; the stepped profile from the solo-diving cover;
   a plain humanist sans in capitals for names and labels; a classic serif for titles and reading.
   Loaded after style.css; switch looks in desk > Settings. */
@font-face { font-family: "PT Sans"; font-weight: 400; font-display: swap; src: url(fonts/pt-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "PT Sans"; font-weight: 700; font-display: swap; src: url(fonts/pt-sans-latin-700-normal.woff2) format("woff2"); }

:root {
  --sand: #c6c09c;            /* the cover sand */
  --olive: #968a42;           /* the ship on Lights and Shadows */
  --olive-dark: #484236;
  --sea: #ffff;             /* page: sand, lightened for reading sea color: e6e1cc */
  --paper: #f4f1e6;
  --ink: #121212;             /* the cover black */
  --ink-2: #5d5747;
  --rule: #c6c09c;
  --abyss: #121212;
  --abyss-ink: #e6e1cc;
  --flag: #121212;            /* buttons are black with sand letters, like the cover titles */
  --flag-ink: #c6c09c;
  --link: #5a4f1c;
  --t-diving: #3c6a66; --t-medicine: #94392b; --t-archaeology: #7d5f1f; --t-environment: #55652a;
  --t-science: #3d5670; --t-tech: #5a4868; --t-recalls: #a0391c; --t-film: #7a4760; --t-current: #4a4a40;
  --cond: "PT Sans", "Myriad Pro", Calibri, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sea: #121212; --paper: #1b1a16; --ink: #e9e5d3; --ink-2: #b3ac8c; --rule: #3a372c;
    --abyss: #000000; --flag: #c6c09c; --flag-ink: #121212; --link: #d3c98f;
    --t-diving: #8fbdb7; --t-medicine: #e08c7c; --t-archaeology: #d4b26a; --t-environment: #b3c27a;
    --t-science: #93add0; --t-tech: #b9a3cf; --t-recalls: #ee9071; --t-film: #d99cb9; --t-current: #d6d1bb;
  }
}

/* masthead: black field, the name in sand capitals as on the covers, then the stepped edge into the sand page */
.surface { position: relative; padding-bottom: 46px; }
.surface::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px;
  background: url(edge.svg) repeat-x left bottom / 1200px 46px; }
@media (prefers-color-scheme: dark) { .surface { border-bottom: 1px solid #2a2820; padding-bottom: 12px; } .surface::after { display: none; } }
.brand { font: 400 clamp(24px, 3.6vw, 36px)/1.05 var(--cond); text-transform: uppercase; letter-spacing: .04em; color: var(--sand); gap: 16px; }
.brand.small { font-size: 20px; }
.tagline { font-size: 18px; }
.sections { border-top-color: #34322a; gap: 4px 22px; }
.sections a { font: 400 15px/1 var(--cond); letter-spacing: .03em; color: #cfc9ab; }
.sections a:hover { color: #fff; }
.sections a[aria-current] { color: var(--sand); border-bottom-color: var(--sand); }
@media (min-width: 900px) { .sections a { font-size: 15px; } }

/* headlines in the serif of Lights and Shadows; labels in the sans */
.story h1, .story h2, .section-head h1, .prose h1, .prose h2, .related li, .popular li, .book h3,
.ad-text strong, .article-body h2, .article-body h3, .weekly-video h2 { font-family: var(--serif); letter-spacing: 0; }
.story h1, .story h2 { font-weight: 700; }
.story-row h2 { font-size: 27px; line-height: 1.15; }
.related li, .popular li { font-weight: 600; font-size: 18px; line-height: 1.25; }
.section-head h1 { font-weight: 700; }
.theme, .byline, .side-block h2, .related h2, .ad-label, .read, .actions button, .yt-out, .gauge li span, .needle { font-family: var(--cond); }
.byline { letter-spacing: .02em; }
.theme { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.side-block h2, .related h2 { text-transform: uppercase; font-size: 15px; letter-spacing: .08em; font-weight: 700; }
.side-block, .related { border-top-color: var(--ink); }

/* the lead story is a black field with sand title and white text: the lower half of the covers */
.story-lead, .story-lead.nopic { background: var(--abyss); color: #f4f1e6; border: 0; border-top: 0; }
.story-lead h2 a { color: var(--sand); }
.story-lead .why, .story-lead .abstract, .story-lead .points li { color: #f4f1e6; }
.story-lead .byline, .story-lead .byline .src { color: #b3ac8c; }
.story-lead .points li::before { border-top-color: var(--sand); }
.story-lead .theme { color: var(--sand); }
.story-lead .theme .ring { border-color: var(--sand); background: radial-gradient(circle, var(--sand) 0 2px, transparent 2.5px); }
.story-lead .read { background: var(--sand); color: #121212; }
.story-lead .read:hover { background: #ddd6b2; }
.story-lead .actions button { color: #b3ac8c; }
.story-lead .actions button:hover { color: #fff; }
.story-lead .like[aria-pressed="true"] { color: var(--sand); }
.story-lead .like[aria-pressed="true"] svg { fill: var(--sand); stroke: var(--sand); }

.read { border-radius: 0; letter-spacing: .04em; font-weight: 700; font-size: 15px; text-transform: uppercase; padding: 12px 16px 11px; }
.read:hover { background: var(--olive-dark); }
.ad { border-color: var(--ink-2); border-radius: 0; }
.pic, .yt-play, .yt iframe { border-radius: 0; }
.editor-piece.story-row { border-left-color: var(--ink); }
.theme.mine { background: var(--ink); color: var(--sand); border-radius: 0; }
.story-lead .theme.mine { background: var(--sand); color: #121212; }
@media (prefers-color-scheme: dark) {
  .theme.mine, .story-lead .theme.mine { background: var(--sand); color: #121212; }
  .yt-play { background: #22201a; box-shadow: inset 0 0 0 1px #3a372c; }
}
.article-body blockquote { border-left-color: var(--olive); }
.points li::before { border-top-color: var(--olive); }
.story .points li::before { border-top-color: var(--olive); }

/* depth gauge in black and olive */
.needle { color: var(--ink); }
.needle::after { border-left-color: var(--ink); }
@media (prefers-color-scheme: dark) { .needle { color: var(--sand); } .needle::after { border-left-color: var(--sand); } }

/* videos: black field, sand play mark */
.yt-play { background: #121212; color: #f4f1e6; }
.yt-icon { background: var(--sand); }
.yt-icon::after { border-left-color: #121212; }
.yt-text small { color: var(--sand); }
.yt-note { color: #a49e83; }

/* footer: the black field again */
.seabed { color: #b3ac8c; }
.foot nav a { color: var(--sand); font-family: var(--cond); }
.foot .ai-note { color: #8f8a72; }
.copy { color: #7d785f; font-family: var(--cond); }
.toast { border-radius: 0; font-family: var(--cond); }