/* Almond Linux — site stylesheet
   Palette: brown #8B5A2B, almond #D2A679, cream #F5DEB3, dark #2B2118
   (+ #3E210F, the logo's own outline brown, and #FBF3E2 paper).
   The logo outline is #3E210F: only ever place the logo on cream or paper. */
:root {
  --brown: #8B5A2B;
  --almond: #D2A679;
  --cream: #F5DEB3;
  --dark: #2B2118;
  --ink: #3E210F;
  --paper: #FBF3E2;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Trebuchet MS", sans-serif;
  --mono: "DejaVu Sans Mono", Menlo, monospace;
  --gut: clamp(1rem, 5vw, 5rem);
  --vpad: clamp(3.5rem, 9vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--dark);
  font: 400 1.0625rem/1.6 var(--sans);
  font-synthesis: none;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0; overflow-wrap: break-word; }
h2 { font-size: clamp(2rem, 1rem + 3vw, 4rem); margin-bottom: 1.5rem; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; }
p { margin: 0 0 1rem; max-width: 40rem; }
img { display: block; max-width: 100%; height: auto; }
ul, ol, dl, dd { margin: 0; padding: 0; }
.mono { font-family: var(--mono); font-size: .9em; }

/* fields: each sets its own link, focus and label colours */
.cream { background: var(--cream); color: var(--dark); --link: var(--ink); --focus: var(--dark); --kick: var(--ink); --rule: var(--brown); }
.paper { background: var(--paper); color: var(--dark); --link: var(--brown); --focus: var(--dark); --kick: var(--brown); --rule: var(--brown); }
.dark { background: var(--dark); color: var(--cream); --link: var(--almond); --focus: var(--almond); --kick: var(--almond); --rule: var(--brown); }

a { color: var(--link, var(--brown)); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus, var(--dark)); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -10rem; z-index: 10;
  padding: .75rem 1rem; background: var(--cream); color: var(--dark);
  border: 2px solid var(--dark); font-weight: 700;
}
.skip:focus { top: 1rem; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* the split grid: one column until 50rem, then 5/7, 8/4, 4/8 */
.split { display: grid; }
.field { padding: var(--vpad) var(--gut); min-width: 0; }

.kicker {
  font: .8125rem/1.4 var(--mono); color: var(--kick);
  letter-spacing: .04em; margin-bottom: 1rem;
}
.lead { font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); line-height: 1.5; }

/* header */
.masthead .field { padding-top: .75rem; padding-bottom: .75rem; }
.brand {
  display: inline-flex; align-items: center; gap: .75rem;
  font: 1.375rem/1 var(--serif); color: var(--ink); text-decoration: none;
}
.brand:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.navcell { background: var(--cream); --focus: var(--dark); border-bottom: 1px solid var(--brown); }
.masthead .navcell { padding-top: 0; }
.navcell ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.navcell a { display: block; padding: .5rem 0; color: var(--dark); text-decoration: none; }
.navcell a:hover { text-decoration: underline; }
.navcell a[aria-current="page"] {
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px;
  text-underline-offset: .45em; text-decoration-color: var(--brown);
}

/* hero */
.stack { display: flex; flex-direction: column; gap: 2.5rem; }
.hero .cream { flex-direction: row; align-items: flex-end; gap: 1.25rem; padding-top: 2rem; padding-bottom: 2.5rem; }
.mark { width: clamp(4.5rem, 20vw, 8rem); }
h1 { font-size: clamp(2.5rem, 12vw, 6rem); line-height: .95; color: var(--ink); }
h1 span, .tagline span { display: block; }
.tagline {
  font: clamp(2.75rem, 15vw, 6rem)/.98 var(--serif);
  color: var(--cream); margin: 0; max-width: none;
}
.lede { font-size: 1.25rem; line-height: 1.45; margin-bottom: .5rem; }
.strong { font-weight: 700; color: var(--almond); margin-bottom: 1rem; }
.hero-cta { margin: 0 0 2.5rem; }
.hero-cta .btn { margin-top: .5rem; }
.cap {
  font: .75rem/1.4 var(--mono); text-transform: uppercase;
  letter-spacing: .08em; color: var(--kick, var(--almond)); margin-bottom: .5rem;
}

