/* Kode-chan — shared styles for /kodechan/ and /en/kodechan/.
   Loaded together with the site-wide ../styles.css. Reuses the same
   design tokens, kicker/button vocabulary, and 980/720/440 breakpoints
   as the rest of Project-if instead of introducing a new visual system. */

.kode-body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08)),
    var(--bg);
}

.kode-main {
  padding-bottom: 60px;
}

.kode-stickers-section {
  background: var(--paper-blue);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.kode-stickers-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}

.kode-stickers-copy h2 {
  margin: 18px 0;
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.05em;
}

.kode-stickers-copy > p:not(.kode-section-label) {
  margin: 0 0 28px;
  color: var(--muted);
}

.kode-stickers-art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.kode-stickers-art img {
  display: block;
  width: 100%;
  height: auto;
}

.kode-stickers-art img:last-child {
  grid-column: 1 / -1;
  width: calc((100% - 18px) / 2);
  justify-self: center;
}

@media (max-width: 720px) {
  .kode-stickers-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.kode-breadcrumbs {
  padding: 24px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.kode-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kode-breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--line-strong);
}

.kode-breadcrumbs a {
  color: inherit;
}

.kode-breadcrumbs a:hover,
.kode-breadcrumbs a:focus-visible {
  color: var(--blue);
  text-decoration: underline;
}

/* ---------- 00 / Hero ---------- */

.kode-hero {
  /* overflow: hidden lets .kode-hero-visual bleed past the shell toward
     the viewport's right edge (Visual Reference) without ever creating
     page-level horizontal scroll: anything past the section's own box
     (full viewport width) is clipped here, well before it could reach
     html/body. */
  padding: 40px 0 56px;
  overflow: hidden;
}

.kode-hero-grid {
  /* Weighted toward the character so the debut Hero reads as roughly
     text 50 : Kode-chan 50 instead of the copy dominating. Named areas
     (rather than relying on source order + `order`) let .kode-hero-actions
     sit under the copy at desktop but move to the very end at mobile,
     after the visual — see the 980px override below. */
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 1.3fr);
  grid-template-areas:
    "copy visual"
    "actions visual";
  align-items: center;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 0;
}

.kode-hero-copy {
  grid-area: copy;
}

.kode-hero-actions {
  grid-area: actions;
}

.kode-hero-copy .section-kicker {
  margin-bottom: 20px;
}

.kode-hero-copy h1 {
  /* Sized down to the Visual Reference's ~48-64px range so the now much
     larger hero visual can carry equal weight instead of the headline
     winning by default. */
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.kode-hero-copy h1 span {
  display: block;
}

.kode-hero-copy h1 .kode-accent {
  color: var(--blue);
}

.kode-hero-sub {
  margin: 18px 0 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
}

.kode-hero-lead {
  max-width: 480px;
  margin: 18px 0 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.85;
}

.kode-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.kode-hero-actions .button-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
}

.kode-hero-actions .button-text:hover,
.kode-hero-actions .button-text:focus-visible {
  color: var(--text);
}

.kode-hero-visual {
  /* No card frame on desktop: the cutout sits directly on the page and
     is allowed to bleed past the shell's right padding toward the
     viewport edge, per the Visual Reference, instead of looking boxed
     in. .kode-hero's overflow: hidden caps the bleed at the section's
     own edge so this never causes horizontal scroll. */
  grid-area: visual;
  position: relative;
  width: calc(100% + 9vw);
  margin-right: -9vw;
}

.kode-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.kode-hero-status {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kode-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fbf6a;
  box-shadow: 0 0 0 3px rgba(47, 191, 106, 0.18);
}

/* ---------- generic section vocabulary (mirrors if-thema.css's
   detail-section pattern so page rhythm stays consistent) ---------- */

.kode-section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.kode-section-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* 01 / Who is Kode needs the opposite emphasis: profile text stays wide,
   the expression switcher only needs room for its 300px stage. */
