@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------*/
/* ========= RESET ========= */
/*--------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }

/*--------------------------------------------*/
/* ========= Master Variables ========= */
/*--------------------------------------------*/
:root {

  /* == Color == */
  --color__paper: #E8D7B0;
  --color__paper-dark: #DCC896;
  --color__ink: #3B3A32;
  --color__red: #B84A32;
  --color__ochre: #C48A32;
  --color__olive: #53665A;
  --color__paper-rgb: 232, 215, 176;
  --color__ink-rgb: 59, 58, 50;

  /* == Font Family == */
  --font-family__ja: "Zen Kaku Gothic New", sans-serif;
  --font-family__en: "Oswald", sans-serif;
  --font-family__hand: "Rock Salt", cursive;

  /* == Font Size == */
  --font-size-xs_12px: 0.75rem;
  --font-size-sm_14px: 0.875rem;
  --font-size-md_16px: 1rem;
  --font-size-lg_18px: 1.125rem;
  --font-size-xl_24px: 1.5rem;
  --font-size-2xl_32px: 2rem;
  --font-size-3xl_48px: 3rem;
  --font-size-4xl_64px: 4rem;

  /* == Font Weight == */
  --font-weight__regular: 400;
  --font-weight__medium: 500;
  --font-weight__bold: 700;

  /* == Line-height == */
  --line-height__tight: 1.2;
  --line-height__normal: 1.6;
  --line-height__loose: 1.9;

  /* == Spacing == */
  --space-01_4px: 4px;
  --space-02_8px: 8px;
  --space-03_12px: 12px;
  --space-04_16px: 16px;
  --space-05_24px: 24px;
  --space-06_32px: 32px;
  --space-07_48px: 48px;
  --space-08_64px: 64px;
  --space-09_96px: 96px;
  --space-10_128px: 128px;

  /* == Layout == */
  --layout__max-width: 1200px;
  --layout__pad-desktop: var(--space-06_32px);
  --layout__pad-tablet: 32px;
  --layout__pad-mobile: 20px;

  /* == Motion == */
  --motion__fast: 200ms;
  --motion__normal: 500ms;
  --motion__slow: 800ms;
  --motion__ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* == Border == */
  --border__hair: 1px solid var(--color__ink);
  --border__hair-ochre: 1px solid var(--color__ochre);

}

/*--------------------------------------------*/
/* ========= Base Typography ========= */
/*--------------------------------------------*/
body { font-family: var(--font-family__ja); font-size: var(--font-size-md_16px); line-height: var(--line-height__normal); color: var(--color__ink); background-color: var(--color__paper); }

/* == Selection / Focus == */
::selection { color: var(--color__paper); background-color: var(--color__red); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color__red); outline-offset: 3px; }

a.has-underline { text-decoration: underline; }

/* ELEMENTS /////////////////////////////////////*/
/* == Utility == */
.u-en { font-family: var(--font-family__en); text-transform: uppercase; letter-spacing: 0.06em; }
.u-hand { font-family: var(--font-family__hand); }
.u-visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); white-space: nowrap; }

/*--------------------------------------------*/
/* ========= Page Wrapper ========= */
/*--------------------------------------------*/
.page__wrapper { overflow-x: hidden; background-color: var(--color__paper); background-image: radial-gradient(rgba(var(--color__ink-rgb), 0.05) 1px, transparent 1px); background-size: 4px 4px; }
.page__inner { position: relative; max-width: var(--layout__max-width); margin: 0 auto; padding-inline: var(--layout__pad-desktop); }

@media (max-width: 1023px) {
  .page__inner { padding-inline: var(--layout__pad-tablet); }
}
@media (max-width: 639px) {
  .page__inner { padding-inline: var(--layout__pad-mobile); }
}

/*--------------------------------------------*/
/* ========= Header ========= */
/*--------------------------------------------*/
.page__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-05_24px); padding-block: var(--space-07_48px) var(--space-06_32px); border-bottom: 3px double var(--color__ink); }

