/* The home page on desktop (built from ~/Documents/travis-editorial-home, a Swiss-editorial
   layout: rail / name, arena, statement / portrait, selected work). Every rule is scoped to .eh so
   nothing here touches the other pages. Narrow windows (760px and under, any device) get the TV
   room instead: .poster.tv in site.css, switched on by site.js. Generated from the prototype's
   styles.css by tools/scope_home_css.py; edit the prototype and regenerate. */
.eh { --paper: #e8e4db;   
  --ink: #090909;
  --line: #898782;
  --left-rail: 144px;
  --right-panel: 427px;
  --gutter: 20px;
  --outer-margin: 30px;
  --display-font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;   
  --body-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.eh * { box-sizing: border-box; }
html:has(.eh) { scroll-behavior: smooth; }
body.home { margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; }
.eh a { color: inherit; text-decoration: none; }
.eh a:hover { opacity: .58; }
.eh a:focus-visible { outline: 2px solid #b82016; outline-offset: 4px; }
.eh figure, .eh h1, .eh h2, .eh h3, .eh p { margin: 0; }
.eh img, .eh video { display: block; width: 100%; }
.eh video { object-fit: cover; }
.eh .micro { font-family: var(--body-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 1.44; }
.eh .site-frame { display: grid;
  grid-template-columns: var(--left-rail) minmax(0, 1fr) var(--right-panel);
  gap: var(--gutter);
  max-width: 1760px;
  min-height: 1024px;
  margin: 0 auto;
  padding: 20px 20px 0 var(--outer-margin); }
.eh .rail { min-width: 0; position: relative; }
.eh .rail-top { position: relative; }
.eh .location { margin: 15px 0 28px; }
.eh .short-rule { width: 36px; height: 1px; background: var(--line); margin-bottom: 28px; }
.eh .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.eh .nav a { font: 14px/1.1 var(--body-font); letter-spacing: .02em; }
.eh .rail-identity { position: absolute;
  top: 282px;
  left: 0;
  height: 395px;
  width: 144px;
  overflow: visible; }
.eh .vertical-word { position: absolute;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 800 78px/.90 var(--display-font);
  letter-spacing: -.045em;
  white-space: nowrap; }
.eh .vertical-word.movement { left: 0; }
.eh .vertical-word.house { left: 70px; }
.eh .rail-bottom { position: absolute; left: 10px; top: 704px; }
.eh .vertical-hairline { display: block; height: 218px; width: 1px; background: var(--line); }
.eh .plus-sign { display: block; font: 40px/1 Arial, sans-serif; margin: 8px 0 0 -12px; font-weight: 200; }
.eh .main-column { min-width: 0; }
.eh .masthead { position: relative; }
.eh .masthead h1 { font-family: var(--display-font);
  letter-spacing: -.048em;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: .9; }
.eh .masthead h1 { font-size: var(--name, 9vw); line-height: .84; }
.eh .masthead h1 span { display: block; width: max-content; }
.eh .profession { position: absolute;
  top: calc(var(--name, 9vw) * .5);   
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: 12px; }
.eh .h-rule { display: inline-block; background: var(--line); height: 1px; width: 72px; }
.eh .intro { margin-top: 16px;
  margin-bottom: 22px;
  border-left: 1px solid var(--ink);
  padding-left: 24px;
  max-width: 700px; }
.eh .intro p { font: 19px/1.28 var(--body-font); letter-spacing: .004em; }
.eh .feature-film video { aspect-ratio: 777 / 212;
  object-fit: cover;
  filter: grayscale(100%); }
.eh .feature-film figcaption { display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 11px;
  padding: 10px 0 0; }
.eh .feature-film figcaption span:last-child { text-align: right; }
.eh .rail-mail { display: none; }
.eh .statement { display: grid;
  grid-template-columns: minmax(0, 1fr) 32%;
  gap: 25px;
  align-items: start;
  margin-top: 31px;
  position: relative; }
.eh .statement h2 { font: 800 clamp(54px, 5.75vw, 88px)/.86 var(--display-font);
  letter-spacing: -.045em;
  white-space: nowrap; }
.eh .statement-detail { display: grid;
  grid-template-columns: 66px minmax(0,1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 320px;
  margin-top: 4px; }
.eh .tiny-vertical { display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-right: 1px solid var(--ink);
  padding-right: 12px;
  font-size: 11px;
  text-align: right;
  letter-spacing: .13em; }
.eh .statement-detail video { width: 100%;
  height: 320px;
  object-fit: cover;
  filter: grayscale(100%); }
.eh .film-detail { margin-top: 24px;
  margin-left: -70px;
  width: min(68%, 620px);
  height: 236px;
  position: relative;
  z-index: 0;
  overflow: hidden; }
.eh .film-detail video { height: 100%; object-fit: cover; object-position: center top; filter: grayscale(100%); }
.eh .right-column { min-width: 0; }
.eh .portrait { width: 100%; height: 569px; overflow: hidden; }
.eh .portrait img { height: 100%; object-fit: cover; object-position: center 16%; filter: grayscale(100%); }
.eh .work { margin-top: 28px; }
.eh .section-heading { min-height: 29px;
  border-bottom: 1px solid var(--ink);
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 0 0 7px; }
.eh .section-heading h2 { font-size: 12px; }
.eh .work-arrow { font: 30px/19px Arial, sans-serif; }
.eh .project { border-bottom: 1px solid #a7a49e; display: grid; grid-template-columns: 156px minmax(0,1fr); gap: 18px; min-height: 87px; align-items: center; padding: 8px 0; }
.eh .project:last-child { border-bottom: 0; }
.eh .project video, .eh .project .no-still { width: 156px; height: 70px; object-fit: cover; filter: grayscale(100%); }
.eh .project .no-still { display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-size: 9px; letter-spacing: .14em; }
.eh .project h3 { font: 800 22px/.98 var(--display-font);
  letter-spacing: -.03em;
  margin-bottom: 9px; }
.eh .project p { font-size: 10px; letter-spacing: .02em; line-height: 1.25; }
.eh .below-fold { max-width: 1760px; margin: 0 auto; padding: 60px 30px 32px; border-top: 1px solid var(--line); }
.eh .footer-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.eh .footer-heading .mail { font: 900 clamp(24px, 3vw, 38px)/1 var(--display-font); letter-spacing: -.045em; }
.eh .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.eh .footer-grid section { border-top: 1px solid var(--ink); padding-top: 20px; scroll-margin-top: 28px; }
.eh .footer-grid h2 { font: 900 clamp(24px, 3vw, 38px)/1 var(--display-font); letter-spacing: -.045em; margin-bottom: 14px; }
.eh .footer-grid p, .eh .footer-grid a { font: 14px/1.5 var(--body-font); }
.eh .copyright { margin-top: 96px; }
@media (max-width: 1330px) {
.eh { --left-rail: 122px; --right-panel: 34%; --gutter: 17px; --outer-margin: 23px; }
.eh .profession { font-size: 10px; }
.eh .h-rule { width: 26px; }
.eh .vertical-word { font-size: 66px; }
.eh .vertical-word.house { left: 60px; }
.eh .project { grid-template-columns: 33% 1fr; gap: 12px; }
.eh .project video, .eh .project .no-still { width: 100%; }
.eh .project h3 { font-size: 19px; }
.eh .statement h2 { font-size: 5.3vw; }
}
@media (max-width: 1050px) {
.eh { --left-rail: 100px; --right-panel: 34%; --gutter: 15px; --outer-margin: 19px; }
.eh .site-frame { padding-right: 19px; min-height: 0; }
.eh .profession { font-size: 9px; }
.eh .h-rule { display: none; }
.eh .intro p { font-size: 16px; }
.eh .feature-film figcaption { font-size: 9px; }
.eh .statement { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.eh .statement h2 { font-size: 6vw; }
.eh .statement-detail { grid-template-columns: 40px 1fr; width: 65%; margin-left: auto; min-height: 230px; }
.eh .statement-detail video { height: 230px; }
.eh .film-detail { margin-top: 24px; width: 62%; height: 180px; margin-left: 0; }
.eh .portrait { height: 465px; }
.eh .rail-identity { top: 264px; }
.eh .vertical-word { font-size: 52px; }
.eh .vertical-word.house { left: 51px; }
.eh .project { grid-template-columns: 92px minmax(0,1fr); }
.eh .project video, .eh .project .no-still { height: 58px; }
.eh .project h3 { font-size: 15px; }
.eh .project p { font-size: 9px; }
}
@media (max-width: 760px) {
.eh .site-frame { display: block; padding: 18px 18px 0; }
.eh .rail { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 17px; }
.eh .rail-top { display: contents; }
.eh .location { margin: 0; font-size: 10px; }
.eh .short-rule, .eh .rail-identity, .eh .rail-bottom { display: none; }
.eh .nav { flex-direction: row; flex-wrap: wrap; justify-content: end; gap: 9px 16px; max-width: 70%; }
.eh .nav a { font-size: 11px; }
.eh .masthead { padding-top: 27px; padding-bottom: 23px; }
.eh .profession { position: static; margin-top: 24px; justify-content: start; font-size: 10px; }
.eh .intro { margin: 0 0 24px; }
.eh .intro p { font-size: clamp(14px,3.4vw,18px); }
.eh .feature-film video { aspect-ratio: 16 / 6; }
.eh .feature-film figcaption { flex-direction: column; gap: 3px; }
.eh .feature-film figcaption span:last-child { text-align: left; }
.eh .statement { margin-top: 42px; grid-template-columns: minmax(0, 1fr); }
.eh .statement h2 { font-size: clamp(42px, 9.7vw, 76px); }
.eh .statement-detail { width: 65%; margin-top: 4px; }
.eh .film-detail { margin-left: 0; margin-top: 24px; width: 100%; height: 165px; }
.eh .right-column { display: grid; grid-template-columns: 1fr; margin-top: 33px; }
.eh .portrait { height: min(115vw, 650px); }
.eh .work { margin-top: 37px; }
.eh .project { grid-template-columns: 32% minmax(0,1fr); gap: 17px; min-height: 95px; }
.eh .project video, .eh .project .no-still { height: 76px; }
.eh .project h3 { font-size: 22px; }
.eh .project p { font-size: 10px; }
.eh .below-fold { padding: 60px 18px 25px; }
.eh .footer-grid { grid-template-columns: 1fr; gap: 35px; }
.eh .copyright { margin-top: 55px; }
}
@media (max-width: 390px) {
.eh .nav { gap: 8px 12px; }
.eh .nav a { font-size: 9px; }
.eh .location { font-size: 9px; }
.eh .project h3 { font-size: 18px; }
.eh .project p { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
html:has(.eh) { scroll-behavior: auto; }
}
@media (min-width: 761px) {
html:has(.eh), body.home { height: 100%; overflow: hidden; }
.eh .site-frame { height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 20px; }
.eh .below-fold { display: none; }
.eh .rail { display: flex; flex-direction: column; min-height: 0; }
.eh .rail-identity { position: static; display: flex; align-items: flex-end; height: auto; width: auto; margin-top: auto; padding-top: 16px; }
.eh .vertical-word { position: static; font-size: max(40px, min(78px, calc((100dvh - 470px) / 5.3)));    line-height: .86; }
.eh .rail-bottom { position: static; display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 auto; max-height: 340px; min-height: 0; margin-top: 18px; padding-left: 10px; }
.eh .rail-mail { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .12em; margin: 0 0 10px -6px; }
.eh .vertical-hairline { flex: 1 1 0; height: auto; min-height: 0; }
.eh .plus-sign { margin-top: 6px; font-size: 30px; }
.eh .main-column { display: flex; flex-direction: column; min-height: 0; }
.eh .intro { margin: clamp(8px, 1.4vh, 16px) 0 clamp(10px, 1.8vh, 22px); }
.eh .intro p { font-size: clamp(14px, 1.75vh, 19px); }
.eh .feature-film { flex: 1 1 0; min-height: 90px; display: flex; flex-direction: column; }
.eh .feature-film > a { flex: 1 1 0; min-height: 0; display: block; }
.eh .feature-film video { aspect-ratio: auto; height: 100%; }
.eh .feature-film figcaption { padding-top: 8px; }
.eh .statement { flex: 1.7 1 0; min-height: 0; margin-top: clamp(12px, 2.4vh, 31px); align-items: stretch; }
.eh .statement-text { display: flex; flex-direction: column; min-height: 0; }
.eh .statement h2 { font-size: min(5.4vw, 7.4vh, 88px); }
.eh .film-detail { flex: 1 1 0; min-height: 70px; height: auto; width: min(78%, 620px); margin: clamp(10px, 2vh, 24px) 0 0 calc(var(--left-rail) * -.5); }
.eh .film-detail video { object-position: center 60%; }
.eh .statement-detail { min-height: 0; margin-top: 0; }
.eh .statement-detail video { height: 100%; object-position: center 20%; }
.eh .right-column { display: flex; flex-direction: column; min-height: 0; }
.eh .portrait { flex: 1 1 0; height: auto; min-height: 120px; }
.eh .work { margin-top: clamp(12px, 2.2vh, 28px); }
.eh .project { min-height: 0; padding: clamp(4px, .8vh, 8px) 0; }
.eh .project video, .eh .project .no-still { height: clamp(48px, 6.8vh, 70px); }
}
.eh .statement h2 span { display: block; width: max-content; }
.eh .film-detail { display: flex; flex-direction: column; overflow: visible; }
.eh .film-title { margin: 0 0 6px; text-align: right; font-size: 11px; }
.eh .film-detail video { flex: 1 1 0; min-height: 0; height: auto; }
.eh a.project { color: inherit; }
.eh a.project:hover { opacity: 1; }
.eh a.project:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 761px) {
.eh .location { margin: 6px 0 16px; }
.eh .short-rule { margin-bottom: 16px; }
}
.eh .mh-arrow { display: none; }
@media (min-width: 761px) {
.eh .mh-arrow { display: block; position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.eh .mh-arrow .line { stroke-width: 2.2; stroke-dasharray: 0 5.5; }
.eh .mh-arrow .head { stroke-width: 1.8; }
}
.eh .tiny-vertical { transform: none; border-right: 0; padding-right: 0; border-left: 1px solid var(--ink); padding-left: 12px; text-align: left; justify-self: end; width: max-content; }
.eh .statement-text { min-width: 0; }
@media (min-width: 761px) and (max-width: 1050px) {
.eh .statement { grid-template-columns: minmax(0, 1fr); gap: 0; }
.eh .statement-detail { display: none; }
.eh .film-detail { width: 100%; margin-left: 0; }
.eh .feature-film figcaption { font-size: 9px; }
.eh .work { margin-top: 10px; }
.eh .section-heading { min-height: 0; padding-bottom: 5px; }
.eh .project { gap: 10px; padding: 5px 0; }
.eh .project video { height: clamp(40px, 5.6vh, 58px); }
.eh .project h3 { font-size: 14px; margin-bottom: 4px; }
.eh .project p { font-size: 8.5px; }
.eh .vertical-word { font-size: max(36px, min(52px, calc((100dvh - 470px) / 5.3))); }
}

/* desktop shows this page; 760px and under shows the TV room (site.js) */
@media (max-width: 760px) { .eh { display: none; } }
@media (min-width: 761px) { body.home .poster { display: none; } }
.eh { font-family: var(--body-font); font-weight: 400; }
.eh .portrait picture { display: contents; }   /* the site wraps the portrait so phones skip it */
/* page transitions (site.css): leaving home, the name shrinks into the bar's name on the next page,
   as it did from the old home. Only one of the two names is ever rendered, so the name is unique */
@media (min-width: 761px) { .eh #site-title { view-transition-name: tlr; } }