/* About page only (EN /etuya-web/option-b/about/ and ID /etuya-web/option-b/id/about/). Loads after field.css. */

.about-hero .page-hero__title { max-width: 12em; }
.about-hero .page-hero__lede { max-width: 34ch; }
.about-hero__photo { margin-top: clamp(40px, 7vh, 72px); }
.about-hero__photo .band__frame { height: clamp(300px, 58vh, 640px); }
.about-hero__photo img { object-position: 50% 58%; }

/* ---------- Who we are ---------- */
.who .t-h2 { max-width: 13ch; }
.who__body { grid-column: 6 / span 6; margin-top: clamp(28px, 5vh, 56px); }
.who__body p { max-width: 58ch; color: var(--ink-2); text-wrap: pretty; }
.who__body p + p { margin-top: 1.1em; }
.who__body .who__lead {
  max-width: 30ch;
  margin-bottom: 28px;
  font: 400 clamp(1.45rem, 2.1vw, 2rem)/1.28 var(--serif);
  font-variation-settings: "opsz" 40;
  letter-spacing: -.01em;
  color: var(--ink);
}
.who__body a { color: var(--ink); text-decoration-color: var(--cobalt); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) { .who__body a:hover { color: var(--cobalt-deep); } }

/* ---------- Why ETUYA: four findings, each with its proof ---------- */
.why__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 14px;
  margin-bottom: clamp(40px, 6.5vh, 76px);
}
.why__head .t-label { grid-column: 1 / -1; }
.why__head .t-h2 { grid-column: 1 / span 9; max-width: 14ch; }
.why__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 104px);
  row-gap: clamp(44px, 7vh, 72px);
}
.why__item { padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.why__name { font: 600 13.5px/1.3 var(--sans); letter-spacing: .02em; color: var(--ink-2); }
.why__claim {
  max-width: 22ch;
  margin-top: 14px;
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 60;
  font-weight: 380;
  font-size: clamp(1.7rem, 2.45vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.016em;
  text-wrap: balance;
}
.why__proof { max-width: 50ch; margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.why__tag { margin-right: .3em; font: italic 400 1.08em/1 var(--serif); color: var(--cobalt-deep); }
.why__proof a { color: var(--cobalt-deep); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) { .why__proof a:hover { color: var(--ink); } }

/* ---------- Lineage: the history of AKSARA with Etuya's parts marked ----------
   Desktop: a horizontal axis (2012, 2017, 2019); from the 2019 stop a connector drops
   to a bus that branches into the four modules. Under 1024px: one vertical spine. */
.lineage__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 24px;
  align-items: end;
  margin-bottom: clamp(56px, 9vh, 104px);
}
.lineage__head .t-h2 { grid-column: 1 / span 7; max-width: 11em; }
.lineage__intro { grid-column: 8 / span 5; }
.lineage__intro p { max-width: 44ch; color: var(--ink-2); text-wrap: pretty; }
.lineage__legend { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-strong); font-size: 15px; line-height: 1.6; }
.lineage__legend strong { font-weight: 600; color: var(--ink); }
.lineage__keyline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cobalt-deep); white-space: nowrap; }
.lineage__key { width: 2px; height: 1.15em; background: var(--cobalt); }

