/* dan inc. — https://daninc.co.jp */

:root {
  --paper: #FFFFFF;
  --ink: #050505;
  --sans: "Hanken Grotesk", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Noto Sans JP", sans-serif;
  --edge: 16px;
  color-scheme: light;
}

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

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

p, figure { margin: 0; }
img { max-width: 100%; }

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

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: space-between; /* equal gaps between the bottom columns */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    ".     .     .      ."
    "logo  logo  logo   logo"
    "about addr  person copy";
  column-gap: 24px;
  padding-top: max(var(--edge), env(safe-area-inset-top, 0px));
  padding-bottom: max(var(--edge), env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
}

.about  { grid-area: about;  align-self: end; }
.addr   { grid-area: addr;   align-self: end; font-style: normal; }
.person { grid-area: person; align-self: end; }
.copy   { grid-area: copy;   align-self: end; justify-self: end; }
.about, .addr, .person { display: grid; gap: 10px; }
.nowrap, .nw { white-space: nowrap; }

/* ---------- centre: logo alone first, then logo + portrait side by side ---------- */

.stage {
  grid-area: logo;
  place-self: center;
  margin: 48px 0;
  position: relative;
  width: clamp(320px, 50vw, 680px);
  max-width: 100%;
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}
.duo img { display: block; width: 100%; height: auto; }
.logo { margin: 0; font: inherit; min-width: 0; }
.duo .photo {
  width: 80%;
  justify-self: center;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}

.intro {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(150px, 20vw, 260px);
  height: auto;
  opacity: 0;
  pointer-events: none;
}

/* ---------- motion ----------
   1. logo fades in   2. logo fades out
   3. logo + photo slide in from the left, then the text */
@media (prefers-reduced-motion: no-preference) {
  .intro      { animation: intro 3s ease-in-out .2s both; }
  .duo .mark  { animation: slide 1.6s cubic-bezier(.19, 1, .22, 1) 3.1s both; }
  .duo .photo { animation: slide 1.6s cubic-bezier(.19, 1, .22, 1) 3.45s both; }

  .about, .addr, .person, .copy { animation: glide 1s cubic-bezier(.22, .8, .24, 1) both; }
  .about  { animation-delay: 3.35s; }
  .addr   { animation-delay: 3.5s; }
  .person { animation-delay: 3.65s; }
  .copy   { animation-delay: 3.8s; }

  @keyframes intro { 0% { opacity: 0; } 25%, 65% { opacity: 1; } 92%, 100% { opacity: 0; } }
  @keyframes slide { from { clip-path: inset(0 100% 0 0); transform: translateX(-32px); } to { clip-path: inset(0 0 0 0); transform: none; } }
  @keyframes glide { from { opacity: .001; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
}

/* ---------- tablet & phone: details stacked under the centre ---------- */
@media (max-width: 1000px) {
  .nowrap { white-space: normal; }
  .person { gap: 0; }
  .page {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: normal;
    grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas:
      ".      ."
      "logo   logo"
      "about  about"
      "person person"
      "addr   copy";
    row-gap: 20px;
  }
  .stage { width: 100%; margin: 24px 0; }
  .intro { width: min(46vw, 190px); position: fixed; } /* phone: centre of the screen */
}

/* very narrow phones (<360px): give the address the full width */
@media (max-width: 359px) {
  .page {
    grid-template-rows: auto 1fr auto auto auto auto;
    grid-template-areas:
      ".      ."
      "logo   logo"
      "about  about"
      "person person"
      "addr   addr"
      "copy   copy";
  }
  .copy { justify-self: start; }
}