/* ==========================================================================
   Off The Syllabus — shared chrome
   ==========================================================================
   Loaded by every page as /_shared/site.css. This is the furniture that every
   page shares: design tokens, reset, top bar, masthead, the oxblood feature
   block, the newsletter and subscribe bands, the footer, and the mobile
   breakpoint.

   Each page loads its own small <style> block AFTER this file, so anything a
   page needs to change it simply redeclares — source order does the work.
   Two consequences worth knowing before you edit:

     * The mobile chrome block at the bottom is the LAST thing in this file.
       A page rule that sets a property this block also sets (.feature padding,
       footer padding, .cta-substack padding) will win at every width, mobile
       included. Scope such overrides inside the page's own max-width:820px
       block rather than declaring them unconditionally.
     * .cta-substack and .signup are alternative subscribe treatments; a page
       uses one or the other, and the unused one's rules are simply inert.
   ========================================================================== */

:root{
  --paper:#f4f0e7;
  --paper-2:#efe9dc;
  --ink:#191512;
  --ink-soft:#4a4038;
  --ink-faint:#8a7d70;
  --ox:#7a1f2b;
  --ox-deep:#5c1420;
  --ox-soft:#9a3a45;
  --cream:#f1e7d6;
  --gold:#cf9a3f;
  --rule:#d8cfbe;
  --serif:'Fraunces', Georgia, serif;
  --read:'Newsreader', Georgia, serif;
  --mono:'Space Mono', ui-monospace, monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;}
body{background:var(--paper);color:var(--ink);font-family:var(--read);font-size:18px;line-height:1.6;-webkit-tap-highlight-color:rgba(122,31,43,.10);}
a{color:inherit;text-decoration:none;}

.label{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 34px;border-bottom:1px solid var(--rule);}
.topbar .left{display:flex;align-items:center;gap:18px;}
.subscribe{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ox);border:1px solid var(--ox);padding:9px 16px;border-radius:2px;transition:background .18s,color .18s;}
.subscribe:hover{background:var(--ox);color:var(--cream);}
/* The glass is a real button: 16px of drawn lens inside a 34px hit target that
   the padding provides, so it is comfortably tappable without moving the row. */
button.search{background:none;border:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:9px;margin:-9px;}
button.search:focus-visible{outline:2px solid var(--ox);outline-offset:0;}
.search .glass{width:16px;height:16px;border:1.6px solid var(--ink);border-radius:50%;position:relative;display:inline-block;transition:border-color .18s;}
.search .glass::after{content:"";position:absolute;width:7px;height:1.6px;background:var(--ink);transform:rotate(45deg);right:-4px;bottom:1px;transition:background .18s;}
button.search:hover .glass{border-color:var(--ox);}
button.search:hover .glass::after{background:var(--ox);}
/* The pre-JS span kept its old shape so the bar looks the same either way. */
span.search{width:16px;height:16px;border:1.6px solid var(--ink);border-radius:50%;position:relative;display:inline-block;}
span.search::after{content:"";position:absolute;width:7px;height:1.6px;background:var(--ink);transform:rotate(45deg);right:-4px;bottom:1px;}
.topnav{display:flex;gap:26px;}
.topnav a{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ox);padding-bottom:2px;}
.topnav a:hover{border-bottom:1px solid var(--ox);}
.topnav a.on{color:var(--ink);}

/* ---------- masthead ---------- */
.masthead{padding:10px 30px 46px;text-align:center;overflow:hidden;}
.masthead h1{
  font-family:var(--serif);font-weight:340;font-optical-sizing:auto;
  font-size:clamp(44px,8.5vw,132px);line-height:0.9;letter-spacing:-0.02em;color:var(--ink);
  text-shadow:0 3px 0 var(--ox), 0 6px 0 var(--ox-soft), 0 13px 22px rgba(122,31,43,.34);
}
/* ---------- masthead: caustic shimmer ----------
   A cream highlight drifts across the wordmark while the oxblood reflection
   beneath it breathes, so the logo reads as if seen through moving water.
   The two run on co-prime-ish periods (13s / 9s) so the pattern doesn't
   visibly loop. Purely additive: the ink fill and the letterpress shadow
   stack are unchanged, and where background-clip:text is unsupported the
   wordmark falls back to exactly what it was. */
