/* Tyler Ross — homepage styles.
   Order of this file: 1 tokens · 2 base · 3 shared parts · 4 layout A (one screen) · 5 layout B (scroll) · 6 small screens.
   Layout is chosen by <html data-layout="a|b">. Planned links are hidden by <html data-links="built">. */

/* ---------- 1. tokens ---------- */
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-normal.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-italic.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }

:root {
  --bg: #171514;            /* page; matches the photo's dark edges */
  --bg-raise: #1e1b19;      /* slide-in panels */
  --glow: #2b2724;          /* soft light behind the portrait; sampled from the photo's backdrop */
  --ink: #f2eee7;           /* main text */
  --ink-soft: #c9c2b7;      /* secondary text */
  --ink-faint: #8f887d;     /* captions */
  --line: rgba(242, 238, 231, .16);
  --line-strong: rgba(242, 238, 231, .5);
  --accent: #a9ab90;        /* olive, from the shirt */
  --bar-h: 76px;
  --pad: clamp(20px, 4vw, 56px);
  --photo-x: 50%;           /* where the portrait's centre sits across the screen */
  --mark-w: 300px;          /* room kept for the name in the centred bar (layout B) */
  --font: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
h2, h3, p { margin: 0; }
em { font-style: italic; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 14px; }
.skip:focus { left: 8px; }

html[data-links="built"] [data-status="planned"] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 3. shared parts ---------- */

/* name */
.mark { font-size: 19px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; line-height: 1; }

/* text links */
.nav { display: flex; align-items: center; gap: 26px; }
.nav__group { display: contents; }
.nav a { position: relative; padding: 8px 0; text-transform: uppercase; letter-spacing: .17em; font-size: 12.5px; font-weight: 500; white-space: nowrap; opacity: .88; transition: opacity .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: .17em; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:hover, .nav a:focus-visible { opacity: 1; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* round icons */
.social { display: flex; align-items: center; gap: 10px; }
.social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; transition: background .2s, color .2s, border-color .2s; }
.social a:hover, .social a:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.social svg { width: 16px; height: 16px; }
.social__imdb span { font-size: 10px; font-weight: 600; letter-spacing: .01em; line-height: 1; }

/* outlined button in the bar */
.cta { display: inline-flex; align-items: center; gap: 11px; border: 1.5px solid var(--ink); padding: 12px 20px 12px 18px; text-transform: uppercase; letter-spacing: .17em; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .2s, color .2s; }
.cta:hover, .cta:focus-visible { background: var(--ink); color: var(--bg); }
.cta svg, .btn svg { width: 9px; height: 11px; flex: none; }

/* filled button */
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--bg); border: 1.5px solid var(--ink); padding: 15px 26px 15px 22px; text-transform: uppercase; letter-spacing: .17em; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.btn:hover, .btn:focus-visible { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); padding: 15px 24px; }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--ink); }

.menu-btn { display: none; align-items: center; height: 40px; padding: 0 2px; text-transform: uppercase; letter-spacing: .17em; font-size: 12.5px; font-weight: 500; }
.menu-btn__close { display: none; }
html.menu-open .menu-btn__open { display: none; }
html.menu-open .menu-btn__close { display: inline; }

/* hero: the portrait on its own backdrop, extended to fill any screen */
.hero { position: relative; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 44% 62% at var(--photo-x) 42%, var(--glow) 0%, #221f1d 46%, var(--bg) 100%); }
.hero__media { position: absolute; inset: 0; }
.hero__media picture { display: contents; }
.hero__img { position: absolute; bottom: 0; left: var(--photo-x); height: min(100%, 1180px); width: auto; max-width: none; aspect-ratio: 1 / 1; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 17%, #000 83%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 17%, #000 83%, transparent 100%); }
@media (min-height: 1181px) {
  .hero__img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 13%);
            mask-image: linear-gradient(to right, transparent 0%, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 13%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}
/* On tall, narrow screens the crop follows his face, which sits left of the photo's centre (about 36% across). */
@media (max-aspect-ratio: 4 / 5) { .hero__img { transform: translateX(-42%); } }
@media (max-aspect-ratio: 3 / 5) { .hero__img { transform: translateX(-36%); } }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.hero__video.is-on { opacity: 1; }
.hero__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(20, 18, 17, .92) 0%, rgba(20, 18, 17, .5) 13%, rgba(20, 18, 17, 0) 30%); }

