@charset 'UTF-8';

:root {
    --ground:#e4eae3;
    --ground-panel:#d9e1d8;
    --ground-card:#ecefea;
    --ground-dark:#19251b;
    --ink:#19251b;
    --ink-muted:#38463a;
    --ink-subtle:#4a5c4c;
    --ink-inverse:#e4eae3;
    --border:#c2cdc0;
    --border-strong:#8b9c88;
    --border-subtle:#d2dcd0;
    --border-inverse:#2d3e30;
    --accent:#a35010;
    --accent-hover:#863f08;
    --accent-light:#f2e3d5;
    --signal:#2d6e42;
    --signal-bg:#e1efe4;
    --error:#9e2a2b;
    --error-bg:#fbeaea;

    --jora-acd:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --jora-ac7:"Archivo", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --jora-226:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --fs-xs:clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
    --fs-sm:clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
    --fs-base:clamp(0.96rem, 0.92rem + 0.22vw, 1.06rem);
    --fs-md:clamp(1.12rem, 1.05rem + 0.35vw, 1.28rem);
    --fs-lg:clamp(1.36rem, 1.24rem + 0.6vw, 1.64rem);
    --fs-xl:clamp(1.72rem, 1.5rem + 1.1vw, 2.2rem);
    --fs-2xl:clamp(2.15rem, 1.8rem + 1.75vw, 2.95rem);
    --fs-3xl:clamp(2.75rem, 2.2rem + 2.75vw, 4.1rem);

    --lh-tight:1.12;
    --lh-display:1.18;
    --lh-heading:1.25;
    --lh-prose:1.62;
    --lh-mono:1.45;

    --ls-tight:-0.03em;
    --ls-heading:-0.015em;
    --ls-normal:0em;
    --ls-tracked:0.05em;
    --ls-hud:0.08em;

    --space-2xs:0.25rem;
    --space-xs:0.5rem;
    --space-sm:0.75rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2rem;
    --space-2xl:3rem;
    --space-3xl:4.5rem;
    --space-4xl:6rem;
    --space-5xl:8rem;

    --col-narrow:46rem;
    --col-measure:68ch;
    --col-grid:74rem;
    --col-wide:84rem;

    --header-height:4.25rem;
    --header-compact-height:3.5rem;
    --line-thickness:1px;
    --tick-size:6px;
    --corner-size:8px;

    --dur-instant:120ms;
    --dur-fast:180ms;
    --dur-base:240ms;
    --dur-slow:400ms;
    --ease-standard:cubic-bezier(0.2, 0, 0, 1);
    --ease-out:cubic-bezier(0, 0, 0.2, 1);
    --ease-in:cubic-bezier(0.4, 0, 1, 1);
    --ease-snappy:cubic-bezier(0.16, 1, 0.3, 1);

    --shadow-hud:0 1px 2px rgba(25, 37, 27, 0.05);
    --shadow-card:0 4px 12px rgba(25, 37, 27, 0.06);
    --shadow-raised:0 12px 28px rgba(25, 37, 27, 0.1);

    --shadow-sheet:0 20px 48px rgba(25, 37, 27, 0.14);
}

*,
*::before,
*::after {

    box-sizing:border-box;
    margin:0;
    padding:0;
}

html {
    font-size:16px;
    background-color:var(--ground);
    color:var(--ink);

    color-scheme:light;
    scroll-behavior:smooth;
    scroll-padding-block-start:var(--header-compact-height);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body {
    min-height:100vh;
    font-family:var(--jora-ac7);
    font-size:var(--fs-base);
    line-height:var(--lh-prose);
    color:var(--ink);
    background-color:var(--ground);
    overflow-x:hidden;
    position:relative;
}

body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    opacity:0.022;
    background-image: 
        linear-gradient(var(--ink) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink) 1px, transparent 1px);
    background-size:48px 48px;
}

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

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

a {
    color:inherit;
    text-decoration-skip-ink:auto;
}

