@layer reset, utilities, components, motion;

@layer reset {
  :root {
    color-scheme: light dark;
    --paper: #f4f1e8;
    --ink: #2d2d2d;
    --red: #d94646;
    --blue: #4a7ba7;
    --yellow: #f4d03f;
    --slate: #2e4053;
    --grey: #95a5a6;
    --link: #315e86;
    --muted: #535e60;
    --line: #95a5a6;
    --panel: #e9e6dc;
    --focus: #315e86;
    --display: "Avenir Next", "Century Gothic", "Futura", ui-sans-serif, system-ui, sans-serif;
    --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    --section-space: clamp(4rem, 8vw, 8rem);
    /* Normalized response of a unit-mass spring: stiffness 120, damping 20, sampled over 480 ms. */
    --spring: linear(0, .1018 10%, .2987 20%, .4979 30%, .6633 40%, .7871 50%, .8734 60%, .9303 70%, .9662 80%, .9877 90%, 1);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-padding-top: 2rem; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--body); }
  h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
  h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; }
  h1 { font-size: 2.25rem; line-height: 1.12; letter-spacing: -.04em; }
  h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.025em; }
  h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; }
  a { color: var(--link); text-underline-offset: .22em; text-decoration-thickness: 1px; }
  button, input, select, textarea { font: inherit; }
  img { display: block; max-width: 100%; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; border-radius: 3px; }
  ::selection { background: var(--yellow); color: #2d2d2d; }
  [hidden] { display: none !important; }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #252a2e;
      --ink: #f4f1e8;
      --panel: #2e4053;
      --link: #a9cceb;
      --muted: #bac4c5;
      --line: #73858b;
      --focus: #a9cceb;
    }
  }
}

