/* [ART-CHANGE-UI] Homepage editorial boundary, design.md v0.1.
   Load after the existing homepage stylesheet. Other routes keep their current foundation.
   The lead image is an existing ARTEKNE campaign, also described in the gallery below. */
html:has(.v3-hero) {
  --paper: #fff;
  --ink: #1a1a1a;
  --green: #1b5e3a;
  --line: #e8e4e0;
  --font-brand-text: "FuturaNowText", "Futura", "Century Gothic", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-brand-display: var(--font-brand-text);
}
body:has(.v3-hero) { color: var(--ink); font-family: var(--font-brand-text); }
body:has(.v3-hero) .site-nav { background: var(--paper); backdrop-filter: none; color: var(--ink); padding-inline: 48px; }
body:has(.v3-hero) .nav-links { font-size: 12px; letter-spacing: .06em; gap: 24px; }
body:has(.v3-hero) .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Photo (0), opaque paper panel (1), original centered typography (2). */
.v3-hero#top { display: grid; place-items: center; min-height: calc(110svh - 72px); padding: 100px 32px; border: 0; overflow: hidden; isolation: isolate; }
.v3-hero#top::before {
  content: ""; position: absolute; z-index: -1; inset: -160px 0;
  background: #ad5126 url("../manus-storage/orange_campaign_single_bag.webp") center 55% / cover no-repeat;
  transform: translate3d(0, var(--hero-photo-offset, 0px), 0); will-change: transform;
  pointer-events: none;
}
.v3-hero#top .v3-hero-copy {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; isolation: isolate; width: min(820px, 100%); min-height: 0;
  margin: 0 auto; padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
  text-align: center; gap: 0;
}
.v3-hero#top .v3-hero-copy::before { content: ""; position: absolute; inset: 0; background: #fff; z-index: -1; pointer-events: none; }
.v3-hero#top .v3-kicker { margin: 0 0 28px; color: var(--green); font-size: 12px; letter-spacing: .18em; }
.v3-hero#top h1 { font-family: var(--font-oswald), "Arial Narrow", sans-serif; font-size: var(--type-hero-display); font-weight: 500; line-height: .94; letter-spacing: -2px; width: 100%; }
.v3-hero#top h1 em { color: #285c40; }
.v3-hero#top .v3-hero-copy > p:nth-of-type(2) { margin: 32px 0; max-width: 58ch; font-size: 16px; line-height: 1.65; color: #4f5c54; }
.v3-hero#top .v3-hero-actions { justify-content: center; gap: 16px 24px; }
.v3-hero#top .v3-hero-actions a { font-size: 12px; letter-spacing: .06em; line-height: 1.5; min-height: 44px; color: var(--ink); }
.v3-hero#top .v3-hero-actions .v3-primary-link { background: var(--ink); border-color: var(--ink); color: white; border-radius: 2px; padding: 12px 20px; }
.v3-hero#top .v3-hero-actions .v3-primary-link:hover { background: var(--green); border-color: var(--green); }
.v3-hero#top .v3-hero-note { margin: 32px 0 0; color: #6b6560; font-size: 11px; letter-spacing: .06em; line-height: 1.65; }
/* Native horizontal scrolling keeps video controls and touch gestures available. */
.v3-work#work .v3-film-grid { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 48px; padding: 0 48px 20px; scrollbar-width: thin; }
.v3-work#work .v3-film-card { flex: 0 0 min(76vw, 960px); scroll-snap-align: start; }
.v3-work#work .v3-film-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.v3-work#work .v3-film-card > div { min-height: 160px; }
.v3-work#work .v3-film-card span { font-size: 12px; }
.v3-work#work .v3-film-card p { font-size: 14px; line-height: 1.6; max-width: 65ch; }
body:has(.v3-hero) :is(.v3-section-head, .light-section-head, .dark-section-head) { gap: 24px 64px; align-items: start; }
body:has(.v3-hero) :is(.v3-section-head, .light-section-head, .dark-section-head) > p { font-size: 12px; letter-spacing: .08em; margin-bottom: 0; }
body:has(.v3-hero) :is(.v3-section-head, .light-section-head, .dark-section-head, .loop-copy, .journal-section header, .preview-copy) h2 { font-family: var(--font-brand-text); font-weight: 500; font-size: 22px; line-height: 1.35; letter-spacing: .08em; }
body:has(.v3-hero) :is(.v3-section-head, .light-section-head, .dark-section-head) > span { font-size: 16px; line-height: 1.65; padding: 0; }
body:has(.v3-hero) :is(.method-section, .services-section, .journal-section) { padding: 96px 48px; }
.v3-work#work { padding-top: 64px; padding-bottom: 96px; }
.v3-work#work .v3-section-head { padding-inline: 48px; }
body:has(.v3-hero) :is(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
@media (max-width: 1199px) {
  body:has(.v3-hero) .site-nav { padding-inline: 32px; }
  body:has(.v3-hero) .nav-links { gap: 16px; }

}
@media (max-width: 767px) {
  body:has(.v3-hero) .site-nav { padding-inline: 20px; }
  .v3-hero#top { min-height: 110svh; padding: 300px 20px 100px; }
  .v3-hero#top::before { inset: -400px 0 -160px; background-position: 72% top; }
  .v3-hero#top .v3-hero-copy { padding: 40px 20px; }
  .v3-hero#top h1 { letter-spacing: -1px; }
  .v3-hero#top .v3-hero-actions { width: 100%; }
  .v3-hero#top .v3-hero-actions a { max-width: 100%; white-space: normal; }
  .v3-hero#top .v3-hero-actions svg { flex: none; }
  .v3-work#work .v3-film-grid { padding-inline: 20px; gap: 16px; scroll-padding-inline: 20px; }
  .v3-work#work .v3-film-card { flex-basis: 88vw; }
  body:has(.v3-hero) :is(.method-section, .services-section, .journal-section) { padding: 48px 20px; }
  .v3-work#work { padding-top: 0; padding-bottom: 48px; }
  .v3-work#work .v3-section-head { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.v3-hero) { scroll-behavior: auto; }
  .v3-hero#top::before { transform: none; will-change: auto; }
  .v3-hero#top *, .v3-hero#top *::before, .v3-hero#top *::after { animation: none; transition: none; }
}