:root { --base:#fff; --ink:#222; --muted:#737373; --line:#e7e7e7; }
::selection { background:#ddd; color:#111; }
.site-header { border-bottom:0; }
.white-hero { text-align:center; padding-top:76px; }
.white-hero > .eyebrow { color:#737373; }
.white-hero h1 { font-size:clamp(54px,5.7vw,84px); line-height:1.35; letter-spacing:-.055em; font-weight:450; margin-top:30px; }
.white-hero h1 span { color:#767676; }
.white-lead { font-size:14px; line-height:1.95; color:#777; margin-top:27px; }
.white-link { display:inline-flex; align-items:center; gap:35px; padding:13px 2px; border-bottom:1px solid #aaa; font-size:12px; margin-top:22px; }
.white-link span { transition:transform .25s; }
.white-link:hover span { transform:translateY(4px); }
.white-art { max-width:1000px; margin:12px auto 0; }
.white-art img { width:100%; }
.white-art figcaption { font-size:10px; color:#767676; margin-top:-35px; position:relative; }
.white-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:25px 10%; padding-block:125px 90px; }
.white-intro .eyebrow { grid-column:1 / -1; color:#737373; margin-bottom:22px; }
.white-intro h2 { font-size:56px; font-weight:400; line-height:1.4; letter-spacing:-.045em; }
.white-intro > p:last-child { font-size:15px; line-height:2.1; color:#737373; }
.white-context { padding-bottom:110px; }
.white-section-head { border-top:1px solid var(--line); padding-top:32px; display:flex; justify-content:space-between; align-items:baseline; gap:25px; }
.white-section-head h2 { font-size:28px; line-height:1.5; font-weight:450; letter-spacing:-.03em; }
.white-section-head > p { font-size:12px; color:#737373; line-height:1.8; }
.context-map { position:relative; max-width:850px; height:410px; margin:40px auto 15px; }
.context-map::before { content:""; position:absolute; width:74%; height:1px; background:#ddd; left:13%; top:52%; transform:rotate(-19deg); }
.context-map::after { content:""; position:absolute; width:1px; height:200px; background:#ddd; left:50%; top:19%; transform:rotate(12deg); }
.context-center { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:150px; height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; border:1px solid #d7d7d7; border-radius:50%; background:#fff; box-shadow:0 14px 38px #00000008; font-size:14px; }
.context-center small { color:#767676; font-size:10px; }
.context-point { position:absolute; z-index:3; display:grid; gap:10px; padding:18px 24px; background:#fff; border-bottom:1px solid #ccc; min-width:135px; }
.context-point b { font-size:17px; font-weight:450; }
.context-point span { font-size:11px; color:#737373; }
.point-fact { left:6%; top:58%; }
.point-relation { right:4%; top:19%; }
.point-boundary { left:46%; top:3%; }
.context-map figcaption { position:absolute; bottom:0; width:100%; text-align:center; font-size:9px; color:#767676; }
.white-context-note { text-align:center; font-size:18px; line-height:1.9; margin-top:40px; font-weight:400; color:#666; }
.white-principles { padding-bottom:110px; }
.white-principles .white-section-head { margin-bottom:40px; }
.white-principles article { display:grid; grid-template-columns:85px 1fr 1fr; gap:30px; align-items:center; padding:37px 0; border-bottom:1px solid var(--line); }
.principle-number { font:italic 25px Georgia,serif; color:#767676; }
.white-principles h3 { font-size:31px; font-weight:400; letter-spacing:-.03em; }
.white-principles article p { font-size:13px; color:#737373; line-height:1.9; }
.white-letter { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px 10%; padding-block:10px 110px; }
.white-letter > .eyebrow { grid-column:1/-1; color:#767676; }
.white-letter > p { font-size:35px; line-height:1.65; letter-spacing:-.035em; }
.white-letter > div { padding-top:8px; font-size:14px; line-height:2.1; color:#737373; }
.white-letter > div p+p { margin-top:24px; }
.white-letter > img { width:40px; opacity:.5; }
.white-end { text-align:center; border-top:1px solid var(--line); padding-block:95px 110px; }
.white-end .eyebrow { color:#767676; }
.white-end h2 { font-size:clamp(48px,5.3vw,76px); line-height:1.4; letter-spacing:-.05em; font-weight:400; margin-top:28px; }
.white-end > p:not(.eyebrow) { margin-top:25px; font-size:11px; color:#737373; }
.white-end .new-button { margin-top:30px; border-radius:4px; }
.qr-code { filter:grayscale(1); }
@media (max-width:767px) {
  .white-hero { padding-top:42px; }
  .white-hero h1 { font-size:clamp(35px,8.7vw,57px); line-height:1.5; margin-top:25px; }
  .white-lead { font-size:11px; margin-top:23px; }
  .white-link { font-size:11px; margin-top:14px; }
  .white-art { width:calc(100% + var(--gutter) * 2); margin:18px calc(-1 * var(--gutter)) 0; }
  .white-art figcaption { font-size:8px; margin-top:-10px; }
  .white-intro { display:block; padding-block:75px 55px; }
  .white-intro .eyebrow { margin-bottom:23px; }
  .white-intro h2 { font-size:40px; }
  .white-intro > p:last-child { font-size:12px; margin-top:26px; }
  .white-context { padding-bottom:60px; }
  .white-section-head { display:block; padding-top:25px; }
  .white-section-head h2 { font-size:25px; }
  .white-section-head > p { font-size:11px; margin-top:12px; }
  .context-map { height:360px; margin-top:22px; }
  .context-center { width:116px; height:116px; top:56%; font-size:12px; }
  .context-center small { font-size:8px; }
  .context-point { min-width:0; padding:12px 10px; gap:8px; }
  .context-point b { font-size:14px; }
  .context-point span { font-size:9px; }
  .point-fact { left:0; top:69%; }
  .point-relation { right:0; top:25%; }
  .point-boundary { left:12%; top:6%; }
  .context-map::before { top:57%; transform:rotate(-38deg); width:85%; left:8%; }
  .context-map::after { top:24%; left:38%; height:100px; transform:rotate(-26deg); }
  .context-map figcaption { font-size:8px; }
  .white-context-note { font-size:14px; margin-top:28px; }
  .white-principles { padding-bottom:65px; }
  .white-principles .white-section-head { margin-bottom:15px; }
  .white-principles .white-section-head h2 { margin-top:15px; }
  .white-principles article { grid-template-columns:32px 1fr; gap:15px; padding:28px 0; }
  .principle-number { font-size:20px; }
  .white-principles h3 { font-size:25px; }
  .white-principles article p { grid-column:2; font-size:11px; }
  .white-letter { display:block; padding-bottom:65px; }
  .white-letter > p { font-size:27px; margin-top:25px; }
  .white-letter > div { font-size:12px; margin-top:25px; padding:0; }
  .white-letter > img { width:33px; margin-top:30px; }
  .white-end { padding-block:57px 65px; }
  .white-end h2 { font-size:37px; margin-top:23px; }
  .white-end > p:not(.eyebrow) { font-size:10px; }
}
@media (max-width:359px) { .white-hero h1 { font-size:31px; } .white-end h2 { font-size:32px; } .white-letter > p { font-size:24px; } }