@layer utilities {
  .u-container { width: min(100%, 1280px); margin-inline: auto; padding-inline: 1.5rem; }
  .u-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
  .u-grid > * { min-width: 0; }
  .u-col--4 { grid-column: span 4; }
  .u-col--5 { grid-column: span 5; }
  .u-col--6 { grid-column: span 6; }
  .u-col--7 { grid-column: span 7; }
  .u-col--8 { grid-column: span 8; }
  .u-stack > * + * { margin-top: 1.5rem; }
  .u-stack--tight > * + * { margin-top: 1rem; }
  .u-copy { max-width: 72ch; }
  .u-section { margin-top: var(--section-space); }
  .u-pad { padding: 2rem; }
  .u-panel { background: var(--panel); border-radius: .5rem; }
  .u-rule { border-top: 1px solid var(--line); padding-top: 2rem; }
  .u-muted { color: var(--muted); }
  .u-label { font-family: var(--display); font-size: .875rem; font-weight: 500; letter-spacing: .055em; }
  .u-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .u-dark { color: #f4f1e8; background: #2e4053; border-radius: .5rem; }
  .u-dark a { color: #c0ddf5; }
  .u-tap { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; min-width: 44px; padding-block: .5rem; font-size: 1rem; }
  .u-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  @media (max-width: 760px) {
    .u-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .u-col--4, .u-col--5, .u-col--6, .u-col--7, .u-col--8 { grid-column: 1 / -1; }
    .u-pad { padding: 1.5rem; }
  }
}

@layer components {
  .skip { position: fixed; z-index: 20; top: .75rem; left: 1.5rem; padding: .75rem 1rem; background: var(--paper); transform: translateY(-200%); }
  .skip:focus { transform: translateY(0); }
  .masthead { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
  .masthead__name { display: flex; align-items: center; gap: 1rem; font-family: var(--display); font-weight: 700; line-height: 1.35; }
  .masthead__name span { display: block; }
  .masthead__sub { font-weight: 400; }
  .masthead__link { flex-shrink: 0; }
  .mark { display: block; flex: 0 0 32px; width: 32px; height: 32px; background: var(--red); border-radius: 50%; position: relative; }
  .mark::after { content: ""; position: absolute; inset: 8px -5px -3px 12px; background: var(--blue); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); mix-blend-mode: multiply; }
  .hero { padding-top: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .hero__copy { padding-block: 1.5rem; }
  .hero__title { margin-top: 1rem; font-size: clamp(2.5rem, 5vw, 4rem); max-width: 12.5ch; }
  .hero__intro { margin-top: 1.5rem; max-width: 49ch; font-size: 1rem; }
  .hero__action { margin-top: 2rem; }
  .hero__guide { padding-left: .75rem; border-left: 3px solid var(--red); font-size: 1rem; }
  .button { display: inline-flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .75rem 1rem; border: 1px solid var(--ink); border-radius: .5rem; background: var(--ink); color: var(--paper); font-size: 1rem; text-decoration: none; font-weight: 500; }
  .button:hover { background: var(--slate); color: #f4f1e8; }
  .button__arrow { font-size: 1.5rem; line-height: 1; }
  .print { overflow: hidden; isolation: isolate; position: relative; min-height: 32rem; border-radius: .5rem; background: #e5e0d5; }
  .print__image { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 2; color: transparent; font-size: 0; }
  .print__bed { position: absolute; inset: 0; overflow: hidden; }
  .print__bed::before { content: ""; position: absolute; inset: 10%; border: 1px solid #95a5a6; }
  .print__disc { position: absolute; left: 12%; top: 19%; width: 57%; aspect-ratio: 1; background: #d94646; border-radius: 50%; }
  .print__plane { position: absolute; left: 34%; top: 35%; width: 60%; height: 49%; background: #4a7ba7; clip-path: polygon(50% 0, 100% 100%, 0 100%); mix-blend-mode: multiply; transform: translate(6px, 4px); }
  .print__tile { position: absolute; left: 10%; bottom: 14%; width: 26%; aspect-ratio: 1; background: #f4d03f; border-radius: .5rem; }
  .print--wide { min-height: 27rem; }
  .print--wide .print__disc { width: 46%; top: 12%; left: 36%; }
  .print--wide .print__plane { left: 7%; top: 33%; width: 61%; height: 54%; }
  .print--wide .print__tile { left: 59%; bottom: 12%; width: 29%; }
  .print--check .print__disc { left: 38%; top: 37%; width: 48%; }
  .print--check .print__plane { top: 12%; left: 12%; width: 60%; }
  .print--check .print__tile { width: 37%; bottom: 16%; left: 13%; }
  .jump { margin-top: 2.5rem; max-width: 28rem; position: relative; border: 1px solid var(--line); border-radius: .5rem; }
  .jump__label { cursor: pointer; min-height: 52px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; font-weight: 500; }
  .jump__label::-webkit-details-marker { display: none; }
  .jump__shape { width: .8rem; height: .8rem; background: var(--link); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform 480ms var(--spring); }
  .jump[open] .jump__shape { transform: rotate(180deg); }
  .jump__links { display: grid; padding: .5rem 1rem 1rem; border-top: 1px solid var(--line); }
  .jump__links a { min-height: 48px; display: flex; align-items: center; padding-block: .5rem; }
  .jump__links a[aria-current="location"] { text-decoration-thickness: 3px; }
  .section-heading { align-content: start; }
  .section--reverse > .section-heading { grid-column: 9 / -1; grid-row: 1; }
  .section--reverse > .section__body { grid-column: 1 / span 8; grid-row: 1; }
  .section-heading__shape { display: block; margin-bottom: 1.5rem; width: 4rem; height: 4rem; border-radius: 50%; background: var(--red); }
  .section-heading__shape--triangle { background: var(--blue); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .section-heading__shape--square { background: var(--yellow); border-radius: .5rem; }
  .section-heading__title { max-width: 21ch; }
  .section-heading__note { max-width: 29ch; margin-top: 1rem; }
  .checklist { list-style: none; padding: 0; }
  .checklist__item { position: relative; padding-left: 2.75rem; }
  .checklist__item + .checklist__item { margin-top: 2rem; }
  .checklist__item::before { content: ""; position: absolute; left: 0; top: .3rem; width: 20px; height: 20px; border: 1.5px solid var(--muted); border-radius: 3px; }
  .checklist__title { margin-bottom: .75rem; }
  .checklist__item p + p { margin-top: .75rem; }
  .note-link { display: flex; align-items: center; min-height: 44px; width: fit-content; padding: .5rem 0; margin-top: .5rem; font-size: 1rem; }
  .lane { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding-block: 2rem; border-top: 1px solid var(--line); }
  .lane-list { padding: 0; list-style: none; }
  .lane:first-child { padding-top: 0; border: 0; }
  .lane__letter { display: grid; place-content: center; align-self: start; width: 3rem; height: 3rem; border-radius: 50%; background: var(--red); color: #2d2d2d; font: 700 1.25rem/1 var(--display); }
  .lane__letter--blue { background: var(--blue); color: #fff; border-radius: .5rem; }
  .lane__letter--yellow { background: var(--yellow); border-radius: .5rem; }
  .lane__body p { margin-top: 1rem; }
  .route { padding: 2rem; border: 1px solid var(--line); border-radius: .5rem; }
  .route__title { margin-bottom: 1rem; }
  .route p + p { margin-top: 1rem; }
  .bill { display: grid; grid-template-columns: minmax(0, 1fr); }
  .bill__item { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.4fr); gap: 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
  .bill__item:first-child { border-top: 1px solid var(--line); }
  .bill__item dt { font-weight: 600; }
  .price { border-left: .5rem solid var(--yellow); }
  .price__range { font-size: 1rem; line-height: 1.6; }
  .price__value { display: inline-block; margin-right: .75rem; font-family: var(--mono); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.065em; line-height: 1.15; }
  .price p + p { margin-top: 1rem; }
  .record { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
  .record + .record { margin-top: 2rem; }
  .record__title { margin-bottom: 1rem; }
  .record p + p { margin-top: .75rem; }
  .record__link { margin-top: 1rem; }
  .takeaway { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2rem; border: 1px solid var(--line); border-radius: .5rem; }
  .takeaway__link { display: inline-flex; align-items: center; gap: 1rem; min-height: 52px; padding: .75rem 0; font-weight: 500; }
  .sources { margin-top: var(--section-space); }
  .sources__list { list-style: none; padding: 0; }
  .sources__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--line); }
  .sources__letter { font-family: var(--mono); padding-top: .6rem; color: var(--muted); }
  .sources__link { display: flex; align-items: center; width: fit-content; min-height: 44px; padding-block: .5rem; }
  .sources__item p { margin-top: .5rem; max-width: 65ch; }
  .directory { margin-top: var(--section-space); padding-block: clamp(3rem, 6vw, 6rem); background: #2d2d2d; color: #f4f1e8; }
  .directory a { color: #c0ddf5; }
  .directory :focus-visible { outline-color: #c0ddf5; }
  .directory__title { max-width: 16ch; font-size: 2.25rem; }
  .directory__nav { display: grid; gap: 0; }
  .directory__link { min-height: 80px; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 1rem; padding-block: 1rem; text-decoration: none; border-bottom: 1px solid #95a5a6; }
  .directory__link:first-child { border-top: 1px solid #95a5a6; }
  .directory__link:hover { color: #f4d03f; }
  .directory__link[aria-current="page"] { color: #f4f1e8; }
  .directory__link[aria-current="page"] .directory__key { background: #f4d03f; color: #2d2d2d; }
  .directory__key { display: grid; place-content: center; width: 32px; height: 32px; border: 1px solid #95a5a6; border-radius: .5rem; font-family: var(--mono); font-size: 1rem; }
  .directory__name { font-family: var(--display); font-size: 1.25rem; font-weight: 700; display: block; }
  .directory__desc { display: block; font-size: 1rem; }
  .directory__arrow { font-size: 1.5rem; }
  .directory__line { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #95a5a6; max-width: 72ch; font-size: 1rem; }
  .error { max-width: 72ch; padding-top: var(--section-space); }
  .error__title { margin-top: 1rem; font-size: clamp(2.5rem, 5vw, 4rem); }
  .error__copy { margin-top: 1.5rem; }
  @media (max-width: 760px) {
    .masthead { gap: 1rem; }
    .masthead__name { gap: .75rem; }
    .masthead__link { padding-inline: .25rem; }
    .hero { gap: 2rem; }
    .hero__copy { padding-block: 0; }
    .hero__title { max-width: 15ch; }
    .print { min-height: 22rem; }
    .print--wide { min-height: 19rem; }
    .jump { max-width: none; margin-top: 1.5rem; }
    .section-heading__shape { width: 3rem; height: 3rem; margin-bottom: 1rem; }
    .section-heading__title, .section-heading__note { max-width: none; }
    .section--reverse > .section-heading, .section--reverse > .section__body { grid-column: 1 / -1; grid-row: auto; }
    .bill__item { grid-template-columns: 1fr; gap: .5rem; }
    .takeaway { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; }
    .takeaway__link { border-top: 1px solid var(--line); }
    .directory__title { max-width: 20ch; }
    .directory__link { min-height: 96px; gap: .75rem; }
  }
  @media (prefers-color-scheme: dark) {
    .mark::after { mix-blend-mode: screen; }
    .print { border: 1px solid var(--line); }
  }
}

@layer motion {
  .hero__copy, .print { animation: grid-entry 480ms var(--spring) both; }
  .print__disc { animation: ink-entry 480ms var(--spring) both; }
  .print__plane { animation: plane-entry 480ms var(--spring) both; }
  .button, .directory__link { transition: background-color 480ms var(--spring), color 480ms var(--spring); }
  .jump__links { animation: menu-entry 480ms var(--spring) both; }
  :target { scroll-margin-block: 2rem; }
  @keyframes grid-entry { from { transform: translateY(16px); } to { transform: translateY(0); } }
  @keyframes ink-entry { from { transform: translate(-8px, 8px) rotate(-6deg); } to { transform: translate(0, 0) rotate(0); } }
  @keyframes plane-entry { from { transform: translate(14px, -4px); } to { transform: translate(6px, 4px); } }
  @keyframes menu-entry { from { transform: translateY(-8px); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}