/* Rob McCormick portfolio, v2 */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-tight-latin-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/inter-tight-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --paper: #e9e9e7;
  --ink: #111111;
  --mute: #66665f;
  --ghost: #b9b9b4;
  --line: rgba(17, 17, 17, .18);
  --dark: #111111;
  --on-dark: #e9e9e7;
  --dark-mute: #a3a39e;
  --dark-line: rgba(233, 233, 231, .2);
  --accent: #2f45ff;
  --brand: var(--accent);
  --on-accent: #eef0ff;
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 1440px;
  --gut: clamp(20px, 4.4vw, 64px);
  --gap: clamp(16px, 2.4vw, 40px);
  --radius: clamp(12px, 1.4vw, 22px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 780; line-height: .95; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { left: 8px; }

/* type voices */
.mega { font-weight: 830; letter-spacing: -0.064em; line-height: .84; text-transform: uppercase; }
.big { font-weight: 780; letter-spacing: -0.058em; line-height: .92; }
.small-caps { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; }

/* section label: number + name on a thin rule */
.sec-label { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.sec-label .num { color: var(--accent); }
.sec-label .aside { color: var(--mute); }
[data-theme="dark"] .sec-label { border-color: var(--dark-line); }
[data-theme="dark"] .sec-label .num { color: #8e9bff; }
[data-theme="dark"] .sec-label .aside { color: var(--dark-mute); }
[data-theme="accent"] .sec-label { border-color: rgba(238, 240, 255, .35); }
[data-theme="accent"] .sec-label .num { color: var(--on-accent); opacity: .7; }

/* header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gut);
  color: var(--brand);
  transition: color .25s, background-color .25s;
}
.site-header.on-dark { color: var(--on-dark); }
.site-header.on-accent { color: var(--on-accent); }
.logo { position: relative; display: block; width: 40px; height: 41px; flex: none; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.logo .logo-light { opacity: 0; }
.site-header.logo-inverse .logo-dark { opacity: 0; }
.site-header.logo-inverse .logo-light { opacity: 1; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav a { text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.menu-btn { display: none; }
@media (max-width: 760px) {
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 44px; height: 44px; padding: 10px; border: 0; background: none; cursor: pointer; color: inherit;
  }
  .menu-btn span { display: block; height: 1.5px; background: currentColor; transition: transform .25s; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
    padding: 96px var(--gut) 48px; background: var(--ink); color: var(--on-dark);
    visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;
  }
  .nav.open { visibility: visible; opacity: 1; }
  .nav a { font-size: 48px; font-weight: 800; letter-spacing: -0.06em; text-transform: none; line-height: 1.05; }
  .nav a::after { display: none; }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-header { color: var(--on-dark); }
  body.menu-open .logo-dark { opacity: 0; }
  body.menu-open .logo-light { opacity: 1; }
}

/* buttons */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 24px; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background-color .2s, color .2s, border-color .2s;
}
.pill svg { width: 16px; height: 16px; flex: none; transition: transform .25s; }
.pill:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pill:hover svg { transform: translateX(3px); }
.pill--ghost { background: transparent; color: var(--ink); }
[data-theme="dark"] .pill { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
[data-theme="dark"] .pill:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- home ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 110px var(--gut) 28px; max-width: var(--max); margin: 0 auto; overflow: hidden; }
.hero-kicker { margin: 0 0 clamp(16px, 2vw, 28px); color: var(--mute); }
/* Each line is sized by script to run the full width, like a set of stacked wordmarks */
.hero h1 { position: relative; z-index: 1; width: 100%; text-align: center; font-size: clamp(52px, 11vw, 168px); }
.hero h1 .line { position: relative; display: block; width: fit-content; margin: 0 auto; white-space: nowrap; line-height: .84; letter-spacing: -0.064em; }
/* Hero mark: a translucent, inflated RM. The headline behind it is redrawn inside the
   shape, magnified and bent by a displacement lens, so the words warp through the glass. */
.hero-stage { position: relative; width: 100%; }
.hero-mark { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(170px, 34vw, 640px); aspect-ratio: 1000 / 1020; transform: translate(-50%, -50%); pointer-events: none; }
.hm-float { position: absolute; inset: 0; will-change: transform; transform-origin: 0 0; filter: url(#liquid); }
.hm-shadow, .hm-lens, .hm-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-shadow { transform: translate(2%, 5%); }
.hm-lens { overflow: hidden; background: var(--paper); filter: url(#refract);
  -webkit-mask: url(glass/glass-mask.png) center / 100% 100% no-repeat; mask: url(glass/glass-mask.png) center / 100% 100% no-repeat; }
.hm-lens::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(255,255,255,.35), rgba(47,69,255,.05) 50%, rgba(47,69,255,.16)); }
.hm-text { position: absolute; left: 0; top: 0; text-align: center; color: #1f2fb8; transform-origin: 0 0; }
.hm-text .line { position: relative; display: block; width: fit-content; margin: 0 auto; white-space: nowrap; line-height: .84; letter-spacing: -0.064em; animation: none !important; }
.hero-foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 28px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; }
.hero-foot > :last-child { justify-self: end; }
@media (max-width: 760px) {
  .hero { min-height: 0; justify-content: flex-start; padding: 120px var(--gut) 32px; }
  .hero-mark { width: 44vw; }
  .hero-foot { position: static; width: 100%; margin-top: 36px; }
  .hero-foot { grid-template-columns: 1fr auto; }
  .hero-mid { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line { animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 .line:nth-child(2) { animation-delay: .08s; }
  .hero h1 .line:nth-child(3) { animation-delay: .16s; }
  .hero-mark { animation: fade 1s .9s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

.about-teaser { padding: clamp(80px, 12vw, 180px) 0 clamp(96px, 14vw, 200px); }
.statement { font-size: clamp(34px, 5.2vw, 80px); max-width: 15em; margin: clamp(48px, 8vw, 120px) 0 0; }
.statement .w { color: var(--ghost); transition: color .3s; }
.statement .w.on { color: var(--ink); }
.no-fill .statement .w { color: inherit; }

/* work: dark band */
.work { background: var(--dark); color: var(--on-dark); padding: clamp(80px, 10vw, 150px) 0 clamp(60px, 8vw, 120px); }
.work-title { font-size: clamp(56px, 12vw, 184px); margin: clamp(56px, 8vw, 120px) 0 clamp(64px, 9vw, 140px); }
.proj { margin-bottom: clamp(88px, 11vw, 168px); }
.proj-top { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--dark-line); }
.proj-top .aside { color: var(--dark-mute); }
.proj-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px var(--gap); align-items: end; margin: clamp(20px, 2.4vw, 36px) 0 clamp(28px, 3.6vw, 52px); }
.proj-head h3 { grid-column: 1 / span 7; font-size: clamp(44px, 6.4vw, 104px); }
.proj-head h3 a { text-decoration: none; }
.proj-head p { grid-column: 9 / span 4; margin: 0; color: var(--dark-mute); font-size: 17px; line-height: 1.45; }
.proj-media { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: #222; }
.proj-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.proj-media:hover img { transform: scale(1.025); }
.proj-media .pill { position: absolute; left: clamp(16px, 2.2vw, 32px); bottom: clamp(16px, 2.2vw, 32px); background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.proj-media:hover .pill { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.proj-scope { display: grid; grid-template-columns: 1fr 3fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--dark-line); }
.proj-scope .lbl { color: var(--dark-mute); }
.proj-scope a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: start; }
.proj-scope a:hover { color: #8e9bff; }
@media (max-width: 760px) {
  .proj-head h3, .proj-head p { grid-column: 1 / -1; }
  .proj-scope { grid-template-columns: 1fr auto; }
  .proj-scope .lbl { display: none; }
  .proj-media { aspect-ratio: 4 / 3; }
}

/* ---------- inner pages ---------- */
.page-head { padding: clamp(140px, 16vw, 230px) 0 clamp(48px, 7vw, 100px); }
.page-head h1 { font-size: clamp(48px, 8.4vw, 136px); margin-top: clamp(40px, 6vw, 88px); max-width: 11em; }
.page-head .lede-wrap { margin-top: clamp(32px, 4vw, 56px); max-width: 40em; }
.page-head .lede-wrap p:first-child { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }

.project-head { padding: clamp(140px, 15vw, 220px) 0 clamp(40px, 6vw, 88px); }
.project-head h1 { font-size: clamp(42px, 7vw, 116px); margin-top: clamp(40px, 6vw, 88px); max-width: 12em; }
.project-head .proj-tags { margin-top: clamp(24px, 3vw, 40px); color: var(--mute); }

.facts { margin: 0 0 clamp(48px, 7vw, 104px); border-bottom: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px var(--gap); padding: 22px 0 26px; border-top: 1px solid var(--line); }
.fact h3 { grid-column: 1 / span 3; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.9; color: var(--mute); }
.fact p { grid-column: 4 / span 7; margin: 0; }
@media (max-width: 760px) { .fact h3, .fact p { grid-column: 1 / -1; } }

.block { margin: 0 0 clamp(16px, 2.2vw, 32px); }
.block--text { max-width: 820px; }
.block img, .block .video { width: 100%; border-radius: var(--radius); overflow: hidden; background: #d8d8d4; }
.block img[src*="_rw_600."] { max-width: 600px; }
/* Logos sit straight on the page: no box, no fill, smaller */
.block--logo { padding-block: clamp(24px, 4vw, 56px); }
.block img.is-logo { width: auto; max-width: min(420px, 72%); max-height: 200px; height: auto; background: none; border-radius: 0; overflow: visible; }
.cols .block img.is-logo, .cols img.is-logo { max-width: min(320px, 80%); }
.section-title { font-size: clamp(30px, 3.8vw, 60px); font-weight: 780; letter-spacing: -0.05em; line-height: .95; margin: clamp(80px, 10vw, 160px) 0 clamp(24px, 3vw, 40px); max-width: 14em; }
figure { margin: 0; }
figcaption, .caption { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); margin-top: 14px; }

.cols { display: grid; gap: clamp(16px, 2.2vw, 32px); align-items: start; }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
.cols--split { grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: center; }
@media (max-width: 760px) { .cols--2, .cols--3, .cols--4, .cols--split { grid-template-columns: 1fr; } }

.prose { max-width: 40em; }
.prose h3 { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); margin: 1.8em 0 .5em; }
.prose h3:first-child { margin-top: 0; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 600; }
.prose a:hover { color: var(--accent); }
.meta { display: grid; gap: 24px; }
.meta-row h3 { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.meta-row p { margin: 0; }

.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.closing { padding: clamp(96px, 12vw, 180px) 0 clamp(96px, 12vw, 180px); }
.closing-line { font-size: clamp(40px, 6.4vw, 104px); font-weight: 780; letter-spacing: -0.058em; line-height: .92; margin: 0; max-width: 11em; }
.closing .pill { margin-top: 36px; }
.closing p:not(.closing-line) { margin-top: 24px; max-width: 32em; font-size: 20px; }

/* next project + index, dark */
.next { background: var(--dark); color: var(--on-dark); padding: clamp(80px, 10vw, 150px) 0 clamp(80px, 10vw, 150px); }
.next-link { display: block; text-decoration: none; margin: clamp(40px, 6vw, 88px) 0 clamp(80px, 10vw, 150px); }
.next-title { display: block; font-size: clamp(56px, 11vw, 176px); transition: color .2s; }
.next-link:hover .next-title { color: #8e9bff; }
.next-go { display: inline-flex; margin-top: clamp(20px, 2.4vw, 32px); }
.index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--dark-line); }
.index a {
  display: grid; grid-template-columns: 72px 1fr auto; align-items: baseline; gap: 12px;
  padding: 16px 0 18px; border-top: 1px solid var(--dark-line); text-decoration: none;
}
.index .num { color: var(--dark-mute); }
.index-name { font-size: clamp(26px, 3.2vw, 48px); font-weight: 780; letter-spacing: -0.05em; line-height: 1; transition: color .2s, transform .3s; }
.index-kind { color: var(--dark-mute); text-align: right; }
.index a:hover .index-name, .index a:focus-visible .index-name { color: #8e9bff; transform: translateX(8px); }
.index a[aria-current="page"] .index-name { color: var(--dark-mute); }
.index-head { margin-top: 0; }
@media (max-width: 600px) {
  .index a { grid-template-columns: 40px 1fr; }
  .index-kind { grid-column: 2; text-align: left; }
}
.peek {
  position: fixed; left: 0; top: 0; z-index: 30; width: min(340px, 26vw); aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  pointer-events: none; opacity: 0; transition: opacity .2s; background: #222;
}
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.on { opacity: 1; }
@media (hover: none), (max-width: 900px) { .peek { display: none; } }

/* about */
.about-statement { font-size: clamp(30px, 4.2vw, 64px); max-width: 17em; margin: 0 0 clamp(64px, 9vw, 140px); }
.about-statement .w { color: var(--ghost); transition: color .3s; }
.about-statement .w.on { color: var(--ink); }
.no-fill .about-statement .w { color: inherit; }
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding-bottom: clamp(64px, 8vw, 120px); }
.about-grid .prose { grid-column: 1 / span 7; }
.about-grid .awards { grid-column: 9 / span 4; align-self: start; position: sticky; top: 110px; }
.awards h2 { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.awards ul { list-style: none; margin: 0; padding: 0; }
.awards li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; }
.awards p { font-size: 14px; color: var(--mute); margin-top: 12px; }
@media (max-width: 900px) { .about-grid .prose, .about-grid .awards { grid-column: 1 / -1; position: static; } }

/* services */
.service-list { border-bottom: 1px solid var(--line); margin-bottom: clamp(96px, 12vw, 180px); }
.service { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px var(--gap); padding: clamp(36px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.service-num { grid-column: 1 / span 1; color: var(--accent); padding-top: 8px; }
.service h2 { grid-column: 2 / span 5; font-size: clamp(30px, 3.4vw, 54px); font-weight: 780; letter-spacing: -0.05em; line-height: .95; }
.service-body { grid-column: 8 / span 5; }
.service-tag { font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 14px; }
.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; }
@media (max-width: 860px) {
  .service-num { grid-column: 1 / -1; padding: 0; }
  .service h2, .service-body { grid-column: 1 / -1; }
}

/* request */
.request-body { max-width: 760px; padding-bottom: clamp(96px, 12vw, 180px); }
.request-body .prose p { font-size: 20px; }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.social a { display: block; width: 20px; height: 20px; }
.social svg { width: 100%; height: 100%; fill: currentColor; transition: opacity .2s; }
.social a:hover svg { opacity: .6; }

/* ---------- contact footer, accent ---------- */
.contact { position: relative; overflow: hidden; background: var(--accent); color: var(--on-accent); padding: clamp(80px, 10vw, 150px) 0 28px; }
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px var(--gap); margin: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 88px); position: relative; z-index: 1; }
.contact-grid .small-caps { grid-column: 1 / span 3; padding-top: .9em; }
.contact-line { grid-column: 4 / -1; font-size: clamp(46px, 8vw, 128px); margin: 0; }
.contact-line .line { display: block; }
.contact-line .outline { color: rgba(238, 240, 255, .42); }
.mail {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) clamp(22px, 3vw, 40px);
  border: 1px solid rgba(238,240,255,.6); border-radius: 999px; text-decoration: none;
  transition: background-color .25s, color .25s;
}
.mail-label { display: block; opacity: .75; margin-bottom: 4px; font-size: 12px; }
.mail-addr { display: block; font-size: clamp(20px, 3.4vw, 52px); font-weight: 760; letter-spacing: -0.05em; line-height: 1.05; word-break: break-all; }
.mail-go { flex: none; display: grid; place-items: center; width: clamp(52px, 6vw, 84px); aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; transition: transform .3s; }
.mail-go svg { width: 40%; height: 40%; }
.mail:hover { background: var(--on-accent); color: var(--accent); }
.mail:hover .mail-go { transform: rotate(45deg); }
.contact-ghost {
  position: absolute; right: -0.04em; bottom: -0.2em; z-index: 0;
  font-size: clamp(200px, 34vw, 560px); font-weight: 830; letter-spacing: -0.08em; line-height: 1;
  color: rgba(238,240,255,.1); pointer-events: none; user-select: none;
}
.footer-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: clamp(80px, 10vw, 150px); padding-top: 18px; border-top: 1px solid rgba(238,240,255,.35); }
.footer-row .to-top { justify-self: end; text-decoration: none; }
.footer-row .to-top:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .contact-grid .small-caps, .contact-line { grid-column: 1 / -1; }
  .footer-row { grid-template-columns: 1fr auto; }
  .footer-row .social { grid-row: 2; }
}

/* The glass leads, the headline steps back and becomes what it bends */
.hero h1 { color: #cdcdc9; }
.hm-text { color: var(--accent); }
.hero-kicker { position: relative; z-index: 3; }
@media (max-width: 760px) { .hero-stage { margin: 48px 0 64px; } }

/* Embedded sections (self-contained pages in a frame that reports its own height) */
.block--embed iframe { display: block; width: 100%; height: 2600px; border: 0; border-radius: 4px; background: #3b2414; }
.block--embed iframe[data-embed="cc-system-height"] { background: #f3f2ee; }

/* About: the opening statement with a portrait beside it */
.about-intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; margin: 0 0 clamp(64px, 9vw, 140px); }
.about-intro .about-statement { grid-column: 1 / span 7; margin: 0; }
.about-photo { grid-column: 9 / span 4; margin: 0; }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 900px) {
  .about-intro .about-statement { grid-column: 1 / -1; }
  .about-photo { grid-column: 1 / -1; order: -1; max-width: 420px; }
}