/* ========================================================================
   BOKAH ADAPTIVE LAYOUT — TOUCH PROFILES ONLY
   ------------------------------------------------------------------------
   Desktop is intentionally absent from this file. The existing desktop
   cascade remains the frozen source of truth. This file owns only:
     1. touch phone portrait / landscape
     2. touch tablet portrait
     3. wide touch tablet landscape, kept as desktop-like as space permits
   ======================================================================== */

html.layout-touch-phone,
html.layout-touch-tablet {
  --adaptive-gutter: clamp(14px, 3.8vw, 28px);
  --adaptive-section-space: clamp(58px, 9vw, 96px);
  --adaptive-frame: rgba(128, 204, 239, .16);
  --adaptive-card: rgba(5, 8, 10, .84);
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html.layout-touch-phone body,
html.layout-touch-tablet body {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html.layout-touch-phone #main-nav,
html.layout-touch-tablet #main-nav,
html.layout-touch-phone #showreel,
html.layout-touch-tablet #showreel,
html.layout-touch-phone #about,
html.layout-touch-tablet #about,
html.layout-touch-phone #cinematography,
html.layout-touch-tablet #cinematography,
html.layout-touch-phone #photography,
html.layout-touch-tablet #photography,
html.layout-touch-phone #contact,
html.layout-touch-tablet #contact,
html.layout-touch-phone #main-footer,
html.layout-touch-tablet #main-footer {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.layout-touch-phone .showreel-shell,
html.layout-touch-tablet .showreel-shell,
html.layout-touch-phone .about-inner,
html.layout-touch-tablet .about-inner,
html.layout-touch-phone .contact-inner,
html.layout-touch-tablet .contact-inner,
html.layout-touch-phone #video-grid-all,
html.layout-touch-tablet #video-grid-all,
html.layout-touch-phone #photo-grid-all,
html.layout-touch-tablet #photo-grid-all {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------------
   PHONE — SHARED
   ------------------------------------------------------------------------ */

html.layout-touch-phone {
  --nav-h: 62px;
  --layout-gutter: var(--adaptive-gutter);
}

html.layout-touch-phone #main-nav {
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
}

html.layout-touch-phone #main-nav .nav-inner {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)) !important;
  gap: 7px !important;
}

/* Touch chrome and the primary hero hierarchy must never wait behind the
   slower data/reveal choreography. The shell still owns the subtle entrance. */
html.layout-touch-phone #main-nav .nav-logo,
html.layout-touch-tablet #main-nav .nav-logo,
html.layout-touch-phone #showreel .hero-intro,
html.layout-touch-tablet #showreel .hero-intro {
  opacity: 1 !important;
  visibility: visible !important;
}

html.layout-touch-phone #main-nav .nav-logo {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  column-gap: 7px !important;
  row-gap: 1px !important;
  overflow: hidden !important;
}

html.layout-touch-phone #main-nav .logo-img {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 34px !important;
  height: 34px !important;
}

html.layout-touch-phone #main-nav .logo-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(.72rem, 3.25vw, .92rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .09em !important;
}

html.layout-touch-phone #main-nav .logo-sub {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(.39rem, 1.72vw, .5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: .05em !important;
}

html.layout-touch-phone #main-nav .logo-rule {
  display: none !important;
}

html.layout-touch-phone #main-nav .language-switcher {
  order: 2 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 3px !important;
  gap: 1px !important;
  border-radius: 19px !important;
}

html.layout-touch-phone #main-nav .language-switcher a {
  min-width: 0 !important;
  height: 30px !important;
  padding: 0 8px !important;
  gap: 4px !important;
  font-size: clamp(.53rem, 2.25vw, .67rem) !important;
  letter-spacing: .015em !important;
}

html.layout-touch-phone #main-nav .language-flag {
  width: 13px !important;
  height: 13px !important;
}

html.layout-touch-phone #main-nav .language-divider {
  display: none !important;
}

html.layout-touch-phone #main-nav .nav-toggle {
  order: 3 !important;
  display: flex !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1002 !important;
}

html.layout-touch-phone #main-nav .nav-links,
html.layout-touch-phone.lang-ko #main-nav .nav-links {
  display: flex !important;
  position: fixed !important;
  inset: var(--nav-h) 0 auto 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-5px) !important;
  background: rgba(4, 7, 9, .98) !important;
  z-index: 1001 !important;
}

html.layout-touch-phone #main-nav .nav-links.open,
html.layout-touch-phone.lang-ko #main-nav .nav-links.open {
  max-height: min(calc(100dvh - var(--nav-h)), 360px) !important;
  padding: 7px 0 12px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow-y: auto !important;
}

html.layout-touch-phone #main-nav .nav-links a {
  min-height: 48px !important;
  justify-content: center !important;
}

html.layout-touch-phone #showreel.section-showreel {
  min-height: 0 !important;
  padding: calc(var(--nav-h) + 10px) 5px 58px !important;
}

html.layout-touch-phone #showreel .showreel-shell {
  width: calc(100% - 2px) !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: clamp(36px, 10vw, 48px) 8px 10px !important;
  border-radius: 14px !important;
}

html.layout-touch-phone #showreel .hero-intro {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-inline: 8px !important;
  text-align: center !important;
}

html.layout-touch-phone #showreel .hero-kicker {
  margin-bottom: 18px !important;
  font-size: clamp(.58rem, 2.75vw, .72rem) !important;
  letter-spacing: clamp(.14em, .9vw, .24em) !important;
  white-space: nowrap !important;
}

html.layout-touch-phone #showreel .hero-title {
  max-width: 100% !important;
  margin: 0 auto 16px !important;
  font-size: clamp(1.62rem, 7.3vw, 2.05rem) !important;
  line-height: 1.04 !important;
  letter-spacing: .025em !important;
  color: #edf4f7 !important;
  -webkit-text-fill-color: #edf4f7 !important;
  background: none !important;
  white-space: normal !important;
  text-wrap: balance !important;
  overflow: visible !important;
}

html.layout-touch-phone #showreel .hero-role {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 8px 12px !important;
  justify-content: center !important;
  white-space: normal !important;
  text-align: center !important;
  text-wrap: balance !important;
  font-size: clamp(.53rem, 2.35vw, .67rem) !important;
  line-height: 1.45 !important;
  letter-spacing: .055em !important;
}

html.layout-touch-phone #showreel .showreel-player-stack {
  width: 100% !important;
  max-width: none !important;
  margin: 28px auto 0 !important;
  gap: 8px !important;
}

html.layout-touch-phone #showreel .showreel-sound-toggle {
  min-width: 126px !important;
  min-height: 40px !important;
  margin-inline: auto !important;
}

html.layout-touch-phone #showreel .showreel-player {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 10px !important;
}

html.layout-touch-phone #about.section-about,
html.layout-touch-phone #cinematography.portfolio-section,
html.layout-touch-phone #photography.portfolio-section,
html.layout-touch-phone #contact.section-contact {
  padding-inline: var(--adaptive-gutter) !important;
}

html.layout-touch-phone #about.section-about {
  padding-top: var(--adaptive-section-space) !important;
  padding-bottom: var(--adaptive-section-space) !important;
}

html.layout-touch-phone #about .about-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 16px !important;
  overflow: visible !important;
}

html.layout-touch-phone #about .bokah-brand-panel,
html.layout-touch-phone #about .about-left,
html.layout-touch-phone #about .about-right {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html.layout-touch-phone #about .bokah-brand-panel {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(26px, 7vw, 36px) clamp(18px, 5vw, 28px) !important;
  gap: 28px !important;
  border: 1px solid var(--adaptive-frame) !important;
  border-radius: 14px !important;
  background: var(--adaptive-card) !important;
}

html.layout-touch-phone #about .bokah-brand-copy {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html.layout-touch-phone #about .bokah-brand-copy > h3 {
  margin-block: 12px 22px !important;
  font-size: clamp(1.42rem, 6.5vw, 1.86rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance !important;
}

