:root {
   --ground: #15403f;
   --surface: #1a4d4c;
   --surface-2: #225e5c;
   --line: #447e7c;
   --ink-soft: #9bc0be;
   --ink: #ddf8f7;
   --accent: #d2b274;
   --accent-ink: #111;

   --kiku-4d8: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", serif;
   --kiku-083: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --kiku-e1e: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

   --text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
   --text-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.92rem);
   --text-base: clamp(0.98rem, 0.94rem + 0.25vw, 1.08rem);
   --text-md: clamp(1.12rem, 1.05rem + 0.35vw, 1.25rem);
   --text-lg: clamp(1.28rem, 1.18rem + 0.5vw, 1.5rem);
   --text-xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.95rem);
   --text-2xl: clamp(1.85rem, 1.6rem + 1.2vw, 2.45rem);
   --text-3xl: clamp(2.2rem, 1.85rem + 1.8vw, 3.2rem);
   --text-4xl: clamp(2.6rem, 2.1rem + 2.5vw, 4.2rem);
   --text-display: clamp(2.9rem, 2.3rem + 3.2vw, 5.4rem);

   --line-height-tight: 1.12;
   --line-height-heading: 1.22;
   --line-height-body: 1.62;
   --line-height-loose: 1.78;

   --space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
   --space-xs: clamp(0.45rem, 0.38rem + 0.35vw, 0.65rem);
   --space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
   --space-md: clamp(1.1rem, 0.95rem + 0.75vw, 1.5rem);
   --space-lg: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
   --space-xl: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
   --space-2xl: clamp(3.2rem, 2.6rem + 3vw, 5.25rem);
   --space-3xl: clamp(4.5rem, 3.5rem + 4.5vw, 7.5rem);

   --container-max: 1360px;
   --container-pad: clamp(1rem, 0.75rem + 1.5vw, 2.5rem);
   --reading-max: 65ch;
   --radius-sharp: 2px;

   --dock-height: 64px;
   --dock-offset: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
   --header-height: 72px;

   --duration-fast: 140ms;
   --duration-base: 220ms;
   --duration-slow: 380ms;
   --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

   --border-subtle: 1px solid var(--line);
   --border-surface: 1px solid rgba(68, 126, 124, 0.6);
   --shadow-subtle: 0 1px 3px rgba(10, 28, 27, 0.25);
   --shadow-card: 0 8px 24px -6px rgba(9, 26, 25, 0.45);
}

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 16px;
   line-height: var(--line-height-body);
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--kiku-083);
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
   scroll-padding-top: var(--header-height);
}

body {
   min-height: 100vh;
   background-color: var(--ground);
   color: var(--ink);
   overflow-x: hidden;
   position: relative;
   display: flex;

   flex-direction: column;
   padding-bottom: var(--dock-offset);
}

@media (min-width: 1024px) {
   body {
      padding-bottom: 0;
   }
}

img,
picture,
svg,
video {
   display: block;
   max-width: 100%;
   height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--kiku-4d8);
   color: var(--ink);
   font-weight: 600;
   line-height: var(--line-height-heading);
   letter-spacing: -0.015em;
   text-wrap: balance;
   overflow-wrap: break-word;
   word-break: break-word;
}

h1 {
   font-size: var(--text-display);
   line-height: var(--line-height-tight);
   font-weight: 700;
   letter-spacing: -0.025em;
   margin-bottom: var(--space-md);
}

h2 {
   font-size: var(--text-3xl);
   font-weight: 700;
   margin-bottom: var(--space-sm);
}

h3 {
   font-size: var(--text-2xl);
   font-weight: 600;
   margin-bottom: var(--space-xs);
}

h4 {
   font-size: var(--text-xl);
   font-weight: 600;
   margin-bottom: var(--space-2xs);
}

h5 {
   font-size: var(--text-lg);
   font-weight: 600;
}