.lineage__axis {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-top: 36px;
}
.lineage__axis::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 1px;
  background: var(--ink-3);
  transform-origin: left center;
}
.lineage__stop { position: relative; min-width: 0; }
.lineage__stop::before, .lineage__module::before {
  content: "";
  position: absolute;
  left: 0; top: -36px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.lineage__stop:nth-child(1) { grid-column: 1 / span 3; }
.lineage__stop:nth-child(2) { grid-column: 4 / span 3; }
.lineage__stop--launch { grid-column: 7 / span 6; }
.lineage__stop--launch::before { background: var(--ink); }
.lineage__when {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
}
.lineage__what { margin-top: 14px; font: 600 16.5px/1.35 var(--sans); }
.lineage__desc { max-width: 38ch; margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.lineage__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--gutter); max-width: 560px; margin-top: 16px; }
.lineage__parts div { padding-top: 8px; border-top: 1px solid var(--rule); }
.lineage__parts dt { font: italic 400 1.3rem/1.2 var(--serif); }
.lineage__parts dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.lineage__etuya { max-width: 44ch; margin-top: 18px; padding-left: 12px; border-left: 2px solid var(--cobalt); font-size: 15px; line-height: 1.5; color: var(--ink); }
.lineage__mark { display: block; margin-bottom: 2px; font: 600 12.5px/1.3 var(--sans); letter-spacing: .03em; color: var(--cobalt-deep); }
.lineage__launch { position: relative; padding-bottom: clamp(64px, 9vh, 96px); }
.lineage__launch::after {
  content: "";
  position: absolute;
  left: 6px; top: -23px; bottom: -6px;
  width: 1px;
  background: var(--ink-3);
}
.lineage__branch { position: relative; width: calc(200% + var(--gutter)); margin-left: calc(-100% - var(--gutter)); padding-top: 36px; }
.lineage__branch::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 1px;
  background: var(--ink-3);
  transform-origin: left center;
}
.lineage__then { position: absolute; left: 0; top: -28px; font: italic 400 1.15rem/1.2 var(--serif); color: var(--ink-2); }
.lineage__modules { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; }
.lineage__module { position: relative; min-width: 0; }
.lineage__mod { font: 400 clamp(1.45rem, 1.9vw, 1.9rem)/1.1 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.012em; }
.lineage__module .link-arrow { margin-top: 12px; }
@keyframes lineage-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 1024px) {
  /* Text hangs to the right of its node, so the connector from 2019 has its own gutter. */
  .lineage__stop:not(.lineage__stop--launch), .lineage__launch, .lineage__module { padding-left: 28px; }
  .lineage__then { left: 28px; }
  @supports (animation-timeline: view()) {
    html.motion-ok .lineage__axis::before, html.motion-ok .lineage__branch::before {
      animation: lineage-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
  }
}

/* ---------- Four disciplines ---------- */
.disc__head { margin-bottom: clamp(44px, 7vh, 80px); }
.disc__intro { max-width: 40ch; margin-top: 18px; font-size: 19px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.disc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(48px, 7vh, 88px); list-style: none; }
.disc__item:nth-child(1) { grid-column: 1 / span 6; }
.disc__item:nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(48px, 9vh, 104px); }
.disc__item:nth-child(3) { grid-column: 2 / span 5; }
.disc__item:nth-child(4) { grid-column: 8 / span 5; margin-top: clamp(28px, 5vh, 56px); }
.disc__media { position: relative; overflow: hidden; background: var(--paper-2); }
.disc__media img { width: 100%; height: 100%; object-fit: cover; }
.disc__media--screen { display: flex; align-items: center; justify-content: center; padding: clamp(20px, 3vw, 44px); }
.disc__media--screen img { height: auto; object-fit: contain; }
.disc__item:nth-child(1) .disc__media { aspect-ratio: 4 / 3; }
.disc__item:nth-child(2) .disc__media { aspect-ratio: 1 / 1; }
.disc__item:nth-child(3) .disc__media { aspect-ratio: 16 / 10; }
.disc__item:nth-child(4) .disc__media { aspect-ratio: 4 / 3; }
.disc__item .t-h3 { margin-top: 22px; }
.disc__item p { max-width: 40ch; margin-top: 10px; color: var(--ink-2); }

/* ---------- See it live: three platforms side by side (a triptych of exhibits).
   Screens sit on paper-2 plates with a hairline; the etuya.id composite floats. ---------- */
.live__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 20px;
  align-items: end;
  margin-bottom: clamp(44px, 7vh, 80px);
}
.live__head .t-h2 { grid-column: 1 / span 6; }
.live__intro { grid-column: 8 / span 5; max-width: 40ch; color: var(--ink-2); }
.live__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px var(--gutter);
}
.live__item { display: flex; flex-direction: column; min-width: 0; }
.live__plate { padding: clamp(14px, 1.7vw, 26px); background: var(--paper-2); }
.live__plate img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  outline: 1px solid var(--rule-strong);
}
.live__plate--composite img { object-fit: contain; outline: 0; }
.live__name { margin-top: 24px; }
.live__partner {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-strong);
  font: 600 14.5px/1.4 var(--sans);
}
.live__desc { margin-top: 12px; max-width: 44ch; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.live__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: auto; padding-top: 18px; }
.live__caption { margin-top: clamp(36px, 5vh, 56px); padding-top: 0; }

/* "Visit the platform": same look as the Work pages (.visit in work.css) and the home
   spreads: ink label on a hairline, cobalt arrow, the address in grey on its own line. */