html.layout-touch-phone #about .bokah-brand-copy > #brand-story-body-1,
html.layout-touch-phone #about .bokah-brand-copy > #brand-story-body-1 > p {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(.88rem, 3.7vw, 1rem) !important;
  line-height: 1.72 !important;
  text-align: left !important;
  text-align-last: left !important;
  text-justify: none !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html.layout-touch-phone #about .bokah-logo-evolution {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 12px !important;
  transform: none !important;
}

html.layout-touch-phone #about .bokah-logo-card,
html.layout-touch-phone #about .bokah-logo-card-featured {
  display: grid !important;
  grid-template-columns: minmax(112px, 38%) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  gap: 9px 14px !important;
  overflow: hidden !important;
  transform: none !important;
}

html.layout-touch-phone #about .bokah-logo-year {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

/* The legacy responsive sheet assigns a fixed 245px text column. Reset every
   descendant in the touch profile so compact logo cards can size to their
   actual grid track without being clipped by the card edge. */
html.layout-touch-phone #about .bokah-logo-year > small,
html.layout-touch-phone #about .bokah-logo-year > span,
html.layout-touch-phone #about .bokah-logo-card > p {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.layout-touch-phone #about .bokah-logo-frame {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: min(100%, 132px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
}

html.layout-touch-phone #about .bokah-logo-card > p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(.72rem, 3vw, .86rem) !important;
  line-height: 1.52 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

html.layout-touch-phone #about .bokah-evolution-arrow {
  justify-self: center !important;
  transform: rotate(90deg) !important;
}

html.layout-touch-phone #about .about-left {
  order: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: clamp(26px, 7vw, 36px) clamp(18px, 5vw, 28px) !important;
  gap: 20px !important;
  border: 1px solid var(--adaptive-frame) !important;
  border-radius: 14px !important;
  background: var(--adaptive-card) !important;
}

html.layout-touch-phone #about .about-photo-wrap {
  flex: 0 0 auto !important;
  width: clamp(144px, 42vw, 176px) !important;
  height: clamp(144px, 42vw, 176px) !important;
  margin: 0 auto !important;
  transform: none !important;
}

html.layout-touch-phone #about .about-bio-block {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
}

html.layout-touch-phone #about .about-bio,
html.layout-touch-phone #about .about-bio > p {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: clamp(.88rem, 3.7vw, 1rem) !important;
  line-height: 1.72 !important;
  text-align: left !important;
  text-align-last: left !important;
  text-justify: none !important;
  overflow-wrap: anywhere !important;
}

html.layout-touch-phone #about .about-right {
  order: 3 !important;
  display: block !important;
  padding: clamp(26px, 7vw, 36px) clamp(18px, 5vw, 28px) !important;
  border: 1px solid var(--adaptive-frame) !important;
  border-radius: 14px !important;
  background: var(--adaptive-card) !important;
}

html.layout-touch-phone #about .skills-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  gap: 9px !important;
}

html.layout-touch-phone #about .skill-item,
html.layout-touch-phone #about .skill-bar {
  min-width: 0 !important;
  max-width: 100% !important;
}

html.layout-touch-phone #about .skill-item {
  height: auto !important;
  min-height: 62px !important;
  padding: 12px 13px !important;
}

html.layout-touch-phone #about .skill-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.layout-touch-phone #about .skill-name {
  min-width: 0 !important;
  line-height: 1.28 !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

html.layout-touch-phone #about .skill-pct {
  position: static !important;
  justify-self: end !important;
  align-self: start !important;
  min-width: max-content !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

html.layout-phone-portrait #about .skills-list {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

html.layout-phone-portrait #about .skill-item {
  min-height: 58px !important;
}

html.layout-touch-phone #cinematography.portfolio-section,
html.layout-touch-phone #photography.portfolio-section {
  padding-top: var(--adaptive-section-space) !important;
  padding-bottom: var(--adaptive-section-space) !important;
}

html.layout-touch-phone .portfolio-section > .gallery-title-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 26px !important;
}

html.layout-touch-phone .portfolio-section .section-title {
  max-width: 100% !important;
  font-size: clamp(1.15rem, 5.6vw, 1.55rem) !important;
  line-height: 1.15 !important;
  letter-spacing: .055em !important;
  white-space: normal !important;
}

html.layout-touch-phone .portfolio-section .cat-tabs {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 7px !important;
}

html.layout-touch-phone .portfolio-section .cat-tab {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: clamp(.57rem, 2.5vw, .69rem) !important;
}

html.layout-touch-phone .portfolio-section .cat-select {
  width: min(100%, 220px) !important;
  max-width: 100% !important;
  min-height: 44px !important;
  margin: 0 0 18px !important;
}

html.layout-touch-phone #video-grid-all,
html.layout-touch-phone #photo-grid-all {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  margin: 0 auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

html.layout-touch-phone .video-card,
html.layout-touch-phone .photo-card {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html.layout-touch-phone .pagination {
  max-width: 100% !important;
  margin: 26px auto 0 !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

html.layout-touch-phone #contact.section-contact {
  padding-top: var(--adaptive-section-space) !important;
  padding-bottom: var(--adaptive-section-space) !important;
}

html.layout-touch-phone #contact .contact-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(24px, 6vw, 34px) !important;
  gap: 34px !important;
  overflow: visible !important;
}

html.layout-touch-phone #contact .contact-profile,
html.layout-touch-phone #contact .contact-form {
  min-width: 0 !important;
  max-width: 100% !important;
}

html.layout-touch-phone #contact .contact-name {
  font-size: clamp(1.36rem, 6.4vw, 1.82rem) !important;
  line-height: 1.12 !important;
  text-wrap: balance !important;
}

html.layout-touch-phone #contact .contact-role,
html.layout-touch-phone #contact .contact-tagline,
html.layout-touch-phone #contact .contact-bio,
html.layout-touch-phone #contact .contact-bio > p {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  text-align: left !important;
  text-align-last: left !important;
  text-justify: none !important;
  overflow-wrap: anywhere !important;
}

html.layout-touch-phone #contact .cf-row--2 {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.layout-touch-phone #contact .cf-input,
html.layout-touch-phone #contact .cf-submit {
  min-height: 48px !important;
}

html.layout-touch-phone #main-footer .footer-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: var(--adaptive-gutter) !important;
  text-align: center !important;
}

/* ------------------------------------------------------------------------
   PHONE — PORTRAIT PREMIUM VISUAL POLISH
   Quiet, spacious, product-page-like presentation while preserving Bokah's
   black cinematic identity. No selector in this block can reach desktop.
   ------------------------------------------------------------------------ */

html.layout-phone-portrait {
  --nav-h: 60px;
  --adaptive-gutter: clamp(14px, 4vw, 18px);
  --adaptive-section-space: clamp(62px, 17vw, 78px);
  --adaptive-frame: rgba(151, 211, 238, .17);
  --adaptive-card: linear-gradient(180deg, rgba(9, 13, 16, .94), rgba(4, 7, 9, .88));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.layout-phone-portrait #main-nav {
  background: rgba(3, 7, 9, .82) !important;
  border-bottom-color: rgba(151, 211, 238, .12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
}

html.layout-phone-portrait #main-nav .nav-inner {
  padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)) !important;
}

html.layout-phone-portrait #main-nav .nav-logo {
  grid-template-columns: 32px minmax(0, 1fr) !important;
  column-gap: 8px !important;
}

html.layout-phone-portrait #main-nav .logo-img {
  width: 32px !important;
  height: 32px !important;
}

html.layout-phone-portrait #main-nav .logo-name {
  font-size: clamp(.7rem, 3.15vw, .82rem) !important;
  letter-spacing: .11em !important;
}

html.layout-phone-portrait #main-nav .logo-sub {
  font-size: clamp(.38rem, 1.62vw, .45rem) !important;
  letter-spacing: .035em !important;
  text-overflow: clip !important;
}

html.layout-phone-portrait #main-nav .language-switcher {
  height: 36px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .025) !important;
}

