/* ===== TILE LAYER, monaboulsi.com (v20260915) =====
   Ported from theseconddraft.net per the build brief, section 4 and Phase 2.
   Loads last, after every existing stylesheet, and scopes under body.tl so
   pages not yet rebuilt keep the previous layer untouched.
   Faces: Fraunces (display) and Inter Tight (text), self-hosted from
   /assets/fonts. Palette: the fixed six-token table. */

/* ===== Ported base (from the theseconddraft.net build): skip link,
   navbar structure, mobile menu, reading progress, next-essay bar ===== */
.skip-link{position:absolute;top:-100%;left:0;background:#C9A96E;color:#0A0A0A;padding:8px 16px;z-index:9999;font-family:'Inter Tight',system-ui,sans-serif;font-size:14px}
.skip-link:focus{top:0}
body.tl .navbar{z-index:1000}
body.tl .navbar-container{display:flex;align-items:center;justify-content:space-between}
body.tl .logo{white-space:nowrap;text-decoration:none}
body.tl .nav-menu{display:flex;align-items:center;list-style:none;margin:0;padding:0}
body.tl .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:10px;z-index:1001}
body.tl .nav-toggle span{display:block;width:24px;height:1.5px;background-color:#F5F0E8;transition:all .2s ease;transform-origin:center}
body.tl .nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
body.tl .nav-toggle.active span:nth-child(2){opacity:0}
body.tl .nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
@media (max-width:768px){
  body.tl .nav-toggle{display:flex}
  body.tl .nav-menu{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0A0A0A;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:999}
  body.tl .nav-menu.active{opacity:1;visibility:visible}
}
.read-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#C9A96E,#D8C096);z-index:10001;pointer-events:none}
.next-bar{position:fixed;bottom:0;left:0;right:0;z-index:9500;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 48px 14px 20px;background:rgba(10,10,10,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(201,169,110,.3);transform:translateY(100%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.next-bar.show{transform:none}
.next-bar a{display:flex;align-items:baseline;gap:12px;text-decoration:none;min-width:0}
.next-bar-label{font-family:'Inter Tight',system-ui,sans-serif;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:#C9A96E;white-space:nowrap}
.next-bar-title{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:17px;color:#F5F0E8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-bar-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#A09A8E;font-size:20px;line-height:1;padding:8px;cursor:pointer}
.next-bar-close:hover{color:#F5F0E8}
@media (max-width:768px){.next-bar-title{max-width:60vw}}
@media (prefers-reduced-motion:reduce){.next-bar{transition:none}}

/* ===== Tile layer (ported verbatim from theseconddraft.net tiles.css) ===== */

@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.
   monaboulsi deviation: legacy content inside main on tl-inner pages is exempt,
   because this repo sizes headings with classes, not inline styles, and the reset
   loads last. The guard retires when the last legacy page is rebuilt. */
.tl-wrap :where(h1,h2,h3,h4):where(:not(.tl-inner main *)){font-family:var(--d);font-weight:400;color:var(--bone);letter-spacing:-.02em;line-height:1.1;font-size:inherit}
.tl-wrap :where(p):where(:not(.tl-inner main *)){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*="Source Serif"]{font-family:var(--s)!important}
.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}
/* 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}

/* ===== monaboulsi legacy layer adaptation (Phase 2, brief section 7 step 6) =====
   Pages still carrying the previous design system render on the tile canvas:
   the legacy font variables remap to the tile faces, reveal animations render
   settled, and the old reading bar yields to the tile progress bar. Each rule
   here retires as its page is rebuilt in Phases 3 through 8. */
body.tl{--font-display:var(--d);--font-prose:var(--s)}
body.tl [style*="Playfair"]{font-family:var(--d)!important}
body.tl .mn-reveal,body.tl .mn-reveal-item,body.tl .fade-up{opacity:1!important;transform:none!important}
body.tl .mn-readbar{display:none}
/* unclassed links in legacy content keep the gold accent and hover underline */
body.tl-inner main a:not([class]){color:#C9A96E}
body.tl-inner main a:not([class]):hover{text-decoration:underline}
/* Full footer: one surface tile, page links, elsewhere links, then the base line.
   Mo's call (2026-09-15) to keep the full page set in the footer. */
body.tl footer.tl-footer{display:grid;gap:14px;padding:24px 26px}
body.tl footer.tl-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
body.tl footer.tl-footer nav[aria-label="Elsewhere"] a{font-size:12px;letter-spacing:.02em}
body.tl footer.tl-footer .tl-foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:14px;border-top:1px solid var(--rule)}
body.tl footer.tl-footer .tl-foot-base a{color:var(--gold)}

/* tile bands sitting between legacy full-bleed sections get their own air */
.tl-inner main .tl-band{padding:40px 0}
@media (max-width:640px){.tl-inner main .tl-band{padding:24px 0}}

/* Legacy headings and buttons take the tile idiom: headings at weight 400,
   buttons as pills. The legacy button system uses !important, so this must too. */
body.tl-inner main :is(h1,h2,h3,h4){font-weight:400!important}
body.tl .mn-btn-primary,body.tl .mn-btn-ghost,body.tl .mn-submit,body.tl .mn-footer-submit,body.tl .about-capture-button,body.tl .pod-newsletter-button,body.tl .wr-newsletter-button,body.tl .speaking-submit,body.tl .work-submit,body.tl .work-tier-cta,body.tl .sh-act-link{font:500 13px var(--s)!important;letter-spacing:.04em!important;text-transform:none!important;padding:14px 22px!important;border-radius:10px!important;height:auto!important;min-height:44px!important}
body.tl .mn-btn-ghost{color:var(--bone)!important;border:1px solid var(--rule)!important}
body.tl .mn-btn-ghost:hover{border-color:var(--gold)!important}

/* Legacy hero as a tile. The original assumed a full-viewport section under a
   floating nav and a portrait bleeding to the screen edge. Inside the grid it
   becomes a surface tile that fills the first screen beneath the header tile,
   with the portrait dissolving into the surface on every edge and the buttons
   kept above the fold. Retires with the Phase 3 hero. */
body.tl-inner main>section.mn-hero{padding-top:0!important}
body.tl .mn-hero{min-height:clamp(560px,calc(100vh - 124px),900px);background:var(--surface);border-radius:var(--r);grid-template-columns:1.05fr 1fr}
body.tl .mn-hero-left{justify-content:center;padding:clamp(24px,3.4vw,48px)}
body.tl .mn-hero-label{margin-bottom:18px}
body.tl .mn-hero-name{font-size:clamp(44px,5.4vw,84px)!important;font-weight:400;letter-spacing:-.03em;line-height:.98}
body.tl .mn-hero-subheading{font-weight:300;max-width:34ch;font-size:clamp(17px,1.4vw,21px);line-height:1.45;margin-top:20px}
body.tl .mn-hero-rule{margin:22px 0}
body.tl .mn-hero-body{color:var(--taupe);font-weight:400;max-width:44ch;line-height:1.6}
body.tl .mn-rewrite-line{margin-top:20px}
body.tl .mn-hero-right{height:auto;min-height:420px}
body.tl .mn-hero-right picture{position:absolute;inset:0;height:100%}
body.tl .mn-hero-right img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:35% 20%}
body.tl .mn-hero-fade-left{background:linear-gradient(to right,var(--surface) 0%,transparent 100%)}
body.tl .mn-hero-fade-bottom{background:linear-gradient(to top,var(--surface) 0%,transparent 100%)}
body.tl .mn-hero-right::before,body.tl .mn-hero-right::after{content:"";position:absolute;z-index:1;pointer-events:none}
body.tl .mn-hero-right::before{top:0;left:0;right:0;height:160px;background:linear-gradient(to bottom,var(--surface) 0%,transparent 100%)}
body.tl .mn-hero-right::after{top:0;right:0;bottom:0;width:38%;background:linear-gradient(to left,var(--surface) 0%,transparent 100%)}
body.tl .mn-hero-ctas{margin-top:28px}
/* the legacy button system sets these with !important, so the tile idiom has to match its weight */
body.tl .mn-hero-ctas .mn-btn-primary,body.tl .mn-hero-ctas .mn-btn-ghost{font:500 13px var(--s)!important;letter-spacing:.04em!important;text-transform:none!important;padding:14px 22px!important;border-radius:10px!important}
body.tl .mn-hero-ctas .mn-btn-ghost{color:var(--bone)!important;border:1px solid var(--rule)!important}
body.tl .mn-hero-ctas .mn-btn-ghost:hover{border-color:var(--gold)!important}
@media (max-width:1100px){body.tl .mn-hero-name{font-size:clamp(44px,6.5vw,72px)!important}}
@media (min-width:769px) and (max-height:760px){
  body.tl .mn-hero-left{padding:22px clamp(22px,3vw,40px)!important}
  body.tl .mn-hero-name{font-size:clamp(40px,4.6vw,60px)!important}
  body.tl .mn-hero-subheading{font-size:17px;margin-top:14px}
  body.tl .mn-hero-rule{margin:16px 0}
  body.tl .mn-hero-body{font-size:14px;line-height:1.55}
  body.tl .mn-rewrite-line{margin-top:14px}
  body.tl .mn-hero-ctas{margin-top:20px}
}
@media (max-width:768px){
  body.tl .mn-hero-right{height:52vh!important;min-height:300px}
  body.tl .mn-hero-right::before,body.tl .mn-hero-right::after{display:none}
  body.tl .mn-hero-fade-left{background:linear-gradient(to top,var(--surface) 0%,transparent 100%)!important}
  body.tl .mn-hero-left{padding:24px 22px 32px!important}
  body.tl .mn-hero-name{font-size:clamp(40px,11vw,56px)!important}
}