/* Editorial layout layer; the globe and gallery keep their original mechanics. */
:root { --divider: #d8d5cc; --muted: #595a55; }
.page-frame { width: min(100% - 96px, 1440px); }
.site-header { border-bottom: 1px solid var(--divider); }
.brand { font-size: .9rem; letter-spacing: -.035em; }
.main-nav { gap: clamp(18px, 2.8vw, 42px); }
.hero { min-height: min(680px, 75vh); padding: clamp(80px, 10vw, 150px) 0 100px; }
.hero.has-globe { align-items: center; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.hero.has-globe .hero-globe { width: min(100%, 440px); margin: 0; transform: none; }
.hero h1 { font-size: clamp(3.8rem, 6.3vw, 7rem); line-height: 1.08; letter-spacing: -.065em; }
.hero .intro { max-width: 490px; }
.hero-actions { margin-top: 28px; }
.editorial-section { padding: 30px 0 110px; border-top: 1px solid var(--ink); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 55px; font-size: .75rem; font-weight: 700; }
.section-heading a, .text-link, .projects-more a { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.feature-project { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 40px; }
.feature-kicker { color: var(--blue); font-size: .65rem; letter-spacing: .13em; font-weight: 750; text-transform: uppercase; }
.feature-project h2, .travel-feature-copy h2 { font-family: var(--serif); font-size: clamp(3rem, 5.8vw, 6rem); line-height: 1.05; letter-spacing: -.06em; font-weight: 500; margin: 0; }
.feature-project > div:last-child { max-width: 420px; padding-bottom: 8px; }
.feature-project > div:last-child p, .travel-feature-copy p { color: var(--muted); line-height: 1.9; }
.text-link { display: inline-block; margin-top: 15px; font-size: .85rem; font-weight: 700; }
.travel-feature { display: grid; grid-template-columns: 1.2fr .8fr; gap: 0 8%; }
.travel-feature .section-heading { grid-column: 1/-1; }
.travel-feature-image { display: block; }
.travel-feature-image picture { display: block; }
.travel-feature-image img { width: 100%; height: auto; aspect-ratio: 1.38; object-fit: cover; display: block; }
.travel-feature-image > span { display: flex; justify-content: space-between; padding-top: 14px; font-size: .75rem; font-weight: 700; }
.travel-feature-copy { align-self: end; padding-bottom: 36px; }
.travel-feature-copy p { max-width: 330px; margin: 30px 0 0; }
.page-intro { padding: clamp(80px, 10vw, 150px) 0 clamp(70px, 8vw, 120px); }
.page-intro .eyebrow { color: var(--blue); margin-bottom: 30px; }
.page-intro h1 { font-family: var(--serif); font-size: clamp(4rem, 8vw, 8rem); line-height: 1.02; letter-spacing: -.065em; font-weight: 500; margin: 0 0 35px; }
.page-intro h1 em { font-weight: 400; }
.page-intro > p:last-child { max-width: 570px; color: var(--muted); line-height: 1.9; font-size: 1.05rem; margin: 0; }
.about-topics { gap: 16px; border-top: 1px solid var(--ink); margin-bottom: 110px; }
.about-topic { min-height: 190px; }
.about-topic + .about-topic { border-top: 0; }
.about-topic h2 { font-size: clamp(2rem, 3vw, 3rem); }
.about-topic-copy { font-size: 1rem; }
@media (min-width: 1000px) {
  .page-frame:has(.projects-page) { width: min(100% - 144px, 1440px); margin-left: clamp(48px, 5vw, 72px); margin-right: auto; }
}
.project-list { display: grid; gap: 16px; }
.project-row { display: grid; grid-template-columns: .22fr 1fr auto; gap: 30px; padding: 38px 0 48px; border-bottom: 0; }
.project-row h2 { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.055em; margin: 12px 0 16px; overflow-wrap: anywhere; }
.project-row p:not(.feature-kicker) { color: var(--muted); max-width: 520px; line-height: 1.8; margin: 0; }
.project-row > a { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.projects-more { margin: 45px 0 110px; color: var(--muted); }
.travel-intro { padding-top: clamp(80px, 10vw, 150px); padding-bottom: 60px; }
.travel-intro h1 { font-size: clamp(4rem, 8vw, 8rem); }
.travel-timeline { gap: 70px; }
.site-footer { position: relative; margin-top: 32px; padding-top: 28px; padding-bottom: 65px; border-top: 1px solid var(--divider); }

.swarm-pending .page-frame, .swarm-building:not(.swarm-scrolling) .page-frame { visibility: hidden; }
.swarm-building .swarm-task-waiting { visibility: hidden; }
.swarm-building .swarm-task-revealed { visibility: visible; opacity: var(--swarm-reveal, 0); }
/* Only live outlines and cursors are composited; no page-height SVG raster/mask. */
.swarm-layer { position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; contain: strict; }
.swarm-stage { position: absolute; inset: 0; }
.swarm-mark { position: absolute; inset: 0; pointer-events: none; }
.swarm-outline { position: absolute; z-index: 2; pointer-events: none; }
.swarm-box { border: 1px solid currentColor; background: rgb(54 94 232 / 2%); }
.swarm-handle { position: absolute; width: 4px; height: 4px; border: 1px solid currentColor; background: var(--paper); }
.swarm-handle:nth-child(1) { left: -3px; top: -3px; }
.swarm-handle:nth-child(2) { right: -3px; top: -3px; }
.swarm-handle:nth-child(3) { right: -3px; bottom: -3px; }
.swarm-handle:nth-child(4) { left: -3px; bottom: -3px; }
.swarm-size-badge, .swarm-spacing, .swarm-copy-label, .swarm-guide-label, .swarm-rail-label { font: 500 10px/1.3 ui-monospace, monospace; white-space: nowrap; }
.swarm-size-badge { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 3px; color: inherit; background: var(--paper); border: 1px solid currentColor; }
.swarm-guide { position: absolute; width: 1px; z-index: 3; background: #c8624e; transform-origin: top; }
.swarm-guide::before, .swarm-guide::after { content: ''; position: absolute; left: -4px; width: 9px; height: 1px; background: #c8624e; }
.swarm-guide::before { top: 0; }
.swarm-guide::after { bottom: 0; }
.swarm-guide-label { position: absolute; left: 5px; top: -16px; color: #b54c3a; }
.swarm-guide-horizontal { height: 1px; width: auto; }
.swarm-guide-horizontal .swarm-guide-label { left: auto; right: 0; top: 4px; }
.swarm-guide-horizontal::before, .swarm-guide-horizontal::after { width: 1px; height: 9px; left: 0; top: -4px; }
.swarm-guide-horizontal::after { left: auto; right: 0; }
.swarm-source { background: transparent; }
.swarm-copy-content { position: relative; padding: 28px 18px; height: 100%; overflow: hidden; background: var(--paper); }
.swarm-copy-title { margin: 14px 0 18px; font: 500 clamp(28px, 3vw, 44px)/1.1 var(--serif); color: var(--ink); opacity: .65; letter-spacing: -.04em; }
.swarm-copy-label { color: var(--blue); font-size: 9px; letter-spacing: .1em; }
.swarm-copy-body { color: var(--muted); font: 400 14px/1.8 var(--sans); opacity: .55; max-width: 520px; }
.swarm-copy-number { position: absolute; top: 28px; left: 10px; font: 400 12px/1.4 var(--sans); }
.swarm-copy-content[data-layout="row"] { padding-left: 14%; }
.swarm-copy-content[data-layout="nav"] { padding: 0; }
.swarm-copy-content[data-layout="nav"] .swarm-copy-title { margin: 0; font: 600 13px/1 var(--sans); }
.swarm-copy-content[data-layout="nav"] .swarm-copy-label { display: none; }
@media (min-width: 761px) {
  .swarm-copy-content[data-layout="topic"] { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 5vw; align-content: center; padding: 18px 0; }
  .swarm-copy-content[data-layout="topic"] .swarm-copy-title { grid-column: 1; }
  .swarm-copy-content[data-layout="topic"] .swarm-copy-body { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 16px; }
  .swarm-copy-content[data-layout="row"] { padding-top: 38px; }
}
.swarm-spacing { position: absolute; z-index: 4; color: #b54c3a; background: var(--paper); padding: 2px 4px; border-top: 1px solid #c8624e; }
.swarm-rail { position: absolute; width: 1px; background: currentColor; transform-origin: top; opacity: .7; }
.swarm-rail-dot { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; background: var(--paper); }
.swarm-rail-label { position: absolute; top: 12px; left: 5px; font-size: 9px; }
.swarm-drawn-line { position: absolute; height: 1px; background: currentColor; transform-origin: left; }
.swarm-caret { position: absolute; width: 1.5px; background: currentColor; z-index: 4; }
.swarm-contact { position: absolute; width: 8px; height: 8px; margin: -4px; border: 1px solid currentColor; border-radius: 50%; background: transparent; opacity: 0; }
.swarm-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 26px; height: 30px; color: var(--agent); opacity: 0; will-change: transform, opacity; transition: opacity 100ms ease-out; }
/* SVG (3,2) maps to agent (0,0) at both breakpoints, for every tool. */
.swarm-cursor-arrow { position: absolute; left: -3px; top: -2px; display: block; width: 26px; height: 30px; overflow: visible; fill: var(--agent); stroke: #fff; stroke-width: 2; stroke-linejoin: round; paint-order: stroke fill; }
.swarm-cursor-badge { position: absolute; left: 21px; top: 13px; display: grid; place-items: center; width: 14px; height: 15px; border: 1px solid currentColor; border-radius: 3px; background: var(--paper); }
.swarm-cursor-badge svg { display: block; width: 10px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.swarm-skip { position: fixed; z-index: 1001; right: 20px; bottom: 18px; border: 1px solid #595a5533; border-radius: 99px; padding: 7px 11px; background: #f2f0e9e8; color: var(--muted); font: 500 .68rem/1 var(--sans); cursor: pointer; transition: color 120ms ease, border-color 120ms ease; }
.swarm-skip:hover { color: var(--ink); border-color: #595a5570; }
.swarm-skip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Preserve measured row size after first render while skipping offscreen descendants. */
.about-topic, .project-row { content-visibility: auto; contain-intrinsic-size: auto 260px; }
.travel-timeline-item { content-visibility: auto; contain-intrinsic-size: auto 550px; }

@media (max-width: 760px) {
  .page-frame { width: calc(100% - 36px); }
  .site-header { grid-template-columns: 1fr auto; padding: 14px 0 8px; }
  .main-nav { grid-column: 1/-1; grid-row: 2; justify-content: space-between; width: 100%; gap: 8px; font-size: .7rem; }
  .language-switch { display: flex; grid-column: 2; grid-row: 1; font-size: .7rem; }
  .hero, .hero.has-globe { min-height: 0; padding: 70px 0 80px; gap: 30px; }
  .hero.has-globe .hero-globe { align-self: center; width: min(72vw, 300px); margin: 0; transform: none; }
  .hero h1 { font-size: clamp(2.8rem, 10vw, 4.4rem); line-height: 1.1; }
  .editorial-section { padding: 24px 0 80px; }
  .section-heading { margin-bottom: 35px; }
  .feature-project, .travel-feature { grid-template-columns: 1fr; gap: 30px; }
  .travel-feature .section-heading { grid-column: 1; margin-bottom: 5px; }
  .feature-project h2, .travel-feature-copy h2 { font-size: clamp(2.8rem, 10vw, 4rem); }
  .travel-feature-copy { padding: 0; }
  .page-intro { padding: 75px 0 65px; }
  .page-intro h1 { font-size: clamp(3.6rem, 12vw, 5.5rem); }
  .about-topic { min-height: 0; padding: 25px 0 30px; }
  .about-topics { margin-bottom: 70px; }
  .project-row { grid-template-columns: 30px minmax(0,1fr); gap: 15px; padding: 30px 0; }
  .project-row > a { grid-column: 2; }
  .travel-intro { padding: 75px 0 40px; }
  .travel-intro h1 { font-size: 4rem; }
  .travel-timeline { gap: 44px; }
  .hero-globe::before { filter: none; }
  .hero-globe::before { background: radial-gradient(circle, #7ca1f41c, transparent 70%); }
  .globe-photo-card { box-shadow: 0 3px 8px #23231e1c; }
  .travel-card-image img { transition: none; }
  .travel-card:hover .travel-card-image img { transform: none; }
  .pswp__bg { backdrop-filter: none; }
  .pswp__img { box-shadow: 0 0 0 6px var(--paper); }
  .swarm-skip { right: 12px; bottom: 12px; }
}

/* v15 tools: page-specific composition, no copied page-sized content. */
.swarm-scene-line { position: absolute; background: currentColor; }
.swarm-scene-frame { position: absolute; transform-origin: center; }
.swarm-scene-corner { position: absolute; width: 12px; height: 12px; border: solid currentColor; border-width: 1px 0 0 1px; }
.swarm-scene-corner:nth-child(1) { top: -5px; left: -5px; }
.swarm-scene-corner:nth-child(2) { top: -5px; right: -5px; rotate: 90deg; }
.swarm-scene-corner:nth-child(3) { bottom: -5px; right: -5px; rotate: 180deg; }
.swarm-scene-corner:nth-child(4) { bottom: -5px; left: -5px; rotate: 270deg; }
.swarm-scene-frame.proof { color: #c8624e; }
.swarm-scene-frame.proof .swarm-scene-corner { width: 6px; height: 9px; }
.swarm-scene-frame.tray { border-bottom: 1px solid currentColor; background: rgb(54 94 232 / 3%); }
.swarm-scene-frame.tray .swarm-scene-corner { height: 5px; width: 5px; }
.swarm-scene-frame.connectors .swarm-scene-corner { width: 7px; height: 16px; }
.swarm-scene-frame.crop .swarm-scene-corner { width: 20px; height: 20px; border-width: 2px 0 0 2px; }
.swarm-scene-ring { position: absolute; width: 12px; height: 12px; margin: -6px; border: 1px solid currentColor; border-radius: 50%; }
.swarm-scene-ring::after { content: ''; position: absolute; inset: 4px; background: currentColor; border-radius: 50%; }
.globe-photo-card.is-constructing { outline: 1px solid rgb(54 94 232 / 45%); outline-offset: 3px; }
.globe-photo-card[data-scene="pending"] { visibility: hidden; }
/* Proofing uses a single margin bracket; software uses paired connector sockets. */
.swarm-scene-frame.proof .swarm-scene-corner:nth-child(2),
.swarm-scene-frame.proof .swarm-scene-corner:nth-child(3) { display: none; }
.swarm-scene-frame.connectors .swarm-scene-corner { border-width: 1px 0 0 1px; }
.globe-tool-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.globe-tool-layer .swarm-cursor { transition: none; }
.globe-tool-grab, .globe-tool-caret, .globe-tool-sweep { position: absolute; pointer-events: none; color: var(--blue); }
.globe-tool-grab { width: 6px; height: 6px; border: 1px solid currentColor; background: var(--paper); margin: -3px; }
.globe-tool-caret { width: 1px; background: currentColor; }
.globe-tool-sweep { height: 1px; background: currentColor; transform-origin: left; }
.globe-tool-contact { position: absolute; width: 2px; height: 2px; margin: -1px; background: var(--blue); pointer-events: none; }
.globe-photo-card > [hidden] { display: none; }
.globe-photo-card.is-constructing { transition: none; }