/* ------------------------------------------------------------------
   basecamp.thegooslife.com — the Broadsheet theme
   One sheet of paper. The hierarchy is carried by the type scale and by
   three rules of different weight, not by colour grounds or boxes. The
   three blogs sit side by side as peer columns, the way a broadsheet
   sets its sections.

   Palette, typefaces and logos are the thegooslife.com identity kit
   (brand/thegooslife/ on brand/gooaa-5-identity), copied unchanged.
   Lead Amber is not used, as the kit requires.

   No script, no style attribute, nothing loaded from outside this
   folder.
   ------------------------------------------------------------------ */

@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
             font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2");
             font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
             font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* the kit's palette, verbatim */
  --ink:       #111C33;  /* Nightfall */
  --paper:     #FBF7F2;  /* Linen */
  --accent:    #C14A2E;  /* Hearth        4.59:1 on Linen */
  --accent-lt: #F0A185;  /* Hearth Light  8.98:1 on Peat */
  --muted:     #6B6158;  /* Driftwood     5.66:1 on Linen */
  --muted-lt:  #BFB3A6;  /* Driftwood Light 9.04:1 on Peat */
  --dark:      #17120F;  /* Peat */
  --link:      #3366CC;  /* Flightpath    5.03:1 on Linen */
  --link-lt:   #8CB3F7;  /* Flightpath on dark 8.77:1 on Peat */
  --rule:      #E6DED3;
  --rule-dark: #302821;

  --f-head: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, monospace;
  --f-head-ls: -.02em;

  /* the sheet */
  --max: 66rem;
  --pad: 1.125rem;

  /* what the reader's colour preference changes */
  --bg: var(--paper);
  --fg: var(--ink);
  --dim: var(--muted);
  --hair: var(--rule);
  --mark: var(--accent);
  --tie: var(--link);
  --btn-bg: var(--link);
  --btn-fg: var(--paper);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
  /* the identity's one signature on every page it owns */
  border-top: 3px solid var(--accent);
}

img, svg { max-width: 100%; }

h1, h2, h3, h4, p, li, time, figcaption { min-width: 0; }

a { color: var(--tie); text-decoration-thickness: 2px; text-underline-offset: .18em; }

a:focus-visible {
  outline: 3px solid var(--mark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- the sheet ---------- */

/* Padding is set as longhand on purpose: .sheet is combined with other
   classes that set vertical padding, and a shorthand here would wipe
   their values depending on the order of the file. */
.sheet {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Hidden by clipping rather than by a large negative offset, so the
   link never reports a box outside the viewport. */
.skip {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--fg); color: var(--bg);
  font-weight: 600; text-decoration: none;
}
.skip:focus {
  left: var(--pad); top: .5rem; z-index: 2;
  width: auto; height: auto; overflow: visible; clip-path: none;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 1rem;
}

/* A mono rule-label. The smallest unit of this design: it names a
   section, a blog or a field, and it is always Hearth on the sheet. */
.label {
  font-family: var(--f-data);
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mark);
}

.num {
  font-family: var(--f-data);
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  color: var(--mark);
}

/* ================= masthead: logo, and the one button ================= */

.masthead { border-bottom: 1px solid var(--hair); }

.masthead__in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1rem;
  padding-top: .75rem; padding-bottom: .75rem;
}

.masthead__home {
  display: inline-flex; align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.masthead__logo { width: 11rem; height: auto; display: block; }

.signin {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bg); border-radius: 2px;
  font-family: var(--f-body);
  font-size: .875rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
}
.signin:hover { background: var(--bg); color: var(--tie); }
.signin:active { transform: translateY(1px); }

/* ================= dateline: the four places to go ================= */

.dateline { border-bottom: 2px solid var(--fg); }

.dateline__in { display: flex; flex-wrap: wrap; }

.dateline a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .8rem;
  font-family: var(--f-data);
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg); text-decoration: none;
}
.dateline li:first-child a { padding-left: 0; }
.dateline li + li a { border-left: 1px solid var(--hair); }
.dateline a:hover { color: var(--tie); }
.dateline a[aria-current] { color: var(--mark); box-shadow: inset 0 -2px 0 var(--mark); }

.bare { list-style: none; margin: 0; padding: 0; }

/* ================= nameplate ================= */

