:root {
  --ink: #211d1a;
  --paper: #f5f1eb;
  --cream: #fbf8f3;
  --muted: #77716a;
  --line: rgba(33,29,26,.16);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
::selection { background: #c9a28b; color: var(--ink); }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 50; padding: .7rem 1rem; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.age-gate { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1.25rem; overflow-y: auto; color: var(--ink); background: #f7f4ee; text-align: center; }
.age-card { width: min(100%, 29rem); padding: 2rem .5rem; }
.age-title { margin: 0 0 1.25rem; font: 400 clamp(2.6rem, 10vw, 3.7rem)/.95 var(--serif); letter-spacing: -.04em; }
.age-title em { font-weight: 400; }
.age-copy { margin: 0 auto 1.7rem; max-width: 26rem; color: #5d554e; font-size: .9rem; line-height: 1.7; }
.age-enter, .age-leave { width: 100%; min-height: 3.35rem; border-radius: 999px; cursor: pointer; }
.age-enter { display: flex; align-items: center; justify-content: center; gap: .8rem; border: 0; color: white; background: #191614; transition: background .2s,transform .2s; }
.age-enter:hover { background: #3a322d; transform: translateY(-1px); }
.age-leave { margin-top: .65rem; border: 1px solid #ded8cf; color: #59524b; background: transparent; }
.age-credit { margin: 1.4rem 0 0; color: #827a71; font: .56rem var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.age-note { min-height: 1.3rem; margin: 1rem 0 0; color: #827a71; font-size: .7rem; line-height: 1.5; }
.site-header { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; padding: 1.2rem 1.2rem; display: flex; justify-content: space-between; align-items: center; color: white; }
.site-header { display: none; }
.wordmark { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.04em; }
.header-note { display: none; font: .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.menu-toggle { border: 1px solid rgba(255,255,255,.7); border-radius: 50px; padding: .66rem 1rem; color: white; background: rgba(25,21,19,.2); cursor: pointer; }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 0; display: grid; place-items: center; padding: max(.65rem, env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom)); overflow: hidden; isolation: isolate; color: white; text-align: center; background: #756b62; }
.hero::before { content: ''; position: absolute; z-index: -3; inset: 0; background: #eee3d3; }
.hero-video { position: absolute; z-index: -2; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; object-position: center 43%; filter: blur(7px) saturate(.78) brightness(.76); transform: scale(1.045); }
@media (max-width: 679px) {
  .hero-video { filter: saturate(.78) brightness(.76); }
}
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(26,22,19,.38), rgba(29,25,22,.22) 45%, rgba(25,22,20,.6)); }
.hero.video-fallback { color: #29231e; background: #eee3d3; }
.hero.video-fallback::before { inset: 0; background: #eee3d3; filter: none; transform: none; }
.hero.video-fallback::after { background: none; }
.hero.video-fallback .hero-video { opacity: 0; }
.hero.video-fallback h1 { text-shadow: none; }
.hero.video-fallback .eyebrow, .hero.video-fallback .hero-subtitle, .hero.video-fallback .link-heading, .hero.video-fallback .hero-more { color: rgba(41,35,30,.82); text-shadow: none; }
.hero.video-fallback .link-heading span:last-child, .hero.video-fallback .wishlist-rule { background: rgba(41,35,30,.32); }
.hero.video-fallback .social-icon { border-color: rgba(41,35,30,.58); color: #29231e; }
.hero.video-fallback .hero-more a { text-decoration-color: rgba(41,35,30,.5); }
.hero-content { width: min(100%, 30rem); max-height: 100%; margin: 0 auto; }
.eyebrow { font: .67rem var(--mono); text-transform: uppercase; letter-spacing: .19em; }
.hero .eyebrow { color: rgba(255,255,255,.82); }
.avatar-frame { display: block; width: clamp(62px, 10svh, 96px); aspect-ratio: 1; overflow: hidden; border: 3px solid rgba(255,255,255,.94); border-radius: 50%; box-shadow: 0 10px 35px #0003; margin: 0 auto .45rem; }
.avatar { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
h1 { font: 400 clamp(2.55rem, 11vw, 4.4rem)/.85 var(--serif); letter-spacing: -.055em; margin: .35rem 0 .7rem; text-shadow: 0 2px 18px #0003; }
h1 em { font-weight: 400; }
.hero-subtitle { margin: 1rem auto 1.45rem; max-width: 28rem; font: 400 clamp(.9rem, 3vw, 1.05rem)/1.6 var(--mono); letter-spacing: .035em; color: #fff; text-shadow: 0 1px 8px #0008; }
.hero-cta { display: inline-flex; min-height: 3.5rem; align-items: center; justify-content: center; gap: 1.4rem; padding: .8rem 1.55rem; border-radius: 50px; background: var(--ink); color: white; font-size: .92rem; transition: transform .25s, background .25s; }
.hero-cta:hover, .button:hover { transform: translateY(-3px); background: #49403a; }
.hero-cta span { font-size: 1.25rem; }
.section { padding: 5.2rem 1.25rem; }
.section-inner { width: min(100%, 76rem); margin: auto; }
.kicker { display: flex; gap: .8rem; align-items: center; color: var(--muted); font: .65rem var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.kicker::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.section-title { font: 400 clamp(2.7rem, 10vw, 5.5rem)/.9 var(--serif); letter-spacing: -.045em; margin: 1.15rem 0 2rem; }
.section-title em { color: #8a6956; }
.intro { max-width: 37rem; margin: 0 0 2rem auto; font-size: 1.02rem; line-height: 1.75; color: #58524d; }
.work { background: var(--cream); }
.project-grid { display: grid; gap: 1rem; }
.project-card { position: relative; overflow: hidden; min-height: 23rem; border-radius: 4px; background: #bca99a; isolation: isolate; }
.project-card::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--project-image) center/cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.project-card:hover::before { transform: scale(1.04); }
.project-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(20,18,16,.65)); }
.project-card:nth-child(1) { --project-image: linear-gradient(135deg,#bba18d,#6b5144 47%,#dfc9b4); }
.project-card:nth-child(2) { --project-image: linear-gradient(135deg,#d5d0c5,#84928c 50%,#485b52); }
.project-card:nth-child(3) { --project-image: linear-gradient(135deg,#d8b7a6,#ad7361 50%,#703f3b); }
.project-info { position: absolute; inset: auto 1.2rem 1.2rem; color: white; }
.project-type { font: .62rem var(--mono); letter-spacing: .15em; text-transform: uppercase; opacity: .83; }
.project-name { margin: .35rem 0 0; font: 400 2rem/1 var(--serif); }
.project-number { position: absolute; right: 1.2rem; top: 1.1rem; color: white; font: .67rem var(--mono); }
.about-layout { display: grid; gap: 2rem; }
.about-stamp { aspect-ratio: 1.05; border-radius: 48% 48% 4px 4px; display: grid; place-items: center; background: #e2d7c9; color: #816957; font: italic clamp(4rem, 17vw, 8rem) var(--serif); }
.about-copy { max-width: 34rem; font-size: 1rem; line-height: 1.8; color: #58524d; }
.about-copy p:first-child { margin-top: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.pill { border: 1px solid var(--line); border-radius: 50px; padding: .58rem .85rem; font: .63rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.offer { background: #e9e1d7; }
.offer-list { border-top: 1px solid var(--line); }
.offer-item { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); font: 400 1.65rem var(--serif); }
.offer-item span:last-child { font: .6rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.contact { background: #28231f; color: var(--cream); }
.contact .kicker { color: #b7a89a; }
.contact .kicker::after { background: #ffffff2b; }
.contact .section-title em { color: #c3a28c; }
.contact-grid { display: grid; gap: 2rem; }
.contact-note { max-width: 26rem; color: #c1b8b0; line-height: 1.7; }
.contact-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .45rem; }
.field label { font: .62rem var(--mono); letter-spacing: .13em; text-transform: uppercase; color: #c1b8b0; }
.field input, .field textarea, .field select { width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid #ffffff45; border-radius: 0; outline: 0; color: white; background: transparent; }
.field select option { color: var(--ink); }
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #d8b8a1; }
.field input::placeholder, .field textarea::placeholder { color: #928980; }
.form-bottom { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.button { border: 0; border-radius: 50px; padding: 1rem 1.35rem; color: var(--ink); background: var(--cream); cursor: pointer; transition: transform .25s,background .25s; }
.button:hover { color: white; }
.form-status { min-height: 1.5rem; color: #d5bba8; font-size: .84rem; }
.form-hint { color: #9d948b; font-size: .72rem; line-height: 1.5; }
.site-footer { padding: 1.35rem 1.25rem; background: #28231f; color: #c1b8b0; border-top: 1px solid #ffffff25; font: .62rem var(--mono); letter-spacing: .07em; }
.footer-inner { width: min(100%,76rem); margin: auto; display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.socials { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.social-link { border: 1px solid #ffffffa0; border-radius: 50px; padding: .62rem .9rem; font: .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.social-icons { display: flex; justify-content: center; gap: .75rem; margin: 1.2rem 0 2.3rem; }
.social-icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: white; font: 1.2rem var(--sans); transition: background .2s, transform .2s; }
.social-icon:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.hero-links { text-align: left; }
.link-heading { display: flex; gap: .9rem; align-items: center; margin-bottom: .48rem; color: rgba(255,255,255,.82); font: .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.link-heading span:last-child { flex: 1; height: 1px; background: rgba(255,255,255,.68); }
.link-button { min-height: 2.55rem; display: flex; align-items: center; justify-content: center; position: relative; margin-top: .36rem; padding: .48rem 1rem; border-radius: 999px; color: #fff; background: #191614; text-align: center; font: 400 .9375rem/1.35 var(--mono); letter-spacing: .015em; transition: transform .22s, background .22s; }
.link-button:hover { transform: translateY(-2px); background: #332c28; }
.neon-button { isolation: isolate; border: 1px solid rgba(243,218,255,.96); box-shadow: 0 0 8px rgba(205,119,255,.72), 0 0 19px rgba(177,76,255,.5), 0 0 34px rgba(157,54,255,.28); animation: neon-glow 4.6s steps(1, end) infinite; }
.neon-button::before { content: ''; position: absolute; z-index: 1; inset: -3px; border: 1px solid rgba(240,207,255,.9); border-radius: inherit; pointer-events: none; animation: neon-rim 4.6s steps(1, end) infinite; }
.neon-button::after { content: ''; position: absolute; z-index: -1; inset: -12px -20px; border-radius: 999px; background: radial-gradient(ellipse, rgba(183,82,255,.42), rgba(153,61,235,.2) 42%, transparent 72%); filter: blur(12px); opacity: .72; pointer-events: none; animation: neon-haze 5.4s ease-in-out infinite; }
@keyframes neon-glow {
  0%, 24%, 100% { box-shadow: 0 0 8px rgba(205,119,255,.72), 0 0 19px rgba(177,76,255,.5), 0 0 34px rgba(157,54,255,.28); }
  25% { box-shadow: 0 0 13px rgba(231,175,255,1), 0 0 30px rgba(185,87,255,.9), 0 0 52px rgba(157,54,255,.56); }
  26%, 28% { box-shadow: 0 0 2px rgba(205,119,255,.2), 0 0 5px rgba(177,76,255,.12), 0 0 10px rgba(157,54,255,.08); }
  29% { box-shadow: 0 0 11px rgba(231,175,255,.95), 0 0 27px rgba(185,87,255,.82), 0 0 48px rgba(157,54,255,.5); }
  31% { box-shadow: 0 0 5px rgba(205,119,255,.42), 0 0 12px rgba(177,76,255,.24), 0 0 24px rgba(157,54,255,.16); }
  34%, 39% { box-shadow: 0 0 13px rgba(231,175,255,1), 0 0 31px rgba(185,87,255,.92), 0 0 54px rgba(157,54,255,.58); }
  40% { box-shadow: 0 0 3px rgba(205,119,255,.28), 0 0 8px rgba(177,76,255,.16), 0 0 16px rgba(157,54,255,.1); }
  41%, 43% { box-shadow: 0 0 10px rgba(231,175,255,.88), 0 0 24px rgba(185,87,255,.72), 0 0 42px rgba(157,54,255,.4); }
  44%, 47% { box-shadow: 0 0 2px rgba(205,119,255,.18), 0 0 5px rgba(177,76,255,.1), 0 0 10px rgba(157,54,255,.06); }
  48% { box-shadow: 0 0 13px rgba(231,175,255,1), 0 0 32px rgba(185,87,255,.94), 0 0 56px rgba(157,54,255,.6); }
  51%, 70% { box-shadow: 0 0 8px rgba(205,119,255,.72), 0 0 19px rgba(177,76,255,.5), 0 0 34px rgba(157,54,255,.28); }
  71% { box-shadow: 0 0 3px rgba(205,119,255,.26), 0 0 7px rgba(177,76,255,.15), 0 0 14px rgba(157,54,255,.1); }
  73% { box-shadow: 0 0 12px rgba(231,175,255,.96), 0 0 29px rgba(185,87,255,.86), 0 0 50px rgba(157,54,255,.52); }
  74%, 75% { box-shadow: 0 0 1px rgba(205,119,255,.12), 0 0 3px rgba(177,76,255,.06), 0 0 7px rgba(157,54,255,.04); }
  76%, 84% { box-shadow: 0 0 10px rgba(231,175,255,.86), 0 0 25px rgba(185,87,255,.72), 0 0 44px rgba(157,54,255,.4); }
  85% { box-shadow: 0 0 4px rgba(205,119,255,.35), 0 0 10px rgba(177,76,255,.2), 0 0 20px rgba(157,54,255,.14); }
  88%, 94% { box-shadow: 0 0 9px rgba(205,119,255,.75), 0 0 21px rgba(177,76,255,.52), 0 0 37px rgba(157,54,255,.31); }
  95% { box-shadow: 0 0 2px rgba(205,119,255,.18), 0 0 5px rgba(177,76,255,.1), 0 0 10px rgba(157,54,255,.06); }
  97% { box-shadow: 0 0 13px rgba(231,175,255,1), 0 0 31px rgba(185,87,255,.9), 0 0 52px rgba(157,54,255,.54); }
}
@keyframes neon-rim { 0%, 24%, 100% { opacity: .72; } 25%, 29%, 34%, 39%, 41%, 43%, 48%, 73%, 76%, 84%, 97% { opacity: 1; } 26%, 28%, 44%, 47%, 74%, 75%, 95% { opacity: .18; } 31%, 40%, 71%, 85% { opacity: .42; } 51%, 70%, 88%, 94% { opacity: .72; } }
@keyframes neon-haze { 0%, 100% { opacity: .62; transform: scale(.97); } 42% { opacity: .78; transform: scale(1.01); } 51% { opacity: .94; transform: scale(1.05); } 76% { opacity: .7; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .neon-button, .neon-button::before, .neon-button::after { animation: none; } .neon-button { box-shadow: 0 0 9px rgba(205,119,255,.85), 0 0 24px rgba(177,76,255,.5); } }
.link-placeholder { color: rgba(255,255,255,.72); cursor: not-allowed; }
.wishlist-placeholder { border: 1px solid rgba(255,255,255,.88); color: #211d1a; background: #ead8c7; box-shadow: 0 5px 22px rgba(0,0,0,.12); }
.wishlist-wrap { display: flex; align-items: center; gap: .75rem; margin-top: .36rem; }
.wishlist-rule { flex: 1; height: 1px; background: rgba(255,255,255,.68); }
.wishlist-wrap .link-button { flex: 1.8; margin: 0; }
.link-arrow { display: none; }
.inspiration-links { margin-top: .9rem; text-align: left; }
.hero-more { display: flex; justify-content: center; gap: .55rem; margin-top: 1.4rem; color: rgba(255,255,255,.82); font: .68rem var(--mono); }
.hero-more a { text-decoration: underline; text-decoration-color: #ffffff80; text-underline-offset: .22em; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .12s; }.delay-2 { transition-delay: .24s; }
@media (max-height: 700px) {
 .hero { padding: .35rem .85rem 1.25rem; }
 .avatar-frame { width: 62px; margin-bottom: .2rem; }
 h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); margin: .2rem 0 .5rem; }
 .link-button { min-height: 2.25rem; margin-top: .26rem; padding: .38rem .8rem; font-size: .72rem; }
 .wishlist-wrap { margin-top: .26rem; }
 .link-heading { margin-bottom: .28rem; }
 .inspiration-links { margin-top: .6rem; }
 .hero-bottom { bottom: .2rem; font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }
@media (min-width: 680px) {
 .site-header { padding: 1.6rem 3.5rem; }.header-note { display: block; }
 .section { padding: 7.5rem 3.5rem; }.project-grid { grid-template-columns: 1fr 1fr; }.project-card:first-child { grid-column: span 2; min-height: 30rem; }.project-card:not(:first-child) { min-height: 24rem; }
 .about-layout { grid-template-columns: .8fr 1.2fr; align-items: center; gap: 5rem; }.about-stamp { max-width: 25rem; }
 .contact-grid { grid-template-columns: .85fr 1.15fr; gap: 5rem; }.site-footer { padding-inline: 3.5rem; }
}
@media (min-width: 1000px) { .hero { min-height: 100svh; }.hero::before { background-position: center 36%; }.project-card:first-child { min-height: 35rem; }.section { padding-top: 9rem; padding-bottom: 9rem; } }
@media (max-width: 360px) {
 .hero { padding-inline: .7rem; }
 .hero-content { width: min(100%, 22rem); }
 h1 { font-size: clamp(2.35rem, 11vw, 2.65rem); }
 .link-button { padding-inline: .65rem; font-size: .7rem; }
 .wishlist-wrap { gap: .45rem; }
}
@media (max-height: 520px) {
 .hero { padding: .25rem .65rem calc(.7rem + env(safe-area-inset-bottom)); }
 .avatar-frame { width: 44px; margin-bottom: .05rem; }
 h1 { font-size: 1.8rem; margin: .05rem 0 .25rem; }
 .link-heading { margin-bottom: .18rem; font-size: .54rem; }
 .link-button { min-height: 1.85rem; margin-top: .16rem; padding: .25rem .6rem; font-size: .62rem; }
 .wishlist-wrap { margin-top: .16rem; gap: .4rem; }
 .inspiration-links { margin-top: .35rem; }
}

/* Link-page spacing: separate the profile, primary links and inspiration link. */
.hero-content { display: flex; flex-direction: column; align-items: stretch; width: min(100%, 29rem); }
.profile-header { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: 0 auto 1.4rem; }
.profile-header .avatar-frame { width: clamp(5.5rem, 12svh, 7rem); margin: 0; flex: 0 0 auto; }
.profile-header h1 { margin: 0; line-height: .92; }
.profile-header h1:focus { outline: none; }
.profile-tagline { max-width: 25rem; margin: 0; color: inherit; font: 400 .9375rem/1.45 var(--sans); text-wrap: balance; }
.hero-links, .inspiration-links { display: grid; gap: .55rem; }
.link-heading { margin: 0; min-height: .8rem; }
.link-button { min-height: 2.9rem; margin-top: 0; padding: .58rem 1rem; }
.wishlist-wrap { min-height: 2.9rem; gap: .75rem; margin-top: 0; }
.wishlist-wrap .link-button { min-height: 2.9rem; margin: 0; }
.inspiration-links { margin-top: 1.4rem; }
.link-button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.hero.video-fallback .link-button:focus-visible { outline-color: #69448c; }
.link-button:active { transform: scale(.985); }
.hero { height: auto; min-height: 100vh; min-height: 100svh; }
.hero-content { max-height: none; }

@media (max-height: 700px) {
 .profile-header { gap: .55rem; margin-bottom: 1rem; }
 .profile-header .avatar-frame { width: clamp(4.75rem, 11svh, 5.5rem); }
 .profile-header h1 { font-size: clamp(2.35rem, 8.5vw, 3.3rem); }
 .hero-links, .inspiration-links { gap: .38rem; }
 .link-button, .wishlist-wrap, .wishlist-wrap .link-button { min-height: 2.75rem; }
 .inspiration-links { margin-top: 1rem; }
}

@media (max-height: 520px) {
 .hero { padding: .4rem .65rem calc(.55rem + env(safe-area-inset-bottom)); }
 .profile-header { gap: .35rem; margin-bottom: .65rem; }
 .profile-header .avatar-frame { width: 3.75rem; }
 .profile-header h1 { font-size: 1.85rem; }
 .hero-links, .inspiration-links { gap: .22rem; }
 .link-heading { min-height: .55rem; font-size: .52rem; }
 .link-button, .wishlist-wrap, .wishlist-wrap .link-button { min-height: 2.25rem; padding: .28rem .6rem; font-size: .64rem; }
 .wishlist-wrap { gap: .35rem; }
 .inspiration-links { margin-top: .55rem; }
}


/* Keep all links reachable on short landscape screens. */
@media (min-width: 680px) and (max-height: 520px) {
  .hero-content { display: grid; width: min(100%, 52rem); grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); column-gap: 2rem; }
  .profile-header { grid-column: 1; grid-row: 1 / 3; margin: 0; gap: 1rem; align-self: center; }
  .profile-header .avatar-frame { width: clamp(4.5rem, 22svh, 6rem); }
  .profile-header h1 { font-size: clamp(1.85rem, 4vw, 2.7rem); }
  .hero-links { grid-column: 2; grid-row: 1; }
  .inspiration-links { grid-column: 2; grid-row: 2; }
}

@media (max-width: 679px) and (min-height: 521px) and (max-height: 600px) {
  .profile-header { gap: .45rem; margin-bottom: .7rem; }
  .profile-header .avatar-frame { width: 4rem; }
  .hero-links, .inspiration-links { gap: .3rem; }
  .link-button, .wishlist-wrap .link-button { padding-block: .4rem; }
  .inspiration-links { margin-top: .7rem; }
}

.profile-email { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; color: inherit; opacity: .85; transition: opacity .2s, background .2s; }
.profile-email:hover { opacity: 1; background: #ffffff18; }
.profile-email:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.broadcast-link { position: relative; gap: .65rem; flex-wrap: wrap; }
.live-badge { display: inline-flex; align-items: center; gap: .3rem; color: #baffce; font-size: .6rem; letter-spacing: .04em; }
.live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #72e497; box-shadow: 0 0 8px #72e49788; }
.live-badge[hidden] { display: none; }
.broadcast-link.is-live { border-color: #72e49799; }

.fansly-button[hidden] { display: none; }

.email-contact { position: relative; display: flex; justify-content: center; }
button.profile-email { padding: 0; background: transparent; font: inherit; cursor: pointer; }

.email-feedback { position: absolute; top: 50%; left: calc(100% + 4px); transform: translateY(-50%); z-index: 10; max-width: calc(50vw - 2rem); overflow: hidden; text-overflow: ellipsis; padding: 4px 7px; border-radius: 9px; background: #211d1a; color: #fbf8f3; font: 400 10px/1.3 var(--sans); white-space: nowrap; pointer-events: none; }
.email-feedback:empty { display: none; }
.email-feedback.copy-failed { width: max-content; white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; pointer-events: auto; -webkit-user-select: text; user-select: text; }

/* Keep link text readable instead of shrinking it on smaller screens. */
.link-button, .wishlist-wrap .link-button { font-size: .9375rem; }
@media (max-height: 520px) {
  .link-button, .wishlist-wrap, .wishlist-wrap .link-button { min-height: 2.75rem; }
  .link-button, .wishlist-wrap .link-button { font-size: .875rem; }
  .profile-tagline { font-size: .875rem; }
}

/* Quiet typography and warm tones for the profile and links. */
.profile-header { color: #e8d8c5; }
.profile-header .avatar-frame { border: 0; box-shadow: 0 8px 28px #17110c26; }
.profile-header h1 { font-family: var(--sans); font-size: clamp(2.1rem, 8vw, 3rem); font-weight: 400; font-style: normal; line-height: 1.08; letter-spacing: -.045em; text-shadow: 0 2px 16px #17110c30; }
.profile-tagline { color: #d1c0af; }
.profile-email { border: 0; border-radius: 12px; color: #d1c0af; opacity: 1; }
.profile-email:hover { color: #f1e2d1; background: #e8d8c510; }
.hero.video-fallback .profile-header { color: #45392f; }
.hero.video-fallback .profile-tagline, .hero.video-fallback .profile-email { color: #665446; }
.link-button { font-family: var(--sans); font-weight: 400; letter-spacing: .01em; color: #e8dcd0; }
.wishlist-placeholder { color: #493a30; }
.link-heading { font-family: var(--sans); color: #c7b5a4; font-weight: 500; }
@media (max-height: 520px) {
  .profile-header h1 { font-size: 1.9rem; }
}

/* Keep the slogan and link labels from being selected or dragged by accident. */
.profile-tagline, .link-button { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* A warm milk veil separates the desktop video from the page controls. */
@media (min-width: 680px) {
  .hero:not(.video-fallback)::after { background: rgba(224, 201, 171, .46); pointer-events: none; }
  .hero:not(.video-fallback) .profile-header,
  .hero:not(.video-fallback) .profile-tagline,
  .hero:not(.video-fallback) .profile-email,
  .hero:not(.video-fallback) .link-heading { color: #30251e; }
  .hero:not(.video-fallback) .profile-header h1 { text-shadow: none; }
  .hero:not(.video-fallback) .profile-email:hover { color: #30251e; background: #30251e10; }
  .hero:not(.video-fallback) .link-heading span:last-child,
  .hero:not(.video-fallback) .wishlist-rule { background: #30251e70; }
  .hero:not(.video-fallback) .link-button:focus-visible { outline-color: #69448c; }
}

/* Spread the content upward on tall screens, preserving the existing bottom gap.
   The extra space is shared by ten gaps; centering adds half below the content,
   so the matching upward offset keeps Dark side at its previous position. */
@media (min-height: 741px) {
  .hero-content {
    --vertical-spread: calc((100svh - 740px) / 2);
    --spacing-step: calc(var(--vertical-spread) / 10);
    transform: translateY(calc(var(--vertical-spread) / -2));
  }
  .profile-header {
    gap: calc(.75rem + var(--spacing-step));
    margin-bottom: calc(1.4rem + var(--spacing-step));
  }
  .hero-links, .inspiration-links { gap: calc(.55rem + var(--spacing-step)); }
}

/* Grow gently with desktop width, limited by the available screen height. */
@media (min-width: 1000px) and (min-height: 800px) {
  .hero-content {
    --desktop-unit: min(clamp(0px, calc((100vw - 1000px) * .01), 12px), calc((100svh - 740px) / 10));
    --desktop-avatar: clamp(5.5rem, calc(12svh + var(--desktop-unit) * .8), calc(7rem + var(--desktop-unit) * 1.2));
    --desktop-growth: calc(var(--desktop-avatar) - clamp(5.5rem, 12svh, 7rem) + var(--desktop-unit) * 4.115);
    --spacing-step: max(0px, calc((var(--vertical-spread) - var(--desktop-growth)) / 10));
    width: min(100%, calc(29rem + var(--desktop-unit) * 5));
  }
  .profile-header .avatar-frame { width: var(--desktop-avatar); }
  .profile-header h1 { font-size: calc(3rem + var(--desktop-unit) * .5); }
  .profile-tagline { font-size: calc(.9375rem + var(--desktop-unit) / 6); }
  .link-button, .wishlist-wrap .link-button {
    min-height: calc(2.9rem + var(--desktop-unit) * .5);
    font-size: calc(.9375rem + var(--desktop-unit) / 6);
  }
  .profile-email { width: calc(44px + var(--desktop-unit) / 3); height: calc(44px + var(--desktop-unit) / 3); }
  .profile-email svg { width: calc(22px + var(--desktop-unit) / 6); height: calc(22px + var(--desktop-unit) / 6); }
  .link-heading { font-size: calc(.62rem + var(--desktop-unit) / 12); line-height: 1; }
}