@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap");

:root {
  --ink: #221522;
  --paper: #f5f0e7;
  --line: rgba(34, 21, 34, .2);
  --amber: #f59e0b;
  --cobalt: #164da0;
  --red: #ca321f;
  --wine: #6f102f;
  --green: #496d5a;
  --display: "Manrope", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--display); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-nav { align-items: center; display: flex; justify-content: space-between; left: 0; padding: 22px 32px; position: absolute; right: 0; top: 0; z-index: 4; }
.wordmark { align-items: center; display: inline-flex; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; gap: 9px; letter-spacing: -.075em; line-height: .85; }
.wordmark span { letter-spacing: -.025em; }
.wordmark-logo { height: clamp(31px, 3vw, 42px); transform: rotate(-5deg); width: clamp(31px, 3vw, 42px); }
.nav-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.nav-meta a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.hero { min-height: 100svh; overflow: hidden; padding: 118px 5vw 60px; position: relative; }
.hero-copy { position: relative; z-index: 2; }
.hero-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; margin: 0 0 20px; text-transform: uppercase; }
.hero h1 { font-size: clamp(46px, 7vw, 112px); font-weight: 800; letter-spacing: -.075em; line-height: .91; margin: 0; max-width: 840px; }
.hero-title > span { display: block; white-space: nowrap; }
.hero-title > span + span { margin-left: 50%; margin-top: .07em; }
.hero-intro { font-size: clamp(16px, 1.5vw, 21px); font-weight: 500; line-height: 1.3; margin: 42px 0 0; max-width: 390px; }
.hero-access { display: grid; grid-template-columns: repeat(2, minmax(156px, 1fr)); left: 50%; max-width: 420px; position: absolute; top: 66%; transform: translateX(-50%); width: min(58vw, 420px); z-index: 3; }
.hero-access__item { align-content: center; border-bottom: 2px solid currentColor; border-top: 2px solid currentColor; color: var(--ink); display: grid; gap: 5px; min-height: 70px; padding: 12px 16px; }
.hero-access__item + .hero-access__item { border-left: 2px solid currentColor; }
.hero-access__number, .hero-access__item em { font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.hero-access__item b { font-size: 20px; letter-spacing: -.045em; line-height: .95; }
.hero-access__item b span { color: var(--amber); font-size: .85em; margin-left: 3px; }
.hero-access__item em { color: var(--amber); }
.hero-access__item[href] { transition: background-color 180ms ease, color 180ms ease; }
.hero-access__item[href]:hover { background: var(--ink); color: var(--paper); }
.hero-access__item[href]:hover em, .hero-access__item[href]:focus-visible b span { color: var(--amber); }
.hero-art { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.field-canvas { height: 100%; inset: 0; position: absolute; width: 100%; }

.section { padding: clamp(72px, 10vw, 156px) 5vw; }
.section-head { align-items: end; display: grid; gap: 24px; grid-template-columns: 1fr minmax(220px, 440px); margin-bottom: 56px; }
.section-mark { color: var(--amber); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.section-head h2 { font-size: clamp(35px, 4.5vw, 68px); letter-spacing: -.065em; line-height: .95; margin: 8px 0 0; max-width: 670px; }
.section-head p { font-size: 15px; line-height: 1.55; margin: 0; }
.principles { border-top: 1px solid var(--line); }
.principle { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 70px minmax(140px, .8fr) 1.7fr; padding: 24px 0; }
.principle-no { color: var(--amber); font-family: var(--mono); font-size: 11px; padding-top: 5px; }
.principle h3 { font-size: 17px; letter-spacing: -.045em; margin: 0; }
.principle p { font-size: 14px; line-height: 1.5; margin: 0; max-width: 560px; }

.evidence { border: 1px solid currentColor; min-height: 180px; overflow: hidden; padding: 18px; position: relative; }
.evidence small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.evidence strong { display: block; font-size: clamp(25px, 3.5vw, 52px); letter-spacing: -.08em; line-height: .9; margin-top: 18px; }
.evidence p { font-family: var(--mono); font-size: 10px; line-height: 1.6; margin: 18px 0 0; }
.math-evidence strong { transform: rotate(-7deg); }
.word-evidence strong { color: var(--red); font-family: var(--serif); font-style: italic; font-weight: 500; }
.word-evidence em { color: var(--cobalt); font-style: normal; }
.workpaper-evidence { background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 24px; }
.atlas-evidence::after { border: 1px solid var(--green); border-radius: 50%; content: ""; height: 110px; position: absolute; right: -18px; top: 44px; width: 110px; }
.gallery-evidence { background: var(--wine); color: var(--paper); }

.case-foot { display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; letter-spacing: .08em; margin-top: 54px; text-transform: uppercase; }
.case-foot a { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.concept-legal { align-items: center; display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; letter-spacing: .08em; padding: 20px 5vw; text-transform: uppercase; }
.concept-legal a { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.loom .concept-legal, .threshold .concept-legal, .stage .concept-legal { background: var(--ink); color: var(--paper); }
.resonance .concept-legal { background: #2b1b2e; color: #eee5d7; }

/* The public legal page shares the live High-Key Gravity palette without
   inheriting the homepage's animated canvas. */
.skip-link { background: var(--loom-ink); color: var(--loom-ground); left: 18px; padding: 11px 14px; position: fixed; text-decoration: none; top: 0; transform: translateY(-120%); transition: transform .16s ease; z-index: 3; }
.skip-link:focus { outline: 3px solid var(--loom-amber); outline-offset: 3px; transform: translateY(14px); }
.privacy-policy { background: var(--loom-ground); color: var(--loom-ink); min-height: 100svh; }
.privacy-policy .site-nav { color: var(--loom-ink); }
.privacy-site-nav { border-bottom: 1px solid color-mix(in srgb, var(--loom-ink) 28%, transparent); }
.privacy-page { margin: 0 auto; max-width: 1180px; padding: 0 5vw clamp(74px, 11vw, 150px); }
.privacy-hero { border-bottom: 1px solid var(--loom-ink); display: grid; gap: 22px; grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr); padding: clamp(68px, 10vw, 142px) 0 clamp(48px, 7vw, 88px); position: relative; }
.privacy-hero::after { background: var(--loom-red); bottom: -1px; content: ""; height: clamp(12px, 1.65vw, 22px); position: absolute; right: 0; width: min(28%, 260px); }
.privacy-hero .section-mark { margin: 8px 0 0; }
.privacy-hero h1 { font-size: clamp(52px, 8.8vw, 128px); grid-column: 2; letter-spacing: -.085em; line-height: .82; margin: 0; max-width: 900px; }
.privacy-updated { font-family: var(--mono); font-size: 11px; grid-column: 2; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.privacy-article { margin-left: auto; max-width: 900px; }
.privacy-introduction { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; max-width: 720px; padding: clamp(52px, 7vw, 94px) 0 clamp(30px, 4vw, 54px); }
.privacy-introduction p { margin: 0 0 20px; }
.privacy-introduction p:first-child { font-family: var(--serif); font-size: 1.16em; }
.privacy-section { border-top: 1px solid color-mix(in srgb, var(--loom-ink) 52%, transparent); display: grid; gap: clamp(30px, 5vw, 70px); grid-template-columns: minmax(164px, .32fr) minmax(0, 1fr); padding: clamp(38px, 5.6vw, 76px) 0; }
.privacy-section h2 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .075em; line-height: 1.45; margin: 4px 0 0; text-transform: uppercase; }
.privacy-section h3 { font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.055em; line-height: .98; margin: 38px 0 16px; }
.privacy-section h3:first-child { margin-top: 0; }
.privacy-section p, .privacy-section li { font-size: 15px; line-height: 1.62; }
.privacy-section p { margin: 0 0 17px; }
.privacy-section ul { margin: 0 0 18px; padding-left: 1.15em; }
.privacy-section li + li { margin-top: 7px; }
.privacy-section a { border-bottom: 1px solid currentColor; color: inherit; overflow-wrap: anywhere; text-decoration: none; }
.privacy-section a:hover { color: var(--loom-plum); }
.privacy-section a:focus-visible, .privacy-table-scroll:focus-visible, .wordmark:focus-visible, .concept-legal a:focus-visible { outline: 3px solid var(--loom-amber); outline-offset: 4px; }
.privacy-table-scroll { margin: 27px 0 22px; overflow-x: auto; }
.privacy-table-scroll table { border-collapse: collapse; font-size: 14px; min-width: 650px; text-align: left; width: 100%; }
.privacy-table-scroll caption { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; margin-bottom: 11px; text-align: left; text-transform: uppercase; }
.privacy-table-scroll th, .privacy-table-scroll td { border: 1px solid color-mix(in srgb, var(--loom-ink) 34%, transparent); padding: 14px 15px; vertical-align: top; }
.privacy-table-scroll thead { background: var(--loom-blue); color: var(--loom-light); }
.privacy-table-scroll tbody tr:nth-child(even) { background: color-mix(in srgb, var(--loom-light) 68%, transparent); }
.privacy-table-scroll tbody th { font-weight: 700; }
.privacy-contact { border-bottom: 1px solid var(--loom-ink); }
.privacy-contact address { font-style: normal; }
.privacy-footer { background: var(--loom-ink) !important; color: var(--loom-ground) !important; }

@media (prefers-reduced-motion: reduce) {
  .privacy-policy, .privacy-policy *, .privacy-policy *::before, .privacy-policy *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 720px) {
  .privacy-page { padding-left: 20px; padding-right: 20px; }
  .privacy-hero { display: block; padding-bottom: 42px; padding-top: 58px; }
  .privacy-hero .section-mark { margin: 0 0 22px; }
  .privacy-hero h1 { font-size: clamp(52px, 17vw, 72px); }
  .privacy-updated { margin-top: 20px; }
  .privacy-article { max-width: none; }
  .privacy-introduction { font-size: 18px; padding-bottom: 30px; padding-top: 54px; }
  .privacy-section { display: block; padding-bottom: 48px; padding-top: 48px; }
  .privacy-section h2 { margin-bottom: 28px; max-width: 310px; }
}

/* 01 — a field formed by crossings */
.loom { background: #f7efdd; color: #2b1b2e; }
.loom .site-nav { color: #2b1b2e; }
.loom .hero-copy { max-width: 650px; padding-top: clamp(46px, 12vh, 160px); }
.loom .hero::after { background: linear-gradient(90deg, rgba(247,239,221,.98) 0%, rgba(247,239,221,.85) 36%, rgba(247,239,221,0) 74%); content: ""; inset: 0; position: absolute; }
.loom .hero h1 { font-size: clamp(52px, 8vw, 126px); }
.loom .hero-intro { color: #2b1b2e; }
.loom .hero-action span { color: #e8492b; }
.loom .section { background: #f7efdd; color: #2b1b2e; }
.loom .case-map { display: grid; gap: 0; grid-template-columns: 1.2fr .8fr .9fr; }
.loom .case { border: 1px solid rgba(39,23,40,.25); margin: -1px 0 0 -1px; min-height: 340px; padding: 26px; position: relative; }
.loom .case:nth-child(1) { grid-column: span 2; }
.loom .case:nth-child(4) { grid-column: span 2; }
.loom .case h3 { font-size: 24px; letter-spacing: -.06em; line-height: .95; margin: 42px 0 12px; max-width: 260px; }
.loom .case p { font-size: 13px; line-height: 1.52; max-width: 350px; }
.loom .case .evidence { bottom: 24px; position: absolute; right: 24px; width: min(47%, 270px); }
.loom .case:nth-child(2) { background: var(--red); color: #fff8ef; }
.loom .case:nth-child(3) { background: var(--amber); }
.loom .case:nth-child(5) { background: var(--cobalt); color: #fff8ef; }

.loom-showcase { background: #f7efdd; color: #2b1b2e; }
.loom-opening { align-items: end; display: grid; gap: 28px; grid-template-columns: minmax(360px, 1.15fr) minmax(230px, .6fr); padding: clamp(84px, 12vw, 170px) 5vw clamp(58px, 8vw, 110px); }
.loom-opening .section-mark { grid-column: 1 / -1; }
.loom-opening h2 { font-size: clamp(44px, 6vw, 100px); letter-spacing: -.08em; line-height: .88; margin: 0; max-width: 830px; }
.loom-opening p { font-size: 16px; line-height: 1.55; margin: 0; max-width: 410px; }
.field-chapter { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(270px, .64fr) minmax(240px, .78fr); min-height: min(82vw, 760px); overflow: hidden; padding: clamp(38px, 6.5vw, 100px) 5vw; position: relative; }
.territory-copy { align-self: start; max-width: 410px; position: relative; z-index: 2; }
.territory-no { display: block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .11em; margin-bottom: 38px; text-transform: uppercase; }
.territory-copy h3 { font-size: clamp(42px, 5.6vw, 94px); letter-spacing: -.085em; line-height: .85; margin: 0; }
.territory-copy p { font-size: 14px; line-height: 1.55; margin: 28px 0 0; max-width: 330px; }
.field-phone { align-self: center; background: #fffdf8; border: 3px solid #2b1b2e; border-radius: 35px 31px 39px 34px; box-shadow: 14px 16px 0 rgba(43,27,46,.28); color: #2b1b2e; justify-self: center; max-width: 290px; min-height: 430px; padding: 11px; position: relative; transform: rotate(-3deg); width: min(100%, 290px); z-index: 3; }
.phone-speaker { background: #2b1b2e; border-radius: 20px; height: 5px; left: calc(50% - 26px); position: absolute; top: 10px; width: 52px; }
.phone-screen { border: 1.5px solid rgba(43,27,46,.72); border-radius: 25px 22px 30px 25px; display: flex; flex-direction: column; height: 100%; min-height: 404px; overflow: hidden; padding: 35px 18px 16px; }
.phone-screen small { font-family: var(--mono); font-size: 8px; letter-spacing: .09em; }
.phone-screen strong { display: block; font-size: 28px; letter-spacing: -.075em; line-height: .9; margin-top: 20px; }
.phone-screen p { font-size: 11px; line-height: 1.45; }
.phone-action { align-items: center; border-top: 1px solid rgba(43,27,46,.48); display: flex; font-family: var(--mono); font-size: 9px; justify-content: space-between; letter-spacing: .04em; margin-top: auto; padding-top: 12px; text-transform: uppercase; }
.phone-action b { font-size: 17px; line-height: .7; }
.field-math { background: #e8492b; color: #fff8ea; grid-template-columns: minmax(220px, .9fr) minmax(280px, .9fr) minmax(150px, .5fr); }
.field-math::before { background: #f7efdd; clip-path: polygon(0 0, 100% 16%, 60% 100%, 0 78%); content: ""; height: 115%; left: -10%; position: absolute; top: -9%; width: 34%; }
.field-math .territory-copy { color: #2b1b2e; }
.phone-math { grid-column: 2; transform: rotate(3.5deg); }
.phone-math .phone-screen { background: #fff8ea; }
.phone-math strong { color: #e8492b; font-size: 43px; }
.hand-line { color: #2854d7; font-family: var(--serif); font-size: 20px !important; font-style: italic; margin: 18px 0 6px !important; transform: rotate(-4deg); }
.math-route { border-left: 2px solid #f6b526; font-family: var(--mono); margin: 10px 0 0 !important; padding-left: 12px; }
.field-word { font-family: var(--serif); font-style: italic; letter-spacing: -.1em; pointer-events: none; position: absolute; z-index: 1; }
.field-word-math { bottom: -2vw; color: rgba(43,27,46,.14); font-size: clamp(82px, 14vw, 230px); right: 4vw; }
.field-word-anatomy { background: #2854d7; color: #fff8ea; grid-template-columns: minmax(240px, .7fr) minmax(260px, .75fr) minmax(260px, .9fr); }
.field-word-anatomy .territory-copy { grid-column: 3; justify-self: end; }
.phone-word { grid-column: 2; grid-row: 1; transform: rotate(-5deg); }
.phone-word .phone-screen { background: #dce7f1; }
.phone-word strong { font-size: 27px; }
.phone-word strong span { color: #e8492b; }
.word-parts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 24px; }
.word-parts i { border: 1px solid #2b1b2e; font-family: var(--mono); font-size: 9px; font-style: normal; padding: 5px 7px; }
.field-word-prefix { color: rgba(247,239,221,.92); font-size: clamp(150px, 25vw, 420px); left: -2vw; top: -8vw; }
.field-word-root { bottom: -7vw; color: rgba(43,27,46,.3); font-size: clamp(92px, 16vw, 260px); left: 7vw; }
.field-workpaper { background: #f6b526; color: #2b1b2e; grid-template-columns: minmax(240px, .86fr) minmax(300px, .8fr) minmax(200px, .6fr); }
.phone-paper { grid-column: 2; transform: rotate(5deg); }
.phone-paper .phone-screen { background: #fffdf8; }
.phone-paper strong { font-size: 32px; }
.worksheet-lines { border-top: 1px solid rgba(43,27,46,.54); margin-top: 22px; padding-top: 11px; }
.worksheet-lines i { border-bottom: 1px solid rgba(43,27,46,.46); display: block; height: 21px; }
.crop { border-color: #2b1b2e; border-style: solid; height: 135px; position: absolute; width: 135px; }
.crop-top { border-width: 3px 0 0 3px; right: 7vw; top: 7vw; }
.crop-bottom { border-width: 0 3px 3px 0; bottom: 7vw; left: 7vw; }
.field-atlas { background: #557662; color: #fff8ea; grid-template-columns: minmax(260px, .8fr) minmax(290px, .8fr) minmax(220px, .7fr); }
.phone-atlas { grid-column: 2; transform: rotate(-2deg); }
.phone-atlas .phone-screen { background: #dce7f1; }
.pen-drawing { height: 145px; margin: 28px 0 2px; position: relative; }
.pen-drawing i, .pen-drawing b, .pen-drawing em { display: block; position: absolute; transform: rotate(-37deg); }
.pen-drawing i { background: #2854d7; height: 18px; left: 18px; top: 64px; width: 154px; }
.pen-drawing b { background: #e8492b; height: 10px; left: 49px; top: 69px; width: 109px; }
.pen-drawing em { border-color: transparent transparent #2b1b2e transparent; border-style: solid; border-width: 0 11px 18px; left: 165px; top: 45px; }
.atlas-disc { border: 3px solid rgba(247,239,221,.86); border-radius: 50%; position: absolute; }
.atlas-disc-one { height: 50vw; max-height: 620px; max-width: 620px; right: -15vw; top: -17vw; width: 50vw; }
.atlas-disc-two { border-color: rgba(43,27,46,.4); bottom: -11vw; height: 28vw; left: 7vw; width: 28vw; }
.field-gallery { background: #a4477d; color: #fff8ea; grid-template-columns: minmax(220px, .75fr) minmax(270px, .7fr) minmax(290px, .85fr); }
.field-gallery .territory-copy { grid-column: 1; }
.phone-gallery { grid-column: 3; transform: rotate(4deg); }
.phone-gallery .phone-screen { background: #fffdf8; }
.phone-gallery strong { font-size: 25px; }
.gallery-boards { display: grid; gap: 5px; margin-top: 24px; }
.gallery-boards i { border: 1px solid #2b1b2e; font-family: var(--mono); font-size: 8px; font-style: normal; padding: 6px; }
.gallery-boards i:nth-child(2) { margin-left: 20px; }.gallery-boards i:nth-child(3) { margin-left: 8px; }
.gallery-horizon { background: #f7efdd; bottom: -14vw; clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%); height: 35vw; left: 0; position: absolute; right: 0; }
.loom .case-foot { background: #2b1b2e; color: #f7efdd; margin: 0; padding: 24px 5vw; }

/* Field Loom colour studies. The study is selected before CSS loads, so each
   URL is a complete visual direction rather than a late-applied theme. */
.loom {
  --loom-ground: #fff1d6;
  --loom-ink: #172a4b;
  --loom-light: #fffaf1;
  --loom-surface: #fffdf8;
  --loom-blue: #2451d1;
  --loom-red: #f04a35;
  --loom-amber: #f6d43b;
  --loom-green: #00a67e;
  --loom-plum: #a63a9c;
  --loom-phone: #e6efff;
  --loom-shadow: rgba(23,42,75,.25);
  background: var(--loom-ground);
  color: var(--loom-ink);
}
html[data-loom-study="soft"] .loom {
  --loom-ground: #fcfeff;
  --loom-ink: #263246;
  --loom-light: #ffffff;
  --loom-surface: #ffffff;
  --loom-blue: #eaf5ff;
  --loom-red: #fcebf1;
  --loom-amber: #fff7e9;
  --loom-green: #e1f5ea;
  --loom-plum: #eee8ff;
  --loom-phone: #f4f9fd;
  --loom-shadow: rgba(38,50,70,.14);
}
html[data-loom-study="soft"] .loom .field-word-anatomy,
html[data-loom-study="soft"] .loom .field-atlas,
html[data-loom-study="soft"] .loom .field-gallery { color: var(--loom-ink); }
html[data-loom-study="common"] .loom {
  --loom-ground: #f7f3ea;
  --loom-ink: #11131a;
  --loom-light: #fffdf7;
  --loom-surface: #fffdf7;
  --loom-blue: #2452d6;
  --loom-red: #ef4c39;
  --loom-amber: #f3a40a;
  --loom-green: #c8ec4b;
  --loom-plum: #3d1b45;
  --loom-phone: #edf2e5;
  --loom-shadow: rgba(17,19,26,.22);
}
html[data-loom-study="gravity"] .loom {
  --loom-ground: #ddf4eb;
  --loom-ink: #310d32;
  --loom-light: #fffdf7;
  --loom-surface: #fffdf7;
  --loom-blue: #147bff;
  --loom-red: #ff5c00;
  --loom-amber: #8bd600;
  --loom-green: #ff287d;
  --loom-plum: #7d38d7;
  --loom-phone: #eaf1ff;
  --loom-shadow: rgba(49,13,50,.22);
}
html[data-loom-study="magnetic"] .loom {
  --loom-ground: #f0f0e9;
  --loom-ink: #131b38;
  --loom-light: #fbfbf7;
  --loom-surface: #ffffff;
  --loom-blue: #073bff;
  --loom-red: #fa3516;
  --loom-amber: #b8ff00;
  --loom-green: #e60089;
  --loom-plum: #4b2178;
  --loom-phone: #f0f5ff;
  --loom-shadow: rgba(19,27,56,.26);
}
.loom .site-nav, .loom .hero-intro { color: var(--loom-ink); }
.loom .hero::after { background: linear-gradient(90deg, var(--loom-ground) 0%, var(--loom-ground) 36%, transparent 74%); }
.loom .hero-action span, .loom .section-mark, .loom .territory-no { color: var(--loom-amber); }
.loom .loom-showcase { background: var(--loom-ground); color: var(--loom-ink); }
.loom .field-chapter { color: var(--loom-ink); }
.loom .field-phone { background: var(--loom-surface); border-color: var(--loom-ink); box-shadow: 14px 16px 0 var(--loom-shadow); color: var(--loom-ink); }
.loom .phone-speaker { background: var(--loom-ink); }
.loom .phone-screen { border-color: color-mix(in srgb, var(--loom-ink) 72%, transparent); }
.loom .phone-action { border-color: color-mix(in srgb, var(--loom-ink) 48%, transparent); }
.loom .field-math { background: var(--loom-red); }
.loom .field-math::before { background: var(--loom-ground); }
.loom .field-math .territory-copy { color: var(--loom-ink); }
.loom .phone-math .phone-screen { background: var(--loom-light); }
.loom .phone-math strong { color: var(--loom-red); }
.loom .hand-line { color: var(--loom-blue); }
.loom .math-route { border-color: var(--loom-amber); }
.loom .field-word { color: color-mix(in srgb, var(--loom-ink) 16%, transparent); }
.loom .field-word-anatomy { background: var(--loom-blue); color: var(--loom-light); }
.loom .phone-word .phone-screen, .loom .phone-atlas .phone-screen { background: var(--loom-phone); }
.loom .phone-word strong span { color: var(--loom-red); }
.loom .word-parts i { border-color: var(--loom-ink); }
.loom .field-word-prefix { color: color-mix(in srgb, var(--loom-light) 92%, transparent); }
.loom .field-workpaper { background: var(--loom-amber); }
.loom .phone-paper .phone-screen { background: var(--loom-light); }
.loom .worksheet-lines { border-color: color-mix(in srgb, var(--loom-ink) 54%, transparent); }
.loom .worksheet-lines i { border-color: color-mix(in srgb, var(--loom-ink) 46%, transparent); }
.loom .crop { border-color: var(--loom-ink); }
.loom .field-atlas { background: var(--loom-green); color: var(--loom-light); }
.loom .pen-drawing i { background: var(--loom-blue); }
.loom .pen-drawing b { background: var(--loom-red); }
.loom .pen-drawing em { border-bottom-color: var(--loom-ink); }
.loom .atlas-disc { border-color: color-mix(in srgb, var(--loom-light) 86%, transparent); }
.loom .atlas-disc-two { border-color: color-mix(in srgb, var(--loom-ink) 40%, transparent); }
.loom .field-gallery { background: var(--loom-plum); color: var(--loom-light); }
.loom .phone-gallery .phone-screen { background: var(--loom-surface); }
.loom .gallery-boards i { border-color: var(--loom-ink); }
.loom .gallery-horizon { background: var(--loom-ground); }
.loom .case-foot, .loom .concept-legal { background: var(--loom-ink); color: var(--loom-ground); }

/* 02 — attention is a boundary, not a special effect */
.threshold { background: #17121b; color: #f4ecdd; }
.threshold .site-nav { color: #f4ecdd; }
.threshold .hero-copy { max-width: 500px; padding-top: 10vh; }
.threshold .hero h1 { font-size: clamp(56px, 9vw, 138px); max-width: 760px; }
.threshold .hero-intro { max-width: 350px; }
.threshold .threshold-sequence { background: #f4ecdd; color: #17121b; }
.threshold .threshold-case { display: grid; grid-template-columns: 90px minmax(220px, .8fr) 1.2fr; min-height: 68vh; padding: clamp(30px,6vw,90px) 5vw; position: relative; }
.threshold .threshold-case:nth-child(odd) { background: #17121b; color: #f4ecdd; }
.threshold .threshold-case h2 { font-size: clamp(34px, 5vw, 76px); letter-spacing: -.07em; line-height: .9; margin: 0; max-width: 480px; }
.threshold .threshold-case p { align-self: end; font-size: 16px; line-height: 1.5; margin: 0; max-width: 390px; }
.threshold .threshold-case .evidence { align-self: end; justify-self: end; width: min(100%, 340px); }
.threshold .threshold-case:nth-child(2) .evidence { color: var(--cobalt); }
.threshold .threshold-case:nth-child(3) .evidence { color: var(--red); }
.threshold .threshold-case:nth-child(4) .evidence { color: #1a4d92; }
.threshold .threshold-case:nth-child(5) .evidence { color: var(--green); }
.threshold .threshold-case:nth-child(6) .evidence { color: #f4ecdd; }

/* 03 — a shared point of alignment */
.alignment { background: #f4f0e8; }
.alignment .hero-copy { max-width: 520px; padding-top: 11vh; }
.alignment .hero h1 { font-size: clamp(50px, 7.6vw, 120px); }
.alignment .hero-intro { max-width: 370px; }
.alignment .alignment-field { padding: 0 5vw clamp(90px, 11vw, 160px); }
.alignment .alignment-intro { border-top: 1px solid var(--line); display: grid; gap: 36px; grid-template-columns: .9fr 1.1fr; padding: 30px 0 80px; }
.alignment .alignment-intro h2 { font-size: clamp(34px, 4.2vw, 68px); letter-spacing: -.07em; line-height: .93; margin: 0; }
.alignment .alignment-intro p { font-size: 15px; line-height: 1.55; margin: 0; max-width: 440px; }
.alignment .alignment-work { display: grid; gap: 0; grid-template-columns: repeat(12, 1fr); position: relative; }
.alignment .alignment-work::before { background: #f59e0b; border-radius: 50%; content: ""; height: 14px; left: calc(50% - 7px); position: absolute; top: calc(50% - 7px); width: 14px; z-index: 2; }
.alignment .alignment-case { border: 1px solid var(--line); margin: -1px 0 0 -1px; min-height: 310px; padding: 22px; position: relative; }
.alignment .alignment-case h3 { font-size: 23px; letter-spacing: -.06em; line-height: .96; margin: 38px 0 12px; }
.alignment .alignment-case p { font-size: 13px; line-height: 1.48; margin: 0; }
.alignment .alignment-case .evidence { bottom: 20px; left: 20px; min-height: 132px; position: absolute; right: 20px; }
.alignment .alignment-case:nth-child(1) { background: #cf5348; grid-column: 1 / span 5; }
.alignment .alignment-case:nth-child(2) { background: #315cc8; color: #f4f0e8; grid-column: 8 / span 5; }
.alignment .alignment-case:nth-child(3) { background: #f2a307; grid-column: 4 / span 5; }
.alignment .alignment-case:nth-child(4) { background: #557662; color: #f4f0e8; grid-column: 9 / span 4; }
.alignment .alignment-case:nth-child(5) { background: #a4477d; color: #f4f0e8; grid-column: 1 / span 4; }

/* 04 — the page behaves like a listening surface */
.resonance { background: #eee5d7; color: #2b1b2e; }
.resonance .hero-copy { max-width: 550px; padding-top: 9vh; }
.resonance .hero h1 { font-family: var(--serif); font-size: clamp(59px, 8.7vw, 140px); font-weight: 500; letter-spacing: -.07em; }
.resonance .resonance-scroll { background: #2b1b2e; color: #eee5d7; padding: clamp(76px, 11vw, 160px) 5vw; }
.resonance .resonance-scroll > p { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; margin: 0 0 60px; text-transform: uppercase; }
.resonance .resonance-case { border-top: 1px solid rgba(238,229,215,.4); display: grid; grid-template-columns: 86px minmax(210px, .95fr) 1fr; gap: 25px; min-height: 260px; padding: 24px 0; }
.resonance .resonance-case:last-child { border-bottom: 1px solid rgba(238,229,215,.4); }
.resonance .resonance-case h2 { font-family: var(--serif); font-size: clamp(34px, 4vw, 58px); font-weight: 500; letter-spacing: -.06em; line-height: .9; margin: 0; }
.resonance .resonance-case p { font-size: 14px; line-height: 1.58; margin: 0; max-width: 420px; }
.resonance .resonance-case .evidence { align-self: end; color: #eee5d7; min-height: 145px; }
.resonance .resonance-case:nth-child(2) .evidence { border-color: #1947d1; color: #7ba2ff; }
.resonance .resonance-case:nth-child(3) .evidence { border-color: #ea2a1e; color: #ff9a8e; }
.resonance .resonance-case:nth-child(4) .evidence { border-color: #f3a400; color: #ffc854; }
.resonance .resonance-case:nth-child(5) .evidence { border-color: #779d86; color: #a8cfb5; }
.resonance .resonance-case:nth-child(6) .evidence { border-color: #b4557c; color: #ea9abb; }

/* 05 — a stage where material, not technology, has the last word */
.stage { background: #351721; color: #f2e3cb; }
.stage .site-nav { color: #f2e3cb; }
.stage .hero-copy { max-width: 520px; padding-top: 10vh; }
.stage .hero h1 { font-family: var(--serif); font-size: clamp(58px, 8.5vw, 136px); font-weight: 500; letter-spacing: -.075em; }
.stage .hero-intro { max-width: 360px; }
.stage .stage-program { background: #d2b588; color: #351721; padding: clamp(70px, 10vw, 150px) 5vw; }
.stage .program-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 48px; }
.stage .program-head h2 { font-family: var(--serif); font-size: clamp(42px,5vw,78px); font-weight: 500; letter-spacing: -.06em; line-height: .9; margin: 0; }
.stage .program-head p { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; margin: 0; text-transform: uppercase; }
.stage .stage-case { align-items: stretch; border-top: 1px solid rgba(53,23,33,.5); display: grid; grid-template-columns: 88px 1.1fr .85fr; gap: 26px; min-height: 330px; padding: 24px 0; }
.stage .stage-case:last-child { border-bottom: 1px solid rgba(53,23,33,.5); }
.stage .stage-case h3 { font-size: clamp(30px,3.5vw,50px); letter-spacing: -.075em; line-height: .9; margin: 0; }
.stage .stage-case p { font-size: 14px; line-height: 1.52; margin: 18px 0 0; max-width: 390px; }
.stage .stage-case .evidence { align-self: end; color: #351721; min-height: 154px; }
.stage .stage-case:nth-child(2) .evidence { background: #174a97; color: #f2e3cb; }
.stage .stage-case:nth-child(3) .evidence { background: #c63d32; color: #f2e3cb; }
.stage .stage-case:nth-child(4) .evidence { background: #f59e0b; }
.stage .stage-case:nth-child(5) .evidence { background: #4e7771; color: #f2e3cb; }
.stage .stage-case:nth-child(6) .evidence { background: #681c37; color: #f2e3cb; }

@media (max-width: 720px) {
  .site-nav { padding: 18px 18px; }
  .hero { min-height: 760px; padding: 94px 24px 48px; }
  .hero h1,
  .loom .hero h1 { font-size: clamp(29px, 9vw, 56px); max-width: 100%; }
  .hero-title > span { white-space: normal; }
  .hero-title > span + span { margin-left: 0; margin-top: .18em; }
  .section { padding-left: 24px; padding-right: 24px; }
  .section-head { display: block; margin-bottom: 38px; }
  .section-head p { margin-top: 20px; }
  .principle { grid-template-columns: 40px 1fr; }
  .principle p { grid-column: 2; }
  .loom .case-map { display: block; }
  .loom .case { margin: -1px 0 0; min-height: 360px; }
  .loom .case .evidence { width: calc(100% - 48px); }
  .loom-opening { display: block; padding: 86px 24px 70px; }
  .loom-opening h2 { font-size: clamp(46px, 14vw, 68px); margin-top: 22px; }
  .loom-opening p { margin-top: 28px; }
  .field-chapter { display: block; min-height: 825px; padding: 68px 24px 58px; }
  .territory-no { margin-bottom: 28px; }
  .territory-copy h3 { font-size: clamp(48px, 14.4vw, 64px); }
  .territory-copy p { margin-top: 21px; }
  .field-phone { margin: 56px auto 0; max-width: 276px; min-height: 414px; }
  .phone-screen { min-height: 388px; }
  .field-math::before { height: 86%; left: -21%; top: 0; width: 78%; }
  .field-word-math { bottom: 0; font-size: 87px; right: -22px; }
  .field-word-prefix { font-size: 200px; left: -17px; top: -39px; }
  .field-word-root { bottom: -10px; font-size: 104px; left: 16px; }
  .field-workpaper .field-phone { margin-top: 44px; }
  .crop { height: 82px; width: 82px; }
  .crop-top { right: 22px; top: 27px; }.crop-bottom { bottom: 26px; left: 22px; }
  .atlas-disc-one { height: 300px; right: -98px; top: -107px; width: 300px; }
  .atlas-disc-two { bottom: -32px; height: 155px; left: -42px; width: 155px; }
  .field-gallery { min-height: 855px; }
  .gallery-horizon { bottom: -68px; height: 165px; }
  .threshold .threshold-case, .resonance .resonance-case, .stage .stage-case { display: block; min-height: 0; }
  .threshold .threshold-case > * + *, .resonance .resonance-case > * + *, .stage .stage-case > * + * { margin-top: 22px; }
  .threshold .threshold-case .evidence { width: 100%; }
  .alignment .alignment-intro { display: block; padding-bottom: 45px; }
  .alignment .alignment-intro p { margin-top: 22px; }
  .alignment .alignment-work { display: block; }
  .alignment .alignment-work::before { display: none; }
  .alignment .alignment-case { min-height: 340px; }
  .alignment .alignment-case + .alignment-case { margin-top: -1px; }
  .concept-legal { align-items: start; flex-direction: column; gap: 12px; }
}