/* journal.css — the ReMynd brand sheet.
 *
 * One object: a bound journal lying open on a dark desk. Every page of the site
 * sits on the desk; everything people read sits on paper. This file holds the
 * brand kit's tokens (same names, same values as the kit), the type styles and
 * the pieces every page shares: the desk bar, the book, running heads, rows,
 * buttons, links, form lines, the footer. Page sheets (simple.css, styles.css,
 * blog/blog.css, teams/teams.css) load after it and only lay things out.
 *
 * Rules the kit sets, kept here:
 *   - ink writes, muted annotates, claret is the only accent and never fills a
 *     button or a background; blue means a link and is always underlined
 *   - lines, not boxes: hairlines divide a page, nothing on paper is raised
 *   - only the book casts a shadow
 *   - one weight; emphasis comes from size, italics and claret
 *
 * One addition to the kit: --muted-ink. The kit's muted (#77766c) is 4.25:1 on
 * paper and 3.83:1 on paper-deep, which the kit itself lists as a pair to
 * settle. On the web small text has to clear 4.5:1, so text that must be read
 * uses --muted-ink (4.6:1 on paper-deep, 5.1:1 on paper, 4.5:1 on wash). The
 * kit's exact muted is kept for marks and decoration.
 */

/* Fallback faces. Iowan Old Style ships on Apple devices only; Windows has
   Palatino Linotype, which keeps the old-style look for free. Only a device with
   neither (Android, Linux) reaches these files, because a browser fetches a web
   font only when it is the first family in the stack that it can use. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/SourceSerif4-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(/fonts/SourceSerif4-var-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/JetBrainsMono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  /* colour */
  --desk:         #202320;
  --desk-text:    #f3ecdd;
  --desk-muted:   #a7a393;
  --desk-button:  #d9d4c3;
  --cover:        #472b30;
  --cover-edge:   #684149;
  --page-block:   #c9bc9c;
  --paper:        #fcf6e9;
  --paper-deep:   #f0ebdb;
  --ink:          #272823;
  --muted:        #77766c;
  --muted-ink:    #6a695f;
  --rule:         #d6ccb8;
  --claret:       #853047;
  --blue:         #365f77;
  --green:        #41695a;
  --tile:         #dee2d4;
  --tile-edge:    #b7c0ae;
  --wash:         #e6ebdd;
  --leaf:         #d9ccaa;
  --tab-index:    #cdbf9f;
  --tab-people:   #8f4b42;
  --tab-projects: #3d5f77;
  --tab-loops:    #5f7460;
  --ribbon-dark:  #6f2036;
  --ribbon-light: #a6445a;
  /* the one line on the desk: where a rule has to show against desk */
  --desk-rule:    rgba(243,236,221,.16);

  /* type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Source Serif 4", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "JetBrains Mono", monospace;

  /* spacing */
  --page-inset-x:   30px;
  --page-inset-top: 24px;
  --head-gap:       24px;
  --title-gap:      22px;
  --flow-gap:       12px;
  --label-gap:      10px;
  --row-pad:        9px;
  --tab-gap:        8px;
  --cover-thickness: 9px;
  --ledger-margin:  70px;
  --index-margin:   64px;
  /* the desk's own gutter: the bar, the book and the footer all start here */
  --pad:            clamp(16px, 5vw, 70px);

  /* radius */
  --radius-cover:    9px;
  --radius-portrait: 5px;
  --radius-tab:      5px;
  --radius-button:   4px;
  --radius-page:     3px;

  /* shadow: the book's, and the ribbon's where it lies over the spine */
  --shadow-book:   0 12px 32px rgba(0,0,0,.4);
  --shadow-ribbon: 0 1px 4px rgba(0,0,0,.25);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--desk); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--desk);
  color: var(--desk-text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; }
img, video { display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0; }
b, strong { font-weight: 400; color: inherit; }
::selection { background: var(--claret); color: var(--paper); }

/* Focus: one ring everywhere, in the ink of the surface it is on. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.on-desk :focus-visible, .top :focus-visible, .nav :focus-visible, .foot :focus-visible, .footer :focus-visible { outline-color: var(--desk-text); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--paper); color: var(--ink); padding: 10px 16px; z-index: 99; }
.skip:focus { left: 12px; top: 12px; }

/* ───────────────────────────── type styles ─────────────────────────────
   The kit's styles by name. Sizes are the kit's; a page sheet scales a display
   line up for a headline, never the weight. */
