@charset "UTF-8";
:root {
  --piece-ground: #F0D8F6;
  --piece-ink: #251B2B;
  --piece-green: #266E2D;
  --piece-rose: #DCBBBF;
  --piece-display: "Secular One", "Arial Rounded MT Bold", Arial, sans-serif;
  --piece-reading: "Taviraj", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--piece-ground); color: var(--piece-ink); font: 400 18px/1.8 var(--piece-reading); }
img { display: block; max-width: 100%; }
a { color: var(--piece-green); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-decoration-thickness .15s, background-color .15s; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--piece-ink); outline-offset: 5px; border-radius: 2px; }
::selection { background: var(--piece-green); color: var(--piece-ground); }
.apx-icon { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; vertical-align: middle; }
i.apx-icon { position: relative; }
i.apx-icon::before { content: ""; position: absolute; top: 3px; left: 1px; width: 7px; height: 8px; background: currentColor; box-shadow: 5px 4px 0 currentColor; }
.apx-skip { position: absolute; z-index: 20; top: 8px; left: 8px; padding: 8px 14px; background: var(--piece-ground); transform: translateY(-180%); }
.apx-skip:focus { transform: none; }
.apx-mast { position: relative; max-width: 1440px; margin: 12px auto 20px; padding: 29px 38px 29px; }
.apx-nameband { display: block; background: var(--piece-green); color: var(--piece-ground); padding: 9px 20px 13px; font: 400 clamp(48px,6.1vw,88px)/1 var(--piece-display); text-align: center; text-decoration: none; }
.apx-nameband:hover { background: #205E26; text-decoration: none; }
.apx-nameband:focus-visible { outline-offset: 7px; }
.apx-ties { position: absolute; inset: 0 38px; pointer-events: none; }
.apx-tie { position: absolute; display: flex; align-items: center; gap: 5px; color: var(--piece-ink); background: var(--piece-ground); font: 400 14px/1.2 var(--piece-display); padding: 4px 6px; border-radius: 6px; pointer-events: auto; text-decoration: none; }
.apx-tie .apx-icon { width: 15px; height: 15px; }
.apx-tie::after { content: ""; width: 3px; height: 8px; position: absolute; background: var(--piece-green); left: 50%; }
.apx-tie:hover { background: var(--piece-rose); text-decoration: none; }
.apx-tie--begin { top: 0; left: 9%; }
.apx-tie--begin::after, .apx-tie--ask::after { top: 100%; }
.apx-tie--compare { bottom: 0; left: 50%; transform: translateX(-50%); }
.apx-tie--compare::after { bottom: 100%; }
.apx-tie--ask { top: 0; right: 9%; }
h1, h2, h3, h4 { font-family: var(--piece-display); font-weight: 400; line-height: 1.12; text-wrap: pretty; }
h1 { margin: 0; font-size: clamp(40px,4.4vw,64px); letter-spacing: -.035em; }
.apx-opening { position: relative; isolation: isolate; margin-bottom: 115px; }
.apx-hero-wall { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 48%; }
.apx-opening-words { position: relative; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(340px,1fr); gap: 86px; align-items: start; padding: 0 38px 0 0; }
.apx-welcome-piece { position: relative; padding: 30px 40px 48px max(40px,calc((100vw - 1280px)/2)); background: var(--piece-ground); border-left: 14px solid var(--piece-green); clip-path: polygon(0 0,100% 0,100% 89%,93% 89%,93% 100%,0 100%); }
.apx-welcome-piece > .apx-scale { margin-bottom: 20px; gap: 9px; }
.apx-home-title { max-width: 850px; }
.apx-h1-stem { display: block; font-size: clamp(30px,3.25vw,47px); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 12px; }
.apx-h1-thought { display: block; font-size: clamp(45px,4.9vw,71px); line-height: 1.05; color: var(--piece-green); }
.apx-welcome { max-width: 570px; margin: 20px 0 0; font-size: 18px; line-height: 1.55; }
.apx-mention { position: relative; background: var(--piece-green); color: var(--piece-ground); margin: 0; padding: 30px 30px 38px; font-size: 16px; line-height: 1.55; }
.apx-mention::before { content: ""; position: absolute; left: -22px; top: 0; width: 22px; height: 64px; background: var(--piece-green); }
.apx-mention::after { content: ""; position: absolute; right: 0; bottom: -24px; width: 70%; height: 24px; background: var(--piece-green); }
.apx-mention p { margin: 0; }
.apx-mention-first { display: block; }
.apx-mention-inner { display: block; margin: 16px 3px 0 22px; }
.apx-mention-bits { position: absolute; inset: 0; pointer-events: none; }
.apx-mention-bits i { position: absolute; background: var(--piece-rose); width: 11px; height: 31px; left: 12px; top: 52%; }
.apx-mention-bits i + i { width: 8px; height: 20px; left: auto; right: 10px; top: 85%; }
.apx-mosaic { position: relative; margin: 40px 0 0; padding-bottom: 40px; }
.apx-crop-row { display: grid; grid-template-columns: 25fr 43fr 32fr; gap: 18px; align-items: end; min-height: 172px; }
.apx-crop { position: relative; overflow: hidden; background: var(--piece-rose); height: 172px; }
.apx-crop img { width: 100%; height: 100%; object-fit: cover; }
.apx-crop--close { height: 143px; clip-path: polygon(0 0,100% 0,100% 90%,83% 90%,83% 100%,20% 100%,20% 95%,0 95%); }
.apx-crop--close img { transform: scale(2.5); transform-origin: 35% 58%; object-position: 35% 58%; }
.apx-crop--near { clip-path: polygon(0 0,100% 0,100% 93%,66% 93%,66% 100%,0 100%); }
.apx-crop--near img { transform: scale(1.35); transform-origin: 46% 60%; object-position: 46% 60%; }
.apx-crop--whole { height: 157px; clip-path: polygon(0 0,100% 0,100% 100%,29% 100%,29% 92%,0 92%); }
.apx-crop--whole img { object-position: 65% 48%; }
.apx-mosaic figcaption { position: absolute; bottom: -27px; left: max(38px,calc((100vw - 1280px)/2)); max-width: calc(100% - 76px); padding: 14px 22px; color: var(--piece-ink); background: var(--piece-rose); box-shadow: 9px 9px 0 var(--piece-green); font-size: 16px; line-height: 1.5; }
.apx-reading { max-width: 1160px; margin: 0 auto 100px; padding: 0 32px; }
.apx-level { position: relative; margin-top: 48px; }
.apx-level--zero { isolation: isolate; }
.apx-level h2 { font-size: 46px; max-width: 900px; margin: 0 0 28px; letter-spacing: -.03em; }
.apx-level h3 { font-size: 35px; max-width: 760px; margin: 0 0 24px; letter-spacing: -.025em; }
.apx-level h4 { font-size: 28px; max-width: 680px; margin: 0 0 22px; letter-spacing: -.015em; }
.apx-level p { max-width: 69ch; margin: 0 0 24px; }
.apx-level--zero::before { content: ""; position: absolute; z-index: -1; left: -65px; top: -18px; width: 42px; height: 110px; background: var(--piece-rose); clip-path: polygon(0 0,100% 0,100% 72%,65% 72%,65% 100%,0 100%); }
.apx-level--zero > p:first-of-type::first-letter { float: left; color: var(--piece-green); font: 400 66px/.95 var(--piece-display); padding: 6px 10px 0 0; }
.apx-level--one { margin-left: 112px; margin-top: 64px; }
.apx-level--two { margin-left: 100px; margin-top: 50px; }
.apx-level--two > h4 { padding-bottom: 16px; border-bottom: 8px solid var(--piece-rose); }
.apx-return { margin-top: 42px !important; padding-top: 12px; font-size: 20px; color: var(--piece-green); }
.apx-scale { display: flex; gap: 6px; align-items: end; margin: 0 0 20px; height: 24px; width: 76px; }
.apx-scale i { display: block; width: 25px; height: 18px; background: var(--piece-green); }
.apx-scale i + i { width: 15px; height: 24px; background: var(--piece-rose); }
.apx-scale i + i + i { width: 20px; height: 13px; background: var(--piece-green); }
.apx-level--one > .apx-scale { position: absolute; left: -62px; top: 4px; }
.apx-level--two > .apx-scale { position: absolute; left: -65px; top: 0; }
.apx-subhead { position: relative; max-width: 1280px; padding: 22px 60px 0; margin: 0 auto; }
.apx-crumb { display: flex; align-items: center; gap: 12px; font: 400 16px/1.5 var(--piece-display); margin-bottom: 32px; }
.apx-crumb .apx-icon { width: 22px; height: 22px; color: var(--piece-green); }
.apx-subhead h1 { max-width: 1000px; }
.apx-deck { max-width: 760px; margin: 24px 0 34px; font-size: 23px; line-height: 1.65; }
.apx-inner-photo { margin: 46px -60px 80px 80px; position: relative; isolation: isolate; padding-bottom: 18px; }
.apx-inner-photo::before { content: ""; position: absolute; background: var(--piece-green); top: -16px; left: -34px; width: 20px; height: 100px; }
.apx-inner-photo::after { content: ""; position: absolute; z-index: -1; left: -16px; right: 30px; top: 30px; bottom: 5px; background: var(--piece-rose); }
.apx-inner-photo img { width: 100%; height: 300px; object-fit: cover; clip-path: polygon(0 0,100% 0,100% 91%,75% 91%,75% 100%,0 100%); }
.apx-inner-photo figcaption { position: relative; width: fit-content; max-width: calc(100% - 40px); padding: 12px 22px; margin: -1px 0 -36px 34px; background: var(--piece-green); color: var(--piece-ground); box-shadow: 8px 8px 0 var(--piece-rose); font-size: 16px; line-height: 1.55; }
.apx-comparison { margin: 36px 0 40px -42px; width: calc(100% + 42px); border-collapse: collapse; box-shadow: -10px 10px 0 var(--piece-green); font-size: 16px; line-height: 1.65; text-align: left; }
.apx-comparison th { font: 400 21px/1.3 var(--piece-display); color: var(--piece-ground); background: var(--piece-green); padding: 22px; vertical-align: top; }
.apx-comparison td { padding: 24px 22px; vertical-align: top; border-bottom: 5px solid var(--piece-ground); background: var(--piece-rose); }
.apx-comparison td a { color: var(--piece-ink); }
.apx-comparison th:first-child { width: 22%; }
.apx-sources { list-style: none; padding: 0; margin: 30px 0 14px; }
.apx-sources li { max-width: 69ch; margin-bottom: 30px; padding-left: 18px; border-left: 5px solid var(--piece-rose); }
.apx-sources a { display: inline; font-weight: 500; }
.apx-sources p { margin: 10px 0 0; font-size: 17px; line-height: 1.7; }
.apx-closing { position: relative; margin: 0; padding: 46px max(38px,calc((100vw - 1280px)/2)) 30px; background: var(--piece-green); color: var(--piece-ground); }
.apx-closing::before { content: ""; position: absolute; right: 12%; top: -24px; width: 90px; height: 24px; background: var(--piece-green); }
.apx-foot-intro { display: flex; align-items: start; justify-content: space-between; gap: 70px; }
.apx-foot-brand { font: 400 clamp(44px,5vw,72px)/1.05 var(--piece-display); }
.apx-foot-intro p { font-size: 17px; max-width: 500px; margin: 0; }
.apx-foot-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 34px 0 30px; font: 400 16px/1.4 var(--piece-display); }
.apx-foot-links a { color: var(--piece-ground); border-radius: 6px; padding: 6px 0; }
.apx-foot-links a:hover { color: #FFFFFF; }
.apx-foot-links a:focus-visible { outline-color: var(--piece-ground); }
.apx-copyright { margin: 0; font-size: 16px; }
.apx-lost { min-height: 420px; padding-top: 40px; }
@keyframes piece-seat { from { transform: translateY(-9px) rotate(-9deg); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .apx-welcome-piece > .apx-scale i { animation: piece-seat .65s cubic-bezier(.2,.7,.3,1) both; }
  .apx-welcome-piece > .apx-scale i:nth-child(2) { animation-delay: .08s; }
  .apx-welcome-piece > .apx-scale i:nth-child(3) { animation-delay: .16s; }
}
@media (max-width: 1100px) {
  .apx-opening-words { gap: 40px; grid-template-columns: minmax(0,1.45fr) minmax(320px,1fr); padding-right: 24px; }
  .apx-welcome-piece { padding-left: 28px; padding-right: 28px; }
  .apx-h1-stem { font-size: 32px; }
  .apx-h1-thought { font-size: 50px; }
  .apx-mention { padding: 24px; }
  .apx-mention-inner { margin-left: 18px; }
  .apx-level--one { margin-left: 72px; }
  .apx-level--two { margin-left: 70px; }
  .apx-subhead { padding-right: 40px; padding-left: 40px; }
  .apx-inner-photo { margin-right: -20px; }
}
@media (max-width: 700px) {
  body { font-size: 17px; line-height: 1.8; }
  .apx-mast { padding: 27px 16px; margin: 7px auto 13px; }
  .apx-nameband { font-size: clamp(36px,12.5vw,66px); padding: 8px 4px 10px; line-height: 1; white-space: nowrap; }
  .apx-ties { inset: 0 16px; }
  .apx-tie { padding: 3px; gap: 3px; font-size: 13px; line-height: 17px; max-width: 72px; white-space: nowrap; }
  .apx-tie .apx-icon { display: none; }
  .apx-tie::after { height: 5px; width: 2px; }
  .apx-tie--begin { left: 6%; }
  .apx-tie--ask { right: 6%; }
  .apx-opening { margin-bottom: 68px; }
  .apx-hero-wall { object-position: 45% 100%; }
  .apx-opening-words { display: block; padding: 0; background: var(--piece-ground); }
  .apx-welcome-piece { padding: 18px 18px 28px 12px; border-left-width: 6px; clip-path: polygon(0 0,100% 0,100% 95%,88% 95%,88% 100%,0 100%); }
  .apx-welcome-piece > .apx-scale { display: none; }
  .apx-home-title { letter-spacing: -.03em; }
  .apx-h1-stem { font-size: 25px; line-height: 1.1; margin-bottom: 6px; }
  .apx-h1-thought { font-size: 33px; line-height: 1.08; }
  .apx-welcome { font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .apx-mention { margin: 0; padding: 19px 20px 22px 18px; font-size: 16px; line-height: 1.5; }
  .apx-mention::before { display: none; }
  .apx-mention::after { height: 13px; bottom: -13px; width: 58%; }
  .apx-mention-inner { margin: 10px 8px 0 18px; }
  .apx-mention-bits i { width: 8px; height: 26px; left: 17px; top: 50%; }
  .apx-mention-bits i + i { width: 6px; height: 16px; right: 10px; top: 87%; }
  .apx-mosaic { margin-top: 23px; padding-bottom: 18px; }
  .apx-crop-row { gap: 6px; min-height: 100px; grid-template-columns: 24fr 43fr 33fr; }
  .apx-crop--close { height: 89px; }
  .apx-crop--near { height: 100px; }
  .apx-crop--whole { height: 94px; }
  .apx-mosaic figcaption { left: 18px; bottom: -19px; max-width: calc(100% - 44px); font-size: 14px; padding: 9px 12px; box-shadow: 6px 6px 0 var(--piece-green); }
  .apx-reading { padding: 0 18px; margin-bottom: 72px; }
  .apx-level { margin-top: 34px; }
  .apx-level--zero::before { display: none; }
  .apx-level h2 { font-size: 32px; margin-bottom: 22px; }
  .apx-level h3 { font-size: 27px; margin-bottom: 20px; }
  .apx-level h4 { font-size: 23px; margin-bottom: 20px; }
  .apx-level p { margin-bottom: 20px; }
  .apx-level--zero > p:first-of-type::first-letter { font-size: 53px; padding-top: 7px; }
  .apx-level--one { margin-left: 12px; margin-top: 40px; }
  .apx-level--two { margin-left: 12px; margin-top: 36px; }
  .apx-level--one > .apx-scale, .apx-level--two > .apx-scale { position: static; height: 18px; margin-bottom: 15px; gap: 5px; }
  .apx-scale i { width: 19px; height: 12px; }
  .apx-scale i + i { width: 11px; height: 18px; }
  .apx-scale i + i + i { width: 15px; height: 9px; }
  .apx-return { font-size: 18px; margin-top: 30px !important; padding-top: 8px; }
  .apx-subhead { padding: 6px 18px 0; }
  .apx-crumb { margin-bottom: 24px; font-size: 15px; gap: 8px; }
  .apx-subhead h1 { font-size: 35px; letter-spacing: -.03em; }
  .apx-deck { font-size: 19px; line-height: 1.65; margin: 20px 0 30px; }
  .apx-inner-photo { margin: 34px -18px 60px 12px; padding-bottom: 15px; }
  .apx-inner-photo::before { left: -16px; width: 9px; height: 55px; top: -9px; }
  .apx-inner-photo::after { left: -10px; right: 12px; bottom: 0; top: 15px; }
  .apx-inner-photo img { height: 190px; }
  .apx-inner-photo figcaption { font-size: 16px; padding: 10px 14px; margin: -1px 0 -36px 10px; max-width: calc(100% - 30px); box-shadow: 6px 6px 0 var(--piece-rose); }
  .apx-comparison { width: 100%; margin: 28px 0; font-size: 16px; box-shadow: none; }
  .apx-comparison thead { display: none; }
  .apx-comparison, .apx-comparison tbody, .apx-comparison tr, .apx-comparison td { display: block; }
  .apx-comparison tr { margin-bottom: 28px; padding: 18px 14px; border-left: 5px solid var(--piece-green); background: var(--piece-rose); }
  .apx-comparison td { padding: 13px 0; border-bottom: 0; background: transparent; }
  .apx-comparison td:first-child { padding: 0; font: 400 25px/1.3 var(--piece-display); }
  .apx-comparison td[data-piece-label]::before { content: attr(data-piece-label); display: block; color: var(--piece-ink); font: 400 17px/1.5 var(--piece-display); margin-bottom: 5px; }
  .apx-sources li { padding-left: 12px; }
  .apx-sources p { font-size: 17px; }
  .apx-closing { padding: 34px 18px 26px; }
  .apx-closing::before { width: 58px; height: 16px; top: -16px; }
  .apx-foot-intro { display: block; }
  .apx-foot-brand { font-size: 43px; margin-bottom: 22px; }
  .apx-foot-intro p { font-size: 17px; }
  .apx-foot-links { gap: 12px 20px; font-size: 16px; margin: 28px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}