@charset "UTF-8";
/* ==========================================================================
   General Optical — responsive landing page
   Source: コーディング.psd  (PC comp 1292px wide / SP comp 500px wide)

   Sizing rule: a length of N px in the comp is written  calc(N * var(--u))
     SP  (< 600px) : --u = container width / 500          (scales with device)
     PC  (>= 600px): --u = min(1px, container width / 1292) (1:1 at >= 1292px,
                                                             scales down to tablet)
   Body copy never goes below a rem-based floor, so browser zoom / the user's
   default font size still enlarge the text (WCAG 1.4.4).
   "container width" = the <html> inline size (cqw), i.e. the viewport minus
   any classic scrollbar, so 100% widths never cause horizontal overflow.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Medio — CC0 / public domain (Sora Sagano, dot colon) */
@font-face {
  font-family: "Medio";
  src: url("../fonts/medio.woff2") format("woff2");
  font-display: swap;
}
/* Copperplate Light is a licensed OS font (macOS / iOS) and must not be
   redistributed, so it is only referenced via local(). */
@font-face {
  font-family: "GO Copperplate";
  src: local("Copperplate-Light"), local("Copperplate Light");
}
/* Windows: Copperplate Gothic Light (bundled with MS Office). Its em box is
   drawn larger and narrower than the Apple cut: scale it down here and track
   it out via .no-copperplate so line lengths match the comp. */
@font-face {
  font-family: "GO Copperplate Win";
  src: local("CopperplateGothic-Light"), local("Copperplate Gothic Light");
  size-adjust: 80%;
}
/* Everything else (Android etc.): Cinzel, SIL OFL 1.1. Same structure as
   Copperplate (lower case drawn as small caps, lining figures). */