html.layout-phone-portrait #main-nav .language-switcher a {
  height: 28px !important;
  padding-inline: 7px !important;
  font-size: clamp(.51rem, 2.2vw, .62rem) !important;
}

html.layout-phone-portrait #main-nav .nav-toggle {
  flex-basis: 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-color: rgba(151, 211, 238, .23) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .24) !important;
}

html.layout-phone-portrait #showreel.section-showreel {
  padding: calc(var(--nav-h) + 12px) 8px 64px !important;
}

html.layout-phone-portrait #showreel .showreel-shell {
  width: 100% !important;
  padding: clamp(48px, 14vw, 62px) 10px 12px !important;
  border-color: rgba(151, 211, 238, .15) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(6, 10, 13, .82), rgba(2, 4, 6, .72)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html.layout-phone-portrait #showreel .hero-kicker {
  margin-bottom: 16px !important;
  font-size: clamp(.56rem, 2.5vw, .66rem) !important;
  letter-spacing: .2em !important;
}

html.layout-phone-portrait #showreel .hero-title {
  margin-bottom: 15px !important;
  font-size: clamp(1.54rem, 6.9vw, 1.88rem) !important;
  line-height: 1.06 !important;
  letter-spacing: .018em !important;
}

html.layout-phone-portrait #showreel .hero-role {
  padding: 7px 13px !important;
  border-color: rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .018) !important;
  font-size: clamp(.52rem, 2.28vw, .62rem) !important;
  line-height: 1.42 !important;
}

html.layout-phone-portrait #showreel .showreel-player-stack {
  margin-top: 34px !important;
  gap: 10px !important;
}

html.layout-phone-portrait #showreel .showreel-sound-toggle {
  min-width: 132px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  background: rgba(4, 9, 12, .88) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26) !important;
}

html.layout-phone-portrait #showreel .showreel-player {
  border-radius: 15px !important;
  border-color: rgba(151, 211, 238, .16) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34) !important;
  overflow: hidden !important;
}

html.layout-phone-portrait #about .about-inner {
  gap: 18px !important;
}

html.layout-phone-portrait #about .bokah-brand-panel,
html.layout-phone-portrait #about .about-left,
html.layout-phone-portrait #about .about-right,
html.layout-phone-portrait #contact .contact-inner {
  border-color: rgba(151, 211, 238, .15) !important;
  border-radius: 20px !important;
  background: var(--adaptive-card) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .022) !important;
}

html.layout-phone-portrait #about .bokah-brand-panel,
html.layout-phone-portrait #about .about-left,
html.layout-phone-portrait #about .about-right {
  padding: clamp(24px, 6.5vw, 30px) !important;
}

html.layout-phone-portrait #about .bokah-brand-copy > h3 {
  margin-block: 12px 20px !important;
  font-size: clamp(1.36rem, 6.1vw, 1.64rem) !important;
  line-height: 1.1 !important;
}

html.layout-phone-portrait #about .bokah-brand-copy > #brand-story-body-1,
html.layout-phone-portrait #about .bokah-brand-copy > #brand-story-body-1 > p,
html.layout-phone-portrait #about .about-bio,
html.layout-phone-portrait #about .about-bio > p,
html.layout-phone-portrait #contact .contact-bio,
html.layout-phone-portrait #contact .contact-bio > p {
  font-size: clamp(.88rem, 3.65vw, .96rem) !important;
  line-height: 1.78 !important;
  color: rgba(226, 234, 238, .72) !important;
}

html.layout-phone-portrait #about .bokah-logo-evolution {
  gap: 14px !important;
}

html.layout-phone-portrait #about .bokah-logo-card,
html.layout-phone-portrait #about .bokah-logo-card-featured {
  grid-template-columns: minmax(100px, 34%) minmax(0, 1fr) !important;
  padding: 15px !important;
  gap: 8px 14px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .018) !important;
}

html.layout-phone-portrait #about .bokah-logo-card > p {
  font-size: clamp(.72rem, 3vw, .82rem) !important;
  line-height: 1.55 !important;
  color: rgba(226, 234, 238, .74) !important;
}

html.layout-phone-portrait #about .about-photo-wrap {
  width: clamp(150px, 42vw, 168px) !important;
  height: clamp(150px, 42vw, 168px) !important;
}

html.layout-phone-portrait #about .about-name {
  margin-top: 2px !important;
  font-size: clamp(1.28rem, 5.8vw, 1.56rem) !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html.layout-phone-portrait #about .about-bio-block > .label-tag,
html.layout-phone-portrait #about .about-resume-btn {
  margin-inline: auto !important;
}

html.layout-phone-portrait #about .skill-item {
  min-height: 60px !important;
  padding: 13px 14px !important;
  border-radius: 13px !important;
  border-color: rgba(151, 211, 238, .12) !important;
  background: rgba(255, 255, 255, .018) !important;
}

html.layout-phone-portrait #about .skill-name {
  font-size: .72rem !important;
  letter-spacing: .08em !important;
}

html.layout-phone-portrait #about .skill-pct {
  font-size: .66rem !important;
}

html.layout-phone-portrait .portfolio-section {
  padding-inline: 12px !important;
}

html.layout-phone-portrait .portfolio-section::before {
  inset-inline: 12px !important;
  border-radius: 20px !important;
  border-color: rgba(151, 211, 238, .14) !important;
  background: linear-gradient(180deg, rgba(6, 10, 13, .7), rgba(2, 4, 6, .56)) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25) !important;
}

html.layout-phone-portrait .portfolio-section .section-title {
  font-size: clamp(1.16rem, 5.35vw, 1.42rem) !important;
  letter-spacing: .07em !important;
}

html.layout-phone-portrait #video-grid-all,
html.layout-phone-portrait #photo-grid-all {
  gap: 9px !important;
}

html.layout-phone-portrait .video-card,
html.layout-phone-portrait .photo-card {
  border-radius: 11px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
}

html.layout-phone-portrait #contact .contact-inner {
  padding: clamp(20px, 6vw, 28px) !important;
  gap: 0 !important;
}

html.layout-phone-portrait #contact .contact-profile,
html.layout-phone-portrait #contact .contact-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html.layout-phone-portrait #contact .contact-profile {
  padding: 2px 0 32px !important;
}

html.layout-phone-portrait #contact .contact-form {
  padding: 32px 0 2px !important;
  border-top: 1px solid rgba(151, 211, 238, .13) !important;
}

html.layout-phone-portrait #contact .contact-form-heading h3 {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(1.62rem, 7.2vw, 1.95rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance !important;
}

html.layout-phone-portrait #contact .contact-name,
html.layout-phone-portrait #contact .contact-form h3 {
  letter-spacing: -.02em !important;
}

html.layout-phone-portrait #contact .cf-input {
  border-radius: 11px !important;
  border-color: rgba(151, 211, 238, .13) !important;
  background: rgba(255, 255, 255, .018) !important;
}

html.layout-phone-portrait #contact .cf-submit {
  border-radius: 25px !important;
  box-shadow: 0 14px 34px rgba(77, 177, 220, .2) !important;
}

/* One compact category control is calmer and substantially shorter on a
   portrait phone than a second row of segmented buttons. */
html.layout-phone-portrait #cinematography .cat-tabs,
html.layout-phone-portrait #photography .cat-tabs {
  display: none !important;
}

html.layout-phone-portrait #cinematography .cat-select,
html.layout-phone-portrait #photography .cat-select {
  display: block !important;
  width: min(100%, 260px) !important;
  min-height: 44px !important;
  margin: 0 0 22px !important;
  border-radius: 12px !important;
  background-color: rgba(255, 255, 255, .025) !important;
}

/* Phone portrait modal: preserve the proven frame/info/buttons arrangement,
   but constrain every writer to the visible viewport and safe-area. */
html.layout-phone-portrait #video-modal.open,
html.layout-phone-portrait #lightbox.open {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding-inline: 4px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html.layout-phone-portrait #video-modal.open > .modal-box {
  width: calc(100vw - 10px) !important;
  max-width: calc(100vw - 10px) !important;
  height: auto !important;
  max-height: calc(100dvh - 118px) !important;
  flex: 0 0 auto !important;
}