/* ledger: mono key/value rows with dotted leaders */
.ledger { font: .875rem/1.5 var(--mono); max-width: 34rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--rule, var(--brown)); }
.ledger div {
  display: grid; grid-template-columns: 10ch minmax(0, 1fr); gap: 0 1ch;
  padding: .35rem 0; border-top: 1px solid var(--rule, var(--brown));
}
.ledger dt { display: flex; align-self: start; color: var(--kick, var(--almond)); }
.ledger dt::after { content: ""; flex: 1; margin: 0 0 .4em .75ch; border-bottom: 1px dotted currentColor; }

.btn {
  display: inline-block; padding: .875rem 1.25rem;
  background: var(--almond); color: var(--dark);
  border: 2px solid var(--almond); border-radius: 2px;
  font-weight: 700; line-height: 1.2; text-decoration: none;
}
.btn:hover { background: var(--cream); border-color: var(--cream); }
.cream .btn, .paper .btn { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.cream .btn:hover, .paper .btn:hover { background: var(--ink); border-color: var(--ink); }
.arr { font-family: var(--mono); font-weight: 400; margin-left: .35rem; }

/* logbook: dated entries of things that actually happened */
.logbook { list-style: none; margin: .5rem 0 1rem; border-bottom: 1px solid var(--brown); }
.logbook li { padding: .75rem 0; border-top: 1px solid var(--brown); line-height: 1.45; }
.logbook time { display: block; font: .8125rem/1.5 var(--mono); color: var(--kick, var(--ink)); }
.aside { font-style: italic; }

/* vision: three words, stepped down the page */
.goal { border-top: 3px solid var(--brown); padding: 1rem 0 2.25rem; }
.goal + .goal { margin-left: clamp(1.5rem, 8vw, 9rem); }
.goal + .goal + .goal { margin-left: clamp(3rem, 16vw, 18rem); }
.goal dt { font: clamp(2.75rem, 1.5rem + 5vw, 6rem)/1 var(--serif); color: var(--brown); margin-bottom: .75rem; }
.goal dd { max-width: 30rem; font-size: 1.125rem; }

/* editions: two planned builds of Almond, set as a typographic pair */
.edition { border-top: 3px solid var(--rule); padding: 1.25rem 0 2.5rem; }
.edition:last-child { padding-bottom: 0; }
.edition + .edition { margin-left: clamp(0rem, 10vw, 10rem); }
.edition .acro { font: clamp(3rem, 2rem + 6vw, 7rem)/.95 var(--serif); color: var(--kick); margin: 0 0 .5rem; letter-spacing: -.01em; }
.edition .expansion { font: .9375rem/1.5 var(--mono); margin-bottom: 1.25rem; }
.edition .ledger { margin-bottom: 0; }
.edition p:not(.acro):not(.expansion) { max-width: 34rem; }

/* downloads: one row per edition — words on one side, a screen on the other, sides alternating */
.choose-head { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.ed-row { display: grid; gap: 2.5rem; padding: var(--vpad) var(--gut); align-items: center; }
.ed-text { min-width: 0; }
.ed-tag { font: italic 400 clamp(1.5rem, 1rem + 1.6vw, 2.25rem)/1.2 var(--sans); color: var(--brown); margin-bottom: .5rem; }
.ed-name { font-size: clamp(2.25rem, 1rem + 3.6vw, 4.25rem); line-height: 1; color: var(--ink); margin-bottom: .75rem; }
.ed-row .expansion { font: .875rem/1.5 var(--mono); margin-bottom: 1.25rem; }
.ed-desc { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.55; max-width: 36rem; margin-bottom: 1.75rem; }
.ed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.ed-actions a { font-weight: 700; font-size: 1.125rem; }
.ed-actions .btn { margin-top: 0; }
/* not a link: there is nothing to download yet, and it must not look clickable */
.ed-row .btn.btn-off, .ed-row .btn.btn-off:hover {
  background: transparent; color: var(--dark); border: 2px dashed var(--dark);
  font-family: var(--mono); font-weight: 400; font-size: .9375rem; cursor: default;
}
.screen { margin: 0; min-width: 0; }
.screen-inner {
  position: relative; aspect-ratio: 16 / 10;
  background: var(--paper); border: clamp(.5rem, 1.2vw, .875rem) solid var(--dark);
  box-shadow: .75rem .75rem 0 var(--brown);
}
.paper .screen-inner { background: var(--cream); }
.screen-inner img { position: absolute; top: 50%; left: 50%; width: auto; height: 46%; max-width: none; transform: translate(-50%, -50%); }
.screen figcaption { font: .8125rem/1.5 var(--mono); margin-top: 1.5rem; color: var(--kick); }

/* development: a few real icons from the Almond Pure icon theme */
.icon-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 1.5rem 1rem; margin: 1rem 0 0; }
.icon-grid li { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; font: .8125rem/1.3 var(--mono); }
.icon-grid img { width: 64px; height: 64px; }

/* roadmap ledger */
.roadmap .wide { padding-bottom: 0; }
.roadmap .rl { padding-top: 2.5rem; padding-bottom: 0; }
.roadmap .notes { padding-top: 3rem; }
.notes ul { padding-left: 1.1rem; list-style: square; margin-bottom: 1.5rem; }
.notes li { margin-bottom: .6rem; max-width: 34rem; }
.notes li::marker { color: var(--almond); }
.notes h3 + p, .notes ul + h3 { margin-top: 0; }
.notes ul + h3 { padding-top: 1rem; }
.steps { padding-left: 1.5rem; margin-bottom: 1rem; font-size: .9375rem; }
.steps li { margin-bottom: .5rem; max-width: 34rem; }
.steps li::marker { font-family: var(--mono); color: var(--almond); }
.cols { display: none; }
.road { list-style: none; border-bottom: 1px solid var(--brown); }
.road li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "ver state" "what what" "det det";
  gap: .6rem 1rem; padding: 1.25rem 0; border-top: 1px solid var(--brown);
}
.ver { grid-area: ver; font: .9375rem/1.5 var(--mono); color: var(--almond); }
.code { display: block; font-size: .8125rem; color: var(--cream); }
.what { grid-area: what; font: clamp(1.25rem, 1rem + .8vw, 1.75rem)/1.25 var(--serif); }
.state {
  grid-area: state; align-self: start; justify-self: end;
  font: .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  padding: .4rem .55rem; border: 1px solid var(--almond); color: var(--almond); white-space: nowrap;
}
.cur .state { background: var(--almond); color: var(--dark); }
.det { grid-area: det; font: .875rem/1.55 var(--mono); max-width: 34rem; }

