/**
 * THE MATCHA BASE — guide design system.
 *
 * Carries the hero's register into the rest of the site: photography first,
 * large whitespace, very little UI, one accent used sparingly. The page is not
 * uniformly dark — a dark hero opens onto light editorial ground and returns to
 * tonal sections, so the rhythm comes from value rather than decoration.
 *
 * Scoped to .g-* so the leftover blog template styles cannot collide.
 */

:root {
	--g-paper: #f4f1e8;
	--g-paper-2: #ebe7dc;
	--g-card: #fbf9f2;
	--g-dark: #0b0d0a;
	--g-dark-2: #131711;
	--g-ink: #16180f;
	--g-ink-2: #4e5346;
	--g-muted: #8b8f80;
	--g-hair: #ded8c8;
	--g-hair-2: #e9e4d7;
	--g-matcha: #33603c;
	--g-matcha-lt: #7ba36b;
	--g-accent: #a8482a;
	--g-on-dark: #efeade;
	--g-on-dark-2: #aeb3a3;
	--g-e: cubic-bezier(0.22, 0.6, 0.3, 1);
	--g-wide: 1320px;
	--g-pad: 56px;
}

.g-body {
	margin: 0;
	background: var(--g-paper);
	color: var(--g-ink);
	font-family: var(--font-body, Inter, system-ui, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.g-body img { display: block; max-width: 100%; }
/* The base tokens give headings a serif face. The guide is one sans throughout —
   weight, scale and tracking carry the hierarchy, never a second family. */
.g-body :is(h1, h2, h3, h4, h5) { font-family: inherit; font-weight: 400; letter-spacing: inherit; }
.g-body a { color: inherit; }

.g-wrap { max-width: var(--g-wide); margin: 0 auto; padding: 0 var(--g-pad); }
.g-sec { position: relative; padding: 112px 0; }
.g-sec--dark { background: var(--g-dark); color: var(--g-on-dark); }
.g-sec--tonal { background: var(--g-paper-2); }

/* --- type ---------------------------------------------------------------- */
.g-brand {
	margin: 0; font-weight: 400; line-height: 1;
	letter-spacing: 0.38em; text-indent: 0.38em;
}
.g-eyebrow {
	margin: 0; font-size: 10px; font-weight: 500; letter-spacing: 0.28em;
	text-transform: uppercase; color: var(--g-accent);
}
.g-sec--dark .g-eyebrow { color: var(--g-matcha-lt); }
.g-lead {
	margin: 18px 0 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;
	font-size: clamp(30px, 4vw, 54px);
}
.g-body-t { margin: 20px 0 0; font-size: 16px; color: var(--g-ink-2); max-width: 46ch; }
.g-sec--dark .g-body-t { color: var(--g-on-dark-2); }
.g-more {
	display: inline-flex; align-items: center; gap: 14px; margin-top: 30px;
	text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--g-matcha);
}
.g-more i { display: block; width: 36px; height: 1px; background: currentColor; font-style: normal;
	transition: width 0.4s var(--g-e); }
.g-more:hover i { width: 54px; }
.g-sec--dark .g-more { color: var(--g-matcha-lt); }

/* --- header -------------------------------------------------------------- */
.g-head { position: absolute; inset: 0 0 auto 0; z-index: 60; color: var(--g-on-dark); }
.g-head--solid { position: relative; background: var(--g-dark); }
.g-head__row {
	position: relative; z-index: 62; display: flex; align-items: center; gap: 28px;
	padding: 22px var(--g-pad);
}
.g-head__brand { text-decoration: none; flex: none; font-size: 13px; letter-spacing: 0.3em; }
.g-head__nav { display: flex; gap: 26px; margin: 0 auto; }
.g-head__nav a {
	text-decoration: none; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	opacity: 0.82; padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.g-head__nav a:hover { opacity: 1; border-bottom-color: currentColor; }
.g-head__ed {
	flex: none; display: inline-flex; align-items: center; gap: 7px; background: none;
	border: 0; padding: 2px 0; color: inherit; font: inherit; font-size: 10px;
	letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; cursor: pointer;
	text-decoration: none;
}
.g-head__ed:hover { opacity: 1; }
.g-burger { display: none; flex: none; width: 34px; height: 22px; background: none; border: 0;
	padding: 0; cursor: pointer; position: relative; }
.g-burger span { position: absolute; left: 4px; right: 4px; height: 1px; background: currentColor;
	transition: transform 0.42s var(--g-e); }
.g-burger span:nth-child(1) { top: 6px; }
.g-burger span:nth-child(2) { top: 14px; }
.g-head.is-open .g-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.g-head.is-open .g-burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.g-menu {
	position: fixed; inset: 0; z-index: 61; background: var(--g-dark); color: var(--g-on-dark);
	display: flex; flex-direction: column; justify-content: flex-start;
	padding: 92px 26px 34px; overflow: auto;
	clip-path: inset(0 0 100% 0); visibility: hidden;
	transition: clip-path 0.6s var(--g-e), visibility 0s linear 0.6s;
}
.g-head.is-open .g-menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s, 0s; }
.g-menu a, .g-menu h4 { opacity: 0; transform: translateY(14px); }
.g-head.is-open .g-menu a, .g-head.is-open .g-menu h4 {
	opacity: 1; transform: none;
	transition: opacity 0.5s var(--g-e) var(--d, 0ms), transform 0.5s var(--g-e) var(--d, 0ms);
}
.g-menu__primary a { display: block; text-decoration: none; font-size: 27px; line-height: 1.6;
	letter-spacing: 0.05em; }
.g-menu__rule { height: 1px; background: rgba(239, 234, 222, 0.2); margin: 26px 0 22px; }
.g-menu h4 { margin: 0 0 10px; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase;
	color: var(--g-matcha-lt); font-weight: 500; }
.g-menu__ed a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
	text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgba(239, 234, 222, 0.12);
	font-size: 15px; }
