@charset "UTF-8";
:root {
  color-scheme: light;
  --color-background: #ffffff;
  --color-foreground: #171717;
  --color-surface: #ffffff;
  --color-surface-muted: #f9fafb;
  --color-surface-inset: #f3f4f6;
  --color-text-primary: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #6b7280;
  --color-text-muted: #7b8291;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --flow-a: rgba(230,230,230,1);
  --flow-b: rgba(250,250,250,1);
  --flow-c: rgba(255,255,255,1);
  --flow-d: rgba(245,245,245,1);
  --flow-e: rgba(235,235,235,1);
  --card-shadow: 0 1px 2px rgba(0,0,0,.05);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.beach {
  --color-background: #FDF6E3;
  --color-foreground: #7A6D62;
  --color-surface: #FDF6E3;
  --color-surface-muted: #F5EFDC;
  --color-surface-inset: #EEE8D5;
  --color-text-primary: #6B5C50;
  --color-text-secondary: #7A6D62;
  --color-text-tertiary: #968A80;
  --color-text-muted: #A89E94;
  --color-border: #E6DFC8;
  --color-border-light: #EEE8D5;
  --flow-a: rgba(238,232,213,1);
  --flow-b: rgba(245,239,220,1);
  --flow-c: rgba(253,246,227,1);
  --flow-d: rgba(248,242,222,1);
  --flow-e: rgba(240,234,216,1);
}
.dark {
  color-scheme: dark;
  --color-background: #1A1B1E;
  --color-foreground: #B0AEA9;
  --color-surface: #262729;
  --color-surface-muted: #222325;
  --color-surface-inset: #151617;
  --color-text-primary: #B0AEA9;
  --color-text-secondary: #ACA9A4;
  --color-text-tertiary: #8A8783;
  --color-text-muted: #6E6B67;
  --color-border: rgba(255,255,255,.08);
  --color-border-light: rgba(255,255,255,.04);
  --flow-a: rgba(24,25,28,1);
  --flow-b: rgba(26,27,30,1);
  --flow-c: rgba(30,31,34,1);
  --flow-d: rgba(28,29,32,1);
  --flow-e: rgba(25,26,29,1);
  --card-shadow: 0 1px 2px rgba(0,0,0,.14);
}
* { box-sizing: border-box; }
html { background: var(--color-background); scroll-padding-top: 28px; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--flow-a) 0%, var(--flow-b) 25%, var(--flow-c) 50%, var(--flow-d) 75%, var(--flow-e) 100%);
  background-size: 600% 600%;
  background-position: 38% 45%;
  background-attachment: fixed;
  color: var(--color-foreground);
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--color-text-tertiary); outline-offset: 7px; border-radius: 4px; }
::selection { background: var(--color-surface-inset); color: var(--color-text-primary); }
.site { max-width: 1328px; margin: 0 auto; padding: 0 64px; }
header { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--color-text-primary); font-size: 18px; line-height: 1.5; font-weight: 400; letter-spacing: -.3px; }
.brand-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-tertiary); }
.header-link { font-size: 13px; color: var(--color-text-secondary); padding: 8px 0; }
.header-link:hover { color: var(--color-text-primary); }
.hero { padding: 62px 0 72px; }
h1 { margin: 0; font-size: clamp(72px, 10vw, 132px); line-height: 1.06; font-weight: 300; letter-spacing: -.075em; color: var(--color-text-primary); }
h1 span { font-weight: 300; }
.about { padding: 28px 0 80px; border-top: 1px solid var(--color-border); }
.page-title { margin-bottom: 40px; }
.page-title h2 { font-size: 14px; line-height: 1.6; font-weight: 400; color: var(--color-text-secondary); margin: 0; }
.statement {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 1.8fr);
  gap: 80px;
  padding: 0 0 44px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--color-border);
}
.statement:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.question { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-content: start; align-items: baseline; gap: 14px; }
.number { color: var(--color-text-tertiary); font-size: 12px; line-height: 1.6; }
h3 { max-width: 310px; font-size: 25px; line-height: 1.65; font-weight: 400; color: var(--color-text-primary); margin: 0; text-wrap: pretty; }
.answer { padding-top: 4px; font-size: 15px; line-height: 2.15; color: var(--color-text-secondary); overflow-wrap: break-word; }
p { margin: 0; }
ul { list-style: disc; margin: 30px 0 0; padding: 0 0 0 18px; }
li { padding-left: 7px; margin-bottom: 20px; }
li::marker { color: var(--color-text-tertiary); font-size: 10px; }
li:last-child { margin-bottom: 0; }
@media (max-width: 950px) {
  .site { padding: 0 36px; }
  .hero { padding: 50px 0 60px; }
  .statement { grid-template-columns: minmax(190px, 1fr) minmax(0, 1.65fr); gap: 40px; }
  h3 { font-size: 22px; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 26px; }
  .site { padding: 0 24px; }
  header { height: 72px; }
  .wordmark { font-size: 16px; }
  .header-link { font-size: 12px; }
  .hero { padding: 38px 0 48px; }
  h1 { font-size: clamp(68px, 19.2vw, 114px); line-height: 1.04; letter-spacing: -.07em; }
  h1 span { display: block; }
  .about { padding: 28px 0 65px; }
  .page-title { margin-bottom: 30px; }
  .page-title h2 { font-size: 13px; }
  .statement { grid-template-columns: 1fr; gap: 23px; padding-bottom: 38px; margin-bottom: 36px; }
  .question { gap: 9px; grid-template-columns: 15px minmax(0, 1fr); }
  h3 { max-width: 290px; font-size: 22px; line-height: 1.6; }
  .answer { font-size: 14px; line-height: 2.1; padding: 0; }
  ul { margin-top: 26px; padding-left: 15px; }
  li { padding-left: 5px; margin-bottom: 18px; }
}