:root{
  --paper:#fcfcfa;
  --paper-2:#f6f5f1;
  --paper-3:#f1efea;
  --ink:#22262d;
  --muted:#68717c;
  --muted-2:#8a9098;
  --line:#dadddf;
  --shadow:0 16px 36px rgba(43, 50, 59, .08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg,#ffffff 0%,#fbfbf8 100%);
  font-family:"Shippori Mincho","Noto Serif JP",serif;
  line-height:1.8;
  letter-spacing:.03em;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
iframe{display:block;width:100%;height:100%;border:0}
.section-shell{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}
.card-shadow{box-shadow:var(--shadow)}
.paper-shadow{box-shadow:0 14px 30px rgba(60,67,76,.08)}
.tilt-left{transform:rotate(-1.8deg)}
.tilt-right{transform:rotate(2deg)}
.tilt-left-soft{transform:rotate(-1.2deg)}

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:18px clamp(20px,4vw,64px);
  background:rgba(252,252,250,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(218,221,223,.75);
}
.brand,
.nav{font-size:12px;letter-spacing:.14em}
.brand{white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:18px 34px}
.nav a,.brand{position:relative}
.nav a::after,.brand::after{
  content:"";
  position:absolute;
  left:0; bottom:-7px;
  width:0; height:1px;
  background:currentColor;
  transition:.3s ease;
}
.nav a:hover::after,.brand:hover::after{width:100%}

.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px, 35%) minmax(0, 65%);
  align-items:stretch;
  min-height:calc(100vh - 68px);
  background:#fff;
}
.hero-copy{
  display:flex;
  align-items:center;
  padding:48px 0 80px;
  background:linear-gradient(90deg,#fff 0%,#fff 81%,rgba(255,255,255,.86) 92%,rgba(255,255,255,0) 100%);
  z-index:2;
}
.hero-title-wrap{margin-left:clamp(12px,4vw,54px)}
.hero-title{
  margin:0;
  writing-mode:vertical-rl;
  font-size:clamp(44px,3.9vw,82px);
  line-height:1.24;
  font-weight:400;
  letter-spacing:.08em;
}
.roman{margin:16px 0 0;font-size:13px;letter-spacing:.32em;color:#515863}
.hero-subcopy{margin:18px 0 0;font-size:14px;line-height:2;color:#59616c}
.hero-visual{position:relative;overflow:hidden;min-height:540px;background:#ece9e4}
.hero-visual img{object-position:50% 50%}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,0) 26%);
  pointer-events:none;
}
.signature{
  font-family:"Klee One",cursive;
  font-weight:400;
  color:#6d7781;
  letter-spacing:.03em;
  line-height:2.05;
}
.signature-hero{
  position:absolute;
  right:clamp(22px,4vw,64px);
  bottom:10%;
  margin:0;
  font-size:clamp(16px,1.6vw,28px);
  transform:rotate(-4deg);
  text-shadow:0 1px 0 rgba(255,255,255,.78);
}
.scroll-cue{
  position:absolute;
  left:50%; bottom:16px;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:.32em;
  color:#747d87;
  text-align:center;
}
.scroll-cue span{display:block;width:1px;height:56px;background:#aab1b9;margin:8px auto 0}

.section-kicker{margin:0 0 14px;font-size:12px;letter-spacing:.2em;color:#727b86}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:28px;
}
.section-head h2{margin:0;font-size:clamp(32px,3.4vw,54px);line-height:1.5;font-weight:400}
.section-description{margin:0;max-width:500px;font-size:15px;line-height:2;color:#56606a}

.days{padding-top:64px;padding-bottom:60px}
.days-grid{
  max-width:1380px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr .72fr;
  grid-template-areas:
    "cup walk walkNotes"
    "main walk walkNotes"
    "sketch glow glow"
    "sketch glow glow";
  gap:30px 34px;
  align-items:start;
}
.scene-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.shot{margin:0;overflow:hidden;border:1px solid rgba(224,226,229,.65);background:#f3f3ef}
.cup-card{grid-area:cup}
.walk-card{grid-area:walk;align-self:start}
.sketch-card{grid-area:sketch}
.glow-card{grid-area:glow;max-width:520px;justify-self:start}
.main-copy{grid-area:main;align-self:end;padding:4px 0 0 6px}
.main-copy h2{margin:0 0 16px;font-size:clamp(34px,3.8vw,66px);line-height:1.5;font-weight:400}
.main-copy p{margin:0;font-size:17px;line-height:2.1;color:#515a64}
.walk-notes{grid-area:walkNotes;display:flex;flex-direction:column;gap:36px;padding-top:34px}
.scene-note{margin:0;font-size:clamp(15px,1.28vw,22px)}
.scene-note.small{font-size:clamp(14px,1.12vw,18px);transform:translateX(12px) rotate(-3deg)}
.section-label{
  max-width:1380px;
  margin:24px auto 0;
  text-align:center;
  font-size:11px;
  letter-spacing:.38em;
  color:#828a94;
}

.works{
  position:relative;
  max-width:1380px;
  margin:0 auto;
  padding-top:40px;
  padding-bottom:68px;
  border-top:1px solid rgba(218,221,223,.75);
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(240px,.8fr);
  gap:34px;
  align-items:center;
}
.works-media{aspect-ratio:16/6;overflow:hidden;border:1px solid rgba(224,226,229,.65)}
.works-media img{object-position:50% 45%}
.works-title{margin:0 0 20px;font-size:clamp(28px,3vw,50px);line-height:1.65}
.works-body{margin:0 0 26px;font-size:18px;line-height:2;color:#505964}
.works-side{
  position:absolute;
  right:44px;
  bottom:72px;
  margin:0;
  font-size:clamp(16px,1.5vw,24px);
  transform:rotate(-5deg);
}
.works-vertical{
  position:absolute;
  right:-6px;
  top:38px;
  margin:0;
  writing-mode:vertical-rl;
  font-size:10px;
  letter-spacing:.38em;
  color:#808995;
}
.text-link{display:inline-flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid #8f98a2;font-size:14px;letter-spacing:.1em}
.text-link span{font-size:18px;line-height:1}

.videos{
  padding-top:72px;
  padding-bottom:72px;
  background:linear-gradient(180deg, rgba(246,245,241,.55) 0%, rgba(255,255,255,0) 100%);
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.video-card{
  display:grid;
  grid-template-rows:auto auto;
  background:#fff;
  border:1px solid rgba(221,224,227,.92);
  box-shadow:0 10px 24px rgba(46,52,61,.05);
}
.video-frame{aspect-ratio:16/9;background:#111}
.video-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:16px 18px 18px}
.video-index{font-size:13px;color:#7b8590;grid-row:1 / span 2;margin-top:4px;letter-spacing:.16em}
.video-meta h3{margin:0;font-size:22px;font-weight:500}
.video-meta p{margin:0;color:#616a74;font-size:12px;letter-spacing:.14em}

.profile{
  padding-top:72px;
  padding-bottom:72px;
  border-top:1px solid rgba(218,221,223,.75);
}
.profile-head{align-items:start}
.profile-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(280px,.92fr);
  gap:34px;
  align-items:start;
}
.profile-images{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.profile-card{margin:0;background:#fff;border:1px solid rgba(221,224,227,.92);overflow:hidden}
.profile-card img{aspect-ratio:4/5}
.profile-card figcaption{padding:10px 14px 14px;font-size:11px;letter-spacing:.18em;color:#727b85;background:#fff}
.profile-copy-box{
  background:var(--paper-2);
  border:1px solid rgba(220,223,226,.95);
  padding:26px 24px 28px;
}
.profile-copy-box p{margin:0 0 20px;font-size:15px;line-height:2;color:#505964}
.profile-copy-box blockquote{
  margin:0 0 26px;
  padding:0 0 0 16px;
  border-left:1px solid #b9c0c8;
  color:#414852;
  font-size:15px;
}
.profile-specs{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.profile-specs div{padding-top:14px;border-top:1px solid #d8dce1}
.profile-specs dt{margin:0 0 6px;font-size:11px;letter-spacing:.16em;color:#76808a}
.profile-specs dd{margin:0;font-size:15px;line-height:1.8}

.about{
  background:var(--paper-2);
  padding-top:88px;
  padding-bottom:100px;
  border-top:1px solid rgba(218,221,223,.75);
}
.about-inner{max-width:900px;margin:0 auto;text-align:center}
.about-eyebrow{margin:0 0 14px;font-size:11px;letter-spacing:.34em;color:#7a838c}
.about h2{margin:0 0 22px;font-size:clamp(36px,4vw,60px);line-height:1.6;font-weight:400}
.about-text{margin:0;font-size:16px;line-height:2.25;color:#525a64}

.site-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding-top:24px;
  padding-bottom:28px;
  font-size:10px;
  letter-spacing:.26em;
  background:#fff;
}
.footer-left{display:flex;flex-wrap:wrap;gap:18px 28px}
.footer-right{white-space:nowrap}

@media (max-width:1180px){
  .days-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "cup walk"
      "main walk"
      "walkNotes walkNotes"
      "sketch glow";
  }
  .walk-notes{padding-top:0;gap:16px;flex-direction:row;justify-content:space-between;border-top:1px solid rgba(218,221,223,.75);padding-top:14px}
  .glow-card{max-width:none}
  .profile-layout{grid-template-columns:1fr}
}

@media (max-width:900px){
  .site-header{align-items:flex-start}
  .brand,.nav{font-size:11px}
  .nav{gap:14px 18px}

  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-copy{order:2;padding:34px 0 48px;background:#fff}
  .hero-title{writing-mode:horizontal-tb;font-size:clamp(36px,8vw,60px);letter-spacing:.04em}
  .hero-title-wrap{margin-left:0}
  .hero-visual{order:1;aspect-ratio:4/5;min-height:auto}
  .signature-hero{right:20px;bottom:22px;font-size:16px}
  .scroll-cue{display:none}

  .section-head{flex-direction:column;align-items:flex-start;gap:10px}
  .section-head h2{font-size:34px}
  .section-description{max-width:none;font-size:14px}

  .days{padding-top:44px}
  .days-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "cup"
      "main"
      "walk"
      "walkNotes"
      "sketch"
      "glow";
    gap:20px;
  }
  .tilt-left,.tilt-right,.tilt-left-soft{transform:none}
  .main-copy{padding-left:0}
  .main-copy h2{font-size:34px}
  .main-copy p{font-size:15px}
  .walk-notes{flex-direction:column;gap:8px;padding-top:0;border-top:none}
  .scene-note{font-size:15px}

  .works{grid-template-columns:1fr;padding-bottom:84px}
  .works-title{font-size:30px}
  .works-body{font-size:15px}
  .works-side{right:24px;bottom:22px;font-size:16px}
  .works-vertical{display:none}

  .videos{padding-top:58px;padding-bottom:58px}
  .video-grid{grid-template-columns:1fr}
  .video-meta h3{font-size:20px}

  .profile{padding-top:58px;padding-bottom:58px}
  .profile-images{grid-template-columns:1fr}
  .profile-specs{grid-template-columns:1fr}

  .about{padding-top:64px;padding-bottom:72px}
  .about-text{font-size:15px}

  .site-footer{flex-direction:column;align-items:flex-start;font-size:9px;letter-spacing:.18em}
}

@media (max-width:560px){
  .nav a:nth-child(2){display:none}
  .hero-subcopy,.about-text,.profile-copy-box p,.profile-copy-box blockquote{font-size:14px}
  .main-copy h2,.section-head h2,.about h2{font-size:31px}
  .video-meta{padding:14px}
  .video-meta h3{font-size:18px}
}

/* Ambient BGM control */
.bgm-toggle{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 15px;
  border:1px solid rgba(68,76,84,.28);
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#38414a;
  box-shadow:0 8px 24px rgba(44,50,58,.12);
  font:inherit;
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.bgm-toggle:hover{background:#fff;transform:translateY(-1px)}
.bgm-toggle[aria-pressed="true"]{background:#38414a;color:#fff}
.bgm-icon{font-size:18px;line-height:1}
@media (max-width:560px){
  .bgm-toggle{right:14px;bottom:14px;font-size:11px}
}

/* V4: OFF DUTY section centering + stable YouTube presentation */
.days > .section-kicker{
  width:min(100%, 1240px);
  margin-left:auto;
  margin-right:auto;
}
.days-grid{
  width:min(100%, 1240px);
  max-width:none;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(210px,.68fr);
  column-gap:30px;
}
.section-label{
  width:min(100%, 1240px);
  max-width:none;
}
.sketch-card{
  justify-self:end;
  width:min(100%, 520px);
}
.glow-card{
  justify-self:center;
  width:min(100%, 520px);
  max-width:520px;
}

/* Do not inline-play YouTube videos: some titles reject iframe embedding.
   A clean poster card opens the canonical YouTube page instead. */
.video-frame{display:none}
.video-poster{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111;
}
.video-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease, filter .45s ease;
}
.video-poster::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.18) 100%);
  pointer-events:none;
}
.video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  padding-left:4px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:#2c323a;
  font-family:Arial,sans-serif;
  font-size:17px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:transform .3s ease, background .3s ease;
}
.video-poster:hover img{transform:scale(1.025);filter:brightness(.96)}
.video-poster:hover .video-play{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.video-meta{
  grid-template-columns:auto minmax(0,1fr);
}
.youtube-link{
  grid-column:2;
  width:max-content;
  margin-top:7px;
  padding-bottom:3px;
  border-bottom:1px solid #aab1b8;
  color:#68717b;
  font-size:10px;
  letter-spacing:.14em;
}

@media (min-width:1181px){
  /* Center the two lower OFF DUTY cards as a pair instead of leaving the right side empty. */
  .sketch-card{grid-column:1 / 2}
  .glow-card{grid-column:2 / 4; justify-self:center}
}

@media (max-width:1180px){
  .days-grid{width:min(100%, 1080px)}
  .days > .section-kicker,.section-label{width:min(100%,1080px)}
  .sketch-card,.glow-card{justify-self:stretch;width:100%;max-width:none}
}

@media (max-width:900px){
  .days-grid,.days > .section-kicker,.section-label{width:100%}
  .video-play{width:52px;height:52px}
}

/* V6 (based strictly on user's V5 3): responsive stabilization + motion */
html,body{max-width:100%;overflow-x:hidden}
.menu-toggle{display:none}

/* reveal animation */
.reveal-item{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms), transform .85s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
}
.reveal-item.is-visible{opacity:1;transform:translateY(0)}
.video-card.reveal-item:hover{transform:translateY(-3px)}
.video-poster img{will-change:transform}
.hero-visual img,.scene-card img,.works-media img{will-change:transform}

/* tablet: these rules intentionally come after the V4 block so it cannot re-force 3 columns */
@media (max-width:1180px){
  .days > .section-kicker,.days-grid,.section-label{width:min(100%, 980px)}
  .days-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "cup walk"
      "main walk"
      "walkNotes walkNotes"
      "sketch glow";
    column-gap:28px;
    row-gap:24px;
  }
  .sketch-card,.glow-card{justify-self:center;width:min(100%,520px);max-width:520px}
  .walk-notes{padding-top:14px;gap:16px;flex-direction:row;justify-content:space-between;border-top:1px solid rgba(218,221,223,.75)}
  .profile-layout{grid-template-columns:1fr}
}

@media (max-width:900px){
  .section-shell{padding-left:clamp(18px,5vw,32px);padding-right:clamp(18px,5vw,32px)}

  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-copy{order:2;padding:34px 0 48px;background:#fff}
  .hero-title-wrap{margin-left:0;width:100%;min-width:0}
  .hero-title{writing-mode:horizontal-tb;min-height:0;font-size:clamp(36px,8vw,58px);line-height:1.45;letter-spacing:.04em;word-break:normal}
  .hero-visual{order:1;min-height:0;aspect-ratio:4/5}
  .hero-visual img{transform:none!important;object-position:50% 48%}
  .signature-hero{right:20px;bottom:22px;font-size:16px}
  .scroll-cue{display:none}

  .section-head{flex-direction:column;align-items:flex-start;gap:10px}
  .section-description{max-width:100%;font-size:14px}

  .days{padding-top:44px}
  .days > .section-kicker,.days-grid,.section-label{width:100%;max-width:680px}
  .days-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "cup"
      "main"
      "walk"
      "walkNotes"
      "sketch"
      "glow";
    gap:22px;
    margin-inline:auto;
  }
  .cup-card,.walk-card,.sketch-card,.glow-card,.main-copy,.walk-notes{min-width:0;width:100%;max-width:100%;justify-self:stretch}
  .tilt-left,.tilt-right,.tilt-left-soft{transform:none}
  .scene-card img,.works-media img{transform:none!important}
  .main-copy{padding:4px 0 6px;align-self:auto}
  .main-copy h2{
    margin:0 0 16px;
    font-size:clamp(30px,7vw,42px);
    line-height:1.55;
    letter-spacing:.02em;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
  }
  .main-copy h2 br{display:none}
  .main-copy p{font-size:15px}
  .walk-notes{display:flex;flex-direction:column;gap:8px;padding-top:0;border-top:0}
  .scene-note,.scene-note.small{font-size:15px;transform:none}
  .section-label{margin-top:18px}

  .works{grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:78px}
  .works-media{aspect-ratio:16/9}
  .works-title{font-size:clamp(28px,7vw,36px)}
  .works-body{font-size:15px}
  .works-side{right:24px;bottom:20px;font-size:16px}
  .works-vertical{display:none}

  .videos{padding-top:56px;padding-bottom:56px}
  .video-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .video-card{min-width:0}
  .video-meta{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .video-meta h3{font-size:20px;overflow-wrap:anywhere}
  .youtube-link{white-space:normal}

  .profile{padding-top:56px;padding-bottom:56px}
  .profile-layout{grid-template-columns:minmax(0,1fr)}
  .profile-images{grid-template-columns:minmax(0,1fr);gap:18px}
  .profile-card{min-width:0}
  .profile-copy-box{padding:22px 18px 24px;min-width:0}
  .profile-specs{grid-template-columns:minmax(0,1fr)}
  .profile-specs dd{overflow-wrap:anywhere}

  .about{padding-top:64px;padding-bottom:72px}
  .about h2{font-size:clamp(31px,8vw,42px)}
  .about-text{font-size:15px}
  .site-footer{flex-direction:column;align-items:flex-start;font-size:9px;letter-spacing:.18em}
}

@media (max-width:760px){
  .site-header{padding:14px 18px;align-items:center;min-height:62px}
  .brand{font-size:10px;letter-spacing:.11em;z-index:62}
  .menu-toggle{
    display:grid;
    place-content:center;
    gap:6px;
    width:42px;height:38px;
    border:0;background:transparent;
    padding:0;cursor:pointer;z-index:63;
  }
  .menu-toggle span{display:block;width:23px;height:1px;background:#2d3238;transition:transform .28s ease,opacity .28s ease}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav{
    position:absolute;
    top:100%;left:0;right:0;
    display:flex!important;
    flex-direction:column;
    gap:0;
    padding:10px 18px 18px;
    background:rgba(252,252,250,.98);
    border-bottom:1px solid rgba(218,221,223,.9);
    box-shadow:0 12px 24px rgba(40,45,52,.07);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    pointer-events:none;
    transition:.28s ease;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
  .nav a{padding:12px 2px;font-size:12px;border-top:1px solid rgba(218,221,223,.55)}
  .nav a:first-child{border-top:0}
  .nav a::after{display:none}
}

@media (max-width:560px){
  .nav a:nth-child(2){display:block}
  .hero-visual{aspect-ratio:1/1.16}
  .hero-title{font-size:clamp(34px,10vw,44px)}
  .hero-title br{display:none}
  .hero-subcopy,.about-text,.profile-copy-box p,.profile-copy-box blockquote{font-size:14px}
  .main-copy h2,.section-head h2,.about h2{font-size:clamp(29px,8.5vw,36px)}
  .video-meta h3{font-size:18px}
  .profile-card img{aspect-ratio:4/5}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal-item{opacity:1;transform:none}
}


/* Short interview — intentionally omitted from the top navigation */
.interview{
  padding-top:76px;
  padding-bottom:82px;
  border-top:1px solid rgba(218,221,223,.75);
  background:#fff;
}
.interview-intro{
  max-width:1380px;
  margin:0 auto 34px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:36px;
}
.interview-label{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.28em;
  color:#818994;
}
.interview-intro h2{
  margin:0;
  font-size:clamp(32px,3.6vw,56px);
  line-height:1.5;
  font-weight:400;
}
.interview-signature{
  margin:0 2vw 4px 0;
  font-size:clamp(14px,1.25vw,19px);
  transform:rotate(-3deg);
  white-space:nowrap;
}
.interview-grid{
  max-width:1380px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.qa-card{
  min-width:0;
  padding:26px 26px 30px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(252,252,250,.6);
}
.qa-card span{
  display:block;
  margin-bottom:18px;
  font-size:11px;
  letter-spacing:.18em;
  color:#858d97;
}
.qa-card h3{
  margin:0 0 14px;
  font-size:clamp(18px,1.55vw,24px);
  line-height:1.7;
  font-weight:400;
}
.qa-card p{
  margin:0;
  color:#59626c;
  font-size:14px;
  line-height:2;
}
@media (hover:hover){
  .qa-card{transition:background .35s ease, transform .35s ease}
  .qa-card:hover{background:#f7f6f2;transform:translateY(-2px)}
}
@media (max-width:900px){
  .interview{padding-top:58px;padding-bottom:62px}
  .interview-intro{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:24px}
  .interview-intro h2{font-size:34px}
  .interview-signature{align-self:flex-end;margin-right:8px;white-space:normal}
  .interview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .interview-grid{grid-template-columns:minmax(0,1fr)}
  .qa-card{padding:22px 18px 24px}
  .qa-card h3{font-size:19px}
  .qa-card p{font-size:14px}
  .interview-intro h2{font-size:clamp(29px,8.5vw,36px)}
}