ul,
ol {
    list-style:none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:var(--jora-acd);
    font-weight:600;
    line-height:var(--lh-heading);
    letter-spacing:var(--ls-heading);
    color:var(--ink);
    text-wrap:balance;
}

h1 {
    font-size:var(--fs-3xl);
    line-height:var(--lh-display);
    letter-spacing:var(--ls-tight);
}

h2 {
    font-size:var(--fs-2xl);
    line-height:var(--lh-tight);
}

h3 {
    font-size:var(--fs-xl);
}

h4 {
    font-size:var(--fs-lg);
}

h5 {
    font-size:var(--fs-md);
}

h6 {
    font-size:var(--fs-base);
    font-family:var(--jora-226);
    text-transform:uppercase;
    letter-spacing:var(--ls-hud);
}

p {
    max-width:var(--col-measure);
}

p + p {
    margin-top:1.15em;
}

strong,
b {
    font-weight:600;
    color:var(--ink);
}

small {
    font-size:var(--fs-sm);
    color:var(--ink-muted);
}

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

table {
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
}

th,
td {
    text-align:left;
    vertical-align:top;
}

.skip-link {
    position:fixed;
    top:var(--space-xs);
    left:var(--space-xs);
    z-index:10000;
    padding:var(--space-xs) var(--space-md);
    background:var(--ink);
    color:var(--ground);
    font-family:var(--jora-226);
    font-size:var(--fs-xs);
    text-transform:uppercase;
    letter-spacing:var(--ls-hud);
    border:1px solid var(--accent);
    transform:translateY(-160%);
    transition:transform var(--dur-fast) var(--ease-snappy);
}

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

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

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

.container-narrow {
    width:100%;
    max-width:var(--col-narrow);
    margin-inline:auto;
    padding-inline:var(--space-md);
}

.container-measure {
    width:100%;
    max-width:var(--col-measure);
    margin-inline:auto;
    padding-inline:var(--space-md);
}

.container-grid {
    width:100%;
    max-width:var(--col-grid);
    margin-inline:auto;
    padding-inline:var(--space-md);
}

.container-wide {
    width:100%;
    max-width:var(--col-wide);
    margin-inline:auto;
    padding-inline:var(--space-md);
}

@media (min-width: 768px) {
    .container-narrow,
    .container-measure,
    .container-grid,
    .container-wide {
        padding-inline:var(--space-xl);
    }
}

.editorial-col {
    width:100%;
    max-width:44rem;
    margin-inline:auto;
}

.hud-tag {
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    font-family:var(--jora-226);
    font-size:var(--fs-xs);
    font-weight:500;
    letter-spacing:var(--ls-hud);
    text-transform:uppercase;
    color:var(--ink-muted);
    background:var(--ground-panel);
    border:1px solid var(--border);
    padding:0.2rem 0.55rem;
    line-height:1.3;
}

.hud-tag--signal {
    color:var(--signal);
    border-color:var(--signal);
    background:var(--signal-bg);
}

.hud-tag--signal::before {
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    background-color:var(--signal);
    border-radius:50%;
    box-shadow:0 0 0 2px rgba(45, 110, 66, 0.2);
}

.hud-tag--accent {
    color:#8c3f05;
    border-color:#8c3f05;
    background:#f7ede3;
}

.hud-tag--outline {
    background:transparent;
}

.hud-frame {
    position:relative;
    border:1px solid var(--border);
    background-color:var(--ground);
}

.hud-frame::before,
.hud-frame::after {
    content:"";
    position:absolute;
    width:var(--corner-size);
    height:var(--corner-size);
    pointer-events:none;
    z-index:2;
}

.hud-frame::before {
    top:-1px;
    left:-1px;
    border-top:2px solid var(--accent);
    border-left:2px solid var(--accent);
}

.hud-frame::after {
    bottom:-1px;
    right:-1px;
    border-bottom:2px solid var(--accent);
    border-right:2px solid var(--accent);
}

.hud-frame-corners {
    position:relative;
}

