/* ===== TILE LAYER (v20260915) =====
   Homepage and, progressively, every page. Loads after style.css and
   scopes everything under body.tl so untouched pages keep the manuscript
   layer. Palette unchanged. Faces: Fraunces (display) + Inter Tight (text),
   self-hosted from /assets/fonts. */

@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;src:url(/assets/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

body.tl{
  --ink:#0A0A0A;--surface:#111111;--rule:#2A2A2A;--bone:#F5F0E8;--taupe:#A09A8E;--gold:#C9A96E;
  --on-gold:#3E3522;--on-bone:#5A4E36;
  --d:'Fraunces',Georgia,'Times New Roman',serif;
  --s:'Inter Tight',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --g:12px;--r:16px;
  background:var(--ink);color:var(--bone);
  font:400 16px/1.55 var(--s);
  padding:var(--g);
}
/* :where() keeps these at class-level specificity so every .tl-* heading rule below wins */
.tl-wrap :where(h1,h2,h3,h4){font-family:var(--d);font-weight:400;color:var(--bone);letter-spacing:-.02em;line-height:1.1;font-size:inherit}
.tl-wrap :where(p){margin:0;font-size:inherit;line-height:inherit;color:inherit}
body.tl a{color:inherit;text-decoration:none}
body.tl a:hover{text-decoration:none}
body.tl button,body.tl input{font:inherit}
body.tl a:focus-visible,body.tl button:focus-visible,body.tl input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.tl-wrap{max-width:1360px;margin:0 auto;display:grid;gap:var(--g)}
.tl-wrap>*,.tl-row>*{min-width:0}
.tl-row{display:grid;gap:var(--g)}
.tl-row.half{grid-template-columns:1fr 1fr}
.tl-row.three{grid-template-columns:repeat(3,1fr)}
.tl-band{display:grid;gap:var(--g)}
.tl-band-head{display:flex;justify-content:space-between;align-items:baseline;padding:28px 6px 8px}
.tl-band-head h2{font:400 15px var(--s);letter-spacing:.02em;color:var(--taupe)}
.tl-band-head a{font:500 13px var(--s);color:var(--gold)}

/* Marks */
.tl-btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--ink);font:500 13px var(--s);letter-spacing:.04em;padding:14px 22px;border:0;cursor:pointer;white-space:nowrap;border-radius:10px}
.tl-btn:hover{background:#D4B88A}
.tl-note{position:relative;padding-left:18px;font:500 11px/1.4 var(--s);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.tl-note::before{content:"^";position:absolute;left:0;top:-3px;font:500 16px/1 var(--d);color:var(--gold)}
.tl-meta{font:400 12px var(--s);letter-spacing:.04em;color:var(--taupe)}
.tl-meta.gold{color:var(--gold)}

/* Header: the site navbar, restyled as the first tile */
body.tl .navbar{position:static;background:var(--surface);border:0;border-radius:var(--r)}
body.tl .navbar-container{max-width:none;height:auto;padding:14px 22px}
body.tl .logo{font:500 17px var(--d);letter-spacing:-.01em;color:var(--bone);display:inline-flex;align-items:baseline;gap:8px;padding:10px 0;margin:-10px 0}
body.tl .logo-caret{font:500 20px/0 var(--d);color:var(--gold);transform:translateY(3px)}
body.tl .nav-menu{gap:24px}
body.tl .nav-link{font:500 13px var(--s);letter-spacing:0;text-transform:none;color:var(--taupe);padding:12px 4px;margin:-12px -4px}
body.tl .nav-link:hover,body.tl .nav-link.active{color:var(--bone)}
body.tl .nav-cta{background:var(--gold);color:var(--ink);font:500 13px var(--s);letter-spacing:.04em;text-transform:none;padding:14px 22px;border:0;border-radius:10px}
body.tl .nav-cta:hover{background:#D4B88A;color:var(--ink);opacity:1}
@media (max-width:768px){
  body.tl .nav-menu{gap:32px}
  body.tl .nav-menu .nav-link{font-size:20px;padding:8px;margin:0}
}

/* Tiles */
.tl-tile{background:var(--surface);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
@media (hover:hover){a.tl-tile:hover,.tl-strip a:hover{background:#161616}}
a.tl-tile{transition:background .2s ease}

/* Hero: full width, one ask, single field */
.tl-hero{min-height:560px;padding:clamp(28px,4vw,56px)}
.tl-hero h1{font:400 clamp(44px,6.4vw,104px)/1 var(--d);letter-spacing:-.03em;text-wrap:balance;max-width:14ch;margin-top:22px}
.tl-strike{position:relative;color:var(--taupe)}
.tl-strike::after{content:"";position:absolute;left:0;right:0;top:52%;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:tl-strike .5s ease-out .4s forwards}
.tl-insert{position:relative;display:inline-block;padding-left:.15em}
.tl-insert .caret{position:absolute;left:-.05em;bottom:-.08em;font:500 .5em/1 var(--d);color:var(--gold);opacity:0;animation:tl-fade .3s ease-out .9s forwards}
.tl-insert .word{display:inline-block;color:var(--gold);font-style:italic;font-weight:300;position:relative;top:-.38em;font-size:.74em;clip-path:inset(0 100% 0 0);animation:tl-type .6s steps(5,end) 1s forwards}
@keyframes tl-strike{to{transform:scaleX(1)}}
@keyframes tl-fade{to{opacity:1}}
@keyframes tl-type{to{clip-path:inset(0 0 0 0)}}
.tl-hero .foot{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.tl-hero .lede{color:var(--taupe);max-width:44ch;font-size:18px;line-height:1.55}

/* Capture cluster: input + button in one parent (main.js binds them) */
.tl-ask{display:grid;gap:10px;max-width:520px}
.tl-ask .field{display:flex;background:var(--ink);border:1px solid var(--rule);border-radius:12px;padding:6px}
.tl-ask .field:focus-within{border-color:var(--gold)}
.tl-ask input{flex:1;background:transparent;border:0;color:var(--bone);padding:12px 14px;outline:none;min-width:0;font-size:16px}
.tl-ask input::placeholder{color:var(--taupe)}
.tl-ask button{background:var(--gold);color:var(--ink);border:0;padding:12px 18px;border-radius:8px;font:500 13px var(--s);cursor:pointer;white-space:nowrap}
.tl-ask button:hover{background:#D4B88A}
.tl-ask small{font-size:12px;color:var(--taupe);line-height:1.5}
.tl-ask small b{color:var(--bone);font-weight:500}
.tl-ask [role="status"]{font:400 14px var(--s);color:var(--gold);margin:0!important}

/* Essay tiles */
.tl-essay{min-height:280px}
.tl-essay .stamp{position:absolute;right:24px;top:26px;font:500 11px var(--s);letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);text-align:right;line-height:1.7}
.tl-essay h3{font:400 clamp(22px,1.9vw,28px)/1.15 var(--d);letter-spacing:-.015em;margin-top:14px;max-width:18ch;text-wrap:balance}
.tl-essay h3 mark{background:none;color:var(--gold);font-style:italic;font-weight:300}
.tl-essay p.x{color:var(--taupe);font-size:15px;margin-top:10px;max-width:40ch;line-height:1.5}

/* Capture band after the proof: the only gold surface on the page */
.tl-cap{background:var(--gold);color:var(--ink);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:var(--r)}
.tl-cap h2{font:400 clamp(30px,3.4vw,48px)/1.02 var(--d);letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
.tl-cap p{color:var(--on-gold);margin-top:14px;max-width:48ch}
.tl-cap p.who{margin-top:6px;font:500 12px var(--s);letter-spacing:.06em;text-transform:uppercase}
.tl-cap .tl-note{color:var(--on-gold)}.tl-cap .tl-note::before{color:var(--ink)}
.tl-cap .tl-ask{max-width:none}
.tl-cap .field{background:var(--bone);border:0}
.tl-cap input{color:var(--ink)}
.tl-cap input::placeholder{color:#7A6640}
.tl-cap .tl-ask button{background:var(--ink);color:var(--bone)}
.tl-cap .tl-ask button:hover{background:#242424}
.tl-cap small{color:var(--on-gold)}
.tl-cap .tl-ask [role="status"]{color:var(--ink)}

/* Start here */
.tl-diag{background:var(--bone);color:var(--ink);min-height:320px}
.tl-diag .tl-note{color:var(--on-bone)}.tl-diag .tl-note::before{color:#7A6640}
.tl-diag h3{font:400 clamp(28px,3vw,44px)/1.05 var(--d);letter-spacing:-.025em;margin-top:14px;max-width:18ch;text-wrap:balance;color:var(--ink)}
.tl-diag p{color:var(--on-bone);margin-top:12px;max-width:50ch}
.tl-diag ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:0}
.tl-diag ol li{font:500 12px var(--s);border:1px solid rgba(10,10,10,.3);border-radius:999px;padding:6px 12px;color:#1A1712}
.tl-diag .tl-btn{background:var(--ink);color:var(--bone);align-self:flex-start}
.tl-diag .tl-btn:hover{background:#242424}
.tl-diag .tl-meta{color:var(--on-bone)}
.tl-start h3{font:400 clamp(24px,2.2vw,30px)/1.12 var(--d);letter-spacing:-.02em;margin-top:14px;text-wrap:balance}
.tl-start p{color:var(--taupe);margin-top:12px;max-width:40ch;font-size:15px;line-height:1.5}

/* Also here */
.tl-small{min-height:200px}
.tl-small h3{font:400 22px/1.15 var(--d);letter-spacing:-.015em;margin-top:12px;text-wrap:balance}
.tl-small p{color:var(--taupe);margin-top:10px;max-width:44ch;font-size:15px;line-height:1.5}
.tl-links{display:flex;gap:14px;flex-wrap:wrap;font:500 12px var(--s);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.tl-links a,body.tl footer nav a,.tl-band-head a,.tl-quote .tl-meta{padding:14px 0;margin:-14px 0;display:inline-block}

/* Quote */
.tl-quote p.q{font:italic 300 clamp(24px,2.4vw,34px)/1.2 var(--d);margin-top:12px;max-width:30ch;color:var(--bone)}
.tl-quote .redline{text-decoration:line-through;text-decoration-color:var(--gold);text-decoration-thickness:2px;color:var(--taupe)}

/* Archive strip */
.tl-strip{display:flex;gap:var(--g);overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;padding-bottom:10px}
.tl-strip::-webkit-scrollbar{height:4px}.tl-strip::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}.tl-strip::-webkit-scrollbar-track{background:transparent}
.tl-strip a{flex:1 0 240px;background:var(--surface);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:170px}
.tl-strip h4{font:400 18px/1.2 var(--d);letter-spacing:-.01em;text-wrap:balance}

/* Footer */
body.tl footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:20px 26px;background:var(--surface);border-radius:var(--r);font-size:13px;color:var(--taupe)}
body.tl footer nav{display:flex;gap:18px;flex-wrap:wrap}
body.tl footer a:hover{color:var(--bone)}

/* Responsive */
@media (max-width:1000px){
  .tl-row.half{grid-template-columns:1fr}
  .tl-row.three{grid-template-columns:1fr 1fr}
  .tl-row.three>:last-child{grid-column:1/-1}
  .tl-hero{min-height:0}
  .tl-hero .foot,.tl-cap{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.tl{padding:8px}
  .tl-wrap,.tl-row,.tl-band{gap:8px}
  body.tl .navbar-container{padding:12px 14px}
  body.tl .nav-cta{padding:12px 16px}
  .tl-row.three{grid-template-columns:1fr}
  .tl-tile{padding:22px;min-height:0}
  .tl-hero{gap:18px}
  .tl-hero h1{font-size:clamp(36px,11vw,48px);max-width:none}
  .tl-hero .foot{gap:18px}
  .tl-hero .lede{order:2;font-size:15px}
  .tl-essay .tl-note{padding-right:84px}
  .tl-essay h3,.tl-diag h3{max-width:none}
  .tl-band-head{padding:20px 4px 4px}
  .tl-ask .field{flex-direction:column;gap:6px}
  .tl-ask button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .tl-strike::after{transform:scaleX(1);animation:none}
  .tl-insert .caret{opacity:1;animation:none}
  .tl-insert .word{clip-path:none;animation:none}
}

/* ===== Interior pages: tile header + footer, new faces, content stays on the canvas ===== */
body.tl-inner{--font-headline:var(--d);--font-body:var(--s)}
.tl-inner [style*="Cormorant"]{font-family:var(--d)!important;font-weight:400!important}
.tl-inner [style*="Source Serif"]{font-family:var(--s)!important}
.tl-inner .ms-note{font-family:var(--s);letter-spacing:.14em}
.tl-inner .ms-note::before{font-family:var(--d)}
.tl-inner main{display:block;padding:0}
.tl-inner main>section:first-of-type[style*="padding: 120px"]{padding-top:56px!important}
.tl-inner main>section:first-of-type[style*="padding: 140px"]{padding-top:56px!important}
.tl-inner main>section:first-of-type[style*="padding: 160px"]{padding-top:56px!important}
.tl-inner article[style*="font-size: 20px"]{font-size:18px!important;line-height:1.7!important;font-weight:400!important}
.tl-inner article blockquote[style*="font-size: 28px"]{font-size:26px!important;font-weight:300!important}
.tl-inner [style*="font-size: 72px"]{font-size:clamp(40px,5.2vw,64px)!important;letter-spacing:-.03em!important;line-height:1.02!important}
.tl-inner [style*="font-size: 56px"]{font-size:clamp(34px,4.2vw,50px)!important;letter-spacing:-.025em!important}
.tl-inner [style*="font-size: 48px"]{font-size:clamp(30px,3.6vw,42px)!important;letter-spacing:-.025em!important}
.tl-inner [style*="font-size: 40px"]{font-size:clamp(28px,3vw,36px)!important;letter-spacing:-.02em!important}
.tl-inner [style*="font-size: 32px"]{font-size:28px!important;letter-spacing:-.02em!important}
.tl-inner [style*="letter-spacing: 0.15em"],.tl-inner [style*="letter-spacing: 0.2em"]{font-family:var(--s)!important}
.tl-inner .tl-cap{margin-top:0}
.tl-inner .ms-margin{top:16px}
.tl-inner .tsd-readbar{top:0}
/* the old inline subscribe clusters pick up the tile field look */
.tl-inner input[type="email"][style]{font-family:var(--s)!important;font-size:16px!important;border-radius:10px!important;border:1px solid var(--rule)!important;background:var(--surface)!important}
.tl-inner input[type="email"][style]:focus{border-color:var(--gold)!important}
.tl-inner input[type="email"]+button[style]{font-family:var(--s)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.04em!important;text-transform:none!important;border-radius:10px!important}

/* Library */
.tl-libhero{min-height:0}
.tl-essay.nodate>.tl-meta{display:none}
.tl-row.three>.tl-essay:last-child:nth-child(3n+1){grid-column:1/-1;min-height:0}
.tl-row.three>.tl-essay:last-child:nth-child(3n+1) h3{max-width:28ch}
.tl-row.three>.tl-essay:last-child:nth-child(3n+1) p.x{max-width:60ch}
.tl-inner article[style*="padding: 80px 24px 0"]{padding-top:16px!important}
.tl-inner main>section[style*="padding: 120px"],.tl-inner main>section[style*="padding: 140px"],.tl-inner main>section[style*="padding: 160px"]{padding-top:72px!important;padding-bottom:72px!important}
.tl-inner main>section[style*="padding: 100px"],.tl-inner main>section[style*="padding: 80px 0"]{padding-top:64px!important;padding-bottom:64px!important}
.tl-inner main>section:first-of-type{padding-top:48px!important}
@media (max-width:640px){
  .tl-essay .stamp{position:static;display:flex;gap:10px;text-align:left;line-height:1.4;margin-bottom:14px}
  .tl-essay .stamp br{display:none}
  .tl-essay .tl-note{padding-right:0}
  .tl-inner main>section:first-of-type{padding-bottom:24px!important}
}
.tl-inner main>section:first-of-type[style*="0 80px"]{padding-bottom:32px!important}

/* Contact */
.tl-row.contact{grid-template-columns:1.4fr 1fr;align-items:start}
.tl-form{display:grid;gap:14px}
.tl-form label{display:grid;gap:6px;font:500 12px/1.4 var(--s);letter-spacing:.06em;text-transform:uppercase;color:var(--taupe)}
.tl-form input,.tl-form select,.tl-form textarea{width:100%;background:var(--ink);border:1px solid var(--rule);border-radius:10px;color:var(--bone);padding:12px 14px;font:400 16px/1.5 var(--s);letter-spacing:0;text-transform:none;outline:none}
.tl-form textarea{resize:vertical;min-height:160px}
.tl-form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--taupe) 50%),linear-gradient(135deg,var(--taupe) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.tl-form input:focus,.tl-form select:focus,.tl-form textarea:focus{border-color:var(--gold)}
.tl-form input:user-invalid,.tl-form textarea:user-invalid{border-color:#8B3A3A}
.tl-form ::placeholder{color:var(--taupe)}
.tl-form .tl-row.half{gap:14px}
.tl-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.tl-form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:4px}
.tl-status{font:400 16px/1.5 var(--s);padding:14px 16px;border-radius:10px;border:1px solid var(--rule);margin-bottom:18px}
.tl-status.ok{border-color:var(--gold);color:var(--bone)}
.tl-status.err{border-color:#8B3A3A;color:var(--bone)}
.tl-formtile{justify-content:flex-start}
@media (max-width:1000px){.tl-row.contact{grid-template-columns:1fr}}
@media (max-width:640px){.tl-form .tl-row.half{grid-template-columns:1fr}.tl-form-foot .tl-btn{width:100%;justify-content:center}}