html.layout-phone-portrait #video-modal.open .modal-video-wrap {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 0 auto !important;
}

html.layout-phone-portrait #video-modal.open .modal-info {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: min(36dvh, 190px) !important;
  overflow-y: auto !important;
}

html.layout-phone-portrait #video-modal.open > #video-prev,
html.layout-phone-portrait #video-modal.open > #video-next,
html.layout-phone-portrait #lightbox.open > #photo-prev,
html.layout-phone-portrait #lightbox.open > #photo-next {
  min-height: 42px !important;
}

/* ------------------------------------------------------------------------
   PHONE — LANDSCAPE
   ------------------------------------------------------------------------ */

html.layout-phone-landscape {
  --nav-h: 56px;
  --adaptive-gutter: clamp(16px, 3vw, 28px);
  --adaptive-section-space: clamp(46px, 8vh, 70px);
}

html.layout-phone-landscape #main-nav .logo-sub {
  display: block !important;
  max-width: min(32vw, 210px) !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(7px, 1.05vw, 8px) !important;
  letter-spacing: .035em !important;
}

html.layout-phone-landscape #main-nav .nav-logo {
  grid-template-rows: auto auto !important;
}

html.layout-phone-landscape #showreel.section-showreel {
  padding-top: calc(var(--nav-h) + 8px) !important;
  padding-bottom: 34px !important;
}

html.layout-phone-landscape #showreel .showreel-shell {
  width: calc(100% - 20px) !important;
  padding: 24px 14px 12px !important;
}

html.layout-phone-landscape #showreel .hero-kicker {
  margin-bottom: 8px !important;
  font-size: .58rem !important;
}

html.layout-phone-landscape #showreel .hero-title {
  margin-bottom: 8px !important;
  font-size: clamp(1.32rem, 4vw, 1.82rem) !important;
}

html.layout-phone-landscape #showreel .hero-role {
  padding-block: 6px !important;
  font-size: clamp(10px, 1.45vw, 11.5px) !important;
}

html.layout-phone-landscape #showreel .showreel-player-stack {
  width: min(100%, 760px) !important;
  margin-top: 14px !important;
}

html.layout-phone-landscape #showreel .showreel-sound-toggle {
  min-height: 34px !important;
}

html.layout-phone-landscape #about .bokah-brand-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 26px !important;
  padding: clamp(24px, 4vw, 34px) !important;
}

html.layout-phone-landscape #about .about-inner {
  width: 100% !important;
  max-width: 1040px !important;
  margin-inline: auto !important;
}

html.layout-phone-landscape #about .bokah-brand-copy {
  width: 100% !important;
  max-width: 100% !important;
}

html.layout-phone-landscape #about .bokah-brand-copy > h3 {
  margin-block: 10px 16px !important;
  font-size: clamp(1.35rem, 3.8vw, 1.78rem) !important;
}

html.layout-phone-landscape #about .bokah-brand-copy > #brand-story-body-1,
html.layout-phone-landscape #about .bokah-brand-copy > #brand-story-body-1 > p {
  font-size: clamp(.78rem, 1.9vw, .93rem) !important;
  line-height: 1.68 !important;
}

html.layout-phone-landscape #about .bokah-logo-evolution {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) !important;
  align-items: stretch !important;
  align-self: center !important;
  width: 100% !important;
  gap: 10px !important;
}

html.layout-phone-landscape #about .bokah-logo-card,
html.layout-phone-landscape #about .bokah-logo-card-featured {
  grid-template-columns: clamp(84px, 15vw, 118px) minmax(0, 1fr) !important;
  padding: clamp(12px, 2.1vw, 17px) !important;
  gap: 8px 12px !important;
}

html.layout-phone-landscape #about .bokah-logo-frame {
  width: min(100%, 118px) !important;
}

html.layout-phone-landscape #about .bokah-logo-card > p {
  font-size: clamp(10.5px, 1.55vw, 12.5px) !important;
  line-height: 1.48 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

html.layout-phone-landscape #about .bokah-evolution-arrow {
  align-self: center !important;
  justify-self: center !important;
  transform: none !important;
}

html.layout-phone-landscape #about .about-left {
  display: grid !important;
  grid-template-columns: clamp(142px, 22vw, 180px) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 16px 26px !important;
  padding: clamp(24px, 4vw, 34px) !important;
}

html.layout-phone-landscape #about .about-mobile-bio-label {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  margin: 0 !important;
}

html.layout-phone-landscape #about .about-photo-wrap {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: center !important;
  margin: 8px 0 0 !important;
}

html.layout-phone-landscape #about .about-bio-block {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.layout-phone-landscape #about .about-photo-wrap {
  width: clamp(142px, 22vw, 180px) !important;
  height: clamp(142px, 22vw, 180px) !important;
}

html.layout-phone-landscape #about .about-name {
  font-size: clamp(1.22rem, 3vw, 1.62rem) !important;
  line-height: 1.14 !important;
}

html.layout-phone-landscape #about .about-bio,
html.layout-phone-landscape #about .about-bio > p {
  font-size: clamp(.77rem, 1.75vw, .9rem) !important;
  line-height: 1.64 !important;
}

html.layout-phone-landscape #about .about-right {
  padding: clamp(24px, 4vw, 34px) !important;
}

html.layout-phone-landscape #about .skills-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
}

html.layout-phone-landscape #video-grid-all,
html.layout-phone-landscape #photo-grid-all {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.layout-phone-landscape #contact .contact-inner {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
  max-width: 1040px !important;
}

html.layout-phone-landscape #contact .contact-profile,
html.layout-phone-landscape #contact .contact-form {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html.layout-phone-landscape #contact .contact-form-heading,
html.layout-phone-landscape #contact .cf-form,
html.layout-phone-landscape #contact .cf-row {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.layout-phone-landscape #contact .cf-textarea {
  height: clamp(78px, 18vh, 110px) !important;
  min-height: 78px !important;
  max-height: 140px !important;
  resize: vertical !important;
}

html.lang-ko.layout-phone-landscape #contact .contact-tagline,
html.lang-ko.layout-phone-landscape #about .about-bio,
html.lang-ko.layout-phone-landscape #about .about-bio > p {
  text-align: left !important;
  text-align-last: left !important;
  text-justify: none !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  letter-spacing: normal !important;
}

@media (min-width: 740px) and (max-width: 899px) {
  html.layout-phone-landscape #contact .contact-tagline {
    text-align: left !important;
    text-align-last: left !important;
    text-justify: none !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    letter-spacing: normal !important;
  }
}

/* Low-height landscape phones need the photo lightbox centered inside the
   entire viewport; the legacy top-heavy modal padding clips its info bar. */
@media (max-height: 420px) {
  html.layout-phone-landscape #lightbox.open {
    padding-block: 8px !important;
  }

  html.layout-phone-landscape #lightbox.open .lightbox-box {
    max-height: calc(100dvh - 16px) !important;
  }
}

/* ------------------------------------------------------------------------
   TABLET — SHARED
   ------------------------------------------------------------------------ */

html.layout-touch-tablet {
  --layout-gutter: clamp(24px, 4vw, 52px);
  --adaptive-gutter: clamp(24px, 4vw, 52px);
  --adaptive-section-space: clamp(72px, 9vw, 112px);
}

html.layout-touch-tablet #showreel.section-showreel {
  min-height: 0 !important;
  padding-inline: var(--adaptive-gutter) !important;
  padding-bottom: 64px !important;
}

html.layout-touch-tablet #showreel .showreel-shell {
  width: 100% !important;
  max-width: 1540px !important;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto !important;
}

html.layout-touch-tablet #showreel .showreel-player {
  width: min(100%, 1120px) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
}

html.layout-touch-tablet #showreel .hero-title {
  color: #edf4f7 !important;
  -webkit-text-fill-color: #edf4f7 !important;
  background: none !important;
}

