/* Theme "pirate": the trove in MailTrove. Deep-sea navy bands with a wave
   edge behind the hero and the footer, a parchment ground with a faint paper
   grain, gold buttons like the lock on the chest, rust-red map ink for links,
   and an old-style serif for the headlines. Loaded after pages.css and
   home.css; it redefines tokens and dresses the bands, cards and stages.
   The copy is untouched: the theme is the look. */
:root {
  --sea: #0F2A3F;
  --sea-deep: #0A1D2C;
  --gold: #C9962B;
  --gold-bright: #E2B043;
  --gold-ink: #7A5614;
  --rust: #A3321F;
  --ink: #2B2418;

  --bg: #EFE4C8;
  --surface: #FBF5E6;
  --surface-2: #F5ECD6;
  --text: var(--ink);
  --muted: #6B5E48;
  --hairline: #DCCCA6;
  --hairline-strong: #C9B689;
  --accent: var(--gold);
  --accent-ink: var(--rust);
  --shadow: 0 1px 2px rgba(43, 36, 24, .08), 0 18px 40px -20px rgba(43, 36, 24, .35);
  --shadow-soft: 0 1px 2px rgba(43, 36, 24, .06), 0 12px 30px -22px rgba(43, 36, 24, .28);

  --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14110C; --surface: #1F1A12; --surface-2: #19150E; --text: #EFE6D2;
    --muted: #B3A68C; --hairline: #35301F; --hairline-strong: #4A4229;
    --accent: #D9A73A; --accent-ink: #E09A7A;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 22px 48px -24px rgba(0,0,0,.7);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.35), 0 16px 34px -24px rgba(0,0,0,.6);
  }
}