.page__header-inner { display: flex; flex-direction: column; gap: var(--space-02_8px); }
.page__header-eyebrow { font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); font-weight: var(--font-weight__medium); letter-spacing: 0.18em; color: var(--color__olive); text-transform: uppercase; }
.page__header-eyebrow::before { content: "— "; color: var(--color__ochre); }
.page__header-title { font-family: var(--font-family__ja); font-size: clamp(1.75rem, 4vw, var(--font-size-3xl_48px)); font-weight: var(--font-weight__bold); line-height: var(--line-height__tight); letter-spacing: 0.02em; }
.page__header-meta { font-family: var(--font-family__en); font-size: var(--font-size-sm_14px); font-weight: var(--font-weight__regular); letter-spacing: 0.14em; color: var(--color__ink); text-transform: uppercase; opacity: 0.7; }

.page__header-visual { display: flex; align-items: flex-end; }
.page__header-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-05_24px); }
.page__header-nav-item a { position: relative; padding-bottom: var(--space-01_4px); font-family: var(--font-family__en); font-size: var(--font-size-sm_14px); font-weight: var(--font-weight__medium); letter-spacing: 0.12em; color: var(--color__ink); text-transform: uppercase; transition: color var(--motion__fast) var(--motion__ease); }
.page__header-nav-item a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--color__red); transform: scaleX(0); transform-origin: left; transition: transform var(--motion__fast) var(--motion__ease); }
.page__header-nav-item a:hover, .page__header-nav-item a:focus-visible { color: var(--color__red); }
.page__header-nav-item a:hover::after, .page__header-nav-item a:focus-visible::after { transform: scaleX(1); }

@media (max-width: 639px) {
  .page__header { padding-block: var(--space-06_32px) var(--space-05_24px); }
  .page__header-nav-list { gap: var(--space-04_16px) var(--space-05_24px); }
}

/*--------------------------------------------*/
/* ========= Section Common ========= */
/*--------------------------------------------*/
.section { position: relative; padding-block: var(--space-09_96px); border-bottom: var(--border__hair); }
.section:last-of-type { border-bottom: none; }

.section__label { display: inline-flex; align-items: baseline; gap: var(--space-03_12px); margin-bottom: var(--space-02_8px); font-family: var(--font-family__hand); font-size: clamp(2rem, 5vw, var(--font-size-3xl_48px)); font-weight: var(--font-weight__regular); line-height: 1; color: var(--color__ink); text-transform: lowercase; }
.section__label::before { content: counter(section-count, decimal-leading-zero) "."; counter-increment: section-count; font-family: var(--font-family__en); font-size: var(--font-size-md_16px); font-weight: var(--font-weight__medium); color: var(--color__ochre); }
main { counter-reset: section-count; }

.section__lead { max-width: 640px; margin-block: var(--space-04_16px) var(--space-06_32px); padding-top: var(--space-04_16px); border-top: 1px solid var(--color__ochre); font-size: var(--font-size-sm_14px); line-height: var(--line-height__loose); color: var(--color__ink); }

@media (max-width: 639px) {
  .section { padding-block: var(--space-07_48px); }
}

/* == Reduced Motion == */
[data-reveal] { opacity: 1; }

/*--------------------------------------------*/
/* ========= Footer ========= */
/*--------------------------------------------*/
.page__footer { display: grid; gap: var(--space-06_32px); padding-block: var(--space-08_64px) var(--space-06_32px); border-top: 3px double var(--color__ink); }
.page__footer-title { font-family: var(--font-family__en); font-size: var(--font-size-xl_24px); font-weight: var(--font-weight__medium); letter-spacing: 0.1em; text-transform: uppercase; }

.page__footer-notice { display: flex; flex-direction: column; gap: var(--space-02_8px); padding: var(--space-04_16px); border: 1px dashed var(--color__olive); font-size: var(--font-size-xs_12px); line-height: var(--line-height__normal); color: var(--color__olive); }

.page__footer-nav .page__header-nav-list { flex-wrap: wrap; gap: var(--space-03_12px) var(--space-05_24px); }

.page__footer-links-title { margin-bottom: var(--space-03_12px); font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); font-weight: var(--font-weight__medium); letter-spacing: 0.14em; color: var(--color__ochre); text-transform: uppercase; }
.page__footer-links-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-03_12px) var(--space-06_32px); }
.page__footer-links-card { padding-block: var(--space-02_8px); border-top: 1px solid rgba(var(--color__ink-rgb), 0.2); }
.page__footer-links-card-label { font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); font-weight: var(--font-weight__medium); letter-spacing: 0.08em; color: var(--color__ink); opacity: 0.6; text-transform: uppercase; }
.page__footer-links-card-value a { display: inline-block; margin-top: var(--space-01_4px); font-size: var(--font-size-sm_14px); word-break: break-all; transition: color var(--motion__fast) var(--motion__ease); }
.page__footer-links-card-value a:hover, .page__footer-links-card-value a:focus-visible { color: var(--color__red); }