.hero__text { position: absolute; z-index: 2; left: clamp(24px, 7vw, 112px); bottom: 19%; width: min(440px, 80vw); }
.hero__over { text-transform: uppercase; letter-spacing: .3em; font-size: 12px; font-weight: 500; color: var(--accent); margin-bottom: 20px; }
.hero__line { font-size: clamp(25px, 2.5vw, 36px); line-height: 1.24; font-weight: 300; margin-bottom: 32px; text-wrap: balance; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__more { position: absolute; z-index: 2; left: 50%; bottom: 20px; width: 44px; height: 32px; margin-left: -22px; display: grid; place-items: center; opacity: .7; transition: opacity .2s, transform .2s; }
.hero__more:hover { opacity: 1; transform: translateY(3px); }
.hero__more svg { width: 26px; height: 13px; }

.baseline { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0; padding: 0 var(--pad); text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.5; }
.baseline span + span::before { content: "·"; margin: 0 .9em; opacity: .7; }

/* sections */
.section { position: relative; padding: clamp(72px, 9vw, 124px) var(--pad); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) - 1px); }
.wrap { max-width: 1120px; margin: 0 auto; }
.cols { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.section__label { display: flex; align-items: baseline; gap: 14px; text-transform: uppercase; letter-spacing: .3em; font-size: 12px; font-weight: 500; color: var(--accent); line-height: 1.9; }
.section__label span { color: var(--ink-faint); letter-spacing: .14em; }
.sub { text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 500; color: var(--ink-faint); margin-bottom: 18px; }
.panel-close { display: none; }

/* reel */
.reel .section__label { margin-bottom: 22px; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player__cover { display: none; position: absolute; inset: 0; width: 100%; place-items: center; cursor: pointer;
  background: linear-gradient(rgba(15, 13, 12, .18), rgba(15, 13, 12, .42)), url("media/reel-poster.jpg") center / cover no-repeat; }
.js .player__cover { display: grid; }
.player__play { width: 86px; height: 86px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: rgba(20, 18, 17, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, color .2s, transform .2s; }
.player__play svg { width: 18px; height: 22px; margin-left: 5px; }
.player__cover:hover .player__play, .player__cover:focus-visible .player__play { background: var(--ink); color: var(--bg); transform: scale(1.05); }

/* bio */
.prose { max-width: 62ch; font-size: 20px; line-height: 1.72; font-weight: 300; color: var(--ink); }
.prose p + p { margin-top: 1.1em; }
.prose em { font-weight: 400; }

/* contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px 64px; align-items: start; }
.rep__name { font-size: 24px; font-weight: 400; line-height: 1.3; }
.rep__meta { margin-top: 8px; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.rep__meta a { border-bottom: 1px solid var(--line-strong); transition: border-color .2s; }
.rep__meta a:hover { border-color: var(--ink); }
.rep__union { margin-top: 26px; text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.form label { display: block; margin-bottom: 22px; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 500; color: var(--ink-faint); }
.form input, .form textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 0 10px; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; color: var(--ink); font: 400 17px/1.5 var(--font); letter-spacing: 0; text-transform: none; resize: vertical; transition: border-color .2s; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--ink); }
.form .btn { margin-top: 6px; }
.form__note { margin-top: 16px; font-size: 13px; color: var(--accent); }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 30px var(--pad) 34px; }
.foot__in { display: flex; justify-content: space-between; gap: 16px; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 500; color: var(--ink-faint); }

/* dim layer behind slide-in panels, and the small message strip */
.scrim { position: fixed; inset: 0; z-index: 45; background: rgba(10, 9, 8, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
html.panel-open .scrim { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 104px; max-width: calc(100vw - 32px); transform: translate(-50%, 8px); background: var(--ink); color: var(--bg); padding: 11px 18px; font-size: 14px; line-height: 1.35; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 4. layout A · one screen ----------
   Top: name, icons, one outlined button. Bottom: quiet row of links, then the union and agency line.
   Bio and Contact slide in from the right; the reel opens over the page. Nothing scrolls. */
html[data-layout="a"] body { overflow: hidden; height: 100vh; height: 100dvh; }
html[data-layout="a"] .bar { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: var(--bar-h) 1fr auto; align-items: center; column-gap: 20px; padding: 0 var(--pad) 58px; }
html[data-layout="a"] .bar > * { pointer-events: auto; }
html[data-layout="a"] .mark { grid-column: 1; grid-row: 1; justify-self: start; }
html[data-layout="a"] .social { grid-column: 2; grid-row: 1; }
html[data-layout="a"] .cta { grid-column: 3; grid-row: 1; }
html[data-layout="a"] .nav { grid-column: 1 / -1; grid-row: 3; justify-content: center; flex-wrap: wrap; gap: 2px 32px; }
html[data-layout="a"] .nav [data-action="reel"] { display: none; }
html[data-layout="a"] .menu-btn { display: none !important; }
html[data-layout="a"] .hero__text,
html[data-layout="a"] .hero__more,
html[data-layout="a"] .foot { display: none; }

html[data-layout="a"] .section { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; left: auto; width: min(600px, 100vw); margin: 0; padding: 104px clamp(24px, 4vw, 52px) 56px; background: var(--bg-raise); border: 0; border-left: 1px solid var(--line); overflow: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .38s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .38s; }
html[data-layout="a"] .section.is-open { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
html[data-layout="a"] .section .cols,
html[data-layout="a"] .section .contact__grid { display: block; }
html[data-layout="a"] .section .section__label { margin-bottom: 26px; }
html[data-layout="a"] .prose { font-size: 19px; }
html[data-layout="a"] .rep { margin-bottom: 44px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
html[data-layout="a"] .rep:only-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }   /* no divider when there is no form under it */
html[data-layout="a"] .panel-close { display: grid; position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; transition: background .2s, color .2s; }
html[data-layout="a"] .panel-close:hover, html[data-layout="a"] .panel-close:focus-visible { background: var(--ink); color: var(--bg); }
html[data-layout="a"] .panel-close svg { width: 13px; height: 13px; }

/* the reel opens centred over everything */
html[data-layout="a"] .reel { left: 0; width: auto; display: grid; place-items: center; padding: 76px clamp(14px, 4vw, 64px) 40px; background: rgba(12, 11, 10, .95); border: 0; transform: none; opacity: 0; transition: opacity .28s, visibility 0s linear .28s; }
html[data-layout="a"] .reel.is-open { opacity: 1; transition: opacity .28s, visibility 0s; }
html[data-layout="a"] .reel .wrap { width: min(1200px, 100%, calc((100vh - 170px) * 16 / 9)); width: min(1200px, 100%, calc((100dvh - 170px) * 16 / 9)); margin: 0; }
html[data-layout="a"] .reel .section__label { margin-bottom: 16px; }

/* ---------- 5. layout B · photo first, then a short scroll ----------
   A solid top bar with the name in the middle and the links around it. The portrait sits to the right
   with one line and a button on the left. Reel, bio and contact follow down the page. */
html[data-layout="b"] .bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--bar-h); padding: 0 var(--pad); border-bottom: 1px solid transparent; transition: border-color .3s; }
html[data-layout="b"] .bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(23, 21, 20, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-layout="b"].is-scrolled .bar { border-bottom-color: var(--line); }
html[data-layout="b"] .mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-indent: .32em; }
html[data-layout="b"] .nav { height: 100%; display: grid; grid-template-columns: 1fr var(--mark-w) 1fr; gap: 0; }
html[data-layout="b"] .nav__group { display: flex; align-items: center; gap: 26px; }
html[data-layout="b"] .nav__group--a { grid-column: 1; justify-self: end; }
html[data-layout="b"] .nav__group--b { grid-column: 3; justify-self: start; }
html[data-layout="b"] .social { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); }
html[data-layout="b"] .cta,
html[data-layout="b"] .baseline { display: none; }

html[data-layout="b"] .hero { --photo-x: 63%; }
html[data-layout="b"] .hero__media { top: var(--bar-h); }
html[data-layout="b"] .hero__shade { background:
  linear-gradient(to right, rgba(20, 18, 17, .8) 0%, rgba(20, 18, 17, .35) 34%, rgba(20, 18, 17, 0) 56%),
  linear-gradient(to top, rgba(20, 18, 17, .92) 0%, rgba(20, 18, 17, .4) 12%, rgba(20, 18, 17, 0) 28%); }

/* folded menu (layout B when the links no longer fit) */
html[data-layout="b"].is-compact .bar { display: flex; align-items: center; gap: 12px; }
html[data-layout="b"].is-compact .mark { position: static; transform: none; text-indent: 0; margin-right: auto; }
html[data-layout="b"].is-compact .social { position: static; transform: none; }
html[data-layout="b"].is-compact .menu-btn { display: inline-flex; margin-left: 8px; }
html[data-layout="b"].is-compact .nav { display: none; }
html[data-layout="b"].is-compact.menu-open body { overflow: hidden; }
html[data-layout="b"].is-compact.menu-open .bar { z-index: 60; }
html[data-layout="b"].is-compact.menu-open .nav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: fixed; inset: 0; z-index: -1; height: auto; padding: 96px 24px 56px; background: var(--bg); }
html[data-layout="b"].is-compact.menu-open .nav__group { display: contents; }
html[data-layout="b"].is-compact.menu-open .nav a { font-size: 21px; letter-spacing: .22em; padding: 13px 10px; opacity: 1; }
html[data-layout="b"].is-compact.menu-open .nav a::after { display: none; }

/* ---------- 6. small screens ---------- */
@media (max-width: 1439px) {
  .nav { gap: 22px; }
  html[data-layout="b"] .nav__group { gap: 22px; }
}

@media (max-width: 899px), (max-aspect-ratio: 1 / 1) {
  /* on tall or narrow screens the portrait fills the screen and the text sits at the bottom */
  html[data-layout="b"] .hero { --photo-x: 50%; }
  html[data-layout="b"] .hero__text { left: var(--pad); right: var(--pad); bottom: 74px; width: auto; max-width: 520px; }
  html[data-layout="b"] .hero__shade { background: linear-gradient(to top, rgba(20, 18, 17, .96) 0%, rgba(20, 18, 17, .78) 26%, rgba(20, 18, 17, 0) 60%); }
  .hero__over { margin-bottom: 14px; }
  .hero__line { margin-bottom: 24px; }
  .cols, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__grid { gap: 44px; }
  .prose { font-size: 19px; }
}

@media (max-width: 559px) {
  :root { --bar-h: 64px; }
  body { font-size: 17px; }
  .mark { font-size: 16px; letter-spacing: .28em; }
  .social a { width: 34px; height: 34px; }
  .prose { font-size: 18px; line-height: 1.68; }

  /* layout A on a phone: the button and the links move to the bottom of the screen */
  html[data-layout="a"] .bar { grid-template-columns: 1fr auto; grid-template-rows: var(--bar-h) 1fr auto auto; row-gap: 12px; padding-bottom: 52px; }
  html[data-layout="a"] .cta { grid-column: 1 / -1; grid-row: 3; justify-content: center; padding: 16px; background: rgba(20, 18, 17, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  html[data-layout="a"] .nav { grid-row: 4; gap: 0 22px; }
  html[data-layout="a"] .nav a { font-size: 12px; padding: 7px 0; }
  html[data-layout="a"] .hero__shade { background: linear-gradient(to top, rgba(20, 18, 17, .96) 0%, rgba(20, 18, 17, .72) 24%, rgba(20, 18, 17, 0) 52%); }
  html[data-layout="a"] .section { padding-top: 92px; }
  html[data-layout="a"] .reel { padding: 72px 0 32px; }
  .baseline { font-size: 9.5px; letter-spacing: .16em; bottom: 18px; }
  .hero__btns .btn { padding: 15px 20px 15px 18px; }
  .hero__btns .btn--ghost { padding: 15px 20px; }
  .foot__in { flex-direction: column; gap: 6px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  /* a phone turned sideways */
  html[data-layout="b"] .hero { height: auto; min-height: 520px; }
}