h6 {
   font-size: var(--text-md);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

p {
   font-size: var(--text-base);
   color: var(--ink);
   max-width: var(--reading-max);
   line-height: var(--line-height-body);
   margin-bottom: var(--space-md);
}

p.lead {
   font-size: var(--text-lg);
   line-height: var(--line-height-heading);
   color: var(--ink);
   font-weight: 400;
   max-width: 58ch;
}

p.standfirst {
   font-family: var(--kiku-4d8);
   font-size: var(--text-xl);
   font-style: italic;
   color: var(--ink);
   line-height: 1.35;
   margin-bottom: var(--space-md);
}

p.caption {
   font-size: var(--text-xs);
   color: var(--ink-soft);
   line-height: var(--line-height-body);
   margin-bottom: 0;
}

small {
   font-size: var(--text-sm);
   color: var(--ink-soft);
}

strong,
b {
   font-weight: 600;

   color: var(--ink);
}

em,
i {
   font-style: italic;
}

a {
   color: var(--ink);
   text-decoration-color: var(--line);
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
   transition: color var(--duration-fast) var(--ease-standard),
      text-decoration-color var(--duration-fast) var(--ease-standard);
}

a:hover {
   color: var(--accent);
   text-decoration-color: var(--accent);
}

a:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
}

ul,
ol {
   padding-left: var(--space-lg);
   margin-bottom: var(--space-md);
   max-width: var(--reading-max);
}

li {
   margin-bottom: var(--space-xs);
   color: var(--ink);
   font-size: var(--text-base);
   line-height: var(--line-height-body);
}

li::marker {
   color: var(--accent);
}

blockquote {
   border-left: 2px solid var(--accent);
   padding-left: var(--space-md);
   margin: var(--space-lg) 0;
   font-family: var(--kiku-4d8);
   font-size: var(--text-xl);
   font-style: italic;
   color: var(--ink);
   max-width: 54ch;
}

blockquote cite {
   display: block;
   font-family: var(--kiku-083);
   font-size: var(--text-xs);
   font-style: normal;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--ink-soft);
   margin-top: var(--space-xs);
}

hr {
   border: 0;
   border-top: var(--border-subtle);
   margin: var(--space-xl) 0;
}

code,
pre,
kbd,
samp {
   font-family: var(--kiku-e1e);
   font-size: 0.9em;
}

code {
   background-color: var(--surface);
   color: var(--ink);
   padding: 0.15em 0.35em;
   border-radius: var(--radius-sharp);
   border: 1px solid var(--line);
}

pre {
   background-color: var(--surface);
   color: var(--ink);
   padding: var(--space-md);
   border: var(--border-subtle);
   border-radius: var(--radius-sharp);
   overflow-x: auto;
   max-width: 100%;
   margin-bottom: var(--space-md);
}

pre code {
   background: none;
   border: 0;
   padding: 0;
}

table {
   width: 100%;
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;
   margin-bottom: var(--space-lg);
}

th,
td {
   padding: var(--space-sm) var(--space-md);
   text-align: left;
   vertical-align: top;
   border-bottom: var(--border-subtle);

   font-size: var(--text-sm);
}

th {
   font-family: var(--kiku-e1e);
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--ink-soft);
   font-weight: 500;
   background-color: var(--surface);
}

td {
   color: var(--ink);
}

button,
input,
select,
textarea {
   font: inherit;
   color: inherit;
}

@media (max-width: 48rem) {
   input,
   select,
   textarea {
      font-size: max(16px, 1rem);
   }
}

.table-wrap {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   margin-bottom: var(--space-lg);
   border: var(--border-subtle);
   background-color: var(--surface);
}

.tabular-nums {
   font-variant-numeric: tabular-nums;
   font-family: var(--kiku-e1e);
}

.container {
   width: 100%;
   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--container-pad);
   padding-right: var(--container-pad);
}

.container--narrow {
   max-width: 960px;
}

.container--reading {
   max-width: var(--reading-max);
}

.flow > * + * {
   margin-top: var(--space-md);
}

.flow-lg > * + * {
   margin-top: var(--space-xl);
}

.visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.skip-link {
   position: absolute;
   top: var(--space-xs);
   left: var(--space-xs);
   z-index: 9999;
   background-color: var(--accent);
   color: var(--accent-ink);
   font-weight: 600;
   font-size: var(--text-sm);
   padding: var(--space-xs) var(--space-md);
   border-radius: var(--radius-sharp);
   text-decoration: none;
   transform: translateY(-160%);
   transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
   transform: translateY(0);
   outline: 2px solid var(--ink);
   outline-offset: 2px;
}

.icon {
   display: inline-block;
   width: 1em;
   height: 1em;
   stroke-width: 0;
   stroke: currentColor;
   fill: currentColor;
   vertical-align: -0.15em;
   flex-shrink: 0;
}

#smooth-wrapper {
   overflow: hidden;
   position: relative;
   width: 100%;
}

#smooth-content {
   overflow: visible;
   width: 100%;
}

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

   html {
      scroll-behavior: auto !important;
   }
}