.masthead h1 a{position:relative;display:inline-block;animation:ots-ripple 9s ease-in-out infinite;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* The highlight rides in an overlay rather than on the anchor itself: an
     element paints its own background *before* its text-shadow, so a
     background-clipped fill would end up underneath the oxblood stack. The
     "/ ''" gives the duplicated glyphs an empty alt text, keeping them out
     of the accessibility tree. */
  .masthead h1 a::after{
    content:"off\00a0the\00a0syllabus" / "";
    position:absolute;left:0;top:0;
    pointer-events:none;
    text-shadow:none;
    background-image:linear-gradient(96deg,
      transparent 26%,
      rgba(241,231,214,.10) 34%,
      rgba(252,249,242,.30) 42%,
      rgba(241,231,214,.12) 50%,
      transparent 56%,
      rgba(241,231,214,.10) 64%,
      transparent 74%);
    background-size:240% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:ots-caustic 13s linear infinite;
  }
}
@keyframes ots-caustic{
  from{background-position:100% 0;}
  to  {background-position:0% 0;}
}
@keyframes ots-ripple{
  0%,100%{text-shadow:0 3px 0 var(--ox), 0 6px 0 var(--ox-soft), 0 13px 22px rgba(122,31,43,.34);}
  50%    {text-shadow:0 3px 0 var(--ox), 0 6px 0 var(--ox-soft), 0 15px 25px rgba(122,31,43,.28);}
}
@media(prefers-reduced-motion:reduce){
  .masthead h1 a{animation:none;}
  .masthead h1 a::after{display:none;}
}

/* ---------- feature (oxblood block) ---------- */
.feature{background:var(--ox);color:var(--cream);padding:42px 30px 46px;}
.feature-inner{max-width:1120px;margin:0 auto;}
.feature-head{text-align:center;max-width:820px;margin:0 auto 14px;}
.feature .kicker{color:var(--cream);opacity:.72;margin-bottom:26px;}
.feature h2{font-family:var(--serif);font-weight:360;font-size:clamp(32px,4.4vw,56px);line-height:1.03;letter-spacing:-0.02em;}
.feature h2 em{font-style:italic;}
.feature .dek{font-family:var(--read);font-style:italic;font-size:clamp(19px,2.4vw,26px);line-height:1.4;color:var(--cream);opacity:.86;margin:22px auto 0;max-width:640px;}

/* ---------- newsletter band (home + feature pages) ---------- */
.signup{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:64px 30px;}
.signup-inner{max-width:720px;margin:0 auto;}
.signup h3{font-family:var(--serif);font-style:italic;font-weight:360;font-size:clamp(30px,4.4vw,48px);line-height:1.06;margin-bottom:14px;}
.signup .sub{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px;}
.signup-cta{display:inline-block;background:var(--ox);color:var(--cream);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;border-radius:2px;transition:background .18s;}
.signup-cta:hover{background:var(--ox-deep);}

/* ---------- subscribe band ---------- */
.cta-substack{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:40px 30px;text-align:center;}
.cta-substack .cta-line{font-family:var(--read);font-style:italic;font-size:20px;color:var(--ink-soft);margin-bottom:18px;}
.cta-substack .cta-btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ox);border:1px solid var(--ox);padding:12px 24px;border-radius:2px;transition:background .18s,color .18s;}
.cta-substack .cta-btn:hover{background:var(--ox);color:var(--cream);}

/* ---------- footer ---------- */
footer{padding:56px 34px 10px;}
.foot-cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;max-width:1120px;margin:0 auto 12px;}
.foot-cols nav{display:flex;flex-direction:column;gap:8px;}
.foot-cols a,.foot-cols .fine{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ox);}
.foot-cols a:hover{color:var(--ink);}
.foot-cols .fine{color:var(--ink-faint);text-transform:none;letter-spacing:.06em;line-height:1.7;}
.foot-mast{padding:20px 30px 30px;text-align:center;overflow:hidden;}
.foot-mast span{font-family:var(--serif);font-weight:320;font-size:clamp(48px,12vw,180px);line-height:.9;letter-spacing:-0.02em;color:var(--ink);opacity:.14;}

/* ---------- search overlay ----------
   Markup is injected by /_shared/search.js; nothing here applies until a reader
   opens it. Sits above everything, anchored near the top rather than centred so
   the panel does not jump as the result list grows. */
html.search-open{overflow:hidden;}
.search-overlay{position:fixed;inset:0;z-index:200;display:flex;justify-content:center;align-items:flex-start;padding:10vh 20px 20px;}
.search-overlay[hidden]{display:none;}
.s-scrim{position:absolute;inset:0;background:rgba(25,21,18,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:s-fade .18s ease-out;}
.s-panel{position:relative;width:100%;max-width:660px;max-height:80vh;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--ink);box-shadow:0 24px 60px rgba(25,21,18,.34);animation:s-rise .2s ease-out;}
@keyframes s-fade{from{opacity:0;}to{opacity:1;}}
@keyframes s-rise{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.s-scrim,.s-panel{animation:none;}}