.g-menu__ed a span:last-child { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
	color: rgba(239, 234, 222, 0.45); }
.g-menu__ed a.is-live span:last-child { color: var(--g-matcha-lt); }

/* --- hero ---------------------------------------------------------------- */
.g-hero { position: relative; overflow: hidden; background: var(--g-dark);
	height: var(--g-hero-h, min(88vh, 760px)); }
.g-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-hero__type {
	position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 20px; text-align: center;
	padding: 0 40px; color: var(--g-on-dark); pointer-events: none;
}
.g-hero__brand { font-size: clamp(19px, 2vw, 30px); letter-spacing: 0.4em; text-indent: 0.4em; }
.g-hero__tag { margin: 0; font-size: clamp(9px, 0.8vw, 11px); letter-spacing: 0.28em;
	text-transform: uppercase; color: var(--g-on-dark-2); }
.g-hero__look {
	margin-top: 34px; display: flex; align-items: center; gap: 14px; width: min(420px, 52vw);
	padding-bottom: 12px; border-bottom: 1px solid rgba(232, 228, 214, 0.28);
	color: rgba(232, 228, 214, 0.55); font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; pointer-events: auto; text-decoration: none;
}
.g-hero__look svg { width: 13px; height: 13px; flex: none; stroke: currentColor;
	stroke-width: 1.3; fill: none; }
.js-rv .g-hero__type > * { opacity: 0; transform: translateY(9px); }
.g-hero.is-live .g-hero__type > * {
	opacity: 1; transform: none;
	transition: opacity 1.4s var(--g-e) var(--d, 0ms), transform 1.4s var(--g-e) var(--d, 0ms);
}

/* --- reveal ---------------------------------------------------------------
   Gated on a class the page script sets immediately, so the hidden state only
   ever exists where something is guaranteed to un-hide it. Without JS the
   content is simply visible rather than permanently blank. */
.js-rv .g-rise { opacity: 0; transform: translateY(20px); }
.js-rv .is-in .g-rise { opacity: 1; transform: none;
	transition: opacity 0.9s var(--g-e) var(--d, 0ms), transform 0.9s var(--g-e) var(--d, 0ms); }

/* --- editorial primitives ------------------------------------------------ */
.g-figure { position: relative; overflow: hidden; background: var(--g-paper-2); }
.g-figure img { width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.9s var(--g-e); }
a:hover > .g-figure img, .g-figure:hover img { transform: scale(1.035); }

.g-score { display: inline-flex; align-items: baseline; gap: 10px; }
.g-score b { font-weight: 400; font-size: 34px; font-variant-numeric: tabular-nums; color: var(--g-matcha); }
.g-sec--dark .g-score b { color: var(--g-matcha-lt); }
.g-score span { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--g-muted); }

.g-demo {
	display: inline-block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--g-accent); border: 1px solid currentColor; padding: 3px 8px; border-radius: 2px;
}

/* --- footer -------------------------------------------------------------- */
.g-foot { background: var(--g-dark); color: var(--g-on-dark-2); padding: 96px 0 40px;
	border-top: 1px solid rgba(239, 234, 222, 0.08); }
/* the wordmark set across the full measure — the page ends on the name */
.g-foot__mark { margin: 0 0 72px; display: flex; justify-content: space-between; gap: 0.2em;
	font-weight: 400; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.03em;
	font-size: clamp(44px, 9.4vw, 160px); color: var(--g-on-dark); }
.g-foot__mark span:nth-child(2) { color: var(--g-matcha-lt); }
.g-foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 48px; }
.g-foot__brand b { display: block; font-weight: 400; font-size: 13px; letter-spacing: 0.3em;
	color: var(--g-on-dark); }