/* downloads, open source, get involved */
.big {
  font: clamp(1.375rem, 1rem + 1.1vw, 2rem)/1.25 var(--serif); color: var(--ink);
  border-left: 6px solid var(--brown); padding-left: 1rem; margin: 2.5rem 0 1.5rem;
}
.dark .big { color: var(--cream); border-left-color: var(--almond); }
.lockup { width: clamp(7rem, 18vw, 15rem); }
.btn { margin-top: 1rem; }

/* inner pages: prose and plain tables */
.prose h2 { margin-top: 3rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1rem; max-width: 40rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--brown); }
.dark .prose li::marker, .prose.dark li::marker { color: var(--almond); }
pre, code, kbd { font-family: var(--mono); font-size: .875rem; }
pre { background: var(--dark); color: var(--cream); padding: 1rem 1.25rem; overflow-x: auto; max-width: 44rem; border-left: 6px solid var(--almond); }
table { border-collapse: collapse; width: 100%; max-width: 44rem; margin: 0 0 1.5rem; font-size: .9375rem; }
caption { text-align: left; font: .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--kick); padding-bottom: .5rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .75rem .55rem 0; border-top: 1px solid var(--rule, var(--brown)); }
thead th { font: .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--kick); border-top: 0; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 1px solid var(--rule, var(--brown)); }
.scroll { overflow-x: auto; max-width: 100%; }