html.layout-touch-tablet #about.section-about,
html.layout-touch-tablet #cinematography.portfolio-section,
html.layout-touch-tablet #photography.portfolio-section,
html.layout-touch-tablet #contact.section-contact {
  padding-inline: var(--adaptive-gutter) !important;
}

html.layout-touch-tablet #about .about-inner,
html.layout-touch-tablet #contact .contact-inner {
  width: 100% !important;
  max-width: 1540px !important;
  margin-inline: auto !important;
}

html.layout-touch-tablet #video-grid-all,
html.layout-touch-tablet #photo-grid-all {
  width: 100% !important;
  max-width: 1540px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

html.layout-touch-tablet #about .about-bio-block,
html.layout-touch-tablet #about .about-bio,
html.layout-touch-tablet #about .about-bio > p {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Tablet visual finish: restrained glass, generous radii, and consistent
   surface depth across portrait and landscape without touching desktop. */
html.layout-touch-tablet {
  --adaptive-frame: rgba(151, 211, 238, .16);
  --adaptive-card: linear-gradient(180deg, rgba(8, 12, 15, .93), rgba(3, 6, 8, .86));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.layout-touch-tablet #main-nav {
  background: rgba(3, 7, 9, .84) !important;
  border-bottom-color: rgba(151, 211, 238, .12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
  backdrop-filter: blur(20px) saturate(125%) !important;
}

html.layout-touch-tablet #showreel .showreel-shell,
html.layout-touch-tablet #about .about-inner,
html.layout-touch-tablet #contact .contact-inner {
  border-color: rgba(151, 211, 238, .15) !important;
  border-radius: 20px !important;
  box-shadow: 0 26px 72px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .02) !important;
}

html.layout-touch-tablet #about .bokah-logo-card,
html.layout-touch-tablet #about .bokah-logo-card-featured,
html.layout-touch-tablet #about .skill-item {
  border-color: rgba(151, 211, 238, .13) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .018) !important;
}

html.layout-touch-tablet .portfolio-section::before {
  border-color: rgba(151, 211, 238, .14) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(6, 10, 13, .68), rgba(2, 4, 6, .54)) !important;
  box-shadow: 0 26px 72px rgba(0, 0, 0, .24) !important;
}

html.layout-touch-tablet .video-card,
html.layout-touch-tablet .photo-card {
  border-radius: 11px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important;
}

/* ------------------------------------------------------------------------
   TABLET — PORTRAIT
   ------------------------------------------------------------------------ */

html.layout-tablet-portrait {
  --nav-h: 72px;
}

html.layout-tablet-portrait #main-nav .nav-inner {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 22px !important;
}

html.layout-tablet-portrait #main-nav .nav-toggle {
  display: flex !important;
  order: 3 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
}

html.layout-tablet-portrait #main-nav .nav-links {
  display: flex !important;
  position: fixed !important;
  inset: var(--nav-h) 0 auto 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: rgba(4, 7, 9, .98) !important;
}

html.layout-tablet-portrait #main-nav .nav-links.open {
  max-height: min(calc(100dvh - var(--nav-h)), 420px) !important;
  padding-block: 10px 16px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.layout-tablet-portrait #showreel.section-showreel {
  padding-top: calc(var(--nav-h) + 18px) !important;
}

html.layout-tablet-portrait #showreel .showreel-shell {
  padding: clamp(46px, 7vw, 68px) clamp(24px, 4vw, 42px) 28px !important;
}

html.layout-tablet-portrait #showreel .hero-title {
  font-size: clamp(2rem, 6vw, 3.4rem) !important;
}

html.layout-tablet-portrait #about.section-about {
  padding-top: var(--adaptive-section-space) !important;
  padding-bottom: var(--adaptive-section-space) !important;
}

html.layout-tablet-portrait #about .about-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 18px !important;
  overflow: visible !important;
}

html.layout-tablet-portrait #about .bokah-brand-panel {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 38px !important;
  gap: 30px !important;
  overflow: hidden !important;
}

html.layout-tablet-portrait #about .bokah-brand-copy,
html.layout-tablet-portrait #about .bokah-logo-evolution {
  width: 100% !important;
  max-width: 680px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html.layout-tablet-portrait #about .bokah-logo-evolution {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) !important;
  gap: 12px !important;
}

html.layout-tablet-portrait #about .bokah-logo-card,
html.layout-tablet-portrait #about .bokah-logo-card-featured {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
  transform: none !important;
}

html.layout-tablet-portrait #about .bokah-logo-frame {
  width: min(100%, 150px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}

html.layout-tablet-portrait #about .about-left,
html.layout-tablet-portrait #about .about-right {
  grid-row: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 30px !important;
  overflow: visible !important;
}

html.layout-tablet-portrait #about .about-left {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 22px !important;
}

html.layout-tablet-portrait #about .about-right {
  grid-column: 2 !important;
}

html.layout-tablet-portrait #about .about-photo-wrap {
  width: clamp(164px, 22vw, 210px) !important;
  height: clamp(164px, 22vw, 210px) !important;
  flex-basis: auto !important;
}

html.layout-tablet-portrait #about .skills-list {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html.layout-tablet-portrait #video-grid-all {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.layout-tablet-portrait #photo-grid-all {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.layout-tablet-portrait #contact .contact-inner {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 38px !important;
}

/* Compact portrait tablets (small Android tablets and narrow split-screen
   iPads) need a large-phone reading flow instead of two compressed columns. */
@media (max-width: 700px) {
  html.layout-tablet-portrait #about .about-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 16px !important;
  }

  html.layout-tablet-portrait #about .bokah-brand-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 30px !important;
  }

  html.layout-tablet-portrait #about .bokah-logo-evolution {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 500px !important;
    gap: 14px !important;
  }

  html.layout-tablet-portrait #about .bokah-evolution-arrow {
    justify-self: center !important;
    transform: rotate(90deg) !important;
  }

  html.layout-tablet-portrait #about .about-left,
  html.layout-tablet-portrait #about .about-right {
    grid-column: 1 !important;
    width: 100% !important;
  }

  html.layout-tablet-portrait #about .about-left {
    grid-row: 2 !important;
  }

  html.layout-tablet-portrait #about .about-right {
    grid-row: 3 !important;
  }

  html.layout-tablet-portrait #photo-grid-all {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.layout-tablet-portrait #contact .contact-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 620px !important;
  }
}

/* ------------------------------------------------------------------------
   TABLET — WIDE LANDSCAPE, DESKTOP-LIKE
   ------------------------------------------------------------------------ */

html.layout-tablet-wide {
  --nav-h: 76px;
}

html.layout-tablet-wide #main-nav {
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
}

html.layout-tablet-wide #main-nav .nav-inner {
  display: flex !important;
  width: calc(100% - 48px) !important;
  max-width: 1540px !important;
  height: 100% !important;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: clamp(12px, 2vw, 28px) !important;
  overflow: visible !important;
}

html.layout-tablet-wide #main-nav .nav-toggle {
  display: none !important;
}

html.layout-tablet-wide #main-nav .nav-logo {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  flex: 0 1 clamp(235px, 29vw, 360px) !important;
  min-width: 210px !important;
  max-width: 360px !important;
  column-gap: 9px !important;
  row-gap: 1px !important;
}

html.layout-tablet-wide #main-nav .logo-img {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 42px !important;
  height: 42px !important;
}

html.layout-tablet-wide #main-nav .logo-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: clamp(.82rem, 1.2vw, .92rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .1em !important;
  white-space: nowrap !important;
}

html.layout-tablet-wide #main-nav .logo-sub {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: clamp(.58rem, .82vw, .66rem) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html.layout-tablet-wide #main-nav .logo-rule {
  display: none !important;
}

html.layout-tablet-wide #main-nav .nav-links,
html.layout-tablet-wide.lang-ko #main-nav .nav-links {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(9px, 1.35vw, 20px) !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.layout-tablet-wide #main-nav .nav-links li {
  display: flex !important;
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html.layout-tablet-wide #main-nav .nav-link {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  min-height: 38px !important;
  padding: 0 clamp(5px, .7vw, 10px) !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(.57rem, .82vw, .7rem) !important;
  letter-spacing: clamp(.06em, .14vw, .11em) !important;
  white-space: nowrap !important;
}