.s-field{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--rule);}
.s-icon{flex:none;width:15px;height:15px;border:1.6px solid var(--ink-faint);border-radius:50%;position:relative;}
.s-icon::after{content:"";position:absolute;width:7px;height:1.6px;background:var(--ink-faint);transform:rotate(45deg);right:-4px;bottom:1px;}
.s-input{flex:1;min-width:0;background:none;border:0;outline:0;font-family:var(--serif);font-weight:380;font-size:23px;line-height:1.3;color:var(--ink);padding:2px 0;}
.s-input::placeholder{color:var(--ink-faint);opacity:.75;}
.s-input::-webkit-search-cancel-button{-webkit-appearance:none;}
.s-close{flex:none;background:none;border:1px solid var(--rule);cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:6px 9px;border-radius:2px;transition:color .18s,border-color .18s;}
.s-close:hover{color:var(--ox);border-color:var(--ox);}

.s-count{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);padding:12px 18px 4px;}
.s-count:empty{display:none;}

.s-list{list-style:none;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 8px;margin:0;flex:1;}
/* Before anything is typed the list is empty; collapse it so the panel is just
   the field and the key hints rather than a band of dead space. */
.s-list:empty{display:none;}
.s-group{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ox);padding:14px 18px 6px;border-top:1px solid var(--rule);margin-top:6px;}
.s-list .s-group:first-child{border-top:0;margin-top:0;padding-top:6px;}
.s-hit a{display:block;padding:9px 18px;border-left:3px solid transparent;}
.s-hit.on a{background:var(--paper-2);border-left-color:var(--ox);}
.s-hit-title{display:block;font-family:var(--serif);font-weight:440;font-size:17px;line-height:1.25;color:var(--ink);}
.s-hit.on .s-hit-title{color:var(--ox);}
.s-hit-meta{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-faint);margin-top:4px;}
.s-hit-body{display:block;font-family:var(--read);font-size:14.5px;line-height:1.45;color:var(--ink-soft);margin-top:5px;}
.s-hit mark{background:rgba(207,154,63,.34);color:inherit;padding:0 1px;border-radius:1px;}

.s-empty{padding:26px 18px 30px;font-family:var(--read);font-size:17px;color:var(--ink-soft);}
.s-empty strong{font-family:var(--serif);font-weight:500;color:var(--ink);}
.s-empty-hint{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint);margin-top:8px;}

.s-foot{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule);padding:11px 18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.s-foot kbd{font-family:inherit;font-size:9.5px;border:1px solid var(--rule);border-radius:2px;padding:2px 5px;margin-right:4px;color:var(--ink-soft);}

@media(max-width:820px){
  .search-overlay{padding:0;}
  .s-panel{max-width:none;height:100%;max-height:none;border:0;}
  .s-input{font-size:20px;}
  .s-hit a{padding:11px 18px;}
  .s-foot{display:none;}
}

/* ---------- mobile chrome (shared across every page) ----------
   The top nav used to be hidden below 820px, which left Index/About/Thinkers
   reachable only from the footer. It now drops to a full-bleed tab strip
   under the subscribe row, with 44px-tall targets. */
@media(max-width:820px){
  .topbar{flex-direction:column;align-items:stretch;gap:0;padding:13px 20px 0;}
  .topbar .left{justify-content:space-between;}
  .subscribe{padding:12px 18px;}
  .topnav{display:flex;gap:0;margin:13px -20px 0;border-top:1px solid var(--rule);}
  .topnav a{flex:1;text-align:center;font-size:10px;letter-spacing:.08em;padding:15px 2px;border-bottom:2px solid transparent;}
  .topnav a:hover{border-bottom:2px solid transparent;}
  .topnav a.on{color:var(--ink);border-bottom-color:var(--ox);}
  .masthead{padding:24px 18px 32px;}
  .feature{padding:34px 22px 40px;}
  .cta-substack{padding:34px 22px;}
  footer{padding:44px 22px 4px;}
  .foot-cols{gap:22px;}
  .foot-cols nav{gap:2px;}
  .foot-cols nav a{padding:9px 0;}
  /* clamp()'s 48px floor stopped the wordmark shrinking below ~390px, so
     overflow:hidden guillotined it — 62px lost at 320px. Let 12vw govern all
     the way down and bleed to the footer's own margin instead. */
  .foot-mast{padding:12px 0 26px;}
  .foot-mast span{font-size:12vw;}
}