.kode-who-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.75fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.kode-section-label {
  margin: 0;
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kode-section-head h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.055em;
}

.kode-section-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.85;
}

.kode-section-copy p + p {
  margin-top: 14px;
}

/* ---------- 01 / Who is Kode ---------- */

.kode-profile-list {
  margin: 26px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.kode-profile-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.kode-profile-list dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kode-profile-list dd {
  margin: 0;
  font-weight: 650;
}

.kode-face {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.kode-face-stage {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 515 / 548;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}

.kode-face-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kode-face-caption {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
}

.kode-face-caption strong {
  display: block;
  color: var(--text);
  font-size: 0.98rem;
}

.kode-face-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

.kode-face-btn {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 6px 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.kode-face-btn img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}

.kode-face-btn span {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.kode-face-btn:hover,
.kode-face-btn:focus-visible {
  border-color: var(--blue);
}

.kode-face-btn[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.kode-face-btn[aria-pressed="true"] span {
  color: var(--blue);
}

/* ---------- 02 / Gallery ---------- */

.kode-gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.kode-gallery-head p {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
}

.kode-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.kode-gallery-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}

.kode-gallery-item:hover,
.kode-gallery-item:focus-visible {
  border-color: var(--blue);
}

.kode-gallery-figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.kode-gallery-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

.kode-gallery-item:hover .kode-gallery-figure img,
.kode-gallery-item:focus-visible .kode-gallery-figure img {
  transform: scale(1.045);
}

.kode-gallery-caption {
  display: block;
  padding: 10px 12px 12px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Lightbox */

.kode-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 13, 18, 0.86);
}

.kode-lightbox[hidden] {
  display: none;
}

.kode-lightbox-figure {
  position: relative;
  width: min(1100px, 100%);
  max-height: 88vh;
  margin: 0;
  display: grid;
  gap: 10px;
}

.kode-lightbox-figure img {
  width: 100%;
  max-height: 76vh;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: rgba(0, 0, 0, 0.2);
}

.kode-lightbox-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.86rem;
}

.kode-lightbox-close,
.kode-lightbox-nav {
  position: absolute;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(17, 23, 29, 0.55);
  color: #fff;
  cursor: pointer;
}

.kode-lightbox-close {
  top: -18px;
  right: -18px;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.kode-lightbox-nav {
  top: 50%;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  transform: translateY(-50%);
}

.kode-lightbox-prev {
  left: -14px;
}

.kode-lightbox-next {
  right: -14px;
}

.kode-lightbox-close:hover,
.kode-lightbox-close:focus-visible,
.kode-lightbox-nav:hover,
.kode-lightbox-nav:focus-visible {
  border-color: #fff;
}

/* ---------- 03 / My room ---------- */

.kode-room-head {
  margin-bottom: 28px;
}

.kode-room-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 768;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.kode-room-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kode-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(49, 94, 219, 0.85);
  box-shadow: 0 0 0 6px rgba(49, 94, 219, 0.22);
  cursor: pointer;
  animation: kode-hotspot-pulse 2.4s ease-in-out infinite;
}

.kode-hotspot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  transform: scale(0.28);
}

.kode-hotspot:hover,
.kode-hotspot:focus-visible,
.kode-hotspot[aria-expanded="true"] {
  background: var(--blue);
}

.kode-hotspot--lab {
  left: 22%;
  top: 24%;
}

.kode-hotspot--gallery {
  left: 63%;
  top: 37%;
}

.kode-hotspot--travel {
  left: 91%;
  top: 54%;
}

.kode-room-card {
  position: absolute;
  z-index: 5;
  width: min(240px, 60vw);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(251, 250, 247, 0.98);
  box-shadow: var(--shadow);
}

.kode-room-card[hidden] {
  display: none;
}

.kode-room-card p {
  margin: 0;
}

.kode-room-card .kode-section-label {
  margin-bottom: 6px;
}

.kode-room-card-title {
  font-weight: 800;
}