/* Paper grain over the whole ground: a fixed layer of SVG noise, very faint. */
body::before {
  background:
    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 0.3 0 0 0 0 0.22 0 0 0 0 0.1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(80ch 50ch at 10% 0%, rgba(201,150,43,.14), transparent 60%);
  opacity: 1;
}
h1, h2, h3, .tier h3, .shot figcaption b, .feat figcaption b, .point h3, .closer h2, .page-head h1 {
  font-family: var(--display);
  letter-spacing: -.01em;
}
h2 { font-size: 1.6rem; }
.gallery-head h2::after, .page-head h1::after {
  content: ""; display: block; width: 54px; height: 3px; margin-top: 10px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

/* ---------- Buttons: brass, with a pressed edge ---------- */
.btn {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--sea-deep);
  border-radius: 9px;
  border-color: #A87A1F;
  box-shadow: 0 2px 0 #8F681B, 0 10px 22px -12px rgba(201,150,43,.9);
}
.btn:hover { background: linear-gradient(180deg, #EBBB4F, var(--gold-bright)); color: var(--sea-deep); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--hairline-strong); box-shadow: var(--shadow-soft); }
.btn.ghost:hover { background: var(--surface-2); }
.badge { color: var(--text); border-radius: 8px; }
.badge:hover { border-color: var(--gold); }

/* ---------- The sea: top bar and hero, with a wave edge ---------- */
header.bar, .hero { background: var(--sea); color: #fff; }
.hero header.bar { background: transparent; }
.hero {
  position: relative;
  background:
    radial-gradient(90ch 50ch at 85% -10%, rgba(201,150,43,.26), transparent 60%),
    radial-gradient(70ch 40ch at 0% 100%, rgba(35,96,140,.35), transparent 62%),
    var(--sea);
  padding-bottom: 92px;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22c100-22 200-22 300 0s200 22 300 0 200-22 300 0 200 22 300 0v22H0z' fill='%23EFE4C8'/%3E%3C/svg%3E") repeat-x bottom / 1200px 44px;
}
@media (prefers-color-scheme: dark) {
  .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22c100-22 200-22 300 0s200 22 300 0 200-22 300 0 200 22 300 0v22H0z' fill='%2314110C'/%3E%3C/svg%3E"); }
}
header.bar .brand { color: #fff; }
header.bar .brand .word { font-family: var(--display); font-size: 1.25rem; }
header.bar .brand .word b { color: var(--gold-bright); }
header.bar .nav a { color: rgba(255,255,255,.72); }
header.bar .nav a:hover, header.bar .nav a[aria-current="page"] { color: var(--gold-bright); }
/* The language menu (partials/lang-menu.html) sits in the nav: its label
   reads like the other links, and its parchment list keeps the page's ink,
   not the bar's white. */
header.bar .nav .lang-menu summary { color: rgba(255,255,255,.72); }
header.bar .nav .lang-menu summary:hover, header.bar .nav .lang-menu[open] summary { color: var(--gold-bright); }
header.bar .nav .lang-menu a { color: var(--text); }
header.bar .nav .lang-menu a:hover, header.bar .nav .lang-menu a[aria-current] { color: var(--accent-ink); }
/* The store pill in the top bar is the same brass as every store button. */
header.bar .badge {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--sea-deep); border-color: #A87A1F;
  box-shadow: 0 1px 0 #8F681B;
  padding: 7px 13px;
}
header.bar .badge:hover { background: linear-gradient(180deg, #EBBB4F, var(--gold-bright)); border-color: #A87A1F; color: var(--sea-deep); }
.hero .status { color: rgba(255,255,255,.72); }
.hero .dot { background: var(--gold-bright); box-shadow: 0 0 0 0 rgba(226,176,67,.55); }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(226,176,67,.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(226,176,67,0); }
}
.hero h1.head { color: #fff; font-weight: 700; letter-spacing: -.015em; }
.hero h1.head .keep { color: var(--gold-bright); font-style: italic; font-weight: 400; font-size: .86em; margin-top: .08em; }
.hero .lede { color: rgba(255,255,255,.8); }
.hero .dl-fine { color: rgba(255,255,255,.62); }
.hero .dl-fine a:hover { color: #fff; }
/* The download picks are parchment tickets on the sea, whatever the scheme, like
   the archive card beside them; the Mac's is brass while it leads. */
.dl-picks { --text: #2B2418; --muted: #6B5E48; --surface: #FBF5E6; --surface-2: #F5ECD6; --hairline: #DCCCA6; --hairline-strong: #C9B689; }
.dl-pick { border-radius: 10px; }
.dl-pick.is-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--sea-deep); border-color: #A87A1F;
  box-shadow: 0 2px 0 #8F681B, 0 10px 22px -12px rgba(201,150,43,.9);
}
.dl-pick.is-primary:hover { background: linear-gradient(180deg, #EBBB4F, var(--gold-bright)); border-color: #A87A1F; }
.dl-pick.is-primary .dl-pick-sub { color: rgba(10,29,44,.78); }
.dl-pick.is-secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #fff; }
.dl-pick.is-secondary:hover { border-color: var(--gold-bright); background: rgba(255,255,255,.1); }
.dl-pick.is-secondary .dl-pick-sub { color: rgba(255,255,255,.7); }
.dl-pick.is-secondary.is-soon:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.dl-pick.dl-store.is-primary { background: var(--surface); color: var(--text); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,150,43,.28), var(--shadow-soft); }
.dl-pick.dl-store.is-primary .dl-pick-sub { color: var(--muted); }
@media (min-width: 900px) and (min-height: 701px) { .hero { --hero-top: 56px; } }

/* The archive card: parchment, with a wax-red stamp where "Read-only" was. */
.archive {
  --text: #2B2418; --muted: #6B5E48; --surface: #FBF5E6; --surface-2: #F5ECD6; --hairline: #DCCCA6; --hairline-strong: #C9B689;
  color: #2B2418; border-radius: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), 0 40px 80px -30px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.5);
}
.archive-top .ro {
  color: var(--rust); border: 2px solid var(--rust); border-radius: 4px;
  padding: 2px 7px; transform: rotate(-6deg); letter-spacing: .04em;
  font-family: var(--display); font-weight: 700; font-size: .74rem;
  opacity: .85;
}
.archive-top .ro::before { display: none; }
.archive .folders li.on { background: var(--sea); color: #fff; }
.archive .folders li.unread .n { color: var(--rust); }
.archive .mrow.on { background: #F1E3BB; }
.archive .found { border-color: var(--gold-ink); background: var(--surface-2); }
.archive .subj mark { color: var(--rust); }
.archive .att { color: #2B2418; }

/* ---------- Stages: a chart's corner, with a compass rose ---------- */
.stage, .closer {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%237A5614' stroke-width='1'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Cpath d='M50 6v88M6 50h88M19 19l62 62M81 19L19 81'/%3E%3Cpath d='M50 10l6 34-6 6-6-6z' fill='%237A5614'/%3E%3Cpath d='M50 90l6-34-6-6-6 6z'/%3E%3Cpath d='M10 50l34 6 6-6-6-6z'/%3E%3Cpath d='M90 50l-34 6-6-6 6-6z'/%3E%3C/svg%3E") no-repeat right -40px top -40px / 260px 260px,
    radial-gradient(120% 90% at 50% -20%, rgba(201,150,43,.18), transparent 62%),
    linear-gradient(180deg, #EBDFBF, var(--surface));
  border-color: var(--hairline-strong);
  border-radius: 16px;
}
.stage { background-blend-mode: normal; }
.stage::before { content: ""; position: absolute; }
.closer { position: relative; overflow: hidden; }
.closer > * { position: relative; }
/* On a phone the rose would sit on the closer's headline: it moves to the
   bottom corner, mostly off the panel. */
@media (max-width: 720px) {
  .closer { background-size: 200px 200px, auto, auto; background-position: right -80px bottom -80px, 0 0, 0 0; }
}
@media (prefers-color-scheme: dark) {
  .stage, .closer {
    background:
      radial-gradient(120% 90% at 50% -20%, rgba(201,150,43,.14), transparent 62%),
      linear-gradient(180deg, #2A2316, var(--surface));
  }
}
.shot-frame, .fcard, .tier, .point, main.card { border-radius: 12px; border-color: var(--hairline-strong); }
.framed .shot-bar { background: linear-gradient(180deg, #E9E1CC, #DCD2B8); border-bottom-color: #C9B689; }
.framed .shot-bar span { color: #5A4D38; }
.gallery-sec { padding-top: 48px; }
.ask-lead .stage {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(163,50,31,.14), transparent 62%),
    linear-gradient(180deg, #EBDFBF, var(--surface));
}
.ask-lead .meta { color: var(--rust); background: #F3DCCB; }
.peek { background: rgba(43,36,24,.85); }

/* Feature cards: the app's parts in the theme's ink. */
.chip { background: #F1E3BB; color: var(--gold-ink); }
.chip.on { background: var(--sea); color: #fff; }
.fc-btn { background: var(--sea); }
.hit mark, .mrow .subj mark { color: var(--rust); }
.fc-field, .found { border-color: var(--gold-ink); }
.cmsg.on { background: #F1E3BB; }
.ev .dblock .m { background: var(--sea); }
.mi.hot { color: var(--sea); }
.mi.hot::before { border-color: var(--sea); background: radial-gradient(circle, var(--sea) 45%, transparent 50%); }
.notice { background: #F3DCCB; color: var(--rust); }
.notice .act { color: var(--sea); }
/* Attendee replies in the theme's own inks, not the stock green/amber/red. */
.att-list .ok { color: #2E6B45; }
.att-list .maybe { color: var(--gold-ink); }
.att-list .no { color: var(--rust); }

/* Dark mode for the parts above that set a light colour outright. */
@media (prefers-color-scheme: dark) {
  .cmsg.on { background: rgba(201,150,43,.16); }
  .chip { background: rgba(201,150,43,.16); color: var(--gold-bright); }
  .chip.on, .fc-btn, .ev .dblock .m { background: var(--gold); color: var(--sea-deep); }
  .mi.hot { color: var(--gold-bright); }
  .mi.hot::before { border-color: var(--gold-bright); background: radial-gradient(circle, var(--gold-bright) 45%, transparent 50%); }
  .ask-lead .meta, .notice { background: rgba(163,50,31,.22); color: #F0A48E; }
  .notice .act { color: var(--gold-bright); }
  .att-list .ok { color: #7FC48F; }
  .att-list .maybe { color: var(--gold-bright); }
  .att-list .no { color: #F0A48E; }
  .ask-lead .stage {
    background:
      radial-gradient(120% 90% at 50% -20%, rgba(163,50,31,.16), transparent 62%),
      linear-gradient(180deg, #2A2316, var(--surface));
  }
  .tier ul.feats li::before { background: rgba(201,150,43,.18); }
  .tier ul.feats li::after { border-color: var(--gold-bright); }
  .framed .shot-bar { background: linear-gradient(180deg, #E9E1CC, #DCD2B8); }
  .peek { background: rgba(201,150,43,.92); color: var(--sea-deep); }
}

/* Pricing: the featured tier is the chest. */
.tier.featured { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,150,43,.18), var(--shadow); }
.tier ul.feats li::before { background: #F1E3BB; }
.tier ul.feats li::after { border-color: var(--gold-ink); }
/* Every button to the store is the same brass: one action, one look. */
.doc li::marker { color: var(--gold-ink); }
.doc h2 { border-top-color: var(--hairline-strong); }

/* ---------- Footer: back into the sea ---------- */
footer.foot {
  position: relative; background: var(--sea); border-top: 0; padding: 40px 0 56px;
}
main { padding-bottom: 90px; }
footer.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -43px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22c100-22 200-22 300 0s200 22 300 0 200-22 300 0 200 22 300 0v22H0z' fill='%230F2A3F'/%3E%3C/svg%3E") repeat-x bottom / 1200px 44px;
}
footer.foot .foot-brand { color: rgba(255,255,255,.72); }
footer.foot .foot-nav a { color: rgba(255,255,255,.72); }
footer.foot .foot-nav a:hover { color: var(--gold-bright); }
footer.foot .foot-files { border-bottom-color: rgba(255,255,255,.14); }
footer.foot .foot-files span { color: rgba(255,255,255,.5); }
footer.foot .foot-files a { color: rgba(255,255,255,.72); }
footer.foot .foot-files a:hover { color: var(--gold-bright); }
footer.foot .foot-sister { border-top-color: rgba(255,255,255,.14); }
footer.foot .foot-sister span { color: rgba(255,255,255,.5); }
footer.foot .foot-sister a { color: rgba(255,255,255,.72); }
footer.foot .foot-sister a:hover { color: var(--gold-bright); }