/* Countrio's sheets: support, privacy, terms, credits and the press kit.
   The home page's walnut desk, at night, and on it one sheet of the atlas's
   parchment holding the page. The words are the live pages', moved here by
   tools/sheets.py; this file is only the desk, the paper and the ink. */

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/eb-garamond-500-f85bd65edb.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/eb-garamond-700-46866c5597.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --desk: #160c06;
  --cream: #fae8bd;          /* type on the desk, as on the home page */
  --cream-soft: #d3b47f;
  --gold: #daa544;
  --paper: #f3e5c6;          /* the atlas's parchment */
  --panel: #ead7b0;
  --brass: #9c7a45;
  --type: #2b1d0e;           /* ink on the paper */
  --type-soft: #5b4629;
  --rule: rgb(91 70 41 / 0.3);
  --link: #173a57;           /* the sea's navy */
  --link-hover: #8f3320;
  --gut: clamp(16px, 5vw, 64px);
  --edge: 40px;              /* how deep the torn edge runs */
  --sheet: 860px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gut) 44px;
  background: var(--desk);
  color: var(--cream);
  font: 500 19px/1.6 "EB Garamond", Georgia, "Times New Roman", serif;
  font-synthesis: none;
}
/* The desk stays put behind the page, so a long sheet slides across it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 50% 28%, rgb(22 12 6 / 0) 0%, rgb(10 5 2 / 0.6) 100%),
    linear-gradient(rgb(12 7 3 / 0.35), rgb(12 7 3 / 0.35)),
    url("/assets/desk-870b75817d.webp") center / cover no-repeat,
    var(--desk);
}
@media (max-aspect-ratio: 1/1) {
  body::before {
    background:
      radial-gradient(120% 90% at 50% 28%, rgb(22 12 6 / 0) 0%, rgb(10 5 2 / 0.6) 100%),
      linear-gradient(rgb(12 7 3 / 0.35), rgb(12 7 3 / 0.35)),
      url("/assets/desk-m-9d63410d6a.webp") center / cover no-repeat,
      var(--desk);
  }
}

::selection { background: rgb(218 165 68 / 0.4); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }

/* ------------------------------------------------------------ the desk -- */
.desk-top {
  width: 100%;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 0 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: rgb(8 20 29 / 0.8);
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.brand--back { padding-left: 14px; }
.brand img { width: 34px; height: 34px; }
.brand:hover { color: #fff4d6; }
.desk-top :focus-visible,
.desk-foot :focus-visible { outline-color: var(--gold); }

.desk-foot {
  width: 100%;
  max-width: var(--sheet);
  margin: 28px auto 0;
  color: var(--cream-soft);
  font-size: 0.95rem;
}
.desk-foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.desk-foot a { display: inline-block; padding: 3px 0; color: var(--cream); }
.desk-foot a:hover { color: #fff4d6; }
.desk-foot p { margin: 10px 0 0; }

/* ----------------------------------------------------------- the sheet -- */
/* The torn edge is a border-image that repeats along the sheet at any
   length; the paper inside it is the same colour, with the same grain. */
.sheet {
  position: relative;
  width: 100%;
  max-width: var(--sheet);
  margin: 0 auto;
  border: var(--edge) solid transparent;
  border-image: url("/assets/sheet-edge-af82f134a4.svg") 40 / var(--edge) round;
  background: var(--paper) url("/assets/sheet-grain-43d81eeff8.svg") 0 0 / 200px 200px;
  background-clip: padding-box;
  padding: clamp(6px, 2.6vw, 26px) clamp(4px, 3.2vw, 34px) clamp(12px, 2.6vw, 28px);
  color: var(--type);
  color-scheme: light;
}
/* Its shadow on the desk, painted behind the paper. */
.sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(10px - var(--edge));
  box-shadow: 0 26px 50px -14px rgb(0 0 0 / 0.8), 0 3px 8px rgb(0 0 0 / 0.45);
  pointer-events: none;
}

.sheet__head { margin-bottom: 1.5rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--rule); }

h1, h2, h3, summary {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.12;
  color: var(--type);
  text-wrap: balance;
}
h1 { margin: 0; font-size: clamp(2.5rem, 6.2vw, 3.6rem); letter-spacing: -0.005em; }
h2 { margin: 2.3rem 0 0.7rem; font-size: clamp(1.6rem, 3.6vw, 2.05rem); }
h3 { font-size: 1.5rem; }

p, ul, dl { margin: 0.8rem 0; }
.sheet > :last-child { margin-bottom: 0; }
ul { padding-left: 1.3rem; }
li { margin: 0.45rem 0; }
li::marker { color: var(--brass); }
strong { font-weight: 700; }
/* EB Garamond comes here in two upright weights and no italic, and a slanted
   fake would read badly, so emphasis is set in the bold. */
em { font-style: normal; font-weight: 700; }

.meta { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--type-soft); letter-spacing: 0.02em; }
.page-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 0.8rem; font-size: 0.98rem; }
.page-nav a { display: inline-block; padding: 3px 0; }
.lead, .lede { max-width: 36em; font-size: 1.28rem; line-height: 1.5; }
.small { font-size: 0.92rem; color: var(--type-soft); }

.contact-box {
  margin: 1.8rem 0;
  padding: 18px 24px 20px;
  border-left: 3px solid #b0843a;
  border-radius: 3px;
  background: var(--panel);
}
.contact-box p { margin: 4px 0; }
.contact-box a { font-size: 1.45rem; }

details { border-bottom: 1px solid var(--rule); }
h2 + details { border-top: 1px solid var(--rule); }
summary {
  position: relative;
  padding: 13px 0 13px 30px;
  list-style: none;
  cursor: pointer;
  font-size: 1.42rem;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: translateY(-70%) rotate(-45deg);
  transition: transform 180ms ease-out;
}
details[open] > summary::before { transform: translateY(-80%) rotate(45deg); }
details p { margin: 0 0 1rem; padding-left: 30px; }

.download {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 4px;
  background: #12283a;
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px rgb(218 165 68 / 0.6), 0 8px 18px -10px rgb(0 0 0 / 0.7);
}
.download:hover { background: #1b3a52; color: #fff4d6; }

dt { margin-top: 0.9rem; font-weight: 700; }
dd { margin: 0.1rem 0 0; }

.press-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 1rem 0; }
.press-gallery a { display: block; border-radius: 10px; }
.press-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.65);
}

pre {
  margin: 0.8rem 0;
  padding: 16px 18px;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 4px;
  background: rgb(91 70 41 / 0.08);
  color: #3a2a17;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- small -- */
@media (max-width: 560px) {
  :root { --edge: 24px; --gut: 10px; }
  body { font-size: 18px; padding-bottom: 32px; }
  .brand { font-size: 1.22rem; }
  .brand img { width: 30px; height: 30px; }
  .sheet { padding: 2px 4px 8px; }
  .contact-box { padding: 14px 16px 16px; }
  .contact-box a { font-size: 1.22rem; overflow-wrap: anywhere; }
  summary { font-size: 1.28rem; }
  .press-gallery { gap: 10px; }
  .desk-foot { padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  summary::before { transition: none; }
}

@media print {
  body::before, .sheet::before, .desk-top { display: none; }
  body { padding: 0; background: #fff; color: #000; }
  .sheet { max-width: none; padding: 0; border: 0; background: none; }
  .desk-foot, .desk-foot a { color: #000; }
}