.kode-room-card-desc {
  margin-top: 4px !important;
  color: var(--muted);
  font-size: 0.86rem;
}

.kode-room-card a,
.kode-room-card .kode-room-card-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--blue);
  font-weight: 800;
  font-size: 0.86rem;
}

.kode-room-card .kode-room-card-soon {
  color: var(--muted);
}

.kode-room-card--lab {
  left: 22%;
  top: 42%;
}

.kode-room-card--gallery {
  left: 63%;
  top: 51%;
}

.kode-room-card--travel {
  right: 2%;
  left: auto;
  top: 68%;
}

.kode-room-fallback {
  margin: 18px 2px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--muted);
  font-size: 0.86rem;
}

.kode-room-fallback a {
  color: var(--blue);
  font-weight: 700;
}

/* ---------- 04 / Now (dark section) ---------- */

.kode-now {
  /* A thin status strip between MY ROOM and KODE LOG, not a large
     section — see .kode-now-inner. overflow: hidden lets the visual
     bleed to the viewport edge (same technique as the Hero) without
     ever causing page-level horizontal scroll. */
  padding: clamp(28px, 4vw, 40px) 0;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.kode-now .kode-section-label {
  color: #9fbcff;
}

.kode-now-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(220px, 1fr);
  align-items: center;
  column-gap: clamp(20px, 3vw, 36px);
}

.kode-now-copy h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.kode-now-copy p {
  margin: 10px 0 0;
  max-width: 320px;
  color: rgba(247, 249, 252, 0.78);
  font-size: 0.88rem;
  line-height: 1.6;
}

.kode-now .button-ghost {
  margin-top: 16px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.82rem;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

.kode-now .button-ghost:hover,
.kode-now .button-ghost:focus-visible {
  border-color: #fff;
}

.kode-now-card {
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--ink-2);
}