html.layout-tablet-wide #main-nav .language-switcher {
  flex: 0 0 auto !important;
  height: 40px !important;
  padding: 3px !important;
}

html.layout-tablet-wide #main-nav .language-switcher a {
  height: 32px !important;
  padding-inline: 8px !important;
  font-size: clamp(.58rem, .8vw, .69rem) !important;
}

@media (max-width: 1100px) {
  html.layout-tablet-wide #main-nav .nav-inner {
    width: calc(100% - 32px) !important;
    gap: 7px !important;
  }

  html.layout-tablet-wide #main-nav .nav-logo {
    flex: 0 0 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 7px !important;
  }

  html.layout-tablet-wide #main-nav .logo-img {
    width: 38px !important;
    height: 38px !important;
  }

  html.layout-tablet-wide #main-nav .logo-name {
    font-size: .76rem !important;
    letter-spacing: .08em !important;
  }

  html.layout-tablet-wide #main-nav .logo-sub {
    font-size: .46rem !important;
    letter-spacing: .035em !important;
  }

  html.layout-tablet-wide #main-nav .nav-links,
  html.layout-tablet-wide.lang-ko #main-nav .nav-links {
    gap: 2px !important;
  }

  html.layout-tablet-wide #main-nav .nav-link {
    min-height: 36px !important;
    padding-inline: 4px !important;
    font-size: .54rem !important;
    letter-spacing: .045em !important;
  }

  html.layout-tablet-wide #main-nav .language-switcher {
    height: 38px !important;
  }

  html.layout-tablet-wide #main-nav .language-switcher a {
    height: 30px !important;
    padding-inline: 6px !important;
    font-size: .56rem !important;
  }
}

html.layout-tablet-wide #showreel.section-showreel {
  padding-top: calc(var(--nav-h) + 12px) !important;
}

html.layout-tablet-wide #showreel .showreel-shell {
  width: 100% !important;
  max-width: 1540px !important;
  padding: clamp(34px, 5vw, 70px) clamp(34px, 5vw, 80px) 30px !important;
}

html.layout-tablet-wide #showreel .hero-title {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important;
  line-height: 1.04 !important;
}

html.layout-tablet-wide #showreel .hero-role {
  font-size: clamp(.58rem, .82vw, .7rem) !important;
}

html.layout-tablet-wide #showreel .showreel-player-stack {
  width: min(100%, 900px) !important;
  margin-inline: auto !important;
}

html.layout-tablet-wide #about.section-about {
  padding-top: var(--adaptive-section-space) !important;
  padding-bottom: var(--adaptive-section-space) !important;
}

html.layout-tablet-wide #about .about-inner {
  display: grid !important;
  grid-template-columns: minmax(350px, .78fr) minmax(0, 1.22fr) !important;
  grid-template-rows: auto auto !important;
  width: 100% !important;
  max-width: 1540px !important;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

html.layout-tablet-wide #about .bokah-brand-panel {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(350px, .78fr) minmax(0, 1.22fr) !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(32px, 4vw, 48px) 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

html.layout-tablet-wide #about .bokah-brand-copy {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(24px, 3vw, 40px) !important;
  transform: none !important;
}

html.layout-tablet-wide #about .bokah-brand-copy > #brand-story-body-1,
html.layout-tablet-wide #about .bokah-brand-copy > #brand-story-body-1 > p {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  line-height: 1.7 !important;
  overflow-wrap: anywhere !important;
}

html.layout-tablet-wide #about .bokah-logo-evolution {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: calc(100% - 48px) !important;
  max-width: calc(100% - 48px) !important;
  min-width: 0 !important;
  margin: 0 24px !important;
  padding: 0 !important;
  gap: 14px !important;
  transform: none !important;
}

html.layout-tablet-wide #about .bokah-logo-card,
html.layout-tablet-wide #about .bokah-logo-card-featured {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow: hidden !important;
  transform: none !important;
}

html.layout-tablet-wide #about .bokah-logo-year {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: min(100%, 160px) !important;
  max-width: 160px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

html.layout-tablet-wide #about .bokah-logo-frame {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: min(100%, 160px) !important;
  max-width: 160px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin-inline: auto !important;
}

html.layout-tablet-wide #about .bokah-logo-card > p {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 12px 0 0 !important;
  font-size: clamp(.7rem, 1.05vw, .82rem) !important;
  line-height: 1.55 !important;
  text-align: left !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

html.layout-tablet-wide.lang-ko #about .bokah-brand-copy > #brand-story-body-1,
html.layout-tablet-wide.lang-ko #about .bokah-brand-copy > #brand-story-body-1 > p,
html.layout-tablet-wide.lang-ko #about .bokah-logo-card > p {
  letter-spacing: 0 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

html.layout-tablet-wide #about .about-left,
html.layout-tablet-wide #about .about-right {
  grid-row: 2 !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(28px, 3.2vw, 40px) !important;
  overflow: visible !important;
}

html.layout-tablet-wide #about .about-left {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 22px !important;
}

html.layout-tablet-wide #about .about-left > .about-mobile-bio-label {
  display: none !important;
}

html.layout-tablet-wide #about .about-photo-wrap {
  width: clamp(132px, 15vw, 176px) !important;
  height: clamp(132px, 15vw, 176px) !important;
  flex-basis: auto !important;
  margin: 0 auto !important;
  transform: none !important;
}

html.layout-tablet-wide #about .about-bio-block {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
}

html.layout-tablet-wide #about .about-bio,
html.layout-tablet-wide #about .about-bio > p {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  text-align: left !important;
  text-align-last: left !important;
  text-justify: none !important;
}

html.layout-tablet-wide #about .about-right {
  grid-column: 2 !important;
}

html.layout-tablet-wide #about .skills-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  gap: 9px 18px !important;
}

html.layout-tablet-wide #cinematography.portfolio-section,
html.layout-tablet-wide #photography.portfolio-section {
  padding-top: var(--adaptive-section-space) !important;
  padding-bottom: var(--adaptive-section-space) !important;
}

html.layout-tablet-wide #video-grid-all {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.layout-tablet-wide #photo-grid-all {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html.layout-tablet-wide #contact.section-contact {
  padding-top: var(--adaptive-section-space) !important;
  padding-bottom: var(--adaptive-section-space) !important;
}

html.layout-tablet-wide #contact .contact-inner {
  display: grid !important;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
  width: 100% !important;
  max-width: 1540px !important;
  height: auto !important;
  min-height: 0 !important;
  gap: clamp(34px, 4vw, 64px) !important;
}

/* ------------------------------------------------------------------------
   TOUCH TYPOGRAPHY AND COMPOSITION GUARDRAILS
   Keep paragraph rhythm, line length, and wrapping predictable after dynamic
   KO/EN content is injected. These rules are intentionally touch-only.
   ------------------------------------------------------------------------ */

html.layout-touch-phone #about .bokah-brand-copy > #brand-story-body-1,
html.layout-touch-phone #about .bokah-brand-copy > #brand-story-body-1 > p,
html.layout-touch-phone #about .about-bio,
html.layout-touch-phone #about .about-bio > p,
html.layout-touch-phone #contact .contact-tagline,
html.layout-touch-phone #contact .contact-form > p,
html.layout-touch-tablet #about .bokah-brand-copy > #brand-story-body-1,
html.layout-touch-tablet #about .bokah-brand-copy > #brand-story-body-1 > p,
html.layout-touch-tablet #about .about-bio,
html.layout-touch-tablet #about .about-bio > p,
html.layout-touch-tablet #contact .contact-tagline,
html.layout-touch-tablet #contact .contact-form > p {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: normal !important;
  text-align: left !important;
  text-align-last: left !important;
  text-justify: none !important;
  text-wrap: pretty !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

