@charset "utf-8";

/* -------------------------------------------- tokens */

:root {
    /* brand — sampled from design.jpg */
    --olive: #777336;
    --olive-dark: #6a662f;
    --orange: #F25829;
    --orange-500: #f3582a;

    /* neutrals */
    --ink: #1c1511;
    --ink-500: #6b6259;
    --muted: #6f6960;
    --sand: #d7d6c4;
    --sand-100: #e7e6da;
    --paper: #f4f4f4;
    --line: #d8d5cd;
    --brown-900: #2f1e14;
    --footer: #0C0407;
    --btn-grey: #c1c1c1;

    /* type */
    --font-display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
    --font-sans: "Noto Sans", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

    /* fluid type scale — clamp(min, preferred, max) across 375–1440px */
    --fs-display: clamp(3rem, 8vw, 6.25rem);
    --fs-h1: clamp(1.75rem, 3.4vw, 2.75rem);
    --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
    --fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
    --fs-lead: clamp(1rem, 1.4vw, 1.125rem);
    --fs-body: clamp(0.875rem, 1.05vw, 1rem);
    --fs-cap: clamp(0.75rem, 0.9vw, 0.8125rem);

    /* layout */
    --container: 1220px;
    --gutter: 2.5rem;
    --header-h: 80px;

    /* motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* -------------------------------------------- reset */

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

/* scroll-behavior is the whole effect for anyone Lenis does not run for:
   reduced motion, no JS, blocked CDN. No media query needed -- browsers force
   it back to auto on their own when the user prefers reduced motion.
   scroll-padding-top keeps the sticky header off the heading you jump to. */
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }

/* Required by Lenis (v1.3.26). Inlined rather than pulled from the CDN as a
   second render-blocking stylesheet -- it is only these few rules. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body { margin: 0; overflow-x: clip; background: #fff; color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.9; letter-spacing: 0.08em; font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 { line-height: 1.4; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }

img, svg, video { display: block; max-width: 100%; height: auto; }
/* Must outrank the display rules above, or `hidden` elements stay laid out
   and keep hit-testing while invisible. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

/* -------------------------------------------- layout */

._before,
._after { position: relative; }

._before::before, 
._after::after { display: block; content: ''; z-index: 1; margin: auto; position: absolute; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.container-narrow { width: 100%; max-width: 840px; margin-inline: auto; padding-inline: var(--gutter); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; padding: 0.5rem 1rem; background: var(--ink); color: #fff; border-radius: 3px; }

/* -------------------------------------------- position */

.pos-r { position: relative; z-index: 1; }
.pos-a { position: absolute; z-index: 0; }
.pos-f { position: fixed; }
.pos-sticky { position: sticky; }
.z-10 { z-index: 10; }

.pos-center-all { top: 50%; left: 50%; transform: translate(-50%, -50%); margin: auto; }

/* -------------------------------------------- flex */

.flex { display: flex; flex-wrap: wrap; }
.fx-nowrap { flex-wrap: nowrap; }
.fx-col { flex-direction: column; }
.fx-center { justify-content: center; }
.fx-start { justify-content: flex-start; }
.fx-end { justify-content: flex-end; }
.fx-sb { justify-content: space-between; }
.fx-ai-start { align-items: flex-start; }
.fx-ai-center { align-items: center; }
.fx-ai-end { align-items: flex-end; }
.fx-ai-stretch { align-items: stretch; }
.fx-1 { flex: 1; }
.fx-shrink-0 { flex-shrink: 0; }
.fx-row-reverse { flex-direction: row-reverse; }

/* -------------------------------------------- text */

.txt-center { text-align: center; }
.txt-left { text-align: left; }
.txt-right { text-align: right; }
.text-justify { text-align: justify; }

.ff-display { font-family: var(--font-display); }

.fs-cap { font-size: var(--fs-cap); }
.fs-body { font-size: var(--fs-body); }
.fs-lead { font-size: var(--fs-lead); }
.fs-h3 { font-size: var(--fs-h3); }
.fs-h2 { font-size: var(--fs-h2); }
.fs-h1 { font-size: var(--fs-h1); }

.fs-14 { font-size: 0.875rem; }
.fs-20 { font-size: 1.25rem; }
.fs-24 { font-size: 1.5rem; }
.fs-32 { font-size: 2rem; }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.ls-label { letter-spacing: 0.18em; }
.uppercase { text-transform: uppercase; }

.c-olive { color: var(--olive); }
.c-muted { color: var(--muted); }
.c-white { color: #fff; }

/* -------------------------------------------- bg */

.bg-white { background-color: #fff; }
.bg-sand { background-color: var(--sand); }
.bg-paper { background-color: var(--paper); }
.bg-olive { background-color: var(--olive); }
.bg-orange { background-color: var(--orange); }
.bg-footer { background-color: var(--footer); }
.bg-cover { background-position: center; background-repeat: no-repeat; background-size: cover; }

/* -------------------------------------------- spacing
   4px per step, matching the design's rhythm. */

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }

.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-inline: auto; }

.pd-1 { padding: 1rem; }
.pd-2 { padding: 2rem; }
.pd-tb-1 { padding-block: 1rem; }
.pd-tb-2 { padding-block: 2rem; }
.pd-tb-4 { padding-block: 4rem; }
.pd-tb-6 { padding-block: 6rem; }
.pd-lr-1 { padding-inline: 1rem; }
.pd-lr-2 { padding-inline: 2rem; }

/* -------------------------------------------- misc */

.br-sm { border-radius: 6px; }
.br-full { border-radius: 999px; }
.hidden { display: none !important; }

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {
    .tb-none { display: none !important; }
}

/* -------------------------------------------- sp */

@media screen and (max-width: 767px) {
    html { font-size: 14px; }
    :root { --gutter: 1.25rem; --header-h: 64px; }

    .sp-none { display: none !important; }
    .sp-block { display: block !important; }

    .sp\:w-full { width: 100% !important; max-width: none !important; }
    .sp\:text-justify { text-align: justify; }
}

/* -------------------------------------------- pc */

@media screen and (min-width: 768px) {
    .pc-none { display: none !important; }
}

@media screen and (min-width: 1100px) {
    .pc\:pos-a { position: absolute; z-index: 0; }
}

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {
    .tablet\:w-full { width: 100%; max-width: none; }

    .tablet\:txt-center { text-align: center; }

    .fs-24 { font-size: clamp(14px, 2.5vw, 1.5rem); }
    .fs-32 { font-size: clamp(16px , 4.75vw, 2rem); }
}