/* ============================================================
   Leo — "The Seam"
   Concept: parallel text. Two scripts meet across a central
   seam; meaning is carried across it. One cross-script type
   system (Noto Serif), gallery restraint, a bespoke L×一 mark,
   cinnabar used only as a thread.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Noto+Serif:ital,wght@0,400;0,500;1,400&family=Noto+Serif+SC:wght@300;400;500&family=Noto+Sans:wght@400;500&display=swap');

:root {
  --ink:      #1A1917;
  --ink-2:    #46423A;
  --paper:    #F5F2EA;   /* bone */
  --paper-2:  #ECE7DA;
  --cinnabar: #BC4128;   /* the thread — used sparingly */
  --cinnabar-2:#9C3420;
  --muted:    #8B8474;
  --hair:     rgba(26,25,23,0.16);
  --hair-2:   rgba(26,25,23,0.09);

  --display: 'Noto Serif Display', Georgia, serif;
  --serif:   'Noto Serif', Georgia, 'Times New Roman', serif;
  --zh:      'Noto Serif SC', 'Songti SC', serif;
  --sans:    'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 3.2rem);
  --seam: clamp(1.6rem, 4vw, 3.4rem);   /* half-gap either side of the seam line */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 18px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.zh { font-family: var(--zh); font-weight: 300; }
.label {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
}
.label .zh { font-size: 0.86rem; letter-spacing: 0.1em; color: var(--cinnabar); text-transform: none; }
.muted { color: var(--muted); }

/* ============================================================
   The seam — core layout primitive
   A facing pair: [zh] | seam-line | [en]
   ============================================================ */
.pair {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  column-gap: var(--seam);
  align-items: start;
}
.pair > .side-zh { text-align: right; }
.pair > .seam { background: var(--cinnabar); align-self: stretch; opacity: 0.85; }
.pair > .side-en { text-align: left; }

@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; row-gap: 0.6rem; }
  .pair > .side-zh { text-align: left; padding-bottom: 0.6rem; position: relative; }
  .pair > .seam { display: none; }
  .pair > .side-zh::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--cinnabar);
  }
}

/* ============================================================
   Header
   ============================================================ */
.top {
  position: sticky; top: 0; z-index: 30; background: rgba(245,242,234,0.86);
  backdrop-filter: saturate(130%) blur(8px);
  border-bottom: 1px solid var(--hair);
}
.top__in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand svg { width: 30px; height: 30px; }
.brand__word { font-family: var(--display); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; }
.brand__word .zh { font-size: 1rem; color: var(--muted); margin-left: 0.35rem; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-2); position: relative; }
.nav a .zh { font-family: var(--zh); font-size: 0.78rem; color: var(--muted); margin-right: 0.3rem; }
.nav a:hover { color: var(--ink); }
.nav a.active .en, .nav a.active { color: var(--cinnabar); }
.nav a.cta { border: 1px solid var(--ink); padding: 0.5rem 1rem; }
.nav a.cta:hover { background: var(--ink); color: var(--paper); }
.nav a.cta:hover .zh { color: var(--paper); }
.burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.burger span { width: 24px; height: 1.5px; background: var(--ink); transition: transform .3s, opacity .3s; }
.burger.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity: 0; }
.burger.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 820px){
  .burger { display: flex; }
  .nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); padding: 1rem var(--gutter) 2rem; border-bottom: 1px solid var(--hair);
    transform: translateY(-120%); transition: transform .35s cubic-bezier(.4,0,.2,1); }
  .nav.open { transform: translateY(0); }
  .nav a { width: 100%; padding: 0.95rem 0; border-bottom: 1px solid var(--hair-2); font-size: 1rem; }
  .nav a.cta { border: 0; color: var(--cinnabar); padding: 0.95rem 0; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-block: clamp(3rem, 9vh, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero__eyebrow { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.hero__eyebrow .n { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); }

.hero-pair .side-zh, .hero-pair .side-en { line-height: 1.14; }
.hero-pair .side-zh {
  font-family: var(--zh); font-weight: 300; color: var(--ink);
  font-size: clamp(2.3rem, 5.5vw, 4.6rem); letter-spacing: 0.02em;
}
.hero-pair .side-en {
  font-family: var(--display); font-weight: 300; color: var(--ink);
  font-size: clamp(2.1rem, 5vw, 4.2rem); letter-spacing: -0.01em;
}
.hero-pair .side-en em { font-style: italic; color: var(--cinnabar-2); }
.hero-pair .linegroup > span { display: block; }

.hero__foot {
  margin-top: clamp(2.2rem, 5vw, 3.4rem); display: grid; grid-template-columns: 1fr 1px 1fr;
  column-gap: var(--seam); align-items: end;
}
@media (max-width: 760px){ .hero__foot { grid-template-columns: 1fr; row-gap: 1.6rem; } .hero__foot .seam { display:none; } }
.hero__foot .seam { background: var(--hair); align-self: stretch; }
.standfirst { font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.55; color: var(--ink-2); max-width: 42ch; }
.hero__meta { text-align: left; }
.hero__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }

/* three languages line */
.langline { margin-top: clamp(2.4rem,5vw,3.6rem); padding-top: 1.2rem; border-top: 1px solid var(--hair);
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--muted); display: flex; gap: 1.4rem; flex-wrap: wrap; }
.langline b { color: var(--ink); font-weight: 500; }