@font-face {
  font-family: "GO Copperplate Web";
  src: url("../fonts/cinzel-400-latin.woff2") format("woff2");
  font-display: swap;
  size-adjust: 80%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --cw: 1cqw;
  --u: calc(var(--cw) * 100 / 500);

  --c-text: #000;
  --c-title: #141614;
  --c-concept: #e5e5e5;
  --c-rule: #b6b6b6;
  --c-insta-bg: #e7e6e1;
  --c-footer-bg: #f3f3f3;

  --ff-serif: "Medio", "Bodoni 72", "Didot", "Bodoni MT", serif;
  --ff-copper: "GO Copperplate", "GO Copperplate Win", "GO Copperplate Web", serif;

  /* triple hair-line rules (widest → shortest), comp px — rendered length of
     the PSD rules (the layer boxes include a disabled stroke) */
  --rule-w1: 465;
  --rule-w2: 447;
  --rule-w3: 429;
}
@supports not (width: 1cqw) {
  :root { --cw: 1vw; }
}
@media (min-width: 600px) {
  :root {
    --u: min(1px, var(--cw) * 100 / 1292);
    /* rendered length of the PSD rules (the layer boxes include a disabled stroke) */
    --rule-w1: 1161;
    --rule-w2: 1116;
    --rule-w3: 1071;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  container-type: inline-size;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: var(--c-text);
  font-family: var(--ff-copper);
  font-weight: 400;
  font-size: max(0.8125rem, calc(17 * var(--u)));
  line-height: 1.4118; /* 24 / 17 */
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* set by the inline script in <head> when Apple's Copperplate is not installed:
   the fallback faces are narrower than Copperplate Light, so track them out */
.no-copperplate body {
  letter-spacing: 0.075em;
}
h1, h2, h3, p, figure, ul {
  margin: 0;
  padding: 0;
}
h1, h2, h3 {
  font-weight: 400;
}
ul {
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
small {
  font-size: inherit;
}
:focus-visible {
  outline: 1px solid var(--c-title);
  outline-offset: 4px;
}
.u-nowrap {
  white-space: nowrap;
}
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   SP (default)  — comp coordinates are relative to the 500px SP artboard
   ========================================================================== */

/* ---------- Header ---------- */
.l-header {
  position: relative;
  display: flex;
  justify-content: center;
  width: calc(500 * var(--u));
  height: calc(51 * var(--u));
  margin-inline: auto;
  padding-top: calc(12.9 * var(--u));
}
.l-header__logo {
  line-height: 0;
}
.l-header__logo-link {
  display: block;
}
.l-header__logo img {
  width: calc(157.9 * var(--u));
}
/* cart button (cart.psd). The 44px button is the tap target; the icon is centred in it.
   Until the shop opens it is a <button> that shows the COMING SOON overlay. */
.l-header__cart {
  --cart-w: 24;    /* icon width — SP has no comp: sized against the logo */
  --cart-cx: 30;   /* icon centre, from the right edge of the frame (18u margin like the product row) */
  --cart-cy: 28.2; /* icon centre, from the top (= logo centre) */
  position: absolute;
  top: calc(var(--cart-cy) * var(--u) - 22px);
  right: calc(var(--cart-cx) * var(--u) - 22px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease;
}
.l-header__cart img {
  width: max(18px, calc(var(--cart-w) * var(--u)));
}
.l-header__cart:focus-visible {
  outline-offset: -2px;
}

/* ---------- Hero ---------- */
.p-hero__img {
  width: 100%;
  aspect-ratio: 500 / 822;
  object-fit: cover;
}

/* ---------- Concept ---------- */
.p-concept {
  padding-top: calc(41 * var(--u));
  text-align: center;
}
.p-concept__title {
  color: var(--c-concept);
  font-family: var(--ff-serif);
  font-size: calc(89.68 * var(--u));
  line-height: 0.8;
  letter-spacing: -0.01em;
}
.p-concept__kern {
  letter-spacing: 0.05em; /* comp: +50 tracking on "P" */
}
.p-concept__text {
  max-width: min(calc(470.2em / 17), calc(100% - 16px));
  margin: calc(-4.8 * var(--u)) auto 0;
}

/* ---------- Products (horizontal scroller, next card peeks in) ---------- */
.p-products {
  padding-top: calc(33 * var(--u));
}
.p-products__list {
  --inset: calc(18 * var(--u));
  display: flex;
  gap: calc(20 * var(--u));
  padding-inline: var(--inset);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--inset);
  scrollbar-width: none;
}
.p-products__list::-webkit-scrollbar {
  display: none;
}
.p-products__list:focus-visible {
  outline-offset: -1px;
}
.p-products__list.is-dragging {
  scroll-snap-type: none;
  -webkit-user-select: none;
  user-select: none;
}
.p-products__item {
  flex: 0 0 calc(406 * var(--u));
  scroll-snap-align: start;
}
.p-products__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  -webkit-user-drag: none;
}
.p-products__name {
  margin-top: calc(12.9 * var(--u));
  text-align: center;
}

/* ---------- Lineup (model sections) ---------- */
.p-lineup {
  padding-top: calc(50.1 * var(--u));
}
.p-model {
  --rule-gap: calc(5 * var(--u));
  --rule-x1: 50%;
  --rule-x2: 50%;
  --rule-x3: 50%;
  width: calc(469 * var(--u));
  margin-inline: auto;
}
@supports (width: round(1px, 1px)) {
  /* keep the 3 lines evenly spaced on fractional-pixel widths */
  .p-model {
    --rule-gap: max(3px, round(calc(5 * var(--u)), 1px));
  }
}
.p-model + .p-model {
  margin-top: calc(35 * var(--u));
}
/* triple hair-line rules: widest line faces outward, shortest faces the content */
.p-model::before,
.p-model::after {
  content: "";
  display: block;
  height: calc(2 * var(--rule-gap) + 1px);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--c-rule), var(--c-rule)),
    linear-gradient(var(--c-rule), var(--c-rule)),
    linear-gradient(var(--c-rule), var(--c-rule));
}
.p-model::before {
  background-position: var(--rule-x1) 0, var(--rule-x2) var(--rule-gap), var(--rule-x3) calc(2 * var(--rule-gap));
  background-size:
    calc(var(--rule-w1) * var(--u)) 1px,
    calc(var(--rule-w2) * var(--u)) 1px,
    calc(var(--rule-w3) * var(--u)) 1px;
}
.p-model::after {
  background-position: var(--rule-x3) 0, var(--rule-x2) var(--rule-gap), var(--rule-x1) calc(2 * var(--rule-gap));
  background-size:
    calc(var(--rule-w3) * var(--u)) 1px,
    calc(var(--rule-w2) * var(--u)) 1px,
    calc(var(--rule-w1) * var(--u)) 1px;
}
.p-model__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(39 * var(--u)) 0 calc(38.4 * var(--u));
  text-align: center;
}
.p-model__media {
  width: calc(444 * var(--u));
}
.p-model__img {
  width: 100%;
  aspect-ratio: 444 / 497;
  object-fit: cover;
}
.p-model__title {
  margin-top: calc(41.8 * var(--u));
  color: var(--c-title);
  font-family: var(--ff-serif);
  font-size: max(2rem, calc(43.12 * var(--u)));
  line-height: 1;
  letter-spacing: -0.01em;
}
.p-model__text {
  max-width: calc(337.8em / 17);
  margin: calc(19 * var(--u)) auto 0;
}