.nameplate { padding: 2.25rem 0 1.5rem; }

.nameplate .label { display: block; margin-bottom: .6rem; }

.nameplate__t {
  margin: 0;
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: var(--f-head-ls); line-height: 1.02;
  font-size: clamp(2.35rem, 11vw, 4rem);
}
.nameplate__t .dim { color: var(--dim); }

.nameplate__d {
  margin: .9rem 0 0;
  font-size: 1.0625rem; color: var(--fg);
  max-width: 42ch;
}

/* Whose blog it is: said once, here, and nowhere else on the page. */
.nameplate__by {
  margin: 1rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--hair);
  max-width: 20rem;
}
.nameplate__by dt {
  font-family: var(--f-data);
  font-size: .625rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.nameplate__by dd {
  margin: .15rem 0 0;
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: var(--f-head-ls);
  font-size: 1.0625rem;
}

/* ================= section heads ================= */

.sect { padding-top: 1.75rem; }
.sect + .sect { margin-top: 2.25rem; }

.sect__h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem 1rem; flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--hair);
}
/* Margin only. The heading's own .label class carries the type, and a
   font shorthand here would outrank it. */
.sect__h h2 { margin: 0; }

.sect__more {
  font-family: var(--f-data);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.sect__more:hover { text-decoration: underline; }

/* ================= the lead: newest across all three ================= */

.lead { padding-bottom: .5rem; }

.lead__meta { margin: 0 0 .7rem; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }

.lead__t {
  margin: 0;
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: var(--f-head-ls); line-height: 1.1;
  font-size: clamp(1.6rem, 6.4vw, 2.375rem);
  max-width: 28ch;
}

.lead__x {
  margin: .85rem 0 0;
  font-size: 1.0625rem; color: var(--dim);
  max-width: 54ch;
}

/* A title link: ink, no underline until it is wanted.

   Every one of these is a navigation target a child has to be able to
   hit, so the box is 44px tall even when the line of type is half
   that. Aligned to the top rather than centred, so the extra height
   hangs below the text and the first baseline stays where the layout
   puts it - which is what keeps a title level with the date in its
   gutter. The containers below take the slack off their own bottom
   padding. */
.tl {
  display: inline-flex; align-items: flex-start;
  min-height: 44px;
  color: var(--fg); text-decoration: none;
}
.tl:hover { color: var(--mark); text-decoration: underline; text-decoration-thickness: 2px; }

.when {
  font-family: var(--f-data);
  font-size: .75rem; font-weight: 400; letter-spacing: .02em;
  color: var(--dim); font-variant-numeric: tabular-nums;
}


/* ================= the three columns ================= */

.cols { display: grid; gap: 0; }

.col { padding: 1.5rem 0; border-top: 1px solid var(--hair); }
.col:first-child { padding-top: .25rem; border-top: 0; }

.col__h { margin: 0 0 1rem; }

.col__n { display: block; margin-bottom: .5rem; }

.col__t {
  margin: 0;
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: var(--f-head-ls); line-height: 1.15;
  font-size: 1.375rem;
}

.col__d {
  margin: 0;
  font-size: .9375rem; color: var(--dim);
  max-width: 34ch;
}

/* Side by side, the three descriptions are held to two lines so the
   three lists below them start on the same line. One line of slack is
   cheaper than three columns that look dropped. */
@media (min-width: 60rem) {
  .col__d { min-height: 3rem; }
}

.col__all {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin-top: .25rem;
  font-family: var(--f-data);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.col__all:hover { text-decoration: underline; }

/* a compact entry inside a column */
.ents { display: grid; }
.ent { padding: .75rem 0 0; border-top: 1px solid var(--hair); }
.ent__t {
  margin: 0;
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3;
  font-size: 1rem;
}
.ent__when { display: block; margin-bottom: .25rem; }

/* ================= the stream: one blog, every post ================= */

.stream { display: grid; }

.stream__item {
  padding: 1.4rem 0 1rem;
  border-top: 1px solid var(--hair);
}
.stream__item:first-child { border-top: 0; padding-top: .25rem; }

.stream__when { display: block; margin-bottom: .4rem; }

.stream__t {
  margin: 0;
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: var(--f-head-ls); line-height: 1.2;
  font-size: clamp(1.25rem, 5vw, 1.625rem);
  max-width: 34ch;
}

.stream__x {
  margin: .6rem 0 0;
  font-size: 1rem; color: var(--dim);
  max-width: 56ch;
}

.stream__by { display: block; margin-top: .55rem; }

/* ================= the other two blogs ================= */

.other { display: grid; }

.other__i { padding: 1.1rem 0 .6rem; border-top: 1px solid var(--hair); }
.other__i:first-child { border-top: 0; padding-top: .25rem; }

.other__t {
  margin: 0;
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: var(--f-head-ls); line-height: 1.2;
  font-size: 1.1875rem;
}
.other__d { margin: .3rem 0 0; font-size: .9375rem; color: var(--dim); max-width: 40ch; }

/* ================= a post ================= */

/* The same opening air the nameplate gets, so a headline never sits
   hard against the dateline rule. On .article rather than on
   .article__head, because a page whose title switch is off has no
   head at all. */
.article { max-width: 50rem; padding-top: 2.25rem; }

.article__head { padding-bottom: 1.25rem; border-bottom: 2px solid var(--fg); }

.article__kick { margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }

.article__t {
  margin: 0;
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: var(--f-head-ls); line-height: 1.07;
  font-size: clamp(2rem, 8.4vw, 3rem);
  max-width: 26ch;
}

.article__meta { padding: 1.25rem 0 0; }

.field { padding: .6rem 0; border-bottom: 1px solid var(--hair); }
.field:first-child { padding-top: 0; }
.field dt {
  font-family: var(--f-data);
  font-size: .625rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.field dd { margin: .2rem 0 0; font-size: .9375rem; font-weight: 600; }

.article__body { padding-top: 1.5rem; }

/* A feature image, where a post or a page carries one. */
.hero { margin: 1.5rem 0 0; }
.hero img { display: block; width: 100%; height: auto; }
.hero figcaption {
  margin-top: .5rem;
  font-family: var(--f-data); font-size: .6875rem; letter-spacing: .04em;
  color: var(--dim);
}

/* ---------- prose: what Ghost puts inside a post or a page ---------- */

.prose { font-size: 1.0625rem; line-height: 1.7; max-width: 36rem; }
.prose > * { margin: 0 0 1.1rem; }
.prose > *:last-child { margin-bottom: 0; }

.prose h2, .prose h3, .prose h4 {
  font-family: var(--f-head); font-weight: 600;
  letter-spacing: var(--f-head-ls); line-height: 1.2;
  margin: 2rem 0 .7rem;
}
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.1875rem; }
.prose h4 { font-size: 1.0625rem; }

.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }

.prose blockquote {
  margin: 1.5rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--mark);
  color: var(--fg);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr { height: 0; margin: 2rem 0; border: 0; border-top: 1px solid var(--hair); }

.prose code, .prose kbd, .prose samp {
  font-family: var(--f-data); font-size: .875em;
}
.prose pre {
  padding: .9rem 1rem; overflow-x: auto;
  border: 1px solid var(--hair); border-radius: 3px;
  font-family: var(--f-data); font-size: .8125rem; line-height: 1.6;
}
.prose pre code { font-size: inherit; }

.prose figure { margin: 1.75rem 0; }
.prose img { height: auto; display: block; }
.prose figcaption {
  margin-top: .5rem;
  font-family: var(--f-data); font-size: .6875rem; letter-spacing: .04em;
  color: var(--dim);
}

.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td {
  text-align: left; padding: .5rem .6rem;
  border-bottom: 1px solid var(--hair);
}
.prose th { font-family: var(--f-data); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* Ghost's own card classes, kept sane without a stylesheet of its own */
.kg-width-wide, .kg-width-full { width: 100%; }
.kg-image { height: auto; }

/* ================= empty state ================= */

/* Honest: nothing is faked to fill a layout. */
.empty {
  margin: 0; padding: .9rem 0 .9rem 1rem;
  border-left: 3px solid var(--muted-lt);
}
.empty b {
  display: block;
  font-family: var(--f-data);
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  color: var(--fg);
}
.empty span { display: block; margin-top: .2rem; font-size: .875rem; color: var(--dim); }

.empty--col { padding-top: .6rem; padding-bottom: .6rem; }

/* ================= pager ================= */

.pager {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 2rem; padding-top: 1rem;
  border-top: 1px solid var(--hair);
}
.pager a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--f-data);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.pager a:hover { text-decoration: underline; }
.pager__next { margin-left: auto; }

/* ================= foot ================= */

.sitefoot {
  margin-top: 3.5rem;
  border-top: 2px solid var(--fg);
}

.sitefoot__in { padding-top: 1.5rem; padding-bottom: 3rem; display: grid; gap: 1.5rem; }

.sitefoot__brand { display: grid; gap: 1rem; align-content: start; }

.sitefoot__mark { width: 9rem; height: auto; display: block; }

.footcol h2 {
  margin: 0 0 .6rem;
  font-family: var(--f-data);
  font-size: .625rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}

.footlinks { display: grid; }
.footlinks a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: .9375rem; font-weight: 600;
  text-decoration: none;
}
.footlinks a:hover { text-decoration: underline; }

