/* Shared styles for every page on rnjnsn.com. Page-specific overrides stay inline. */
@font-face {
  font-family: 'Calibre';
  src: url('/fonts/calibre-web-regular.woff2') format('woff2'),
       url('/fonts/calibre-web-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Calibre';
  src: url('/fonts/calibre-web-medium.woff2') format('woff2'),
       url('/fonts/calibre-web-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Calibre';
  src: url('/fonts/calibre-web-semibold.woff2') format('woff2'),
       url('/fonts/calibre-web-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Calibre';
  src: url('/fonts/calibre-web-bold.woff2') format('woff2'),
       url('/fonts/calibre-web-bold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}
:root{
  --bg: #FAFAF8;
  --ink: #16181B;
  --ink-soft: #5B5F66;
  --hairline: #E4E1DA;
  --human: #C2752F;
  --machine: #1F6F78;
  --red: #E4001C;
  --band-warm: #F3EEE6;
  --band-cool: #E8EFEE;

  /* Type scale: 18px body, ratio ~1.25. In rem so it follows the visitor's browser font size. */
  --text-xs: 0.8125rem;   /* 13px  uppercase labels */
  --text-sm: 0.9375rem;   /* 15px  meta lines, footer */
  --text-base: 1.125rem;  /* 18px  body text */
  --text-lg: 1.375rem;    /* 22px  lead / intro text */
  --text-xl: 1.75rem;     /* 28px  section headings */
  --text-2xl: clamp(2.25rem, 1.8rem + 2vw, 2.75rem);  /* 36–44px page titles */
  --text-3xl: clamp(2.5rem, 1.9rem + 3vw, 3.5rem);    /* 40–56px homepage headline */

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --measure: 65ch;        /* comfortable line length for running text */
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Calibre', -apple-system, sans-serif;
  font-size:var(--text-base);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1, h2, h3{line-height:1.2; text-wrap:balance;}
p{text-wrap:pretty;}
a{color:inherit;}
a:focus-visible{outline:2px solid var(--machine); outline-offset:3px;}

.page{max-width:44rem; margin:0 auto; padding:var(--space-2xl) var(--space-m) var(--space-xl);}

.corner-mark{
  position:fixed; top:32px; left:36px; z-index:10;
  display:block; line-height:0; color:var(--ink); text-decoration:none;
}
.corner-mark svg{display:block; height:20px; width:auto;}

h1.name{font-size:var(--text-2xl); line-height:1.15; font-weight:600; letter-spacing:-0.01em; margin-bottom:var(--space-l);}
p.bio{font-size:var(--text-lg); line-height:1.5; color:var(--ink-soft); max-width:var(--measure); margin-bottom:var(--space-xl);}

section{margin-bottom:var(--space-xl);}
section h2{font-size:var(--text-xl); font-weight:600; color:var(--ink); margin-bottom:var(--space-m);}

.pub-entry{padding:var(--space-m) 0; border-top:1px solid var(--hairline);}
.pub-entry:first-child{border-top:none; padding-top:0;}
.pub-entry a.pub-title{font-size:var(--text-base); font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline);}
.pub-entry a.pub-title:hover{border-color:var(--red);}
.pub-entry .talk-title{font-size:var(--text-base); font-weight:600; line-height:1.4; color:var(--ink);}
.course-meta{display:block; font-size:var(--text-sm); color:var(--ink-soft); margin-top:var(--space-xs);}
.course-links{display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-m); margin-top:var(--space-xs); font-size:var(--text-sm);}
.course-kind{font-size:var(--text-xs); font-weight:500; line-height:1.4; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin:var(--space-l) 0 var(--space-s);}
.talk-desc{font-size:var(--text-base); color:var(--ink-soft); margin-top:var(--space-2xs); max-width:var(--measure);}
.pub-meta{display:block; font-size:var(--text-sm); color:var(--ink-soft); margin-top:var(--space-2xs);}

p.lead{font-size:var(--text-base); color:var(--ink-soft); max-width:var(--measure);}
.section-text + .entries{margin-top:var(--space-l);}
.entries + .lead{margin-top:var(--space-m);}

.cta{
  display:inline-flex; align-items:center; gap:var(--space-xs);
  font-size:var(--text-base); font-weight:500; text-decoration:none;
  color:var(--ink); border-bottom:1px solid var(--hairline); padding-bottom:3px;
}
.cta:hover{border-color:var(--red);}

.inline-link{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline);}
.inline-link:hover{border-color:var(--red);}

.section-text{max-width:var(--measure); color:var(--ink);}
.section-text + .section-text{margin-top:var(--space-s);}

.photo{display:block; width:100%; height:auto; margin:0 0 var(--space-l);}
.upcoming-kind{display:block; font-size:var(--text-xs); font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--space-xs);}

.contact-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem,1fr)); gap:var(--space-m) var(--space-l);}
.contact-grid div .label{display:block; font-size:var(--text-xs); font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--space-xs);}
.contact-grid div .value{font-size:var(--text-base);}
.contact-grid a.value{text-decoration:none; border-bottom:1px solid var(--hairline);}
.contact-grid a.value:hover{border-color:var(--red);}
.contact-grid .coords{display:block; font-size:var(--text-sm); color:var(--ink-soft);}

