/* Stable content visibility fallbacks and layout additions. */
:root {
  --sitefix-orange: #c85f2d;
  --sitefix-ink: #11110f;
  --sitefix-paper: #f0ede5;
  --sitefix-line: rgba(240, 237, 229, .2);
}

/* Content must never disappear when an observer or scroll animation is delayed. */
.reveal,
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.case-summary {
  max-width: 29em;
  margin: 12px 0 0;
  color: #aaa69d;
  font-size: 13px;
  line-height: 1.65;
}

.case-card h3[lang="zh-Hant"] {
  letter-spacing: .02em;
}

/* A drawn interface study: no production data, brands, amounts, or screenshots. */
.operations-study {
  position: relative;
  padding: clamp(72px, 10vw, 140px) clamp(20px, 7vw, 110px);
  background: var(--sitefix-ink);
  color: var(--sitefix-paper);
  border-top: 1px solid #2e2d2a;
}

.operations-study__head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(260px, .55fr);
  gap: 7vw;
  align-items: end;
  margin-bottom: clamp(34px, 6vw, 76px);
}

.operations-study__eyebrow,
.operations-ui__label,
.operations-ui__status,
.concept-work-label {
  font: 700 10px/1.35 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.operations-study__eyebrow { color: var(--sitefix-orange); }
.operations-study h2 {
  max-width: 10em;
  margin: 16px 0 0;
  font-size: clamp(2.4rem, 6vw, 6.4rem);
  line-height: .94;
  letter-spacing: -.035em;
}
.operations-study__head > p { max-width: 34em; margin: 0; color: #b9b5ac; }

.operations-ui {
  display: grid;
  grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
  min-height: 520px;
  border: 1px solid #514d45;
  background: #171714;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
}
.operations-ui__rail { padding: 28px; border-inline-end: 1px solid #514d45; }
.operations-ui__rail strong { display: block; margin: 13px 0 32px; font-size: 1.2rem; }
.operations-ui__rail span:not(.operations-ui__label) {
  display: block;
  padding: 14px 0;
  border-top: 1px solid #35332e;
  color: #8f8b83;
  font: 600 11px/1.4 var(--mono, ui-monospace, monospace);
}
.operations-ui__rail span.is-current { color: var(--sitefix-paper); }
.operations-ui__main { padding: clamp(24px, 4vw, 54px); }
.operations-ui__topline { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.operations-ui__status { color: #d68a63; }
.operations-ui__main h3 { margin: 22px 0 10px; font-size: clamp(2rem, 4vw, 4.2rem); line-height: .95; }
.operations-ui__main > p { max-width: 40em; color: #a9a69e; }
.operations-ui__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 44px; background: #514d45; border: 1px solid #514d45; }
.operations-ui__card { min-height: 190px; padding: 22px; background: #1d1c19; }
.operations-ui__card b { display: block; margin: 32px 0 8px; font-size: clamp(1.35rem, 2.2vw, 2.3rem); font-weight: 600; }
.operations-ui__card p { margin: 0; color: #aaa69d; font-size: 13px; line-height: 1.65; }
.operations-ui__meter { height: 2px; margin-top: 26px; background: #3c3933; }
.operations-ui__meter i { display: block; width: var(--meter, 60%); height: 100%; background: var(--sitefix-orange); }
.operations-study__note { margin: 18px 0 0; color: #7f7c75; font: 600 10px/1.6 var(--mono, ui-monospace, monospace); }

/* Every standalone study is disclosed before the fictional brand experience begins. */
.concept-work-label {
  position: fixed;
  z-index: 9999;
  inset: 14px 14px auto auto;
  margin: 0;
  padding: 10px 12px;
  color: #f4eee3;
  background: rgba(17, 17, 15, .92);
  border: 1px solid rgba(200, 95, 45, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Portal only exposes live destinations. */
.page-portal .portal-grid--single { grid-template-columns: minmax(0, 760px); background: transparent; border: 0; }
.page-portal .portal-grid--single .portal-card { border: 1px solid var(--sitefix-ink); }

html[lang="zh-Hant"] .page-about .inner-hero h1,
html[lang="zh-Hant"] .page-solutions .inner-hero h1 {
  font-size: clamp(3.2rem, 7.6vw, 7.8rem);
}

@media (max-width: 760px) {
  /* Preserve the existing fixed, line-by-line mobile scroll treatment. */

  .inner-hero { min-height: 72svh; padding-top: 18svh; padding-bottom: 8svh; }
  html[lang="zh-Hant"] .page-about .inner-hero h1,
  html[lang="zh-Hant"] .page-solutions .inner-hero h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  html[lang="zh-Hant"] .page-about .inner-hero .zh-title > span,
  html[lang="zh-Hant"] .page-solutions .inner-hero .zh-title > span { white-space: normal; }
  .content-band { padding-block: 76px; }
  .copy-block { padding-block: 42px; }

  .operations-study { padding-inline: 20px; }
  .operations-study__head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .operations-ui { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .operations-ui__rail { display: none; }
  .operations-ui__main { padding: 26px 18px; }
  .operations-ui__grid { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .operations-ui__card { min-height: 148px; }
  .concept-work-label { inset: auto 10px 10px 10px; text-align: center; }
}

/* Allow long CJK headings to wrap safely on narrow viewports. */
@media (max-width: 760px) {
  html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { word-break: normal; overflow-wrap: anywhere; line-break: strict; }
  .journal-card { grid-template-columns: minmax(0,1fr); }
  .journal-card h2 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.14; letter-spacing: -.01em; }
  .article-hero h1 { font-size: clamp(2.1rem, 10vw, 3rem); line-height: 1.12; letter-spacing: -.01em; }
  .article-copy h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.2; letter-spacing: 0; }
  main, section, article { max-width: 100%; }
}
@media (max-width: 760px) {
  .journal-card { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; }
  .journal-card > * { min-width: 0; }
  .zh-title > span { white-space: normal !important; }
  .article-hero h1 { font-size: clamp(1.95rem, 9vw, 2.6rem) !important; }
}
/* Keep narrow-viewport hero imagery from obscuring the heading during scroll. */
@media (max-width: 760px) {
  .image-window, .inner-window { transform: none !important; }
  .hero-copy { z-index: 6; }
}
@media (max-width: 760px) { .inner-window { margin-bottom: 32px; } }