.sitefoot__note { margin: 0; font-size: .8125rem; color: var(--dim); max-width: 44ch; }

/* ==================================================================
   Wider. The phone layout above is the real one; these let the sheet
   open out. The three blogs become columns at 60rem, which is the
   width at which three readable measures fit side by side.
   ================================================================== */

@media (min-width: 30rem) {
  .masthead__logo { width: 13rem; }
  .signin { padding: 0 1.15rem; }
}

@media (min-width: 48rem) {
  :root { --pad: 2rem; }

  .nameplate { padding: 3rem 0 1.75rem; }
  .article { padding-top: 3rem; }
  .nameplate__t { font-size: clamp(3rem, 7.4vw, 4rem); }

  /* the date hangs out of the text column, so every title starts on the
     same vertical line */
  .stream__item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0 2rem;
  }
  .stream__when { text-align: right; margin: .35rem 0 0; }
  .stream__t, .stream__x, .stream__by { grid-column: 2; }

  .other { grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
  .other__i { border-top: 0; padding-top: .25rem; }
  .other__i + .other__i { border-left: 1px solid var(--hair); padding-left: 2.5rem; }

  .sitefoot__in {
    grid-template-columns: 1fr auto auto;
    gap: 2rem 4rem;
    align-items: start;
  }
}