/* inner-page head: long one-word titles ("Documentation", "Development") must fit their column */
.pagehead h1 { font-size: clamp(1.75rem, 11vw, 6rem); }

/* downloads: release-name page head (h1 = "Almond 0.1" line + huge codename) */
.release h1 .rel { display: block; font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); line-height: 1.1; margin-bottom: .25rem; }
.release h1 .cn { display: block; font-size: clamp(3.25rem, 17vw, 8.5rem); line-height: .9; }

/* footer */
.foot { border-top: 1px solid var(--brown); font-size: .9375rem; }
.foot .field { padding-top: 3rem; padding-bottom: 3rem; }
.foot .field + .field { padding-top: 0; }
.fname { font: 1.75rem/1.1 var(--serif); margin-bottom: .75rem; }
.expand { font: .8125rem/1.5 var(--mono); }
.expand div { display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 0 1ch; margin-bottom: .25rem; }
.expand dt { color: var(--almond); }
.flinks { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
.legal { font-size: .8125rem; line-height: 1.5; }

@media (min-width: 50rem) {
  .s57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .s84 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .s48 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

  .navcell { background: var(--dark); --focus: var(--almond); border-bottom: 0; display: flex; align-items: center; }
  .masthead .navcell { padding-top: .75rem; }
  .navcell a { color: var(--cream); }
  .navcell a[aria-current="page"] { color: var(--almond); text-decoration-color: var(--almond); }

  .hero { min-height: calc(100vh - 4.5rem); }
  .hero .dark { justify-content: space-between; }
  .hero .cream { flex-direction: column; align-items: flex-start; gap: 2.5rem; padding: var(--vpad) var(--gut); }
  .mark { width: clamp(6.875rem, 16vw, 13.75rem); }
  h1 { font-size: clamp(3rem, 6.5vw, 7rem); }
  /* scale with height too, so the hero button stays on a laptop's first screen */
  .tagline { font-size: clamp(3.5rem, min(8vw, 10vh), 8rem); }
  .hero .dark { padding-top: clamp(2.5rem, 6vh, 6rem); padding-bottom: clamp(2.5rem, 6vh, 6rem); gap: 2rem; }
  .hero .strong { margin-bottom: 0; }
  .hero .ledger { margin-bottom: 0; }

  .indent { margin-left: clamp(0rem, 14vw, 16rem); }
  .log { display: flex; flex-direction: column; justify-content: flex-end; }

  .roadmap .wide { grid-column: 1 / -1; }
  .roadmap .notes { grid-column: 1; grid-row: 2; padding-top: 2.5rem; }
  .roadmap .rl { grid-column: 2; grid-row: 2; padding-bottom: var(--vpad); }
  .drop { padding-top: calc(var(--vpad) * 1.75); }
  .foot .field + .field { padding-top: 3rem; }

  /* inner-page head: title on cream, summary on dark */
  .pagehead .cream { display: flex; flex-direction: column; justify-content: flex-end; }
  .pagehead h1 { font-size: clamp(2.25rem, 4.6vw, 5.5rem); }
  .ed-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
  .ed-row.flip .ed-text { order: 2; }
  .edition + .edition { margin-left: clamp(1rem, 20vw - 9rem, 10rem); }
  .release h1 .cn { font-size: clamp(3rem, 6.6vw, 9rem); }
}

@media (min-width: 70rem) {
  .cols, .road li { grid-template-columns: 9rem minmax(0, 1fr) 9rem; }
  .cols {
    display: grid; gap: 0 1rem; padding-bottom: .5rem;
    font: .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--almond);
  }
  .road li { grid-template-areas: "ver what state" ". det det"; }
  .ver { padding-top: .35rem; }
  .state { justify-self: start; }
}