/* Buttons */
.btn { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em;
  padding: 0.8rem 1.4rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: transparent; color: var(--ink); }
.btn .a { transition: transform .2s; }
.btn:hover .a { transform: translateX(3px); }
.tlink { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink);
  border-bottom: 1px solid var(--cinnabar); padding-bottom: 2px; display: inline-flex; gap: 0.4rem; transition: gap .2s, color .2s; }
.tlink:hover { gap: 0.7rem; color: var(--cinnabar-2); }

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section.band { background: var(--paper-2); }
.section.ink { background: var(--ink); color: var(--paper); }
.section.ink .muted, .section.ink .standfirst { color: rgba(245,242,234,0.66); }
.section.ink .seam-head { border-color: rgba(245,242,234,0.2); }
.section.ink .seam-head .en { color: var(--paper); }

/* Section head as a facing pair label over a rule */
.seam-head {
  display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: var(--seam);
  align-items: baseline; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ink);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.section.band .seam-head, .section:not(.ink) .seam-head { border-color: var(--ink); }
.seam-head .side-zh { text-align: right; font-family: var(--zh); font-weight: 400; font-size: 1.4rem; color: var(--cinnabar); }
.seam-head .seam { background: var(--cinnabar); align-self: stretch; }
.seam-head .side-en { display: flex; align-items: baseline; gap: 1rem; }
.seam-head .en { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 400; }
.seam-head .n { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); margin-left: auto; }
@media (max-width: 760px){
  .seam-head { grid-template-columns: 1fr; row-gap: 0.3rem; }
  .seam-head .seam { display: none; }
  .seam-head .side-zh { text-align: left; }
}

/* Prose facing pair */
.prose-pair { align-items: start; }
.prose-pair .side-zh { font-family: var(--zh); font-weight: 300; font-size: 1.06rem; line-height: 1.9; color: var(--ink-2); }
.prose-pair .side-en p { margin-bottom: 1.1rem; }
.prose-pair .side-en p:last-child { margin-bottom: 0; }
.lede { font-family: var(--display); font-weight: 300; font-size: clamp(1.4rem,2.6vw,2rem); line-height: 1.3; margin-bottom: 1.4rem; }

/* Dossier — bilingual list */
.dossier { border-top: 1px solid var(--ink); }
.dossier__row { display: grid; grid-template-columns: 2.4rem 1fr 1px 1fr; column-gap: var(--seam);
  align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--hair); }