.hud-frame-corners > .corner-tr {
    position:absolute;
    top:-1px;
    right:-1px;
    width:var(--corner-size);
    height:var(--corner-size);
    border-top:2px solid var(--accent);
    border-right:2px solid var(--accent);
    pointer-events:none;
    z-index:2;
}

.hud-frame-corners > .corner-bl {
    position:absolute;
    bottom:-1px;
    left:-1px;
    width:var(--corner-size);
    height:var(--corner-size);
    border-bottom:2px solid var(--accent);
    border-left:2px solid var(--accent);
    pointer-events:none;
    z-index:2;
}

.hud-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    padding:0.35rem 0.75rem;
    font-family:var(--jora-226);
    font-size:var(--fs-xs);
    text-transform:uppercase;
    letter-spacing:var(--ls-hud);
    background-color:var(--ground-panel);
    border-bottom:1px solid var(--border);
    color:var(--ink-muted);
}

.hud-bar > * {
    min-width:0;
}

@media (max-width: 380px) {
    .hud-bar {
        flex-direction:column;
        align-items:flex-start;
        gap:0.2rem;
    }
}

.hud-bar--dark {
    background-color:var(--ink);
    color:var(--ground);
    border-color:var(--border-inverse);
}

.drawn-line-spine {
    position:relative;
}

.drawn-line-spine::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:1.25rem;
    width:1px;
    background-color:var(--ink-muted);
    opacity:0.35;
    pointer-events:none;
}

@media (min-width: 768px) {
    .drawn-line-spine::before {
        left:50%;
        transform:translateX(-50%);
    }
}

.prose {
    font-family:var(--jora-ac7);
    font-size:var(--fs-base);
    line-height:var(--lh-prose);
    color:var(--ink);
}

.prose h2 {
    margin-top:2.2em;
    margin-bottom:0.6em;
    font-size:var(--fs-xl);
}

.prose h3 {
    margin-top:1.8em;
    margin-bottom:0.5em;
    font-size:var(--fs-lg);
}

.prose h4 {
    margin-top:1.4em;
    margin-bottom:0.4em;
    font-size:var(--fs-md);
}

.prose p {
    margin-bottom:1.15em;
}

.prose ul,
.prose ol {
    margin-block:1.15em;
    padding-left:1.5rem;
}

.prose ul {
    list-style:square;
}

.prose ol {
    list-style:decimal;
}

.prose li {
    margin-bottom:0.4em;
}

.prose blockquote {
    margin-block:1.8em;
    padding:1rem 1.4rem;
    border-left:3px solid var(--accent);
    background-color:var(--ground-panel);
    font-style:italic;
    color:var(--ink);
}

.prose hr {
    border:0;
    height:1px;
    background-color:var(--border);
    margin-block:2.5em;
}

.prose a {
    color:#8c3f05;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color var(--dur-fast) var(--ease-standard);
}

.prose a:hover {
    color:var(--accent-hover);
}

.hud-table-wrapper {
    width:100%;
    overflow-x:auto;
    border:1px solid var(--border);
    background:var(--ground);
    margin-block:var(--space-lg);
    -webkit-overflow-scrolling:touch;
}

.hud-table {
    width:100%;
    border-collapse:collapse;
    font-family:var(--jora-ac7);
    font-size:var(--fs-sm);
    line-height:1.45;
}

.hud-table th {
    font-family:var(--jora-226);
    font-size:var(--fs-xs);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:var(--ls-hud);
    color:var(--ink);
    background-color:var(--ground-panel);
    padding:0.75rem 1rem;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.hud-table td {
    padding:0.85rem 1rem;
    border-bottom:1px solid var(--border-subtle);
    color:var(--ink);
}

.hud-table tr:last-child td {
    border-bottom:none;
}

.hud-table tr:hover td {
    background-color:rgba(217, 225, 216, 0.4);
}

.hud-table .mono {
    font-family:var(--jora-226);
    font-size:var(--fs-xs);
    letter-spacing:var(--ls-tracked);
}

.hud-table .price-val {
    font-family:var(--jora-226);
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
}

@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;
    }
}