/* One colour per page: Talks warm, Courses cool. Lines are mixed from the text colour so they stay visible on the tint. */
.tint-warm{--bg:var(--band-warm);}
.tint-cool{--bg:var(--band-cool);}
.tint-warm, .tint-cool{--hairline:color-mix(in srgb, var(--ink) 13%, transparent);}

.intro{font-size:var(--text-lg); line-height:1.5; color:var(--ink-soft); max-width:var(--measure); margin-bottom:var(--space-m);}
.band-cta{margin-top:var(--space-s);}
.see-also{margin-top:var(--space-l); font-size:var(--text-sm); color:var(--ink-soft);}
.title-note{font-weight:400; color:var(--ink-soft);}
.course-meta + .talk-desc{margin-top:var(--space-xs);}
.intro + .entries{margin-top:var(--space-m);}

/* footer */
footer{
  max-width:44rem; margin:0 auto; padding:var(--space-m) var(--space-m) var(--space-xl);
  border-top:1px solid var(--hairline);
}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:var(--space-s) var(--space-m);}
.footer-nav ul{display:flex; list-style:none; gap:var(--space-2xs) var(--space-m); flex-wrap:wrap;}
.footer-nav a{display:inline-block; padding:var(--space-2xs) 0; font-size:var(--text-sm); color:var(--ink-soft); text-decoration:none;}
.footer-nav a:hover{color:var(--ink);}
.social-icons{display:flex; justify-content:flex-end; gap:16px;}
.social-icons a{color:var(--ink-soft); display:inline-flex; align-items:center; height:1.76rem;}
.social-icons svg{height:1.1rem; width:auto; fill:currentColor;}
.social-icons a:hover{color:var(--ink);}
.copyright{grid-column:2; font-size:var(--text-xs); color:var(--ink-soft); text-align:right;}

@media (max-width: 600px){
  .corner-mark{position:absolute; top:24px; left:24px;}
  .footer-grid{grid-template-columns:1fr;}
  .social-icons{justify-content:flex-start;}
  .copyright{grid-column:auto; text-align:left;}
}

/* night mode */
:root[data-theme="dark"]{
  --bg: #141517;
  --ink: #ECEAE4;
  --ink-soft: #9EA2A8;
  --hairline: #2E3034;
  --human: #E0954F;
  --machine: #6BBAC3;
  --red: #FF3347;
  --band-warm: #1D1B18;
  --band-cool: #161C1D;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #141517;
    --ink: #ECEAE4;
    --ink-soft: #9EA2A8;
    --hairline: #2E3034;
    --human: #E0954F;
    --machine: #6BBAC3;
    --red: #FF3347;
    --band-warm: #1D1B18;
    --band-cool: #161C1D;
    color-scheme: dark;
  }
}
.theme-toggle{
  position:fixed; right:28px; bottom:28px; z-index:10;
  width:36px; height:36px; padding:0; border:0; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
.theme-toggle:hover{color:var(--ink); transform:scale(1.08);}
.theme-toggle:focus-visible{outline:2px solid var(--machine); outline-offset:2px;}
.theme-toggle svg{width:20px; height:20px; overflow:visible;}
.theme-toggle .sun-core, .theme-toggle .moon-bite, .theme-toggle .rays{transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;}
.theme-toggle .rays, .theme-toggle .sun-core{transform-origin:16px 16px;}
.theme-toggle .moon-bite{transform:translate(12px,-12px);}
.is-dark .theme-toggle .sun-core{transform:scale(1.3);}
.is-dark .theme-toggle .moon-bite{transform:translate(0,0);}
.is-dark .theme-toggle .rays{transform:rotate(-30deg) scale(.4); opacity:0;}
@media (max-width: 600px){
  .theme-toggle{right:16px; bottom:16px;}
}
@media (prefers-reduced-motion: reduce){
  .theme-toggle, .theme-toggle *{transition:none !important;}
}

/* fade between pages instead of a white flash (Chrome, Edge, Safari; others ignore it) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto;}
}