.page__footer-copyright { padding-top: var(--space-04_16px); border-top: 1px solid var(--color__ink); font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); letter-spacing: 0.08em; opacity: 0.7; }

/* TOP */
.page__top { position: fixed; right: var(--space-04_16px); bottom: var(--space-04_16px); z-index: 40; }
.page__top a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: var(--border__hair); border-radius: 50%; background-color: var(--color__paper); font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); letter-spacing: 0.08em; box-shadow: 2px 2px 0 var(--color__ink); transition: transform var(--motion__fast) var(--motion__ease), background-color var(--motion__fast) var(--motion__ease), color var(--motion__fast) var(--motion__ease); }
.page__top a:hover, .page__top a:focus-visible { background-color: var(--color__red); color: var(--color__paper); transform: translate(-1px, -1px); }

/* SITE MENU */
.site-menu-toggle { position: fixed; top: var(--space-04_16px); right: var(--space-04_16px); z-index: 50; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: var(--border__hair); background-color: var(--color__paper); box-shadow: 2px 2px 0 var(--color__ink); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity var(--motion__normal) var(--motion__ease), visibility var(--motion__normal) var(--motion__ease), transform var(--motion__normal) var(--motion__ease), background-color var(--motion__fast) var(--motion__ease), color var(--motion__fast) var(--motion__ease); }
.site-menu-toggle.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.site-menu-toggle span { position: absolute; width: 20px; height: 1px; background-color: currentColor; transition: transform var(--motion__fast) var(--motion__ease), opacity var(--motion__fast) var(--motion__ease); }
.site-menu-toggle span:nth-child(1) { transform: translateY(-6px); }
.site-menu-toggle span:nth-child(3) { transform: translateY(6px); }
.site-menu-toggle.is-open span:nth-child(1) { transform: rotate(45deg); }
.site-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.site-menu-toggle.is-open span:nth-child(3) { transform: rotate(-45deg); }
.site-menu-toggle:hover, .site-menu-toggle:focus-visible { background-color: var(--color__red); color: var(--color__paper); }

.site-menu { position: fixed; top: calc(var(--space-04_16px) + 44px + var(--space-02_8px)); right: var(--space-04_16px); z-index: 49; width: min(320px, calc(100vw - (var(--space-04_16px) * 2))); padding: var(--space-05_24px); border: var(--border__hair); background-color: var(--color__paper); box-shadow: 3px 3px 0 var(--color__ink); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity var(--motion__normal) var(--motion__ease), visibility var(--motion__normal) var(--motion__ease), transform var(--motion__normal) var(--motion__ease); }
.site-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.site-menu__list { display: grid; gap: var(--space-03_12px); }
.site-menu__item a { display: block; padding-block: var(--space-02_8px); border-bottom: 1px solid rgba(var(--color__ink-rgb), 0.2); font-family: var(--font-family__en); font-size: var(--font-size-md_16px); font-weight: var(--font-weight__medium); letter-spacing: 0.12em; color: var(--color__ink); text-transform: uppercase; transition: color var(--motion__fast) var(--motion__ease), border-color var(--motion__fast) var(--motion__ease); }
.site-menu__item a:hover, .site-menu__item a:focus-visible { color: var(--color__red); border-color: var(--color__red); }

@media (max-width: 639px) {
  .page__top { right: var(--space-03_12px); bottom: var(--space-03_12px); }
  .site-menu-toggle { top: var(--space-03_12px); right: var(--space-03_12px); }
  .site-menu { top: calc(var(--space-03_12px) + 44px + var(--space-02_8px)); right: var(--space-03_12px); width: min(320px, calc(100vw - (var(--space-03_12px) * 2))); padding: var(--space-04_16px); }
}

@media (max-width: 639px) {
  .page__footer-links-list { grid-template-columns: 1fr 1fr; }
}

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