.dossier__row .no { font-family: var(--sans); font-size: 0.78rem; color: var(--cinnabar); letter-spacing: 0.08em; }
.dossier__row .side-zh { text-align: right; font-family: var(--zh); font-weight: 400; font-size: 1.15rem; }
.dossier__row .seam { background: var(--hair); align-self: stretch; }
.dossier__row .role { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.dossier__row .what { font-family: var(--display); font-size: 1.15rem; margin-top: 2px; }
@media (max-width: 760px){
  .dossier__row { grid-template-columns: 2rem 1fr; row-gap: 0.2rem; }
  .dossier__row .seam { display: none; }
  .dossier__row .side-zh { text-align: left; grid-column: 2; }
  .dossier__row .side-en { grid-column: 2; }
}

/* Services — facing entries */
.svc-list { border-top: 1px solid var(--ink); }
.svc { display: grid; grid-template-columns: 2.4rem 1fr 1px 1.4fr; column-gap: var(--seam);
  align-items: start; padding: clamp(1.4rem,3vw,2.2rem) 0; border-bottom: 1px solid var(--hair); transition: background .2s; }
.svc:hover { background: rgba(188,65,40,0.035); }
.svc .no { font-family: var(--sans); font-size: 0.82rem; color: var(--cinnabar); }
.svc .side-zh { text-align: right; }
.svc .side-zh .t { font-family: var(--zh); font-weight: 400; font-size: clamp(1.3rem,2.4vw,1.7rem); line-height: 1.3; }
.svc .side-zh .cat { display: block; margin-top: 0.5rem; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.svc .seam { background: var(--hair); align-self: stretch; }
.svc .t-en { font-family: var(--display); font-size: clamp(1.3rem,2.4vw,1.7rem); font-weight: 400; line-height: 1.15; margin-bottom: 0.6rem; }
.svc .d { color: var(--ink-2); font-size: 0.98rem; }
.svc .for { margin-top: 0.8rem; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px){
  .svc { grid-template-columns: 2rem 1fr; row-gap: 0.6rem; }
  .svc .seam { display: none; }
  .svc .side-zh { text-align: left; grid-column: 2; }
  .svc .side-en { grid-column: 2; }
}

/* Standout — mission across the seam */
.mission { text-align: center; }
.mission .m-zh { font-family: var(--zh); font-weight: 300; font-size: clamp(1.8rem,4.4vw,3.2rem); line-height: 1.5; }
.mission .m-seam { width: 1px; height: clamp(2rem,5vw,3.5rem); background: var(--cinnabar); margin: 1.4rem auto; }
.mission .m-en { font-family: var(--display); font-weight: 300; font-style: italic; font-size: clamp(1.6rem,3.8vw,2.8rem); line-height: 1.3; max-width: 20ch; margin-inline: auto; }
.mission .m-en b { font-style: normal; font-weight: 400; color: var(--cinnabar); }
.mission .src { margin-top: 2rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,234,0.55); }

/* Portrait — quiet duotone plate */
.plate { aspect-ratio: 4/5; background: var(--paper-2); border: 1px solid var(--hair); position: relative; overflow: hidden; }
.plate::before { content: ''; position: absolute; inset: 0; background:
  linear-gradient(150deg, rgba(188,65,40,0.10), transparent 60%),
  repeating-linear-gradient(0deg, rgba(26,25,23,0.05) 0 1px, transparent 1px 6px); }
.plate .m { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--zh); font-weight: 300; font-size: clamp(3rem,7vw,5rem); color: rgba(26,25,23,0.12); }
.plate .cap { position: absolute; left: 0; bottom: 0; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 0.4rem 0.7rem; }

