/*
 * secondhalfsoftware.com — one stylesheet for every page.
 *
 * Lifted out of index.html when the second page arrived: two copies of a design
 * is two places to change a colour and one place to forget. The identity is
 * Sam's decision D (2026-10-15): Slate and Cobalt, Schibsted Grotesk for the
 * wordmark and headings, Source Sans 3 for prose, IBM Plex Mono for the
 * addresses. The tokens and the home page's type rules are copied from mock D
 * as he chose it; the story and blog rules below carry the same faces and
 * tokens at A's proportions.
 *
 * One palette, D's dark one, on every device whatever the visitor's setting
 * (Sam, 2026-10-15: "Lets have the background always be what dark mode is
 * today"). Every colour is a token and the body paints its own background
 * colour, so nothing is inherited from the host; color-scheme tells the browser
 * the page is dark, for its scrollbars and form controls. */
:root{color-scheme:dark; --bg:#172235; --bg-hi:#212E45; --ink:#E4E8EF; --muted:#AAB3C2; --faint:#8A93A3; --line:#33415A; --accent:#8FB0FF; --chip:rgba(255,255,255,.04); --chip-hi:rgba(255,255,255,.08); --sun-1:#F6D488; --sun-2:#E0A94E; --sun-3:#B87A31;}
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background-color:var(--bg);
    background-image:radial-gradient(120% 100% at 50% -8%, var(--bg-hi), var(--bg) 68%);
    /* The glow is one screen tall (html and body are height:100%); repeated, it
       restarts as a visible band a screen down every long page. */
    background-repeat:no-repeat;
    color:var(--ink);
    font-family:"Source Sans 3",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; min-height:100%;
    overflow-wrap:anywhere;
  }
  .wrap{width:100%; max-width:760px; margin:0 auto; padding:0 28px}

  main{flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:64px 0 48px}

  /* Logo lockup. The mark is favicon.svg as an <img>; its colours are set
     inside the file. The image fills the .mark box,
     whose size changes with the page and the width: its width and height
     attributes are its full size, and left alone it overflowed the smaller
     boxes onto the name (#239). */
  .lockup{display:flex; align-items:center; gap:26px; text-align:left}
  .mark{flex:0 0 auto; width:106px; height:139px}
  .mark img{display:block; width:100%; height:100%}
  .wordmark{font-family:"Schibsted Grotesk",system-ui,sans-serif; color:var(--ink); line-height:1.04}
  .wordmark .name{display:block; font-weight:700; font-size:clamp(32px,5.6vw,46px); letter-spacing:-.015em}
  .wordmark .tag{display:block; margin-top:12px; font-style:italic; font-weight:500; font-size:clamp(16px,2.6vw,20px); color:var(--muted)}

  @media(max-width:520px){
    .wrap{padding:0 16px}
    .lockup{flex-direction:column; gap:18px; text-align:center}
    .mark{width:86px; height:114px}
  }

  hr.rule{width:54px; height:2px; border:0; background:var(--line); margin:40px 0 34px}

  .lede{max-width:56ch; margin:0 auto; color:var(--muted); font-size:clamp(16px,2.2vw,18.5px); line-height:1.7}

  .contact{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:38px}
  .contact a{
    font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500; font-size:14px; text-decoration:none;
    color:var(--ink); border:1px solid var(--line); background:var(--chip);
    padding:11px 16px; border-radius:11px; transition:border-color .15s, background .15s;
  }
  .contact a:hover{border-color:var(--accent); background:var(--chip-hi)}
  .contact a span{color:var(--accent); margin-right:8px}
  .contact a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  footer{flex:0 0 auto; border-top:1px solid var(--line)}
  .foot{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; padding:22px 0; color:var(--faint); font-size:13.5px; text-align:center}

/* ---------- the story page ---------- */
/* A reading page, not a card: the home page centres one sentence, this one
   carries several paragraphs, so it needs a measure and a left edge. Centred
   prose at this length is a great deal harder to read than it looks. */
main.reading{justify-content:flex-start; padding:56px 0 40px}
.lockup.small .mark{width:74px; height:97px}
.lockup.small .wordmark .name{font-size:clamp(24px,4.1vw,31px)}
.lockup.small .wordmark .tag{font-size:clamp(14px,2.1vw,16px); margin-top:9px}

