/*
 * secondhalfsoftware.com — one stylesheet for both pages.
 *
 * 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 palette is
 * settled (see CLAUDE.md) — cream and gold, Cormorant Garamond for the wordmark,
 * Hanken Grotesk for prose, IBM Plex Mono for the addresses.
 *
 * Light by intent, so there is no dark variant to fall back to: every colour is
 * painted explicitly rather than inherited from the host.
 */
:root{
    --cream:#F4EBD7; --cream-hi:#FBF4E4; --ink:#241C10; --muted:#5A4A2E;
    --faint:#9A7B3E; --gold:#B07A22; --line:#E4D6B4;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:radial-gradient(120% 100% at 50% -8%, var(--cream-hi), var(--cream) 68%);
    color:var(--ink);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; min-height:100%;
  }
  .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 */
  .lockup{display:flex; align-items:center; gap:26px; text-align:left}
  .mark{flex:0 0 auto; width:106px; height:139px}
  .mark svg{display:block; width:100%; height:100%}
  .wordmark{font-family:"Cormorant Garamond",Georgia,serif; color:var(--ink); line-height:1.02}
  .wordmark .name{display:block; font-weight:600; font-size:clamp(34px,6vw,50px); letter-spacing:.005em}
  .wordmark .tag{display:block; margin-top:12px; font-style:italic; font-weight:500; font-size:clamp(17px,3vw,23px); color:var(--muted)}

  @media(max-width:520px){
    .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-size:14px; text-decoration:none;
    color:var(--ink); border:1px solid var(--line); background:rgba(255,255,255,.35);
    padding:11px 16px; border-radius:11px; transition:border-color .15s, background .15s;
  }
  .contact a:hover{border-color:var(--gold); background:rgba(255,255,255,.6)}
  .contact a span{color:var(--gold); margin-right:8px}
  .contact a:focus-visible{outline:2px solid var(--gold); 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(26px,4.4vw,34px)}
.lockup.small .wordmark .tag{font-size:clamp(15px,2.4vw,18px); margin-top:9px}

h1.story{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:600;
  font-size:clamp(30px,5vw,42px); letter-spacing:.005em; 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. Italic serif so it echoes the tagline
   rather than competing with the address buttons below it. */
.storylink{margin:30px 0 0}
.storylink a{
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:clamp(18px,2.6vw,22px); color:var(--gold); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .15s;
}
.storylink a:hover{border-bottom-color:var(--gold)}
.storylink a:focus-visible{outline:2px solid var(--gold); 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-size:13px; color:var(--faint);
  text-decoration:none; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.backlink a:hover{color:var(--gold); border-bottom-color:var(--line)}