/*
 * Look 2: the site's look (old look for comparison with ?look=1).
 * Built from the logo: Termina (Adobe Fonts kit chj0sws; Archivo Expanded is
 * the fallback while it loads), regular words with bold emphasis like
 * "eclipse" and "360", degree markers instead of labels, a cooler palette.
 */

@font-face {
	font-family: "E360 Wide";
	src: url("../fonts/archivo-wide.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "E360 Sans";
	src: url("../fonts/archivo.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:is(body.look-2, .editor-styles-wrapper) {
	--wp--preset--color--ink: #0d0d0d;
	--wp--preset--color--ink-2: #161616;
	--wp--preset--color--paper: #f3f3f1;
	--wp--preset--color--paper-2: #e6e6e2;
	--wp--preset--color--mute-dark: #a2a2a0;
	--wp--preset--color--mute-light: #55555a;
	--wp--preset--font-family--serif: "termina", "E360 Wide", "Helvetica Neue", Arial, sans-serif;
	--wp--preset--font-family--sans: "E360 Sans", "Helvetica Neue", Arial, sans-serif;
	--e360-ink: #0d0d0d;
	--e360-ink-2: #161616;
	--e360-paper: #f3f3f1;
	--e360-paper-2: #e6e6e2;
	--e360-mute-d: #a2a2a0;
	--e360-mute-l: #55555a;
	--e360-line-d: rgba(255, 255, 255, .13);
	--e360-line-l: rgba(13, 13, 13, .13);
	--e360-serif: "termina", "E360 Wide", "Helvetica Neue", Arial, sans-serif;
	--e360-sans: "E360 Sans", "Helvetica Neue", Arial, sans-serif;

	font-family: var(--e360-sans);
	background: var(--e360-ink);
}

/* No italics anywhere in the design: the wide face has none, and the slanted
   serif accent was the giveaway. Emphasis is weight, like the logo. */
:is(body.look-2, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6, blockquote, figcaption, [class*="e360"], [class*="e360"] *) {
	font-style: normal !important;
}

/* Headlines: light if the kit has Termina Light, otherwise Regular; wide, tight.
   Emphasised words go bold, the way "360"
   sits next to "eclipse" in the logo. Same colour, no rust. */
:is(body.look-2, .editor-styles-wrapper) :is(h1, h2, h3) {
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.08;
}

:is(body.look-2, .editor-styles-wrapper) :is(h1, h2, h3) em,
:is(body.look-2, .editor-styles-wrapper) :is(h1, h2, h3) .line + .line {
	font-weight: 700;
	color: inherit;
	letter-spacing: -.03em;
}

/* Degree markers replace the small capitals labels. header.js numbers them
   around the circle in page order: 000°, 040°, 080° ... */
:is(body.look-2, .editor-styles-wrapper) .e360-eyebrow {
	gap: 14px;
	font-family: var(--e360-sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--e360-mute-d);
}

:is(body.look-2, .editor-styles-wrapper) .e360-section.is-paper .e360-eyebrow,
:is(body.look-2, .editor-styles-wrapper) .has-paper-background-color .e360-eyebrow { color: var(--e360-mute-l); }

:is(body.look-2, .editor-styles-wrapper) .e360-eyebrow::before {
	content: attr(data-deg);
	width: auto;
	height: auto;
	padding-right: 38px;
	border: 0;
	border-radius: 0;
	font-family: var(--e360-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--e360-rust);
	font-variant-numeric: tabular-nums;
	background: linear-gradient(currentColor, currentColor) right 50% / 24px 1px no-repeat;
}

:is(body.look-2, .editor-styles-wrapper) .e360-eyebrow:not([data-deg])::before { content: "°"; padding-right: 0; background: none; }

/* Any other rust emphasis inside headings and big statements: heavy instead. */
:is(body.look-2, .editor-styles-wrapper) .e360-work__end em,
:is(body.look-2, .editor-styles-wrapper) .e360-moment em,
:is(body.look-2, .editor-styles-wrapper) .e360-cta em {
	font-weight: 700;
	color: inherit;
}

/* Small capitals labels elsewhere: calmer spacing so they read as UI, not decoration. */
:is(body.look-2, .editor-styles-wrapper) [class*="e360"] :is(.c, .k, .tags, .role, .cap):not(.e360-eyebrow) { letter-spacing: .08em; }

/* ---------- Type scale for Termina ----------
   Termina is about 1.6x wider than Cormorant at the same size, so every serif
   size from Look 1 comes down to roughly 60%. Headlines stay the biggest thing
   on the screen without shouting; long quotes and statements step down further
   so they read as sentences, not posters. */
:is(body.look-2, .editor-styles-wrapper) {
	--wp--preset--font-size--display: clamp(34px, min(4.3vw, 7.4vh), 68px);
	--wp--preset--font-size--h-2: clamp(28px, 3.3vw, 52px);
	--wp--preset--font-size--h-3: clamp(19px, 1.7vw, 26px);
}

:is(body.look-2, .editor-styles-wrapper) .e360-pagehero__title { font-size: clamp(34px, 4.6vw, 72px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-cta__title { font-size: clamp(30px, 4.6vw, 72px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-contact__title { font-size: clamp(30px, 3.8vw, 60px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-moment__title { font-size: clamp(30px, 4.4vw, 72px) !important; line-height: 1.08 !important; max-width: 19ch; }
:is(body.look-2, .editor-styles-wrapper) .e360-moment__line { font-size: clamp(16px, 1.3vw, 19px) !important; }

/* Quotes are sentences: set them like a lead paragraph, not a headline. */
:is(body.look-2, .editor-styles-wrapper) .e360-quote blockquote { font-size: clamp(19px, 1.75vw, 28px) !important; line-height: 1.38 !important; max-width: 38ch; letter-spacing: -.01em; }
:is(body.look-2, .editor-styles-wrapper) .e360-split__quote { font-size: clamp(16px, 1.3vw, 20px) !important; line-height: 1.4 !important; }

:is(body.look-2, .editor-styles-wrapper) .e360-hero__caption .v { font-size: 14px !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-hero__bigcap .v { font-size: clamp(22px, 2.8vw, 42px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-hero__stats .n { font-size: clamp(28px, 2.6vw, 40px) !important; }

:is(body.look-2, .editor-styles-wrapper) .e360-work__end p { font-size: clamp(18px, 1.6vw, 24px) !important; line-height: 1.25 !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-project__loc { font-size: 14px !important; }

:is(body.look-2, .editor-styles-wrapper) .e360-stage__name { font-size: clamp(24px, 2.4vw, 36px) !important; }
/* Dial: the big number shrinks so it clears the 72° and 288° marks. */
:is(body.look-2, .editor-styles-wrapper) .e360-process__centre .num { font-size: 13cqi !important; letter-spacing: -.02em; }
:is(body.look-2, .editor-styles-wrapper) .e360-process__hud .name { font-size: 16px !important; }

:is(body.look-2, .editor-styles-wrapper) .e360-split__num { font-size: 40px !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-split__badge .n { font-size: clamp(30px, 3vw, 48px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-split__stat .n { font-size: clamp(40px, 4.4vw, 72px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-casecard__title { font-size: clamp(18px, 1.5vw, 22px) !important; }

:is(body.look-2, .editor-styles-wrapper) .e360-stats__list .n { font-size: clamp(28px, 2.8vw, 44px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-steps__n { font-size: 28px !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-steps__title { font-size: clamp(17px, 1.4vw, 21px) !important; }

:is(body.look-2, .editor-styles-wrapper) .e360-team__featured h3 { font-size: clamp(22px, 2vw, 30px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-person__initials { font-size: clamp(22px, 2vw, 32px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-person__name { font-size: 17px !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-person__nick { font-size: 13px !important; }

:is(body.look-2, .editor-styles-wrapper) .e360-net__label .n { font-size: clamp(14px, 1.1vw, 17px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-cover__title { font-size: clamp(20px, 1.8vw, 28px) !important; line-height: 1.12 !important; }
:is(body.look-2, .editor-styles-wrapper) :is(.e360-postcard__title, .e360-pcard__title) { font-size: clamp(17px, 1.4vw, 21px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-mpanel__name { font-size: clamp(19px, 1.6vw, 24px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-contact__next .n { font-size: 20px !important; }

:is(body.look-2, .editor-styles-wrapper) .e360-menu__links .t { font-size: clamp(24px, 6.4vw, 32px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-menu__where .k { font-size: clamp(24px, 7vw, 32px) !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-menu__tagline { font-size: 15px !important; }

:is(body.look-2, .editor-styles-wrapper) .site-footer__tagline { font-size: 17px !important; }
:is(body.look-2, .editor-styles-wrapper) .e360-project-single__loc { font-size: 17px !important; }
:is(body.look-2, .editor-styles-wrapper) .gform_wrapper.gform-theme .gform_title { font-size: 22px !important; }
:is(body.look-2, .editor-styles-wrapper) .gform_wrapper.gform-theme legend.gfield_label { font-size: 18px !important; }
:is(body.look-2, .editor-styles-wrapper) .gform_confirmation_message { font-size: 20px !important; }

/* Small spaced capitals inside the dial and stage labels: calmer tracking. */
:is(body.look-2, .editor-styles-wrapper) .e360-process [class*="label"],
:is(body.look-2, .editor-styles-wrapper) .e360-stage__no,
:is(body.look-2, .editor-styles-wrapper) .e360-stage .e360-eyebrow { letter-spacing: .06em; }

/* Phones: the longest single words ("conversation.", "understanding") must fit. */
@media (max-width: 600px) {
	:is(body.look-2, .editor-styles-wrapper) :is(.e360-cta__title, .e360-contact__title, .e360-h2, .e360-pagehero__title) {
		font-size: min(36px, calc((100vw - 2 * var(--e360-gutter)) / 9.6)) !important;
	}
}

/* Network picture on phones: Termina names need more room on the right. */
@media (max-width: 900px) {
	:is(body.look-2, .editor-styles-wrapper) .e360-net { width: min(62%, 320px); }
}

/* Small labels: sentence case instead of spaced capitals (another tell).
   Capitals stay only on buttons and controls: filters, chips, the menu
   button, the dial's stage names. */
:is(body.look-2, .editor-styles-wrapper) :is(
	.e360-hero__caption .k, .e360-hero__bigcap .k, .e360-menu__where .l,
	.e360-net__label .c, .e360-cover__kicker, .e360-cover__cta, .e360-postcard__date,
	.e360-process__centre .cap, .e360-pcard__loc, .e360-pcard__tags, .e360-split__items h3,
	.e360-casecard__label, .e360-steps__sub, .e360-team__hint, .e360-person__role,
	.e360-quote b, .e360-project__tags, .e360-pin__label, .e360-mpanel__region,
	.e360-mpanel__tags li, .site-footer h3, .e360-project-single__tags,
	.e360-stage .e360-eyebrow, .e360-stage__no
) {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

:is(body.look-2, .editor-styles-wrapper) :is(.e360-quote b, .site-footer h3, .e360-split__items h3) {
	font-size: 14px !important;
	font-weight: 600;
}