html.layout-touch-phone #about .bokah-brand-copy > #brand-story-body-1 > p,
html.layout-touch-phone #about .about-bio > p,
html.layout-touch-tablet #about .bokah-brand-copy > #brand-story-body-1 > p,
html.layout-touch-tablet #about .about-bio > p {
  margin: 0 !important;
}

html.layout-touch-phone #about .bokah-brand-copy > #brand-story-body-1 > p + p,
html.layout-touch-phone #about .about-bio > p + p,
html.layout-touch-tablet #about .bokah-brand-copy > #brand-story-body-1 > p + p,
html.layout-touch-tablet #about .about-bio > p + p {
  margin-top: .92em !important;
}

html.layout-touch-phone #contact #contact-form-intro,
html.layout-touch-tablet #contact #contact-form-intro {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* Korean long-form copy uses character-aware justification. Keeping the last
   line left-aligned and allowing only emergency breaks prevents stretched
   short lines and protects mixed Korean/English names on narrow devices. */
html.lang-ko.layout-touch-phone #about .bokah-brand-copy > #brand-story-body-1,
html.lang-ko.layout-touch-phone #about .bokah-brand-copy > #brand-story-body-1 > p,
html.lang-ko.layout-touch-phone #about .about-bio,
html.lang-ko.layout-touch-phone #about .about-bio > p,
html.lang-ko.layout-touch-phone #contact .contact-tagline,
html.lang-ko.layout-touch-tablet #about .bokah-brand-copy > #brand-story-body-1,
html.lang-ko.layout-touch-tablet #about .bokah-brand-copy > #brand-story-body-1 > p,
html.lang-ko.layout-touch-tablet #about .about-bio,
html.lang-ko.layout-touch-tablet #about .about-bio > p,
html.lang-ko.layout-touch-tablet #contact .contact-tagline {
  text-align: justify !important;
  text-align-last: left !important;
  text-justify: inter-character !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  letter-spacing: -.008em !important;
}

html.layout-touch-phone #about .bokah-logo-card > p,
html.layout-touch-tablet #about .bokah-logo-card > p,
html.layout-touch-phone #contact #contact-form-intro,
html.layout-touch-tablet #contact #contact-form-intro {
  text-align: left !important;
  text-align-last: left !important;
  text-justify: none !important;
  letter-spacing: normal !important;
}

html.layout-phone-portrait #contact .contact-tagline {
  font-size: clamp(.82rem, 3.55vw, .91rem) !important;
  line-height: 1.72 !important;
  color: rgba(226, 234, 238, .72) !important;
}

html.layout-phone-landscape #about .bokah-brand-copy > #brand-story-body-1,
html.layout-phone-landscape #about .bokah-brand-copy > #brand-story-body-1 > p {
  font-size: clamp(11.5px, 1.9vw, 14px) !important;
}

html.layout-phone-landscape #about .about-bio,
html.layout-phone-landscape #about .about-bio > p {
  font-size: clamp(11.25px, 1.75vw, 13.6px) !important;
}

/* Very small phones: preserve the complete brand name by reclaiming space
   from the language control instead of clipping the logo text. */
@media (max-width: 340px) {
  html.layout-phone-portrait {
    --nav-h: 60px;
  }

  html.layout-phone-portrait #main-nav .nav-inner {
    gap: 5px !important;
    min-height: 60px !important;
    padding-inline: 8px !important;
  }

  html.layout-phone-portrait #main-nav .language-switcher {
    height: 44px !important;
  }

  html.layout-phone-portrait #main-nav .language-switcher a {
    height: 36px !important;
    padding-inline: 4px !important;
    font-size: .47rem !important;
  }

  html.layout-phone-portrait #main-nav .nav-logo {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 7px !important;
  }

  html.layout-phone-portrait #main-nav .logo-img {
    width: 30px !important;
    height: 30px !important;
  }

  html.layout-phone-portrait #main-nav .logo-name {
    width: auto !important;
    max-width: none !important;
    font-size: .7rem !important;
    letter-spacing: .065em !important;
  }

  html.layout-phone-portrait #main-nav .logo-sub {
    display: none !important;
  }

  html.layout-phone-portrait #main-nav .nav-toggle {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  html.layout-phone-portrait #showreel .hero-role {
    padding: 8px 12px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  html.layout-phone-portrait #contact .contact-inner {
    padding-inline: 20px !important;
  }

  html.layout-phone-portrait #contact .contact-tagline {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  html.lang-ko.layout-phone-portrait #about .bokah-brand-copy > #brand-story-body-1,
  html.lang-ko.layout-phone-portrait #about .bokah-brand-copy > #brand-story-body-1 > p,
  html.lang-ko.layout-phone-portrait #about .about-bio,
  html.lang-ko.layout-phone-portrait #about .about-bio > p,
  html.lang-ko.layout-phone-portrait #contact .contact-tagline {
    text-align: left !important;
    text-align-last: left !important;
    text-justify: none !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    letter-spacing: normal !important;
  }
}

@media (min-width: 360px) {
  html.lang-en.layout-phone-portrait #about .bokah-brand-copy > h3 {
    font-size: clamp(1.18rem, 5.15vw, 1.34rem) !important;
    letter-spacing: .025em !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
  }
}

/* Compact landscape phones retain desktop visual language, but long copy and
   the contact form use one readable track rather than two compressed columns. */
@media (max-width: 739px) {
  html.layout-phone-landscape #contact .contact-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 680px !important;
  }

  html.layout-phone-landscape #contact .contact-profile,
  html.layout-phone-landscape #contact .contact-form {
    width: 100% !important;
  }
}

/* Wide phones become a true desktop-mini composition: desktop's major
   two-column relationships are preserved while each internal component keeps
   touch-safe dimensions and readable type. */
@media (min-width: 840px) {
  html.layout-phone-landscape #about .about-inner {
    display: grid !important;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  html.layout-phone-landscape #about .bokah-brand-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
    align-items: center !important;
    gap: clamp(20px, 3vw, 34px) !important;
  }

  html.layout-phone-landscape #about .bokah-brand-copy {
    grid-column: 1 !important;
  }

  html.layout-phone-landscape #about .bokah-logo-evolution {
    grid-column: 2 !important;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) !important;
  }

  html.layout-phone-landscape #about .bokah-logo-card,
  html.layout-phone-landscape #about .bokah-logo-card-featured {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: start !important;
    text-align: center !important;
  }

  html.layout-phone-landscape #about .bokah-logo-year,
  html.layout-phone-landscape #about .bokah-logo-frame,
  html.layout-phone-landscape #about .bokah-logo-card > p {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.layout-phone-landscape #about .bokah-logo-year {
    grid-row: 1 !important;
    text-align: center !important;
  }

  html.layout-phone-landscape #about .bokah-logo-frame {
    grid-row: 2 !important;
    width: min(100%, 106px) !important;
    margin-inline: auto !important;
  }

  html.layout-phone-landscape #about .bokah-logo-card > p {
    grid-row: 3 !important;
    margin-top: 8px !important;
    text-align: left !important;
  }

  html.layout-phone-landscape #about .about-left,
  html.layout-phone-landscape #about .about-right {
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html.layout-phone-landscape #about .about-left {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  html.layout-phone-landscape #about .about-photo-wrap,
  html.layout-phone-landscape #about .about-bio-block {
    width: 100% !important;
    max-width: 100% !important;
  }

  html.layout-phone-landscape #about .about-photo-wrap {
    width: clamp(126px, 17vw, 150px) !important;
    height: clamp(126px, 17vw, 150px) !important;
    margin: 0 auto !important;
  }

  html.layout-phone-landscape #about .about-right {
    grid-column: 2 !important;
  }
}

/* Tablet copy must not inherit the old justified/fixed-size blocks. */
html.layout-touch-tablet #about .bokah-logo-year,
html.layout-touch-tablet #about .bokah-logo-card > p {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html.layout-tablet-portrait #contact .contact-inner {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 720px !important;
}