/* Reel */
.reel { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(0.8rem,2vw,1.4rem); }
@media (max-width: 720px){ .reel { grid-template-columns: 1fr; } }
.reel figure { margin: 0; }
.reel__thumb { aspect-ratio: 16/10; background: var(--paper-2); border: 1px solid var(--hair); position: relative; display: grid; place-items: center; overflow: hidden; }
.reel__thumb::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(0deg, rgba(26,25,23,0.05) 0 1px, transparent 1px 7px); }
.reel figure:first-child .reel__thumb { background: linear-gradient(160deg, rgba(188,65,40,0.14), var(--paper-2)); }
.reel__play { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; color: var(--ink); font-size: 0.9rem; padding-left: 3px; transition: background .2s, color .2s; }
.reel figure:hover .reel__play { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--paper); }
.reel figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.7rem; }
.reel__cat { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.reel__cat .zh { font-family: var(--zh); color: var(--muted); margin-right: 0.4rem; }
.reel__dur { font-family: var(--sans); font-size: 0.7rem; color: var(--cinnabar); }

/* CTA */
.cta { text-align: center; }
.cta .c-zh { font-family: var(--zh); font-weight: 300; font-size: clamp(1.2rem,2.4vw,1.7rem); color: var(--cinnabar); margin-bottom: 0.8rem; }
.cta .c-en { font-family: var(--display); font-weight: 300; font-size: clamp(1.9rem,4vw,3rem); line-height: 1.1; max-width: 18ch; margin: 0 auto 1.8rem; }
.cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Colophon
   ============================================================ */
.colophon { background: var(--ink); color: var(--paper); padding-block: clamp(2.6rem,5vw,4rem) 2rem; }
.colophon__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(245,242,234,0.16); }
@media (max-width: 720px){ .colophon__top { grid-template-columns: 1fr; gap: 1.6rem; } }
.colophon .brand__word { color: var(--paper); }
.colophon .brand__word .zh { color: rgba(245,242,234,0.5); }
.colophon__tag { margin-top: 0.9rem; font-family: var(--serif); font-style: italic; color: rgba(245,242,234,0.62); max-width: 30ch; }
.colophon h5 { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cinnabar); margin-bottom: 1rem; }
.colophon h5 .zh { font-family: var(--zh); text-transform: none; margin-right: 0.4rem; }
.colophon a { display: block; padding: 0.35rem 0; color: rgba(245,242,234,0.76); font-family: var(--serif); font-size: 0.95rem; }
.colophon a:hover { color: var(--paper); }
.colophon__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; padding-top: 1.6rem;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(245,242,234,0.45); }

/* Contact form */
.field { margin-bottom: 1.3rem; }
.field label { display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.5rem; }
.field label .opt { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--serif); font-size: 1rem; color: var(--ink);
  background: rgba(255,255,255,0.5); border: 1px solid var(--hair); border-radius: 0;
  padding: 0.8rem 0.9rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cinnabar); box-shadow: 0 0 0 3px rgba(188,65,40,0.12); }
.field textarea { resize: vertical; min-height: 130px; }
.contact-detail { padding: 1.2rem 0; border-top: 1px solid var(--hair); }
.contact-detail:last-child { border-bottom: 1px solid var(--hair); }
.contact-detail dt { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinnabar); margin-bottom: 0.4rem; }
.contact-detail dd { margin: 0; font-family: var(--display); font-size: 1.15rem; }
.contact-detail dd .zh { font-family: var(--zh); font-size: 0.9rem; color: var(--muted); }

/* Service detail meta (services page) */
.svc-meta p { margin-bottom: 0.5rem; font-size: 0.96rem; color: var(--ink-2); display: flex; gap: 0.8rem; align-items: baseline; }
.svc-meta .k { flex: none; width: 8.5rem; font-family: var(--sans); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinnabar); }
@media (max-width: 520px){ .svc-meta p { flex-direction: column; gap: 0.1rem; } .svc-meta .k { width: auto; } }

/* Placeholder + confirm-translation markers */
.ph { border-bottom: 1px dotted var(--cinnabar); cursor: help; }
.tx { border-bottom: 1px dotted rgba(139,132,116,0.7); cursor: help; }  /* chinese to confirm */

@media (prefers-reduced-motion: no-preference){
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
}