/* =====================================================================
   True Essence — type & spacing system (Oct 2026)
   Loaded last on every page (theme, Elementor pages, portfolio, blog).

   Fonts:
     Display  Newsreader — elegant editorial headings, medium weight
     Text     Inter      — clean body text, navigation and labels
     Serif    Newsreader — quotes and true italic accents
     Cinzel stays for the TRUE ESSENCE wordmark (logo) only.

   Every size and space below is a clamp(): it grows smoothly from a 23.4375rem phone
   to a 90rem desktop and stops there, so nothing gets tiny on phones or huge on
   wide monitors. Change a token here and it changes everywhere.
   ===================================================================== */

:root{
	/* ---- Families ---- */
	--font-display:'Newsreader','Iowan Old Style','Apple Garamond',Georgia,'Times New Roman',serif;
	--font-text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
	--font-serif:'Newsreader','Iowan Old Style','Apple Garamond',Georgia,'Times New Roman',serif;

	/* Old variables now point at the new families (theme, portfolio and blog all read these) */
	--serif:var(--font-display);
	--sans:var(--font-text);
	--e-global-typography-primary-font-family:'Newsreader';
	--e-global-typography-secondary-font-family:'Newsreader';
	--e-global-typography-tedisplay-font-family:'Newsreader';
	--e-global-typography-text-font-family:'Inter';
	--e-global-typography-accent-font-family:'Inter';

	/* ---- Type scale (min @23.4375rem → max @90rem) ---- */
	--fs-2xs:clamp(.6875rem,.669rem + .078vw,.75rem);       /* 11 → 12  labels, captions */
	--fs-xs:clamp(.8125rem,.794rem + .078vw,.875rem);       /* 13 → 14  small print */
	--fs-s:clamp(.9375rem,.919rem + .078vw,1rem);           /* 15 → 16  secondary text */
	--fs-body:clamp(1rem,.978rem + .094vw,1.0625rem);       /* 16 → 17  body */
	--fs-lead:clamp(1.125rem,1.059rem + .282vw,1.3125rem);  /* 18 → 21  intros, article text */
	--fs-h6:clamp(.75rem,.728rem + .094vw,.8125rem);        /* 12 → 13  eyebrow */
	--fs-h5:clamp(1.0625rem,1.019rem + .188vw,1.1875rem);   /* 17 → 19 */
	--fs-h4:clamp(1.1875rem,1.077rem + .469vw,1.5rem);      /* 19 → 24 */
	--fs-h3:clamp(1.375rem,1.155rem + .939vw,2rem);         /* 22 → 32 */
	--fs-h2:clamp(1.75rem,1.31rem + 1.878vw,3rem);          /* 28 → 48 */
	--fs-h1:clamp(2.25rem,1.458rem + 3.38vw,4.5rem);        /* 36 → 72 */
	--fs-display:clamp(2.75rem,1.429rem + 5.634vw,6.5rem);  /* 44 → 104 */

	/* ---- Spacing scale ---- */
	--space-3xs:clamp(.25rem,.228rem + .094vw,.3125rem);    /*  4 → 5 */
	--space-2xs:clamp(.5rem,.456rem + .188vw,.625rem);      /*  8 → 10 */
	--space-xs:clamp(.75rem,.662rem + .376vw,1rem);         /* 12 → 16 */
	--space-s:clamp(1rem,.912rem + .376vw,1.25rem);         /* 16 → 20 */
	--space-m:clamp(1.5rem,1.324rem + .751vw,2rem);         /* 24 → 32 */
	--space-l:clamp(2rem,1.648rem + 1.502vw,3rem);          /* 32 → 48 */
	--space-xl:clamp(3rem,2.472rem + 2.254vw,4.5rem);       /* 48 → 72 */
	--space-2xl:clamp(4rem,3.12rem + 3.756vw,6.5rem);       /* 64 → 104 */
	--space-3xl:clamp(5.5rem,4.268rem + 5.258vw,9rem);      /* 88 → 144 */
	--section:clamp(4rem,2.944rem + 4.507vw,7rem);          /* vertical section padding 64 → 112 */
	--gutter:clamp(1rem,.736rem + 1.127vw,1.75rem);         /* page side padding 16 → 28 */

	/* The layout grid's base unit: still scales with the screen, but capped both ways */
	--px:clamp(.0525rem,calc(100vw / 1600),.071875rem);
	--sec:var(--section);
	--off:var(--gutter);          /* side margin of every .wrap section */
	--gap:clamp(.75rem,.574rem + .751vw,1.25rem);   /* grid column gap 12 → 20 */
}
@media (max-width:61.9375em){
	:root{--px:clamp(.05rem,calc(100vw / 448),.08125rem);--sec:var(--section);--off:var(--gutter);--gap:clamp(.75rem,.574rem + .751vw,1.25rem)}
}