.visit {
  position: relative;
  display: inline-grid;
  grid-template-columns: max-content 1fr;
  justify-items: start;
  align-items: baseline;
  gap: 2px 8px;
  padding-block: 6px;
  color: var(--ink);
  text-decoration: none;
}
.visit__label {
  font: 600 15px/1.25 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 5px;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.visit__icon { align-self: center; font-size: 15px; color: var(--cobalt-deep); transition: transform .4s var(--ease-out); }
.visit__url { grid-column: 1 / -1; font: 400 14px/1.35 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
@media (hover: hover) {
  .visit:hover .visit__label { color: var(--cobalt-deep); text-decoration-color: currentColor; }
  .visit:hover .visit__icon { transform: translate(2px, -2px); }
}

.partners-sec { border-top: 1px solid var(--rule); }
.partners-sec .t-h2 { max-width: 16ch; }
.partners-sec__text { max-width: 58ch; margin: clamp(24px, 4vh, 36px) 0 clamp(56px, 8vh, 88px); color: var(--ink-2); }

.office { border-top: 1px solid var(--rule); }
.approach-band { margin-top: var(--section-y); }
.office__name { margin-top: clamp(28px, 5vh, 48px); }
.office__addr { grid-column: 1 / span 6; }
.office__addr address { margin-top: 18px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; }
.office__addr .link-arrow { margin-top: 18px; }
.office__lines { grid-column: 8 / span 5; align-self: end; display: grid; gap: 22px; }
.office__lines dt { font: 600 14px/1.3 var(--sans); color: var(--ink-2); }
.office__lines dd { margin: 4px 0 0; font-size: 19px; }
.office__lines a { text-decoration-color: var(--rule-strong); text-underline-offset: 4px; }
@media (hover: hover) { .office__lines a:hover { color: var(--cobalt-deep); text-decoration-color: currentColor; } }

.about-close { padding-block: clamp(96px, 16vh, 180px); }
.about-close .cobalt__text { max-width: 18em; }
.about-close .btn { margin-top: clamp(32px, 5vh, 48px); }

/* Tablet: the triptych becomes a ledger (plate left, text right); the lineage becomes a spine. */
@media (max-width: 1023px) {
  .live__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .live__item {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--gutter);
    padding-block: 36px;
  }
  .live__item + .live__item { border-top: 1px solid var(--rule); }
  .live__item:first-child { padding-top: 0; }
  .live__plate { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .live__name, .live__partner, .live__desc, .live__links { grid-column: 2; }
  .live__name { margin-top: 0; }
  .live__links { margin-top: 0; }

  .lineage__head .t-h2, .lineage__intro { grid-column: 1 / -1; }
  .lineage__axis { display: block; padding: 0 0 0 32px; }
  .lineage__axis::before { left: 6px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .lineage__stop { padding-bottom: 44px; }
  .lineage__stop:last-child { padding-bottom: 0; }
  .lineage__stop::before { left: -32px; top: 10px; }
  .lineage__launch { padding-bottom: 36px; }
  .lineage__launch::after { display: none; }
  .lineage__branch { width: auto; margin-left: 0; padding-top: 0; }
  .lineage__branch::before { display: none; }
  .lineage__then { position: static; margin-bottom: 22px; }
  .lineage__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .lineage__module { padding-top: 14px; border-top: 1px solid var(--rule-strong); }
  .lineage__module::before { display: none; }
}

@media (max-width: 767px) {
  .who__body, .office__addr, .office__lines { grid-column: 1 / -1; }
  .who__body { margin-top: 0; }
  .why__head .t-h2 { grid-column: 1 / -1; }
  .why__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .why__claim { font-size: clamp(1.55rem, 6.4vw, 1.9rem); }
  .disc { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .disc__item:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .disc__item:nth-child(n) .disc__media { aspect-ratio: 16 / 10; }
  .disc__item .t-h3 { margin-top: 18px; }
  .live__head { grid-template-columns: minmax(0, 1fr); }
  .live__head .t-h2, .live__intro { grid-column: 1 / -1; }
  .live__item { display: flex; padding-block: 40px; }
  .live__name { margin-top: 20px; }
  .live__links { padding-top: 16px; }
  .lineage__head { grid-template-columns: minmax(0, 1fr); }
  .lineage__axis { padding-left: 28px; }
  .lineage__stop::before { left: -28px; }
  .lineage__modules { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .lineage__module::before { display: block; left: -28px; top: 20px; width: 9px; height: 9px; margin-left: 2px; }
}