@media (min-width: 60rem) {
  /* Three peer columns, divided by a hairline and nothing else: no
     boxes, no grounds, no equal-height cards. */
  .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .col {
    padding: .25rem 0 1.5rem 2rem;
    border-top: 0;
    border-left: 1px solid var(--hair);
  }
  .col:first-child { padding-left: 0; border-left: 0; }

  .lead__t { font-size: 2.625rem; }
}

@media (min-width: 64rem) {
  :root { --pad: 2.5rem; }

  .article { display: grid; grid-template-columns: 11rem minmax(0, 36rem); gap: 0 3rem; }
  .article__head { grid-column: 1 / -1; }
  .article__meta { grid-column: 1; padding-top: 1.5rem; }
  .article__body { grid-column: 2; padding-top: 1.5rem; }
  .article__foot { grid-column: 1 / -1; }
  .hero { grid-column: 1 / -1; }

  /* A page has no date and no writer, so it needs no gutter for them.
     One measure, starting at the same left edge as everything else. */
  .article--plain { grid-template-columns: minmax(0, 40rem); }
  .article--plain .article__body { grid-column: 1; }
}

/* ==================================================================
   The reader's colour preference. Peat and Linen swap; the accent
   and the link move to their dark-ground values from the kit.
   ================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--dark);
    --fg: #F4EEE6;
    --dim: var(--muted-lt);
    --hair: var(--rule-dark);
    --mark: var(--accent-lt);
    --tie: var(--link-lt);
    --btn-bg: var(--link-lt);
    --btn-fg: var(--dark);
  }
  .signin:hover { background: transparent; color: var(--tie); }
  .empty { border-left-color: var(--rule-dark); }
  .skip { background: var(--fg); color: var(--dark); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .signin:active { transform: none; }
}

/* Windows high contrast and similar: the system owns the colours, and
   the rules that carry this layout have to survive. */
@media (forced-colors: active) {
  .dateline a[aria-current] { box-shadow: none; text-decoration: underline; text-decoration-thickness: 3px; }
  .signin { border: 2px solid ButtonText; }
  .empty { border-left: 3px solid CanvasText; }
  a:focus-visible { outline-color: Highlight; }
}