/* teneleven.blog
   Colors and the header shape come from config.json (they're written into each page's <head>). */

:root{
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure:700px;
  --w-title:700; --w-sub:650; --w-label:600;   /* heading weights (regular-only fonts set these to 400) */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);font:18px/1.7 var(--sans);overflow-x:hidden;overflow-x:clip}
a{color:inherit}
img{max-width:100%;height:auto}

/* ── header ─────────────────────────────────────────── */
.hdr-wrap{position:relative}
.site-header{position:relative;isolation:isolate;overflow:hidden;background-color:var(--hdr);color:var(--hdr-text);
  height:calc(var(--hdr-h) + var(--d))}
.site-header .texture{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hdr-wrap .hands,.hdr-wrap .hub{position:absolute;overflow:visible;pointer-events:none}
.hdr-inner{max-width:calc(var(--measure) + 48px);margin:0 auto;padding:34px 24px 0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.logo{display:block;height:40px;font:var(--logo-weight) var(--logo-size)/40px var(--logo);letter-spacing:-.01em;text-decoration:none}   /* set in config.json → logo_font */
.logo span{opacity:.55;font-weight:400}
/* Same font as the site name. The line box stays 25.5px tall so the watch hands still meet its bottom. */
.tagline{margin:7.5px 0 0;padding-left:var(--tagline-inset,0px);font:400 18px/25.5px var(--logo);opacity:.8}
.site-header nav{display:flex;gap:20px;font:400 18px/24px var(--logo);padding-top:10px}
.site-header nav a{text-decoration:none;opacity:.85}
.site-header nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ── layout ─────────────────────────────────────────── */
main{max-width:calc(var(--measure) + 48px);margin:0 auto;padding:36px 24px 72px}
footer{max-width:calc(var(--measure) + 48px);margin:0 auto;padding:24px 24px 56px;font-size:14px;color:var(--muted);
  border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
footer a{color:inherit}

.meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:var(--w-label)}
.draft{background:var(--accent);color:var(--page);padding:1px 6px;border-radius:3px}

/* home cards */
.card{padding:0 0 32px;margin:0 0 32px;border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.card:last-of-type{border-bottom:none}
.card h2{font:var(--w-title) 28px/1.22 var(--sans);letter-spacing:-.02em;margin:.25em 0 .35em}
.card h2 a{text-decoration:none}
.card h2 a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
.card p{margin:0;color:color-mix(in srgb,var(--text) 82%,var(--page))}
.more{display:inline-block;margin-top:.6em;font-weight:500;color:var(--accent);text-decoration:none}
.all a{color:var(--accent);font-weight:500}

/* ── a post ─────────────────────────────────────────── */
.post > header{margin-bottom:28px}
.post h1,.page-title{font:var(--w-title) clamp(30px,5vw,42px)/1.15 var(--sans);letter-spacing:-.025em;margin:.2em 0 0}
.subtitle{font:400 20px/1.45 var(--sans);color:var(--muted);margin:.4em 0 0}

.prose > *:first-child{margin-top:0}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose figure,.prose table{margin:0 0 1.1em}
.prose h2{font:var(--w-label) 13.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin:2.4em 0 .8em;padding-top:1.1em;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.prose h3{font:var(--w-sub) 21px/1.35 var(--sans);letter-spacing:-.012em;margin:1.6em 0 .4em}
.prose h4,.prose h5{font:var(--w-label) 18px/1.4 var(--sans);margin:1.4em 0 .3em}
.prose a{text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent);text-underline-offset:3px;
  text-decoration-thickness:1px;overflow-wrap:anywhere}
.prose a:hover{color:var(--accent)}
.prose ul{padding-left:1.5em}
.prose ol{padding-left:2.3em}   /* room for two-digit numbers inside the text edge */
.prose li{margin:.3em 0}
.prose li::marker{color:var(--accent)}
.prose ol li::marker{font-weight:var(--w-label);font-size:.9em}
.prose img{display:block;margin:1em auto;border-radius:8px;height:auto}   /* width comes from the Word doc */
.prose img.float-left{float:left;margin:.35em 1.4em .8em 0}
.prose img.float-right{float:right;margin:.35em 0 .8em 1.4em}
.prose h2,.prose h3,.prose h4,.post-nav,.tags{clear:both}   /* a floated picture never runs into the next section */
.prose figure{margin-left:0;margin-right:0}
.prose blockquote{margin-left:0;padding-left:1.1em;border-left:3px solid var(--hdr);font-style:italic}
.prose table{border-collapse:collapse;width:100%;font-size:.92em}
.prose td,.prose th{border:1px solid color-mix(in srgb,var(--text) 15%,transparent);padding:.4em .6em;vertical-align:top}
.prose sup a{text-decoration:none;color:var(--accent)}
.tags a{color:var(--accent);text-decoration:none;margin-right:.6em;font-size:15px}

.post-nav{display:flex;justify-content:space-between;gap:24px;margin-top:48px;padding-top:20px;font-size:15px;
  border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.post-nav a{text-decoration:none;color:var(--accent);max-width:48%}
.post-nav a:last-child{text-align:right}

/* archive */
.year{font:var(--w-title) 20px/1 var(--sans);letter-spacing:-.01em;margin:1.8em 0 .5em}
.archive{list-style:none;padding:0;margin:0}
.archive li{display:flex;gap:16px;padding:.35em 0}
.archive time{flex:0 0 4.5em;color:var(--muted);font-size:15px;padding-top:.15em}
.archive a{text-decoration:none}
.archive a:hover{text-decoration:underline;text-decoration-color:var(--accent)}

@media (max-width:640px){
  body{font-size:17px}
  /* The header rows share one left edge, --text-left across the screen width
     (config.json → header_left_mobile). */
  .hdr-inner{max-width:none;margin:0 0 0 var(--text-left);width:calc(100% - var(--text-left) - 10px);padding:14px 0 0;flex-direction:column-reverse;align-items:flex-start;text-align:left;gap:6px}
  .logo{font-size:var(--logo-size);line-height:40px;height:40px}
  .hdr-inner > div{align-self:stretch;min-width:0}   /* the name + tagline box stays inside the header */
  .tagline{margin-top:6px;font-size:18px;line-height:25px;white-space:nowrap}
  .site-header nav{padding-top:0;padding-left:var(--links-inset,0px);gap:22px;font-size:19px;line-height:26px}
  .card h2{font-size:24px}
}

/* spacing between a section label and the subheading right under it */
.prose > h2:first-child{border-top:none;padding-top:0}
.prose h2 + h3{margin-top:.5em}