.label, .label-desk {
  font-family: var(--mono); font-size: 9.5px; line-height: 1.2; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted-ink);
}
.label-desk { font-size: 10.5px; color: var(--desk-muted); }
.weekday      { font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.2; color: var(--claret); }
.ledger-label { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.25; color: var(--claret); }
.blank-note   { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--muted-ink); }
.date-display { font-family: var(--serif); font-size: 42px; line-height: 1.1; }
.page-title   { font-family: var(--serif); font-size: 27px; line-height: 1.15; }
.index-title  { font-family: var(--serif); font-size: 16.5px; line-height: 1.3; }
.summary      { font-family: var(--serif); font-size: 16.5px; line-height: 1.45; color: var(--muted-ink); }
.statement    { font-family: var(--serif); font-size: 15.5px; line-height: 1.45; }
.detail       { font-family: var(--sans); font-size: 11.5px; line-height: 1.3; color: var(--muted-ink); }
.loop-text    { font-family: var(--sans); font-size: 13px; line-height: 1.4; }

/* ───────────────────────────── links ─────────────────────────────
   On paper a link is blue and underlined, and turns claret under the pointer.
   On the desk a link is desk-muted and lightens. */
a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--claret); }

/* ───────────────────────────── buttons ─────────────────────────────
   The kit only has controls on the desk (desk-button, lightening to desk-text).
   A page needs one action too, so on paper the button is written in ink: an ink
   block with paper letters. Never claret. No shadow: only the book casts one. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent; border-radius: var(--radius-button);
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--ink); color: var(--paper);
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--cover); color: var(--paper); }
.btn .ic, .btn .apl { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(39,40,35,.45); }
.btn-ghost:hover { background: transparent; color: var(--claret); border-color: var(--claret); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: default; }
/* the same button where it sits on the desk */
.on-desk .btn, .top .btn, .nav .btn, .desk-btn { background: var(--desk-button); color: var(--ink); }
.on-desk .btn:hover, .top .btn:hover, .nav .btn:hover, .desk-btn:hover { background: var(--desk-text); color: var(--ink); }
.on-desk .btn-ghost, .nav .btn-ghost { background: transparent; color: var(--desk-text); border-color: var(--desk-rule); }
.on-desk .btn-ghost:hover, .nav .btn-ghost:hover { background: transparent; color: var(--desk-text); border-color: var(--desk-muted); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

kbd, code {
  font-family: var(--mono); font-size: .82em;
  background: var(--paper-deep); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 5px; color: var(--ink);
}
.page-l kbd, .page-l code { background: var(--paper); }

/* ───────────────────────────── the desk bar ─────────────────────────────
   What sits above the book: the wordmark on the left, controls after it. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 23px; line-height: 1; letter-spacing: 0;
  color: var(--desk-text); text-decoration: none;
}
.brand:hover { color: var(--desk-text); }
/* the mark is the book, upright: taller than it is wide */
.brand img, .brand svg { display: block; flex: 0 0 auto; height: 26px; width: auto; border-radius: 0; }
.on-paper .brand, .brand.on-paper { color: var(--ink); }

/* Personal / Teams. Two real links; the selected side is a desk-button. */
.mode {
  display: inline-flex; padding: 4px; gap: 2px;
  border: 1px solid var(--desk-rule); border-radius: var(--radius-button);
}
.mode-opt {
  display: inline-flex; align-items: center;
  padding: 10px 24px; border-radius: 2px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.2;
  color: var(--desk-muted); text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.mode-opt:hover { color: var(--desk-text); }
.mode-opt.is-on { background: var(--desk-button); color: var(--ink); }
.mode-opt.is-on:hover { color: var(--ink); }
.mode-opt:focus-visible { outline-color: var(--desk-text); }
@media (prefers-reduced-motion: reduce) { .mode-opt { transition: none; } }

/* ───────────────────────────── the book ─────────────────────────────
   .book > [.leaf] .cover [.tabs];  .cover > .pages (.page-l .page-r) .page-block
   [.ribbon]. A one-page book (reading pages) is .pages.single with one .page. */
.book { position: relative; }
.cover {
  position: relative; z-index: 1;
  background: var(--cover);
  border: 2px solid var(--cover-edge);
  border-radius: var(--radius-cover);
  padding: var(--cover-thickness) var(--cover-thickness) 8px;
  box-shadow: var(--shadow-book);
}
.pages {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--radius-page); overflow: hidden;
}
.pages.single { grid-template-columns: minmax(0, 1fr); }
.page {
  position: relative; min-width: 0;
  padding: var(--page-inset-top) var(--page-inset-x) 28px;
  background: var(--paper); color: var(--ink);
}
.page-l { background: var(--paper-deep); }
/* the fall of the pages into the spine */
.pages:not(.single) > .page-l::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 26px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.11));
}
.pages:not(.single) > .page-r::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 20px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.09), rgba(0,0,0,0));
}
.page-block { height: 5px; margin: 0 12px; background: var(--page-block); }

/* The ribbon hangs from the top of the spine. The shadow is on the wrapper
   because clip-path would cut a box-shadow off with the point. */
