/*
Theme Name:   Jannah Child — Trevalix (Lookbook Index)
Template:     jannah
Description:  Fashion index redesign for trevalix.com: Archivo (wide) + Newsreader for articles + Martian Mono labels, cool paper / cobalt / butter. All visual changes live here; the parent Jannah theme stays untouched. Ad containers (Ezoic placeholders, AdSense, Flat PM, MGID, idealmedia) are never styled or hidden by this stylesheet.
Version:      1.0.0
Text Domain:  jannah-child
*/

/* ===================== Fonts (self-hosted, latin subsets, trimmed axes) ===================== */
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin.woff2) format("woff2");font-weight:400 800;font-stretch:100% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(fonts/martian-mono-latin.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-text-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-text-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader Display";src:url(fonts/newsreader-display-latin.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
/* metric-matched fallbacks: the swap does not move the layout */
@font-face{font-family:"Archivo-fb";src:local("Arial");size-adjust:104%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Newsreader-fb";src:local("Georgia"),local("Times New Roman");size-adjust:94%;ascent-override:96%;descent-override:26%;line-gap-override:0%}

/* ===================== Tokens ===================== */
:root{
  --trx-paper:#F2F3F5; --trx-card:#FFFFFF; --trx-ink:#0D0E12; --trx-ink2:#464A53; --trx-mute:#6F747E; --trx-line:#D8DBE1; --trx-line2:#E8EAEE;
  --trx-cobalt:#2337E6; --trx-cobalt-deep:#141C86; --trx-cobalt-soft:#E6E9FD; --trx-butter:#F4E27A;
  --trx-sans:"Archivo","Archivo-fb",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --trx-serif:"Newsreader","Newsreader-fb",Georgia,serif;
  --trx-dserif:"Newsreader Display","Newsreader","Newsreader-fb",Georgia,serif;
  --trx-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --trx-wrap:1240px; --trx-gut:32px;
}
@media(max-width:860px){:root{--trx-gut:16px}}

/* ===================== Base + Jannah resets ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.trx-lock{overflow:hidden}
body.trx{background:var(--trx-paper)!important;background-image:none!important;color:var(--trx-ink);font:400 17px/1.6 var(--trx-sans);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.trx .background-overlay,body.trx #tie-container,body.trx #tie-wrapper{background:transparent!important}
body.trx #tie-wrapper{overflow:visible}
body.trx #tie-container{overflow:clip}
body.trx.boxed-layout #tie-wrapper,body.trx.framed-layout #tie-wrapper{max-width:none!important;width:auto!important;margin:0!important;box-shadow:none!important;border:0!important}
body.trx,body.trx button,body.trx input,body.trx select,body.trx textarea{font-family:var(--trx-sans)}
body.trx h1,body.trx h2,body.trx h3,body.trx h4,body.trx h5,body.trx h6,body.trx .the-global-title,body.trx .post-title{font-family:var(--trx-sans);color:var(--trx-ink);letter-spacing:-.01em}
body.trx a{color:inherit}
body.trx a:hover{color:var(--trx-cobalt)}
.trx img{max-width:100%;height:auto}
.trx-wrap{max-width:var(--trx-wrap);margin:0 auto;padding:0 var(--trx-gut);box-sizing:border-box}
.trx-wrap *,.trx-hdr *,.trx-topline *,.trx-drawer *,.trx-ftr *,#trx-home *,#trx-archive *,#trx-about *{box-sizing:border-box}
body.trx-full #content.site-content{max-width:none;width:auto;padding:0;margin:0}
body.trx-full #main-content-row{display:block;margin:0}
body.trx .container-wrapper{background:transparent;border:0;box-shadow:none}
body.trx .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
/* Jannah's own header/footer are replaced by the child templates; hide its leftovers if any setting re-enables them */
body.trx #theme-header,body.trx #footer-widgets-container,body.trx .site-info{display:none!important}

/* small type + buttons */
.trx-mono{font-family:var(--trx-mono);font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}
.trx-c{color:var(--trx-cobalt)}
.trx-butter{color:var(--trx-butter)}
.trx-count{font-family:var(--trx-mono);font-size:10px;color:var(--trx-mute);letter-spacing:.04em;text-transform:none}
.trx-wide{font-family:var(--trx-sans)!important;font-stretch:125%;font-weight:800!important;text-transform:uppercase;letter-spacing:-.015em!important;line-height:.92!important}
.trx-mark{background:linear-gradient(transparent 58%,var(--trx-butter) 58% 92%,transparent 92%)}
.trx-btns{display:flex;flex-wrap:wrap;gap:10px}
.trx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;font:700 12px/1 var(--trx-sans)!important;font-stretch:112%!important;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--trx-ink);background:var(--trx-ink);color:#fff!important;text-decoration:none!important;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.trx-btn:hover{background:var(--trx-cobalt);border-color:var(--trx-cobalt);color:#fff!important}
.trx-btn svg{width:16px;height:16px}
.trx-btn.ghost{background:transparent;color:var(--trx-ink)!important}
.trx-btn.ghost:hover{background:var(--trx-ink);color:#fff!important}
.trx-btn.ghost.inv{color:#fff!important;border-color:#fff}
.trx-btn.ghost.inv:hover{background:#fff;color:var(--trx-ink)!important}
.trx-btn.white{background:#fff;border-color:#fff;color:var(--trx-ink)!important}
.trx-btn.white:hover{background:var(--trx-butter);border-color:var(--trx-butter);color:var(--trx-ink)!important}
.trx-btn.pin{background:#E60023;border-color:#E60023}
.trx-btn.pin:hover{background:#B8001C;border-color:#B8001C}
.trx-ib{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--trx-line);background:#fff;color:var(--trx-ink)!important}
.trx-ib:hover{border-color:var(--trx-ink)}
.trx-ib svg{width:18px;height:18px}
.trx-all{font-family:var(--trx-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--trx-ink);padding-bottom:3px;white-space:nowrap;text-decoration:none!important}
.trx-all:hover{color:var(--trx-cobalt);border-color:var(--trx-cobalt)}
.trx-crumbs{font-family:var(--trx-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--trx-mute)}
.trx-crumbs a{text-decoration:none}
.trx-crumbs a:hover{color:var(--trx-cobalt)}
/* tailor's tape rule */
.trx-tape{height:14px;border-top:1px solid var(--trx-ink);background:repeating-linear-gradient(90deg,var(--trx-ink) 0 1px,transparent 1px 50px) top/100% 10px no-repeat,repeating-linear-gradient(90deg,var(--trx-ink) 0 1px,transparent 1px 10px) top/100% 5px no-repeat;margin-bottom:28px}

/* ===================== Header ===================== */
.trx-topline{background:var(--trx-ink);color:#C9CCD3}
.trx-topline .trx-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:30px}
.trx-topline .trx-mono{font-size:10px}
.trx-topline a{color:#fff!important;text-decoration:none}
.trx-hdr{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.97);border-bottom:1px solid var(--trx-line)}
body.admin-bar .trx-hdr{top:32px}
.trx-hdr-in{display:flex;align-items:center;gap:28px;height:64px}
.trx-logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none!important;color:var(--trx-ink)!important}
.trx-logo svg{display:block;flex:none}
.trx-wm{font-family:var(--trx-sans);font-stretch:125%;font-weight:800;font-size:22px;letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.trx-nav{display:flex;gap:4px;margin-left:auto}
.trx-nav a{position:relative;display:block;padding:8px 12px;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-stretch:112%;text-decoration:none!important}
.trx-nav a[aria-current]{color:var(--trx-cobalt)}
.trx-nav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--trx-cobalt)}
.trx-has-sub{position:relative}
.trx-has-sub>a span{font-size:9px}
.trx-sub{position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid var(--trx-ink);padding:6px 0;display:none;z-index:5}
.trx-has-sub:hover .trx-sub,.trx-has-sub:focus-within .trx-sub{display:block}
.trx-sub a{display:flex;justify-content:space-between;padding:10px 16px;font-size:12px}
.trx-sub a span{font-family:var(--trx-mono);font-size:10px;color:var(--trx-mute)}
.trx-tools{display:flex;gap:8px;align-items:center}
.trx-burger{display:none!important}
.trx-catbar{display:none}
.trx-search{display:none;border-top:1px solid var(--trx-line);background:#fff;padding:14px 0}
.trx-search.open{display:block}
.trx-sform{position:relative;display:flex;align-items:center}
.trx-sform svg{position:absolute;left:14px;width:18px;height:18px;color:var(--trx-mute)}
.trx-sform input{width:100%;height:48px;padding:0 16px 0 44px;border:1px solid var(--trx-ink);border-radius:0;background:#fff;font:400 16px var(--trx-sans);color:var(--trx-ink)}
.trx-sform input:focus{outline:2px solid var(--trx-cobalt);outline-offset:-2px}
/* drawer */
.trx-drawer{position:fixed;inset:0;z-index:100000;background:#fff;padding:0 var(--trx-gut) 32px;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;visibility:hidden}
.trx-drawer.open{transform:none;visibility:visible}
.trx-drawer-top{display:flex;justify-content:space-between;align-items:center;height:56px;margin-bottom:12px;border-bottom:1px solid var(--trx-line)}
.trx-drawer .trx-index{margin:20px 0 24px}
.trx-drawer .trx-btn{width:100%}
.trx-drawer-legal{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:22px;font-size:13px;color:var(--trx-ink2)}
.trx-drawer-legal a{text-decoration:none}

/* index list (hero + drawer) */
.trx-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--trx-ink)}
.trx-index li{margin:0;padding:0;list-style:none}
.trx-index li a{display:grid;grid-template-columns:44px 1fr auto 24px;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--trx-line);text-decoration:none!important}
.trx-drawer .trx-index li a{grid-template-columns:36px 1fr auto}
.trx-index li a:hover{background:linear-gradient(90deg,var(--trx-cobalt-soft),transparent);color:var(--trx-ink)}
.trx-index .n{font-family:var(--trx-mono);font-size:11px;color:var(--trx-mute)}
.trx-index .t{font-weight:700;font-size:20px;font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.trx-index .arr{display:grid;place-items:center;transition:transform .2s}
.trx-index .arr svg{width:18px;height:18px}
.trx-index a:hover .arr{transform:translateX(4px);color:var(--trx-cobalt)}

/* ===================== Cards ===================== */
.trx-card{position:relative;display:block;text-decoration:none!important;color:var(--trx-ink)!important}
.trx-card .trx-ph{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--trx-line2)}
.trx-card .trx-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.trx-card:hover .trx-ph img{transform:scale(1.035)}
.trx-no{position:absolute;left:0;top:0;background:#fff;padding:6px 8px;font-family:var(--trx-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.trx-meta{display:flex;gap:10px;align-items:center;margin:12px 0 6px}
.trx-cap>h3:first-child{margin-top:12px}
.trx-card h3{margin:0;font-family:var(--trx-sans)!important;font-size:16.5px!important;line-height:1.28!important;font-weight:650!important;font-stretch:100%;letter-spacing:-.005em;text-transform:none}
.trx-card:hover h3 span{background:linear-gradient(transparent 62%,var(--trx-butter) 62%)}
.trx-tag{position:relative;display:inline-flex;align-items:center;height:22px;padding:0 9px 0 18px;border:1px solid var(--trx-ink);font-family:var(--trx-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;background:#fff;line-height:1;color:var(--trx-ink);text-decoration:none!important}
.trx-tag::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border:1px solid currentColor;border-radius:50%}
.trx-tag.c{background:var(--trx-cobalt);border-color:var(--trx-cobalt);color:#fff!important}
.trx-row{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--trx-line2);text-decoration:none!important;color:var(--trx-ink)!important}
.trx-row:last-of-type{border-bottom:0}
.trx-row .trx-ph{display:block;aspect-ratio:2/3;overflow:hidden;background:var(--trx-line2)}
.trx-row .trx-ph img{width:100%;height:100%;object-fit:cover}
.trx-row b{display:block;margin-top:3px;font-size:14.5px;line-height:1.3;font-weight:650}
.trx-row:hover b{color:var(--trx-cobalt)}

/* ===================== Home ===================== */
.trx-hero{background:#fff;border-bottom:1px solid var(--trx-line)}
.trx-hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;padding-top:56px;padding-bottom:56px}
.trx-hero h1{margin:18px 0 22px;font-size:clamp(46px,6.4vw,92px)!important}
.trx-hero h1 em{font-style:normal;color:var(--trx-cobalt)}
.trx-lead{max-width:520px;font-size:18px;line-height:1.55;color:var(--trx-ink2);margin:0 0 30px}
.trx-hero-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.trx-hero-stack .trx-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end}
.trx-hero-stack .trx-card:first-child h3{font-size:24px!important;font-stretch:108%;font-weight:700!important;line-height:1.15!important}
.trx-hero-stack .trx-card:not(:first-child) .trx-ph{aspect-ratio:4/5}
.trx-hero-stack .trx-card:not(:first-child) h3{font-size:15px!important}
.trx-sec{padding:64px 0 8px}
.trx-sec-h{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;margin-bottom:12px}
.trx-sec-h .trx-mono{display:block;margin-bottom:10px}
.trx-sec-h h2{margin:0;font-size:clamp(34px,4.6vw,62px)!important}
.trx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
.trx-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.trx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.trx-chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--trx-line);background:#fff;font-size:13px;font-weight:600;font-stretch:108%;text-decoration:none!important;color:var(--trx-ink)!important;white-space:nowrap}
.trx-chip:hover{border-color:var(--trx-ink)}
.trx-chip[aria-current]{background:var(--trx-ink);border-color:var(--trx-ink);color:#fff!important}
.trx-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.trx-col{background:#fff;border:1px solid var(--trx-line);padding:20px}
.trx-col-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--trx-ink);padding-bottom:12px;margin-bottom:6px}
.trx-col-h b{font-size:22px;font-stretch:120%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.trx-col .trx-all{display:inline-block;margin-top:14px}
.trx-author-band{margin-top:72px;background:var(--trx-cobalt);color:#fff}
.trx-band-in{display:grid;grid-template-columns:280px 1fr auto;gap:48px;align-items:center;padding-top:48px;padding-bottom:48px}
.trx-author-band .trx-ph{aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(255,255,255,.4)}
.trx-author-band .trx-ph img{width:100%;height:100%;object-fit:cover}
.trx-author-band h2{margin:10px 0 14px;font-size:clamp(30px,3.6vw,48px)!important;color:#fff!important}
.trx-author-band p{margin:0;max-width:560px;color:#DDE1FF;font-size:17px}

/* ===================== Footer ===================== */
.trx-ftr{background:var(--trx-ink)!important;color:#B9BDC6;padding:64px 0 28px;margin:0!important}
.trx-ftr a{color:#B9BDC6;text-decoration:none}
.trx-ftr a:hover{color:var(--trx-butter)}
.trx-ftr-big{display:block;font-family:var(--trx-sans);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(56px,13.4vw,186px);color:#fff!important;margin:0 0 40px;line-height:.8;white-space:nowrap;overflow:hidden}
.trx-ftr-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;border-top:1px solid #2B2E36;padding-top:28px}
.trx-ftr h5{margin:0 0 14px;color:#fff!important;font-family:var(--trx-mono)!important;font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.trx-ftr p{margin:0 0 16px;font-size:14px;max-width:320px}
.trx-ftr ul{list-style:none;margin:0;padding:0}
.trx-ftr li{margin:0 0 8px;font-size:14px;list-style:none}
.trx-ftr-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #2B2E36;margin-top:36px;padding-top:18px;font-size:12px}
body.trx #go-to-top{border-radius:0;background:var(--trx-cobalt)}

/* ===================== Archives ===================== */
.trx-cat-hero{background:#fff;border-bottom:1px solid var(--trx-line)}
.trx-cat-hero .trx-wrap{padding-top:40px;padding-bottom:30px}
.trx-cat-hero h1{margin:16px 0 0;font-size:clamp(52px,10vw,150px)!important;overflow-wrap:anywhere}
.trx-cat-hero h1.small{font-size:clamp(36px,6vw,84px)!important}
.trx-cat-bar{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;margin-top:26px;align-items:start}
.trx-intro{margin:0;font-size:17px;color:var(--trx-ink2);max-width:620px}
.trx-stat{display:flex;gap:28px;border-top:1px solid var(--trx-ink);padding-top:12px}
.trx-stat div{display:flex;flex-direction:column}
.trx-stat b{font-size:30px;font-stretch:120%;font-weight:800;line-height:1.1}
.trx-archive-body{padding-top:28px}
.trx-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:56px 0 0}
.trx-pager .page-numbers{min-width:44px;height:44px;padding:0 12px;display:grid;place-items:center;border:1px solid var(--trx-line);background:#fff;font-family:var(--trx-mono);font-size:12px;text-decoration:none!important;color:var(--trx-ink)!important}
.trx-pager a.page-numbers:hover{border-color:var(--trx-ink)}
.trx-pager .current{background:var(--trx-ink)!important;color:#fff!important;border-color:var(--trx-ink)}
.trx-pager .dots{border:0;background:transparent}
.trx-seo{max-width:820px;margin:72px auto 0;padding:32px 0 0;border-top:1px solid var(--trx-ink);color:var(--trx-ink2);font-size:16px}
.trx-seo h2{font-size:24px!important;font-stretch:115%;font-weight:800!important;text-transform:uppercase;margin:0 0 12px}
.trx-seo p{margin:0 0 14px}
.trx-empty{padding:40px 0;font-size:18px}

/* ===================== Pages, About, author, 404 ===================== */
.trx-page-hero{background:var(--trx-cobalt);color:#fff}
.trx-page-hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;padding-top:56px;align-items:end}
.trx-page-hero .trx-crumbs,.trx-page-hero .trx-crumbs a{color:#AEB6FF}
.trx-page-hero h1{margin:14px 0 20px;font-size:clamp(52px,8vw,118px)!important;color:#fff!important}
.trx-page-hero p{color:#DDE1FF;font-size:19px;max-width:560px;margin:0 0 28px}
.trx-page-hero .trx-btns{margin-bottom:48px}
.trx-page-hero .trx-ph{aspect-ratio:4/5;overflow:hidden;margin-bottom:-60px;border:8px solid #fff;background:#fff;max-width:460px;justify-self:end;width:100%}
.trx-page-hero .trx-ph img{width:100%;height:100%;object-fit:cover}
#trx-archive .trx-page-hero{margin-bottom:60px}
.trx-page-body{max-width:760px;margin:0 auto;padding:96px var(--trx-gut) 72px}
.trx-facts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--trx-ink);margin:0 0 40px;background:#fff}
.trx-facts div{padding:18px;border-right:1px solid var(--trx-ink)}
.trx-facts div:last-child{border-right:0}
.trx-facts b{display:block;font-size:34px;font-stretch:125%;font-weight:800;line-height:1}
.trx-page{max-width:820px;margin:0 auto;padding:44px 0 72px}
.trx-page-head{border-bottom:1px solid var(--trx-ink);padding-bottom:22px;margin-bottom:30px}
.trx-page-head h1{margin:14px 0 12px;font-size:clamp(38px,6vw,72px)!important}
.trx-page-head .trx-mono{color:var(--trx-mute);margin:0}
.trx-page-text,.trx-page-body .entry-content{font-family:var(--trx-serif);font-size:19px;line-height:1.68;color:#1B1D22}
.trx-page-text h2,.trx-page-text h3,.trx-page-body .entry-content h2,.trx-page-body .entry-content h3{font-family:var(--trx-sans)!important;font-stretch:115%;font-weight:800!important;text-transform:uppercase;letter-spacing:-.01em;font-size:24px!important;margin:40px 0 12px;line-height:1.15}
.trx-page-text a,.trx-page-body .entry-content a{text-decoration:underline;text-decoration-color:var(--trx-cobalt);text-underline-offset:3px}
.trx-page-body .entry-content img{display:none}
.trx-404{text-align:center;padding:90px var(--trx-gut) 110px;max-width:760px}
.trx-404 h1{font-size:clamp(56px,10vw,120px)!important;margin:16px 0 18px}
.trx-404 .trx-intro{margin:0 auto 28px}
.trx-404 .trx-chips{justify-content:center;margin-top:24px}

/* ===================== Single post: editorial typography =====================
   Newsreader Display for the H1 and look headings, Newsreader text for reading,
   Archivo + Martian Mono for everything functional. Jannah markup, restyled. */
body.trx.single-post #content.site-content{max-width:1220px;padding-top:30px}
body.trx.single-post .main-content{padding-left:15px;padding-right:15px}
body.trx #the-post.post-content,body.trx #the-post{padding:0;background:transparent;border:0;box-shadow:none}
body.trx #breadcrumb{font-family:var(--trx-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--trx-mute);margin:0 0 18px}
body.trx #breadcrumb a{color:var(--trx-mute);text-decoration:none}
body.trx #breadcrumb .tie-icon-home{display:none}
body.trx #breadcrumb .delimiter{margin:0 6px}
body.trx .entry-header-outer{padding:0;margin:0 0 30px;border:0;border-bottom:1px solid var(--trx-ink);padding-bottom:24px}
body.trx .entry-header{padding:0}
body.trx .post-cat-wrap{margin:0 0 4px}
body.trx .post-cat-wrap .post-cat{position:relative;display:inline-flex;align-items:center;height:22px;padding:0 9px 0 18px;background:var(--trx-cobalt)!important;color:#fff!important;font-family:var(--trx-mono)!important;font-size:9.5px!important;letter-spacing:.06em;text-transform:uppercase;border-radius:0;line-height:1}
body.trx .post-cat-wrap .post-cat::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border:1px solid #fff;border-radius:50%}
body.trx .post-cat-wrap .post-cat:after{display:none}
body.trx.single-post .entry-header .post-title,body.trx #the-post .entry-header .post-title{font-family:var(--trx-dserif)!important;font-weight:500!important;font-size:clamp(38px,5vw,64px)!important;line-height:1.02!important;letter-spacing:-.022em!important;margin:14px 0 0;max-width:900px;text-transform:none;text-wrap:balance}
body.trx .entry-header .entry-sub-title{font-family:var(--trx-serif);font-style:italic;font-size:22px;line-height:1.45;color:var(--trx-ink2);margin:16px 0 0;font-weight:400}
body.trx .trx-dek{font-family:var(--trx-serif);font-style:italic;font-size:22px;line-height:1.45;color:var(--trx-ink2);margin:16px 0 0;max-width:720px}
body.trx .single-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:20px 0 0;padding:0;font-family:var(--trx-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--trx-mute)}
body.trx .single-post-meta .meta-item{margin:0;float:none;color:var(--trx-mute)}
body.trx .single-post-meta .meta-item:before{display:none}
body.trx .single-post-meta .tie-alignright{float:none;display:inline-flex;gap:18px}
body.trx .single-post-meta .meta-author-avatar img{width:36px;height:36px;border-radius:50%;object-fit:cover}
body.trx .single-post-meta .author-name,body.trx .single-post-meta .meta-author a{font-family:var(--trx-sans);font-size:14px;letter-spacing:0;text-transform:none;font-weight:650;color:var(--trx-ink)}
body.trx .single-post-meta .meta-comment,body.trx .single-post-meta .meta-views{display:none}
body.trx .single-featured-image,body.trx .featured-area{display:none}

body.trx.single-post .entry-content{font-family:var(--trx-serif);color:#1B1D22;max-width:680px}
body.trx.single-post .entry-content>p,body.trx.single-post .entry-content>ul,body.trx.single-post .entry-content>ol{font-size:20px;line-height:1.68;margin:0 0 1.1em;hanging-punctuation:first}
body.trx.single-post .entry-content>p:first-of-type::first-letter{float:left;font-family:var(--trx-sans);font-stretch:125%;font-weight:800;font-size:4.3em;line-height:.78;margin:.08em .12em 0 0;color:var(--trx-cobalt)}
body.trx.single-post .entry-content p a,body.trx.single-post .entry-content li a{color:var(--trx-ink);text-decoration:underline;text-decoration-color:var(--trx-cobalt);text-decoration-thickness:1.5px;text-underline-offset:3px}
body.trx.single-post .entry-content p a:hover{background:var(--trx-butter)}
body.trx.single-post .entry-content strong,body.trx.single-post .entry-content b{font-weight:600}
body.trx.single-post .entry-content>h2{font-family:var(--trx-dserif)!important;font-weight:500!important;font-size:34px!important;line-height:1.08!important;letter-spacing:-.018em!important;margin:56px 0 18px;text-transform:none;text-wrap:balance;scroll-margin-top:90px}
body.trx.single-post .entry-content>h2.trx-look-h{margin-top:10px}
body.trx.single-post .entry-content>h3{font-family:var(--trx-sans)!important;font-stretch:112%;font-weight:700!important;font-size:15px!important;letter-spacing:.06em;text-transform:uppercase;margin:32px 0 10px;line-height:1.3}
body.trx.single-post .entry-content>h4{font-family:var(--trx-sans)!important;font-size:14px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;margin:28px 0 10px}
body.trx.single-post .entry-content ul li::marker{color:var(--trx-cobalt)}
body.trx.single-post .entry-content blockquote{margin:32px 0;padding:4px 0 4px 22px;border:0;border-left:3px solid var(--trx-cobalt);background:transparent;font-family:var(--trx-serif);font-style:italic;font-size:24px;line-height:1.45;color:var(--trx-ink)}
body.trx.single-post .entry-content blockquote:before{display:none}
body.trx.single-post .entry-content img{border-radius:0}
body.trx.single-post .entry-content figure,body.trx.single-post .entry-content .wp-caption{max-width:100%!important;margin:0 0 20px}
body.trx.single-post .entry-content .wp-caption-text,body.trx.single-post .entry-content figcaption{font-family:var(--trx-mono);font-size:10px!important;letter-spacing:.03em;color:var(--trx-mute)!important;text-transform:uppercase;text-align:left;margin-top:8px;padding:0}
body.trx.single-post .entry-content .photo-credit{font-size:10px!important;color:var(--trx-mute)!important}
body.trx.single-post .entry-content .photo-credit a{color:var(--trx-mute)}
/* look numbering + index (inc/article.php) */
.trx-look-n{display:flex;justify-content:space-between;margin:56px 0 0;padding-top:14px;border-top:1px solid var(--trx-ink);font-family:var(--trx-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--trx-cobalt)}
.trx-look-n span+span{color:var(--trx-mute)}
.trx-looks{background:#fff;border:1px solid var(--trx-line);padding:18px 20px;margin:30px 0 8px;font-family:var(--trx-sans)}
.trx-looks .trx-mono{display:block;margin-bottom:12px}
.trx-looks ol{list-style:none!important;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 20px;counter-reset:l}
.trx-looks li{counter-increment:l;font-size:14px!important;line-height:1.3!important;padding:7px 0!important;margin:0!important;border-bottom:1px solid var(--trx-line2);list-style:none!important}
.trx-looks li::before{display:none!important}
body.trx .trx-looks li a,body.trx.single-post .entry-content .trx-looks li a{display:grid;grid-template-columns:28px 1fr;gap:6px;text-decoration:none!important;color:var(--trx-ink)!important}
.trx-looks li a::before{content:counter(l,decimal-leading-zero);font-family:var(--trx-mono);font-size:10px;color:var(--trx-mute);padding-top:3px}
body.trx .trx-looks li a:hover,body.trx.single-post .entry-content .trx-looks li a:hover{color:var(--trx-cobalt)!important;background:none!important}
/* author box (tie_author_box override) */
.trx-author{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;margin:56px 0 0;padding:22px!important;background:#fff!important;border:1px solid var(--trx-ink)!important;font-family:var(--trx-sans)}
.trx-author-ph img{width:120px;height:150px;object-fit:cover;display:block}
.trx-author h3{margin:6px 0!important;font-size:22px!important;font-stretch:118%;font-weight:800!important;text-transform:uppercase}
.trx-author h3 a{text-decoration:none;color:var(--trx-ink)}
.trx-author p{margin:0 0 14px;font-size:15px;color:var(--trx-ink2)}
/* related + comments */
body.trx #related-posts .the-global-title,body.trx #comments .the-global-title,body.trx .comment-reply-title{font-family:var(--trx-sans)!important;font-stretch:125%;font-weight:800!important;text-transform:uppercase;font-size:30px!important;border:0}
body.trx #related-posts .the-global-title:after,body.trx .comment-reply-title:after,body.trx #comments .the-global-title:after{display:none}
body.trx #related-posts .post-title{font-size:16px!important;line-height:1.28;font-weight:650}
body.trx #related-posts .post-title a{color:var(--trx-ink);text-decoration:none}
body.trx #related-posts .post-meta{display:none}
body.trx .comment-form input[type=submit],body.trx .comment-form .submit{background:var(--trx-ink);border-radius:0;font:700 12px var(--trx-sans);letter-spacing:.07em;text-transform:uppercase}
body.trx .comment-form input,body.trx .comment-form textarea{border-radius:0}
/* sidebar (desktop only) */
.trx-sidebar{padding-left:30px}
.trx-side-in>*{margin-bottom:28px}
.trx-box{background:#fff;border:1px solid var(--trx-line);padding:18px}
.trx-box>.trx-mono{display:block;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--trx-ink)}
.trx-mini-me{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding-top:8px;text-decoration:none!important;color:var(--trx-ink)!important}
.trx-mini-me img{width:64px;height:64px;object-fit:cover;border-radius:50%}
.trx-mini-me b{display:block;font-size:16px;font-stretch:110%}
.trx-mini-me small{display:block;margin-top:3px;font-size:13px;color:var(--trx-ink2);line-height:1.4}
.trx-widget ul,.trx-widget ol{list-style:none!important;margin:0!important;padding:0!important}
.trx-widget li{list-style:none!important;margin:0!important;padding:8px 0!important;border-bottom:1px solid var(--trx-line2)}
.trx-widget li:before{display:none!important;content:none!important}
@media(max-width:1199px){
  body.trx.single-post .main-content.tie-col-md-8{width:100%;max-width:760px;float:none;margin:0 auto}
  .trx-sidebar{display:none!important}
  body.trx.single-post .main-content{padding-left:var(--trx-gut)!important;padding-right:var(--trx-gut)!important}
  body.trx #the-post .entry-content,body.trx #the-post .entry-header-outer,body.trx #the-post .entry-header{padding-left:0!important;padding-right:0!important;margin-left:0;margin-right:0}
  body.trx.single-post .entry-content{max-width:none}
}

/* Icon fonts: same files as Jannah / ESSB, redeclared with font-display:swap (Lighthouse "Font display"). */
@font-face{font-family:'tiefonticon';src:url("../jannah/assets/fonts/tielabs-fonticon/tielabs-fonticon.woff?ciufdj") format("woff"),url("../jannah/assets/fonts/tielabs-fonticon/tielabs-fonticon.ttf?ciufdj") format("truetype");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:900;font-display:swap;src:url("../jannah/assets/fonts/fontawesome/fa-solid-900.woff2") format("woff2"),url("../jannah/assets/fonts/fontawesome/fa-solid-900.woff") format("woff")}
@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:400;font-display:swap;src:url("../jannah/assets/fonts/fontawesome/fa-regular-400.woff2") format("woff2"),url("../jannah/assets/fonts/fontawesome/fa-regular-400.woff") format("woff")}
@font-face{font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400;font-display:swap;src:url("../jannah/assets/fonts/fontawesome/fa-brands-400.woff2") format("woff2"),url("../jannah/assets/fonts/fontawesome/fa-brands-400.woff") format("woff")}
@font-face{font-family:'essb';src:url("../../plugins/easy-social-share-buttons3/assets/fonts/essb.woff") format("woff"),url("../../plugins/easy-social-share-buttons3/assets/fonts/essb.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap}

/* ===================== Responsive ===================== */
@media(max-width:1080px){
  .trx-grid,.trx-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trx-split{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .trx-topline{display:none}
  body.admin-bar .trx-hdr{top:0}
  .trx-nav,.trx-follow{display:none!important}
  .trx-burger{display:grid!important}
  .trx-hdr-in{height:56px;gap:12px}
  .trx-tools{margin-left:auto}
  .trx-wm{font-size:20px}
  .trx-catbar{display:flex;gap:6px;overflow-x:auto;padding:0 var(--trx-gut) 10px;scrollbar-width:none;background:#fff}
  .trx-catbar::-webkit-scrollbar{display:none}
  .trx-catbar a{flex:none;height:30px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--trx-line);font-size:12px;font-weight:650;font-stretch:110%;text-transform:uppercase;letter-spacing:.04em;text-decoration:none!important;color:var(--trx-ink)!important}
  .trx-catbar a[aria-current]{background:var(--trx-ink);color:#fff!important;border-color:var(--trx-ink)}
  .trx-hero-in{grid-template-columns:1fr;gap:28px;padding-top:28px;padding-bottom:32px}
  .trx-lead{font-size:16.5px}
  .trx-hero-stack .trx-card:first-child{gap:14px}
  .trx-hero-stack .trx-card:first-child h3{font-size:18px!important}
  .trx-grid,.trx-grid.five{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .trx-card h3{font-size:15px!important}
  .trx-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--trx-gut));padding-right:var(--trx-gut)}
  .trx-chips::-webkit-scrollbar{display:none}
  .trx-chip{flex:none}
  .trx-split{grid-template-columns:1fr}
  .trx-sec{padding-top:44px}
  .trx-sec-h{grid-template-columns:1fr}
  .trx-band-in{grid-template-columns:1fr;gap:24px}
  .trx-author-band .trx-ph{max-width:220px}
  .trx-ftr-cols{grid-template-columns:1fr 1fr}
  .trx-cat-bar{grid-template-columns:1fr;gap:20px}
  .trx-page-hero-in{grid-template-columns:1fr;gap:20px;padding-top:32px}
  .trx-page-hero .trx-ph{max-width:300px;margin-bottom:-40px;justify-self:start}
  .trx-page-body{padding-top:70px}
  .trx-facts{grid-template-columns:1fr}
  .trx-facts div{border-right:0;border-bottom:1px solid var(--trx-ink)}
  .trx-facts div:last-child{border-bottom:0}
  body.trx.single-post #content.site-content{padding-top:16px}
  body.trx.single-post .entry-header .post-title,body.trx #the-post .entry-header .post-title{font-size:38px!important}
  body.trx .trx-dek,body.trx .entry-header .entry-sub-title{font-size:19px}
  body.trx.single-post .entry-content>p,body.trx.single-post .entry-content>ul,body.trx.single-post .entry-content>ol{font-size:19px;line-height:1.64}
  body.trx.single-post .entry-content>h2{font-size:27px!important}
  .trx-looks ol{grid-template-columns:1fr 1fr}
  .trx-author{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .trx-author-ph img{width:84px;height:105px}
}

/* Jannah prints its "post links color" option as `#the-post .entry-content a:not(.shortc-button){color:…!important}`:
   outrank it for text links and the look index. In-article blocks (.stl-*, .oc-*) keep their own colors. */
body.trx #the-post .entry-content p a:not(.shortc-button),body.trx #the-post .entry-content li a:not(.shortc-button){color:var(--trx-ink)!important}
body.trx #the-post .entry-content .trx-looks li a:not(.shortc-button){color:var(--trx-ink)!important}
body.trx #the-post .entry-content .trx-looks li a:not(.shortc-button):hover{color:var(--trx-cobalt)!important}

/* Article cover (inc/article.php) */
.trx-cover{margin:0 0 28px;max-width:680px}
.trx-cover img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--trx-line2)}
@media(max-width:1199px){.trx-cover{max-width:none}}

/* Phones: a large image inside the first screen (home lead card under the headline, archive lead card full width) */
@media(max-width:860px){
  .trx-hero-in>div:first-child{display:contents}
  .trx-hero-in>div:first-child>.trx-mono{order:1}
  .trx-hero-in h1{order:2;margin-bottom:6px}
  .trx-hero-stack{order:3}
  .trx-lead{order:4}
  .trx-hero-in .trx-index{order:5}
  .trx-hero-stack .trx-card:first-child{grid-template-columns:1fr;gap:0}
  .trx-hero-stack .trx-card:first-child .trx-ph{aspect-ratio:4/5}
  .trx-archive-body .trx-grid .trx-card:first-child{grid-column:1/-1}
  .trx-archive-body .trx-grid .trx-card:first-child .trx-ph{aspect-ratio:4/5}
  .trx-archive-body .trx-grid .trx-card:first-child h3{font-size:19px!important}
  .trx-cat-hero h1{font-size:clamp(44px,13vw,64px)!important}
  .trx-cat-hero .trx-wrap{padding-top:22px;padding-bottom:20px}
  .trx-cat-bar{margin-top:16px}
  .trx-intro{font-size:15.5px}
}
/* Phones: compact article head so the cover starts inside the first screen */
@media(max-width:860px){
  body.trx #breadcrumb{margin-bottom:8px}
  body.trx .post-cat-wrap{margin:0}
  body.trx.single-post .entry-header .post-title{font-size:32px!important;margin-top:8px}
  body.trx .trx-dek{font-size:17px;line-height:1.4;margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body.trx .single-post-meta{margin-top:12px;gap:4px 12px;font-size:9.5px}
  body.trx .single-post-meta .meta-author-avatar img{width:28px;height:28px}
  body.trx .entry-header-outer{padding-bottom:14px;margin-bottom:16px}
  .trx-cover{margin-bottom:20px}
}

/* Taxonomy v2: mega-menu rows, catbar separator, drawer sections, footer sub-links */
.trx-sub{min-width:250px}
.trx-sub .trx-sub-all{font-weight:800;border-bottom:1px solid var(--trx-line);margin-bottom:4px}
.trx-sub a[aria-current]{color:var(--trx-cobalt)}
.trx-sub a[aria-current]::after{display:none}
.trx-catbar-sep{flex:none;width:1px;background:var(--trx-line);margin:4px 2px}
.trx-catbar a.sub{text-transform:none;letter-spacing:0;font-weight:600}
.trx-dsec{border-bottom:1px solid var(--trx-line)}
.trx-dsec:first-of-type{border-top:1px solid var(--trx-ink);margin-top:18px}
.trx-dsec summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;list-style:none}
.trx-dsec summary::-webkit-details-marker{display:none}
.trx-dsec summary .t{font-weight:800;font-size:22px;font-stretch:120%;text-transform:uppercase}
.trx-dsec a{display:flex;justify-content:space-between;padding:9px 0 9px 14px;font-size:15px;text-decoration:none;border-top:1px solid var(--trx-line2)}
.trx-dsec:last-of-type{margin-bottom:24px}
.trx-ftr li.sub{font-size:13px;margin:0 0 6px 10px}
.trx-ftr li b{color:#fff;font-weight:700}

/* Compact "Jump to a look" index: a single line, opens on tap */
.trx-looks{padding:0;margin:22px 0 4px}
.trx-looks summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;user-select:none}
.trx-looks summary::-webkit-details-marker{display:none}
.trx-looks summary .trx-mono{display:inline;margin:0}
.trx-looks-n{font-family:var(--trx-mono);font-size:10.5px;color:var(--trx-mute);text-transform:uppercase;letter-spacing:.04em}
.trx-looks-ic{margin-left:auto;width:9px;height:9px;border-right:1.5px solid var(--trx-ink);border-bottom:1.5px solid var(--trx-ink);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
.trx-looks[open] .trx-looks-ic{transform:rotate(-135deg);margin-top:4px}
.trx-looks summary:hover .trx-mono{text-decoration:underline}
.trx-looks nav{padding:0 16px 12px;border-top:1px solid var(--trx-line2)}
.trx-looks ol{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important;gap:0 16px!important;margin-top:6px!important}
.trx-looks li{font-size:13px!important;padding:5px 0!important}
@media(max-width:860px){.trx-looks ol{grid-template-columns:1fr!important}}
/* Look label inside the heading (inc/article.php) */
body.trx.single-post .entry-content>h2.trx-look-h{position:relative;margin-top:56px;padding-top:40px;border-top:1px solid var(--trx-ink)}
body.trx.single-post .entry-content>h2.trx-look-h::before,body.trx.single-post .entry-content>h2.trx-look-h::after{position:absolute;top:14px;font-family:var(--trx-mono);font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1}
body.trx.single-post .entry-content>h2.trx-look-h::before{content:attr(data-look);left:0;color:var(--trx-cobalt)}
body.trx.single-post .entry-content>h2.trx-look-h::after{content:attr(data-of);right:0;color:var(--trx-mute)}