.g-foot__brand p { margin: 14px 0 0; font-size: 12px; letter-spacing: 0.02em; max-width: 30ch; }
.g-foot h4 { margin: 0 0 14px; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--g-matcha-lt); font-weight: 500; }
.g-foot ul { list-style: none; margin: 0; padding: 0; }
.g-foot li { margin-bottom: 9px; }
.g-foot a { text-decoration: none; font-size: 13px; }
.g-foot a:hover { color: var(--g-on-dark); }
.g-foot li.is-future { color: rgba(174, 179, 163, 0.42); font-size: 13px; }
.g-foot__base { margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(239, 234, 222, 0.12);
	display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	font-size: 10.5px; letter-spacing: 0.12em; color: rgba(174, 179, 163, 0.6); }

/* ======================================================= tablet ≤ 1000 === */
@media (max-width: 1000px) {
	:root { --g-pad: 32px; }
	.g-sec { padding: 84px 0; }
	.g-foot__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ======================================================= mobile ≤ 640 ==== */
@media (max-width: 640px) {
	:root { --g-pad: 20px; }
	.g-sec { padding: 62px 0; }
	.g-head__row { padding: 16px var(--g-pad); }
	.g-head__nav, .g-head__ed { display: none; }
	.g-burger { display: block; margin-left: auto; }
	.g-hero { height: var(--g-hero-h-m, 560px); }
	.g-hero__brand { font-size: 16px; letter-spacing: 0.3em; text-indent: 0.3em; }
	.g-hero__tag { font-size: 8.5px; letter-spacing: 0.2em; }
	.g-hero__look { margin-top: 26px; width: calc(100% - 8px); font-size: 9.5px; letter-spacing: 0.16em; }
	.g-lead { font-size: 28px; }
	.g-body-t { font-size: 15px; }
	.g-menu__primary a { font-size: 24px; }
	.g-foot { padding: 56px 0 34px; }
	.g-foot__mark { margin-bottom: 44px; flex-direction: column; font-size: 64px; }
	.g-foot__grid { grid-template-columns: 1fr; gap: 30px; }
	.g-foot__base { margin-top: 40px; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.js-rv .g-rise, .js-rv .is-in .g-rise { opacity: 1; transform: none; transition: none; }
	.js-rv .g-hero__type > *, .g-hero.is-live .g-hero__type > * {
		opacity: 1; transform: none; transition: none; }
	.g-figure img { transition: none; }
}

/* ======================================================= home additions ==
   Shared by the World Home sections. Display scale, index marks and the
   section numeral — the things that make nine sections read as one issue
   rather than nine pages. */
:root {
	--g-display: clamp(44px, 7.4vw, 124px);
	--g-display-2: clamp(34px, 4.6vw, 72px);
	--g-quiet: rgba(22, 24, 15, 0.08);
}
.g-sec--dark { --g-quiet: rgba(239, 234, 222, 0.14); }

/* section index: "03 — WHAT IS THE MATCHA BASE?" */
.g-index { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: 10px;
	letter-spacing: 0.26em; text-transform: uppercase; color: var(--g-muted); }
.g-index b { font-weight: 400; color: var(--g-accent); font-variant-numeric: tabular-nums; }
.g-index i { display: block; width: 28px; height: 1px; background: currentColor; opacity: 0.6;
	align-self: center; font-style: normal; }
.g-sec--dark .g-index b { color: var(--g-matcha-lt); }

/* display type */
.g-display { margin: 0; font-weight: 400; line-height: 0.96; letter-spacing: -0.03em;
	font-size: var(--g-display); text-transform: uppercase; }
.g-display-2 { margin: 0; font-weight: 400; line-height: 1.04; letter-spacing: -0.025em;
	font-size: var(--g-display-2); }

/* a hairline that draws itself across when its section arrives */
.g-rule { height: 1px; background: currentColor; opacity: 0.18; transform-origin: left;
	transform: scaleX(0); transition: transform 1.4s var(--g-e) var(--d, 0ms); }
.is-in .g-rule { transform: scaleX(1); }
.js-rv:not(.is-in) .g-rule { transform: scaleX(0); }

/* image reveal: the frame is drawn first, then the photograph is uncovered */
.g-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--g-e) var(--d, 0ms); }
.is-in .g-reveal { clip-path: inset(0 0 0 0); }
.g-reveal img { transform: scale(1.06); transition: transform 1.8s var(--g-e) var(--d, 0ms); }
.is-in .g-reveal img { transform: none; }

/* sample / demo marker — the same everywhere so it is never mistaken for a rank */
.g-sample { display: inline-flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--g-accent); }
.g-sample::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.g-sec--dark .g-sample { color: var(--g-matcha-lt); }

@media (prefers-reduced-motion: reduce) {
	.g-rule, .js-rv:not(.is-in) .g-rule { transform: none; transition: none; }
	.g-reveal, .g-reveal img { clip-path: none; transform: none; transition: none; }
}

/* light-tone pages: the overlaid header is set in ink instead of paper, and
   the menu keeps its dark ground so it still opens as a curtain */
.g-body[data-tone="light"] .g-head { color: var(--g-ink); }
.g-body[data-tone="light"] .g-head.is-open { color: var(--g-on-dark); }