.kode-now-card-kicker {
  margin: 0 0 8px;
  color: #9fbcff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.kode-now-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.kode-now-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kode-now-facts span {
  display: block;
  color: rgba(247, 249, 252, 0.55);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kode-now-facts strong {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 0.8rem;
}

.kode-now-visual-frame {
  /* The aspect-ratio lives on this plain <div>, not on the <img> itself.
     A replaced element's own box-sizing can fight with CSS aspect-ratio
     in a grid (its intrinsic width/height attributes pulling it back
     toward a tall 2048x768 box instead of the short wide crop below),
     which is what made this render as a narrow, tall strip instead of a
     short wide banner. A div has no intrinsic size to fight with, so
     this is the reliable place to set the box's shape. */
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 620;
  overflow: hidden;
}

.kode-now-visual {
  /* Absolutely filled into the frame above and cropped with
     object-fit — this is only ever asked to fill an already-sized box,
     never to size itself, so there is nothing for it to get wrong. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* ---------- 05 / Kode log ---------- */

.kode-log-section {
  /* Compact status-strip padding instead of the generic .kode-section
     rhythm, so this reads as a short list, not another large section.
     overflow: hidden caps .kode-log-visual's small bleed at the
     section's own edge so it can never cause horizontal scroll. */
  padding: clamp(32px, 4vw, 48px) 0;
  overflow: hidden;
}

.kode-log-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(140px, 0.55fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.kode-log-section .kode-section-head h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
}

.kode-log-section .kode-section-copy p {
  font-size: 0.92rem;
}

.kode-log-visual-frame {
  /* Same reasoning as .kode-now-visual-frame: the aspect-ratio and size
     live on this plain <div> so the <img>'s own intrinsic 2172x724 box
     can't fight the layout (that fight is what made the previous
     img-only version render smaller/taller than intended and inflated
     this section's height, pushing MESSAGE far down the page). A fixed
     bleed (kept safely in check by .kode-log-section's overflow: hidden)
     grows the frame to about 1.5x its plain-column size — still
     "perched" toward the corner, not centered/dominant. */
  position: relative;
  width: calc(100% + 190px);
  margin-right: -190px;
  aspect-ratio: 2172 / 724;
}

.kode-log-visual {
  /* object-fit: contain at the source's own ratio shows the whole
     illustration — chibi, cat, and the handwritten "これからも
     よろしくね" note — with zero cropping. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.kode-log-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.kode-log-list li {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}

.kode-log-list li:first-child {
  border-top: 1px solid var(--line);
}

.kode-log-number {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.kode-log-title {
  font-weight: 700;
  font-size: 0.94rem;
}

.kode-log-status {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kode-log-status.is-now {
  background: var(--blue-soft);
  color: var(--blue);
}

.kode-log-status.is-soon {
  background: var(--bg-soft);
  color: var(--muted);
  border: 1px solid var(--line);
}

.kode-log-arrow {
  color: var(--line-strong);
  font-size: 0.85rem;
  text-align: right;
}

/* ---------- 06 / Message ---------- */

.kode-message {
  /* A compact closing strip that lands directly on the Footer instead
     of a tall, centered ending block. */
  padding: clamp(28px, 4vw, 40px) 0 56px;
  text-align: left;
}

.kode-message-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.kode-message-copy h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.kode-message-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.kode-message-note {
  margin: 0;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.5;
  transform: rotate(-1.5deg);
}

.kode-message-cta {
  justify-self: end;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .kode-hero-grid {
    /* Visual Reference (mobile): intro copy first, then the character,
       then the CTA — not the image ahead of the self-introduction. */
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "actions";
    row-gap: 0;
  }

  .kode-hero-visual {
    /* The desktop bleed only makes sense next to the text column; once
       the grid stacks, undo it and show a contained card (matching the
       Visual Reference's mobile mock) that stays large instead of
       shrinking back into a small aside. */
    width: 100%;
    max-width: 640px;
    margin: 24px auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(238, 243, 248, 0.55));
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .kode-hero-visual img {
    width: 100%;
    height: auto;
  }

  .kode-hero-actions {
    margin-top: 0;
  }

  .kode-section-layout,
  .kode-who-layout {
    grid-template-columns: 1fr;
  }

  .kode-face {
    justify-items: start;
  }

  .kode-face-stage,
  .kode-face-picker {
    max-width: 260px;
  }

  .kode-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 04 NOW / 05 KODE LOG / 06 MESSAGE: stacked, compact status blocks
     instead of forcing the 3-column strips into a narrow viewport. */
  .kode-now-inner {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .kode-now-visual-frame {
    width: 100%;
    margin-right: 0;
    aspect-ratio: 2048 / 480;
  }

  .kode-log-inner {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .kode-log-visual-frame {
    /* No bleed once the column stacks full-width; just a small,
       centered accent under the log list. */
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
  }

  .kode-message-inner {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .kode-message-note {
    transform: none;
  }

  .kode-message-cta {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .kode-section {
    padding: 48px 0;
  }

  .kode-hero {
    padding: 30px 0 48px;
  }

  .kode-gallery-head {
    display: block;
  }

  .kode-gallery-head p {
    margin-top: 10px;
    max-width: none;
  }

  .kode-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kode-room-card {
    width: min(210px, 72vw);
    padding: 12px 14px;
  }

  .kode-now-facts {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .kode-log-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .kode-log-number {
    grid-column: 1 / -1;
  }

  .kode-log-arrow {
    display: none;
  }

  .kode-lightbox-nav {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 440px) {
  .kode-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kode-profile-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .kode-lightbox {
    padding: 14px;
  }

  .kode-lightbox-close {
    top: -46px;
    right: 0;
  }

  .kode-lightbox-prev {
    left: -6px;
  }

  .kode-lightbox-next {
    right: -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kode-hotspot {
    animation: none;
  }

  .kode-gallery-figure img {
    transition: none;
  }
}

@keyframes kode-hotspot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(49, 94, 219, 0.22);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(49, 94, 219, 0.1);
  }
}