.ribbon {
  position: absolute; z-index: 2; top: -3px; left: calc(50% - 8px);
  width: 16px; height: 96px; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
.ribbon::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ribbon-dark), var(--ribbon-light) 55%, var(--ribbon-dark));
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
}
.pages.single ~ .ribbon { left: auto; right: 44px; }
/* on one page the ribbon hangs over the head's right corner: keep the label clear */
.pages.single .rh > :last-child { padding-right: 52px; }

/* The dated leaf stands out from the book's left edge; tabs from its right. */
.leaf {
  position: absolute; z-index: 0; right: 100%; top: 96px; margin-right: -6px;
  width: 64px; padding: 12px 0 12px 12px;
  background: var(--leaf); border-left: 3px solid var(--claret); color: var(--ink);
}
.leaf-wd { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; }
.leaf-n  { display: block; font-family: var(--serif); font-size: 31px; line-height: 1.1; }
.leaf-c  { display: block; margin-top: 2px; font-family: var(--sans); font-size: 9px; line-height: 1.2; opacity: .72; }
.tabs {
  position: absolute; z-index: 0; left: 100%; top: 60px; margin-left: -8px;
  display: grid; gap: var(--tab-gap);
}
.tab {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 50px; height: 78px; opacity: .82;
  border-radius: 0 var(--radius-tab) var(--radius-tab) 0;
  color: var(--desk-text); text-decoration: none;
}
.tab span { transform: rotate(90deg); white-space: nowrap; font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1.2; }
.tab.is-open { left: 6px; opacity: 1; }
.tab.is-open::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 3px; background: var(--desk-text); }
.tab-index    { background: var(--tab-index); color: var(--ink); }
.tab-people   { background: var(--tab-people); }
.tab-projects { background: var(--tab-projects); }
.tab-loops    { background: var(--tab-loops); }

/* ───────────────────────────── page furniture ───────────────────────────── */
/* Running head: label left, label right, a rule under. */
.rh {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: var(--label-gap); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 9.5px; line-height: 1.2; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted-ink);
}
.rh a { color: inherit; text-decoration: none; }
.rh a:hover { color: var(--claret); }
/* List head: the name of a list in claret, a count on the right, a rule under. */
.lh {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: var(--head-gap); padding-bottom: var(--tab-gap); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 9.5px; line-height: 1.2; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted-ink);
}
.lh > :first-child { color: var(--claret); }

/* A row hangs from a margin: a time or number in label, then the title. */
.row {
  display: grid; grid-template-columns: var(--index-margin) minmax(0, 1fr) auto;
  column-gap: var(--label-gap); align-items: baseline;
  padding: var(--row-pad) 0; border-bottom: 1px solid var(--rule);
}
.row-t  { font-family: var(--mono); font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted-ink); }
.row-mk { font-family: var(--serif); font-size: 18px; line-height: 1; color: var(--claret); }
a.row { color: var(--ink); text-decoration: none; }
a.row:hover .index-title { color: var(--claret); }

/* An open loop: a hollow claret circle, then what is still open. */
.loop { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 9px; align-items: baseline; }
.loop::before, .loop-mark {
  content: ""; width: 8px; height: 8px; border: 1.3px solid var(--claret); border-radius: 50%;
  position: relative; top: -1px;
}
/* The one box paper carries: open loops gathered on a wash, a green bar on the left. */
.loopbox { background: var(--wash); border-left: 2px solid var(--green); padding: 14px 16px; }

/* The search line: a glass, what is typed, a line under. */
.searchline {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(39,40,35,.45);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.3; color: var(--ink);
}
.searchline svg { flex: none; width: 15px; height: 15px; }

/* ───────────────────────────── form lines ─────────────────────────────
   A field on paper is a line to write on, not a box. The .dl-* names are
   load-bearing: download.js and waitlist.js inject markup that expects them. */
.dl-label { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted-ink); }
.dl-input {
  display: block; width: 100%;
  padding: 8px 0 9px; border: 0; border-bottom: 1px solid rgba(39,40,35,.45); border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.3;
}
.dl-input::placeholder { color: var(--muted-ink); opacity: 1; }
.dl-input:focus { outline: none; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.dl-input:focus-visible { outline: none; }
.dl-error { margin-top: 10px; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--claret); }
.dl-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.dl-check input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.dl-submit { width: 100%; margin-top: 20px; }
.dl-done { margin: 6px 0 0; font-family: var(--serif); font-size: 16.5px; line-height: 1.45; color: var(--ink); }

/* ───────────────────────────── the foot of the desk ───────────────────────────── */
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 0;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.2; letter-spacing: .7px; text-transform: uppercase;
  color: var(--desk-muted);
}
/* the company's name is set as it is written, not in capitals */
.foot-brand, .foot-copy { text-transform: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: var(--desk-muted); text-decoration: none; }
.foot a:hover { color: var(--desk-text); }