html.layout-tablet-portrait #contact .contact-profile,
html.layout-tablet-portrait #contact .contact-form {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 700px) {
  html.layout-tablet-portrait #about .bokah-logo-card,
  html.layout-tablet-portrait #about .bokah-logo-card-featured {
    display: grid !important;
    grid-template-columns: minmax(126px, 36%) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 18px !important;
    gap: 10px 18px !important;
  }

  html.layout-tablet-portrait #about .bokah-logo-year {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }

  html.layout-tablet-portrait #about .bokah-logo-frame {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: min(100%, 144px) !important;
    margin: 0 !important;
  }

  html.layout-tablet-portrait #about .bokah-logo-card > p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
}

/* ------------------------------------------------------------------------
   TOUCH MOTION SYSTEM — RESOURCE AWARE
   Desktop remains frozen. layout-profile.js selects lite, balanced, or rich
   from reduced-motion, data saver, CPU concurrency, and available memory.
   ------------------------------------------------------------------------ */

@keyframes adaptive-touch-shell-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.994); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes adaptive-touch-ambient-sweep {
  0%, 66% { opacity: 0; transform: translate3d(-125%, 0, 0) skewX(-14deg); }
  72% { opacity: .42; }
  84% { opacity: .16; }
  100% { opacity: 0; transform: translate3d(125%, 0, 0) skewX(-14deg); }
}

@keyframes adaptive-touch-skill-glint {
  0%, 68% { transform: translate3d(-130%, 0, 0); opacity: 0; }
  76% { opacity: .72; }
  92%, 100% { transform: translate3d(230%, 0, 0); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html.layout-touch-phone,
  html.layout-touch-tablet {
    --adaptive-motion-distance: 12px;
    --adaptive-motion-duration: .56s;
    --adaptive-motion-ease: cubic-bezier(.22, .72, .2, 1);
  }

  html.layout-touch-tablet {
    --adaptive-motion-distance: 16px;
    --adaptive-motion-duration: .68s;
  }

  html.layout-tablet-wide {
    --adaptive-motion-distance: 24px;
    --adaptive-motion-duration: .82s;
  }

  html.layout-touch-phone .reveal,
  html.layout-touch-tablet .reveal,
  html.layout-touch-phone .video-card.reveal,
  html.layout-touch-phone .photo-card.reveal,
  html.layout-touch-tablet .video-card.reveal,
  html.layout-touch-tablet .photo-card.reveal {
    opacity: 0 !important;
    transform: translate3d(0, var(--adaptive-motion-distance), 0) !important;
    transition: opacity var(--adaptive-motion-duration) ease, transform var(--adaptive-motion-duration) var(--adaptive-motion-ease), border-color .24s ease, box-shadow .24s ease !important;
    backface-visibility: hidden !important;
  }

  html.layout-touch-phone .reveal.visible,
  html.layout-touch-tablet .reveal.visible,
  html.layout-touch-phone .video-card.reveal.visible,
  html.layout-touch-phone .photo-card.reveal.visible,
  html.layout-touch-tablet .video-card.reveal.visible,
  html.layout-touch-tablet .photo-card.reveal.visible,
  html.layout-touch-phone .video-card.reveal-settled,
  html.layout-touch-phone .photo-card.reveal-settled,
  html.layout-touch-tablet .video-card.reveal-settled,
  html.layout-touch-tablet .photo-card.reveal-settled {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  html.layout-touch-phone #showreel .showreel-shell,
  html.layout-touch-tablet #showreel .showreel-shell {
    animation: adaptive-touch-shell-in .7s var(--adaptive-motion-ease) both !important;
    transform-origin: 50% 18% !important;
  }

  html.layout-tablet-wide #showreel .showreel-shell {
    animation-duration: .84s !important;
  }

  html.layout-tablet-wide.chrome-ready .hero-kicker,
  html.layout-tablet-wide.chrome-ready .hero-title,
  html.layout-tablet-wide.chrome-ready .hero-role,
  html.layout-tablet-wide.chrome-ready .hero-summary,
  html.layout-tablet-wide.chrome-ready .hero-actions {
    animation-duration: .84s !important;
  }

  html.layout-touch-phone .about-left.reveal.visible .about-photo-wrap,
  html.layout-touch-phone .about-left.reveal.visible .about-bio-block,
  html.layout-touch-phone .bokah-brand-panel.reveal.visible .bokah-brand-copy,
  html.layout-touch-phone .bokah-brand-panel.reveal.visible .bokah-logo-card,
  html.layout-touch-phone .bokah-brand-panel.reveal.visible .bokah-evolution-arrow,
  html.layout-touch-tablet .about-left.reveal.visible .about-photo-wrap,
  html.layout-touch-tablet .about-left.reveal.visible .about-bio-block,
  html.layout-touch-tablet .bokah-brand-panel.reveal.visible .bokah-brand-copy,
  html.layout-touch-tablet .bokah-brand-panel.reveal.visible .bokah-logo-card,
  html.layout-touch-tablet .bokah-brand-panel.reveal.visible .bokah-evolution-arrow {
    animation-duration: var(--adaptive-motion-duration) !important;
    animation-timing-function: var(--adaptive-motion-ease) !important;
  }

  html.layout-touch-phone .video-card:active,
  html.layout-touch-phone .photo-card:active,
  html.layout-touch-tablet .video-card:active,
  html.layout-touch-tablet .photo-card:active,
  html.layout-touch-phone .cat-tab:active,
  html.layout-touch-tablet .cat-tab:active,
  html.layout-touch-phone .cf-submit:active,
  html.layout-touch-tablet .cf-submit:active {
    transform: scale(.985) !important;
    transition: transform .16s ease !important;
  }

  html.layout-touch-phone.layout-motion-lite,
  html.layout-touch-tablet.layout-motion-lite {
    --adaptive-motion-distance: 7px;
    --adaptive-motion-duration: .36s;
  }

  html.layout-touch-phone.layout-motion-lite #showreel .showreel-shell,
  html.layout-touch-tablet.layout-motion-lite #showreel .showreel-shell {
    animation-duration: .42s !important;
  }

  html.layout-touch-phone.layout-motion-rich #showreel .showreel-shell,
  html.layout-touch-tablet.layout-motion-rich #showreel .showreel-shell {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }

  html.layout-touch-phone.layout-motion-rich #showreel .showreel-shell::after,
  html.layout-touch-tablet.layout-motion-rich #showreel .showreel-shell::after {
    content: '' !important;
    position: absolute !important;
    inset: -18% -34% !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background: linear-gradient(112deg, transparent 40%, rgba(130, 205, 237, .09) 50%, transparent 60%) !important;
    mix-blend-mode: screen !important;
    animation: adaptive-touch-ambient-sweep 11s ease-in-out 1.8s infinite !important;
    will-change: transform, opacity !important;
  }

  html.layout-touch-phone.layout-motion-rich #about .skill-bar-fill,
  html.layout-touch-tablet.layout-motion-rich #about .skill-bar-fill {
    position: relative !important;
    overflow: hidden !important;
  }

  html.layout-touch-phone.layout-motion-rich #about .skill-bar-fill::after,
  html.layout-touch-tablet.layout-motion-rich #about .skill-bar-fill::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: 38% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent) !important;
    animation: adaptive-touch-skill-glint 6.8s ease-in-out 1.4s infinite !important;
    will-change: transform, opacity !important;
  }
}

/* Wide tablet modal keeps the desktop frame relationship while retaining
   touch-sized controls and the stable 16:9 owner used by main.js. */
html.layout-tablet-wide #video-modal.open > .modal-box {
  width: min(1120px, calc(100vw - 160px), calc((100dvh - 132px) * 16 / 9)) !important;
  max-width: calc(100vw - 160px) !important;
  height: auto !important;
  max-height: calc(100dvh - 24px) !important;
}

html.layout-tablet-wide #video-modal.open .modal-video-wrap {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 0 auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html.layout-touch-phone *,
  html.layout-touch-phone *::before,
  html.layout-touch-phone *::after,
  html.layout-touch-tablet *,
  html.layout-touch-tablet *::before,
  html.layout-touch-tablet *::after {
    animation: none !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}