/* ---------- Instagram ---------- */
.p-instagram {
  padding-top: calc(68.5 * var(--u));
}
.p-instagram__link {
  display: flex;
  flex-direction: column;
  width: calc(451 * var(--u));
  margin-inline: auto;
  padding: calc(33 * var(--u)) calc(22 * var(--u)) calc(19.3 * var(--u)) calc(25 * var(--u));
  background: var(--c-insta-bg);
  transition: opacity 0.3s ease;
}
.p-instagram__img {
  order: -1;
  width: calc(404 * var(--u));
}
.p-instagram__title {
  margin-top: calc(11.6 * var(--u));
  font-family: var(--ff-serif);
  font-size: calc(64.47 * var(--u));
  line-height: 0.89;
  letter-spacing: -0.01em;
}
.p-instagram__line {
  display: block;
}
.p-instagram__line--italic {
  /* comp: faux italic, shear 0.4274 about the baseline */
  transform: skewX(-23.14deg);
  transform-origin: 0 0.672em;
}

/* ---------- Footer ---------- */
.l-footer {
  min-height: calc(208 * var(--u));
  margin-top: calc(144 * var(--u));
  padding: calc(89 * var(--u)) 8px calc(95 * var(--u));
  padding-bottom: calc(119 * var(--u) - 1lh); /* centred even when the copy wraps (lh-aware browsers) */
  background: var(--c-footer-bg);
  text-align: center;
}

/* ---------- COMING SOON overlay (cart button) ---------- */
/* full-screen modal <dialog>: the page stays faintly visible through the dark backdrop;
   a click anywhere (or Esc) closes it — see main.js */
.c-coming-soon {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  overscroll-behavior: contain;
  touch-action: none;
}
.c-coming-soon[open] {
  display: grid;
  place-items: center;
  animation: coming-soon-fade 0.4s ease;
}
.c-coming-soon::backdrop {
  background: rgba(0, 0, 0, 0.65);
  animation: coming-soon-fade 0.4s ease;
}
.c-coming-soon:focus {
  outline: none;
}
.c-coming-soon__text {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: calc(46 * var(--u));
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}
@keyframes coming-soon-fade {
  from { opacity: 0; }
}