h1.story{
  font-family:"Schibsted Grotesk",system-ui,sans-serif; font-weight:700;
  font-size:clamp(28px,4.6vw,38px); letter-spacing:-.015em; margin:0 0 6px; color:var(--ink);
}
.prose{max-width:62ch; margin:22px auto 0; text-align:left}
.prose p{
  color:var(--muted); font-size:clamp(16px,2.1vw,18px); line-height:1.78; margin:0 0 20px;
}
.prose p:last-child{margin-bottom:0}

/* The home page's link into the story: the heading face in the accent, so it
   reads as a way on rather than competing with the address buttons below it. */
.storylink{margin:30px 0 0}
.storylink a{
  font-family:"Schibsted Grotesk",system-ui,sans-serif; font-style:normal; font-weight:600;
  font-size:clamp(17px,2.4vw,20px); color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .15s;
}
.storylink a:hover{border-bottom-color:var(--accent)}
.storylink a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.storylink a .arw{margin-left:6px}

.backlink{margin:34px 0 0}
.backlink a{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500; font-size:13px; color:var(--faint);
  text-decoration:none; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.backlink a:hover{color:var(--accent); border-bottom-color:var(--line)}

/* ---------- the blog ---------- */
/* The index (/blog) and its entries (/blog/<date>) are reading pages like the
   story: the same lockup, rule and title, and a measure. Nothing here is a new
   colour or a new face — dates and notes take the mono the addresses use,
   titles the heading face, text the body face. */
.storylink + .storylink{margin-top:12px}

.dateline{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500; font-size:13px; color:var(--faint);
  margin:12px 0 0;
}
h1.story.entry{max-width:24ch; margin-left:auto; margin-right:auto; line-height:1.12; text-wrap:balance}

/* The list of entries: date, title, two or three sentences. */
.entries{list-style:none; max-width:62ch; margin:14px auto 0; padding:0; text-align:left}
.entries li{padding:24px 0; border-top:1px solid var(--line)}
.entries li:first-child{border-top:0}
.entries .date{display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500; font-size:13px; color:var(--faint)}
.entries .title{
  display:inline-block; margin:8px 0 0; font-family:"Schibsted Grotesk",system-ui,sans-serif; font-weight:600;
  font-size:clamp(20px,3vw,24px); line-height:1.2; letter-spacing:-.01em; color:var(--ink); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.entries .title:hover{color:var(--accent); border-bottom-color:var(--line)}
.entries .title:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.entries .summary{margin:10px 0 0; color:var(--muted); font-size:clamp(15.5px,2vw,17px); line-height:1.7}

/* An entry is long prose, so it gets what the story never needed: section
   headings, a quoted line, a list, links inside a sentence. */
.prose.entry{max-width:65ch}
.prose h2{
  font-family:"Schibsted Grotesk",system-ui,sans-serif; font-weight:600; font-size:clamp(21px,3vw,25px);
  line-height:1.2; letter-spacing:-.01em; color:var(--ink); margin:44px 0 14px;
}
.prose a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .15s}
.prose a:hover{border-bottom-color:var(--accent)}
.prose blockquote{
  margin:0 0 20px; padding:1px 0 1px 18px; border-left:2px solid var(--line);
  font-family:"Schibsted Grotesk",system-ui,sans-serif; font-style:italic; font-weight:500;
  font-size:clamp(17px,2.4vw,20px); line-height:1.5; color:var(--ink);
}
.prose ul{margin:0 0 20px; padding-left:22px; color:var(--muted); font-size:clamp(16px,2.1vw,18px); line-height:1.7}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--faint)}
/* The one line each section ends on. */
.prose p.advice{border-top:1px solid var(--line); padding-top:16px; color:var(--ink)}
.prose p.advice b{font-weight:600}

/* A draft, said on the page itself. Both are for the author's eyes only: a
   deploy withholds a page with the draft line in its head and refuses one that
   still has a note in it (websites/drafts.mjs). The banner is derived from that
   same line, so deleting the line is the whole of publishing — and it reads
   the line as the lock does, in any case (`i`), so the two cannot disagree
   about a `name="Draft"`. */
html:has(meta[name="draft" i]) body::before{
  content:"Draft \2014  not published";
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500; font-size:13px; text-align:center;
  color:var(--ink); background:var(--bg-hi); border-bottom:1px dashed var(--accent); padding:9px 16px;
}
.prose p.authornote{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500; font-size:13.5px; line-height:1.65; color:var(--ink);
  border:1px dashed var(--accent); border-radius:9px; background:var(--chip-hi); padding:12px 15px;
}