/* Portfolio and blog read their own variables */
.pf-page,.pf-project{--pf-serif:var(--font-display);--pf-sans:var(--font-text)}
.tj,.tj-story{--tj-serif:var(--font-display);--tj-sans:var(--font-text)}

/* ---- Base ---- */
body{font-family:var(--font-text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:where(h1,h2,h3,h4,h5,h6){font-family:var(--font-display);font-weight:500;text-wrap:balance}
:where(h1){font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em}
:where(h2){font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em}
:where(h3){font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em}
:where(h4){font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.015em}
:where(h5){font-size:var(--fs-h5);line-height:1.35;letter-spacing:-.01em}
:where(h6){font-family:var(--font-text);font-size:var(--fs-h6);line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
:where(p,li,dd,figcaption){text-wrap:pretty}
:where(small){font-size:var(--fs-xs)}

/* ---- Portfolio & Journal rules that set type with the font: shorthand, mapped to the scale ---- */
.pf-hero__row h1{font-size:var(--fs-display);line-height:1;letter-spacing:-.035em;font-weight:500}
.pf-label{font-size:var(--fs-s);line-height:1.55;letter-spacing:-.006em}
.pf-crumb,.pf-paths,.pf-card__film,.pf-scroll,.pc-scene__next,.pc-link,.pf-photo-panel__view,.tj-label,.tj-preview-note,.tj-chip,.tj-sort select,.tj-sort-submit,.tj-card__number small,.tj-card__category,.tj-card__bottom > span:first-child,.tj-cta-link,.tj-reader-footer{font-size:var(--fs-2xs);line-height:1.4}
.pf-filters button,.pf-status,.pf-project__top > a,.pf-tabs button,.pf-panel dl,.pf-watch,.pf-next > a:first-child,.pf-next__project > span:last-of-type,.pc-lightbox__bar,.pc-cta__back,.tj-card__copy > p,.tj-toc a{font-size:var(--fs-xs);line-height:1.5}
.pf-card p,.pf-gallery-head p{font-size:var(--fs-s);line-height:1.55;letter-spacing:-.006em}
.pf-card h2,.pf-panel > p,.pf-service-copy p,.pc-page p,.tj-sub,.tj-deck,.tj-related a{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.012em}
.pf-lead,.pf-project__top p,.tj-prose .tj-lead{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.tj-kicker,.tj-empty,.tj-card__number{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.015em;font-weight:500}
.pf-doors h2,.pf-panel h2,.pf-service-copy h2,.pc-page h3,.tj-card h2,.tj-story-cta h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;font-weight:500}
.pf-book{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;font-weight:500}
.pf-gallery-head h2,.pc-page h2,.pf-photo-panel h2,.tj-cover__caption h2,.tj-article-head h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.pc-statement p{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.03em;font-weight:500}
.pf-next__project h2,.pc-hero h1,.pf-gateway h2,.tj-title{font-size:var(--fs-display);line-height:1;letter-spacing:-.035em;font-weight:500}
.tj-related h2{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.tj-prose blockquote{font-size:var(--fs-h3);line-height:1.3}
.tj-prose,.tj-prose p,.tj-prose li{line-height:1.65}

/* ---- Theme type classes (also driven by Elementor → Site Settings → Global Fonts) ---- */
.a2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-display);line-height:1;letter-spacing:-.035em}
.h1{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em}
.h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em}
.p1{font-family:var(--font-text);font-weight:400;font-size:var(--fs-body);line-height:1.6;letter-spacing:-.011em}
.l1{font-family:var(--font-text);font-weight:600;font-size:var(--fs-2xs);line-height:1.45;letter-spacing:.08em}
@media (max-width:61.9375em){.a2{font-size:var(--fs-display)}.h1{font-size:var(--fs-h1)}.h2{font-size:var(--fs-h2)}}
.mnu .mnu__big{font-family:var(--font-display);font-weight:500;font-size:var(--fs-display);letter-spacing:-.035em}

/* ---- Serif accent: quotes & testimonials ---- */
blockquote,.quote blockquote,.pquote blockquote,.tj-prose blockquote,.rvw__pull,.rvw__body--q{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;font-optical-sizing:auto}
/* Use the loaded true italic for editorial accents. */
:is(h1,h2,h3,h4,.a2,.h1,.h2,.tj-title,.pc-statement p) :is(em,i),.tj-kicker,.pc-statement p,.tj-prose blockquote{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
/* Keep navigation upright while hovering. */
.mnu .mnu__nav .mnu__link:hover .mnu__t,.mnu__slink:hover{font-style:normal}
.rvw__pull{font-size:var(--fs-h3);line-height:1.22}
.rvw__body--q{font-size:var(--fs-h4);line-height:1.3}
.quote blockquote,.pquote blockquote{font-size:var(--fs-h2);line-height:1.15}
@media (max-width:61.9375em){.rvw__pull{font-size:var(--fs-h3)}.rvw__body--q{font-size:var(--fs-h4)}.rvw__body{font-size:var(--fs-s)}}

/* ---- Components (generated from every stylesheet, mapped to the scale) ---- */
.phero__side .p1{font-size:var(--fs-body);line-height:1.6;letter-spacing:-.011em}
.ftr__nav a{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.mnu .mnu__link{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.015em;font-weight:500}
.mnu .mnu__n{font-size:var(--fs-2xs);line-height:1.4}
.mnu__foot .p1{font-size:var(--fs-xs);line-height:1.5}
.svc2__txt h3{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;font-weight:500}
.hfeat__t{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.012em}
.talk__big{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.split__txt .h2{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.mnu__slink{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.015em;font-weight:500}
.mnu__sub--3 .mnu__slink{font-size:var(--fs-2xs);line-height:1.4}
.tcard__t{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.tfaq__q{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.015em;font-weight:500}
.tprice__p{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.tfacts__v--xl{font-size:var(--fs-display);line-height:1;letter-spacing:-.035em;font-weight:500}
.tfacts__v--md{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.tcontact__big{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.mnu .mnu__nav .mnu__t{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.mnu .mnu__work .mnu__t{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.012em}

/* Portfolio */
.pf-filters sup,.pf-crumb,.pf-project__top > a,.pf-paths,.pf-card p,.pf-photo-panel__view,.pf-photo-panel__caption .pf-label,.pc-scene__eyebrow,.pc-lightbox__bar{font-size:var(--fs-2xs);line-height:1.4}
.pf-filters button{font-size:var(--fs-xs)}
.pf-hero__row h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.pf-project__top p,.pf-panel > p{font-size:var(--fs-body);line-height:1.6;letter-spacing:-.011em}
.pf-panel h2,.pf-book,.pc-gallery__head h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;font-weight:500}
.pc-hero h1,.pc-scene__title,.pc-cta h2,.pf-gateway h2{font-size:var(--fs-display);line-height:1;letter-spacing:-.035em;font-weight:500}
.pc-scene__copy p,.pc-planning__grid p{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.012em}
.pc-hero__bottom > p{font-size:var(--fs-s);line-height:1.55}
@media (max-width:43.75em){.pf-card h2{font-size:var(--fs-s);line-height:1.4}.pc-scene__copy p{font-size:var(--fs-s);line-height:1.55}}

/* Blog (Journal) */
.tj-title{font-size:var(--fs-display);line-height:1;letter-spacing:-.035em;font-weight:500}
.tj-cover__caption h2{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.03em;font-weight:500;overflow-wrap:anywhere}
.tj-article-head h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.tj-card--featured h2,.tj-story-cta h2,.tj-prose h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;font-weight:500}
.tj-grid.is-list .tj-card h2,.tj-prose h3{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.tj-prose h4{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.015em;font-weight:500}
.tj-prose{font-size:var(--fs-lead);line-height:1.65;letter-spacing:-.011em}
.tj-sub,.tj-card--featured .tj-card__copy > p{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.012em}
.tj-grid.is-list .tj-card__copy > p,.tj-pagination,.tj-prose pre,.tj-prose table{font-size:var(--fs-xs);line-height:1.5}
.tj-grid.is-list .tj-card__number{font-size:var(--fs-lead)}
.tj-toc a span,.tj-prose figcaption,.tj-author p,.tj-reader-footer span,.tj-hero__top .tj-label,.tj-chip,.tj-grid.is-list .tj-card__category,.tj-end .tj-label,.tj-story-cta .tj-label{font-size:var(--fs-2xs);line-height:1.45}
@media (max-width:61.9375em){
	.tj-title{font-size:var(--fs-display)}
	.tj-article-head h1,.tj-cover__caption h2{font-size:var(--fs-h1)}
	.tj-card--featured h2,.tj-story-cta h2,.tj-prose h2{font-size:var(--fs-h2)}
	.tj-card h2{font-size:var(--fs-h2)}
	.tj-grid.is-list .tj-card h2,.tj-prose h3{font-size:var(--fs-h3)}
	.tj-prose{font-size:var(--fs-lead)}
	.tj-sub,.tj-kicker{font-size:var(--fs-body)}
}
@media (max-width:37.5em){
	.tj-title{font-size:var(--fs-display)}
	.tj-article-head h1,.tj-card--featured h2,.tj-cover__caption h2{font-size:var(--fs-h1)}
	.tj-card h2,.tj-grid.is-list .tj-card h2{font-size:var(--fs-h3)}
	.tj-prose{font-size:var(--fs-body);line-height:1.65}
	.tj-prose h2,.tj-story-cta h2{font-size:var(--fs-h2)}
	.tj-sub,.tj-kicker{font-size:var(--fs-body)}
	.tj-hero__top .tj-label,.tj-chip,.tj-grid.is-list .tj-card__category,.tj-end .tj-label,.tj-story-cta .tj-label{font-size:var(--fs-2xs)}
}

/* ---- Spacing: large fixed gaps now shrink smoothly on smaller screens ---- */
.pf-paths,.pc-statement p,.tj-back,.tj-story-cta h2{margin-bottom:var(--space-l)}
.pf-lead{margin-bottom:var(--space-l)}
.pc-cta__back,.tj-reader-footer{margin-top:var(--space-l)}
.pf-grid{row-gap:var(--space-l)}
.pf-doors,.pf-tabs{margin-bottom:var(--space-xl)}
.pf-film{margin-bottom:var(--space-2xl)}
.pf-gallery-head{margin-top:var(--space-2xl);margin-bottom:var(--space-xl)}
.pf-book{margin-top:var(--space-xl)}
.pf-next{padding-top:var(--section);padding-bottom:var(--section)}
.pf-next__project{padding-top:var(--space-xl)}
.pc-lightbox__track > figure{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}
.pc-planning > h2{margin-bottom:var(--space-xl)}
.pc-gallery{padding-top:var(--space-xl);padding-bottom:var(--section)}
.pc-gallery__head{margin-bottom:var(--space-l)}
.pc-gallery__track > figure:nth-child(3n+2){margin-top:var(--space-xl)}
.tj-empty{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}
.tj-pagination{margin-top:var(--space-l);margin-bottom:var(--space-l)}
.tj-end{padding-top:var(--space-xl)}
.tj-story-cta{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}

/* ---- Editorial weight hierarchy: variable fonts, no extra font downloads ---- */
:root{
 --weight-body:400;--weight-heading:500;--weight-subheading:450;
 --weight-label:600;--weight-emphasis:600;
 --e-global-typography-primary-font-weight:500;
 --e-global-typography-secondary-font-weight:500;
 --e-global-typography-tedisplay-font-weight:500;
 --e-global-typography-text-font-weight:400;
 --e-global-typography-accent-font-weight:600;
}
body{font-weight:var(--weight-body)}
/* Heading roles take precedence over an older component's font shorthand. */
:is(main,.ftr) :is(h1,h2){font-weight:var(--weight-heading)}
:is(main,.ftr) :is(h3,h4,h5){font-weight:var(--weight-subheading)}
:is(main,.ftr) h6{font-family:var(--font-text);font-weight:var(--weight-label)}
/* Display-style project titles retain the same presence as other large titles. */
:is(main,.ftr) :is(h3,h4,h5):is(.a2,.h1,.pcard__title){font-weight:var(--weight-heading)}
:is(main,.ftr) :is(p,li,dd,figcaption){font-weight:var(--weight-body)}
:is(main,.ftr) :is(p,li,dd) :is(strong,b),
.tj-prose :is(strong,b){font-weight:var(--weight-emphasis)}
/* Deliberate editorial exceptions; keep the genuine italic face light. */
:is(main,.ftr) :is(.pf-lead,.pf-project__top p,.tj-prose .tj-lead){font-weight:450}
:is(main,.ftr) :is(blockquote,.pc-statement p),
:is(h1,h2,h3,h4,h5,.a2,.h1,.h2,.tj-title) :is(em,i),
.rvw__pull,.rvw__body--q{font-weight:400}
.l1,.btn__label,.hdr__txt,.pc-scene__eyebrow,.pc-scene__next,
.pc-link,.pf-crumb,.pf-paths,.pf-scroll,.pf-photo-panel__view,
.pf-filters button,.pf-tabs button,.tj-label,.tj-chip,.tj-card__category,
.tj-cta-link,.tj-toc a,.pc-lightbox__bar,.rvw__name{font-weight:var(--weight-label)}
/* Serif navigation stays elegant; small secondary links have a quieter weight. */
.mnu .mnu__nav .mnu__t,.mnu .mnu__big{font-weight:500}
.mnu__slink,.ftr__nav a{font-weight:450}
.mnu__sub--3 .mnu__slink{font-weight:500}