@media (hover: hover) {
  .p-instagram__link:hover {
    opacity: 0.8;
  }
  .l-header__cart:hover {
    opacity: 0.6;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-products__list.is-scrollable {
    cursor: grab;
  }
  .p-products__list.is-dragging {
    cursor: grabbing;
  }
}

/* ==========================================================================
   PC  (>= 600px) — comp coordinates are relative to the 1292px PC artboard
   ========================================================================== */
@media (min-width: 600px) {
  body {
    font-size: max(1.0625rem, calc(17 * var(--u)));
  }

  .l-header {
    width: calc(1292 * var(--u));
    height: calc(81 * var(--u));
    padding-top: calc(23.9 * var(--u));
  }
  .l-header__logo img {
    width: calc(185.5 * var(--u));
  }
  .c-coming-soon__text {
    font-size: calc(72 * var(--u));
  }
  .l-header__cart {
    /* cart.psd: 22 x 20.5 icon, centre 67px in from the frame's right edge, 40.25px from the top */
    --cart-w: 22;
    --cart-cx: 67;
    --cart-cy: 40.25;
  }

  .p-hero {
    width: calc(1219 * var(--u));
    margin-inline: auto;
  }
  .p-hero__img {
    aspect-ratio: 1219 / 712;
  }

  .p-concept {
    padding-top: calc(50 * var(--u));
  }
  .p-concept__text {
    max-width: calc(741 * var(--u));
    margin-top: calc(-2.8 * var(--u));
  }

  .p-products {
    padding-top: calc(84.1 * var(--u));
  }
  .p-products__list {
    /* align the first card with the 1292px frame, let the row bleed to the viewport edge */
    --inset: calc(max(0px, (var(--cw) * 100 - 1292px) / 2) + 42 * var(--u));
    gap: calc(19 * var(--u));
    padding-inline-end: calc(42 * var(--u)); /* bleed on the left only */
    scroll-snap-type: x proximity;
  }
  .p-products__item {
    flex-basis: calc(379 * var(--u));
  }
  .p-products__name {
    margin-top: calc(11.9 * var(--u));
  }

  .p-lineup {
    padding-top: calc(78.1 * var(--u));
  }
  .p-model {
    --rule-x1: calc(1 * var(--u));
    --rule-x2: calc(23 * var(--u));
    --rule-x3: calc(46 * var(--u));
    width: calc(1164 * var(--u));
  }
  .p-model + .p-model {
    margin-top: calc(31 * var(--u));
  }
  .p-model__inner {
    display: grid;
    grid-template-columns: 1fr calc(596 * var(--u));
    align-items: center;
    padding: calc(24 * var(--u)) calc(54 * var(--u)) calc(30.7 * var(--u)) 0;
  }
  .p-model__media {
    grid-area: 1 / 2;
    width: auto;
  }
  .p-model__img {
    aspect-ratio: 596 / 666;
  }
  .p-model__body {
    grid-area: 1 / 1;
    position: relative;
    top: calc(-3.2 * var(--u));
  }
  .p-model--reverse .p-model__inner {
    grid-template-columns: calc(596 * var(--u)) 1fr;
    padding-right: 0;
    padding-left: calc(58 * var(--u));
  }
  .p-model--reverse .p-model__media {
    grid-area: 1 / 1;
  }
  .p-model--reverse .p-model__body {
    grid-area: 1 / 2;
  }
  .p-model:not(.p-model--reverse) .p-model__body {
    left: calc(6.5 * var(--u)); /* comp: the copy box is centred 6.5px right of the column */
  }
  .p-model__title {
    margin-top: 0;
  }
  .p-model__text {
    max-width: min(calc(337.8em / 17), 100% - 48px); /* >= 24px gutter to the photo / frame on tablets */
    min-width: min-content; /* keeps the 1fr column from growing past the nowrap compounds */
    margin-top: calc(43 * var(--u));
  }

  .p-instagram {
    padding-top: calc(97.3 * var(--u));
  }
  .p-instagram__link {
    display: block;
    position: relative;
    width: calc(1179 * var(--u));
    height: calc(667 * var(--u));
    padding: 0;
  }
  .p-instagram__img {
    position: absolute;
    top: calc(43 * var(--u));
    left: calc(443 * var(--u));
    width: calc(683 * var(--u));
  }
  .p-instagram__title {
    position: absolute;
    z-index: 1;
    top: calc(180.8 * var(--u));
    left: calc(57 * var(--u));
    margin: 0;
    font-size: calc(109.07 * var(--u));
  }
  .p-instagram__line--italic {
    margin-top: calc(3 * var(--u)); /* comp: 3rd line sits a little lower */
    margin-left: calc(-11.4 * var(--u));
  }

  .l-footer {
    margin-top: calc(139 * var(--u));
  }
}

/* Very wide screens: all six cards fit (6 x 379 + 5 x 19 = 2369px) — centre the row instead of scrolling.
   Raise this breakpoint if cards are added; "safe" keeps every card reachable if they ever overflow. */
@media (min-width: 2470px) {
  .p-products__list {
    --inset: 0px;
    padding-inline-end: 0;
    justify-content: center;
    justify-content: safe center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
  .c-coming-soon[open],
  .c-coming-soon::backdrop {
    animation: none;
  }
}