:root{--ink:#111110;--charcoal:#191918;--paper:#f2f0e9;--muted:#a5a197;--gold:#a68b58;--line:rgba(166,139,88,.35);--serif:"Cormorant Garamond","Times New Roman",serif;--jp:"Noto Serif JP",serif}*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;overflow-x:hidden;background:var(--ink);color:var(--paper);font-family:var(--jp);font-weight:300;letter-spacing:.06em}a{color:inherit;text-decoration:none}.skip-link{position:fixed;top:-4rem;left:1rem;z-index:100;background:var(--paper);color:var(--ink);padding:.8rem}.skip-link:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.site-header{position:fixed;z-index:20;top:0;left:0;width:100%;height:96px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent;transition:.4s}.site-header.scrolled{height:72px;background:rgba(17,17,16,.94);border-color:rgba(255,255,255,.1);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:15px}.brand>span{font:500 1.5rem var(--serif);letter-spacing:.04em;border:1px solid var(--gold);width:48px;height:48px;display:grid;place-items:center}.brand small{font:500 .67rem var(--serif);letter-spacing:.21em;line-height:1.5;max-width:115px}.navigation{display:flex;gap:2.2rem;font:500 .72rem var(--serif);letter-spacing:.16em;text-transform:uppercase}.navigation a{position:relative}.navigation a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;border-bottom:1px solid var(--gold);transition:.3s}.navigation a:hover:after,.navigation a:focus-visible:after{width:100%}.menu-button{display:none;background:none;border:0;color:white}.hero{height:100svh;min-height:680px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 68% 48%,#382922 0,transparent 23%),linear-gradient(120deg,#0d0d0c 15%,#191817 58%,#0d0d0c)}.hero:before{content:"";position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(118deg,transparent 0 80px,rgba(255,255,255,.03) 81px 82px)}.hero-glow{position:absolute;width:28vw;height:70vh;right:14%;top:16%;border-radius:50%;background:radial-gradient(ellipse,rgba(144,45,32,.38),rgba(10,10,9,0) 67%);filter:blur(15px);transform:rotate(-18deg)}.hero-inner{text-align:center;z-index:1}.eyebrow{font:500 .7rem var(--serif);letter-spacing:.32em;color:var(--gold);text-transform:uppercase}.hero h1{margin:2.5rem 0 2rem;font:400 clamp(4.2rem,10.5vw,10.5rem)/.72 var(--serif);letter-spacing:.02em}.hero h1 span{display:block}.hero h1 span:last-child{font-size:.62em;letter-spacing:.14em;margin-top:.6em}.hero-copy{font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:2.15;letter-spacing:.17em}.scroll-cue{position:absolute;bottom:0;left:5vw;display:flex;flex-direction:column;align-items:center;gap:12px;font:500 .58rem var(--serif);letter-spacing:.25em}.scroll-cue i{height:65px;border-left:1px solid var(--gold)}.section{padding:10rem 6vw;display:grid;grid-template-columns:10% 1fr 36%;gap:7vw}.section-label{color:var(--gold);font:500 .65rem var(--serif);letter-spacing:.26em}.section-label span{display:block;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}.section-label p{writing-mode:vertical-rl;margin:1.5rem auto}.about{background:var(--paper);color:var(--ink);align-items:center}.about h2,.services h2{font-size:clamp(2.2rem,4vw,4rem);font-weight:400;line-height:1.65;margin:1rem 0 3rem}.about h2 span,.services h2 span{display:block;white-space:nowrap}.about-copy{max-width:550px;font-size:.94rem;line-height:2.4;color:#4f4c46}.portrait{height:620px;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#36332e,#171716);color:var(--paper);overflow:hidden}.portrait:after{content:"";position:absolute;width:180px;height:80%;border-radius:50% 50% 10% 10%;background:linear-gradient(#6c6358,#232220);filter:blur(18px);opacity:.55}.monogram{font:400 9rem var(--serif);opacity:.08}.placeholder>p{position:absolute;z-index:2;bottom:25px;left:30px;font:500 .62rem var(--serif);letter-spacing:.2em}.placeholder>p span{color:var(--muted);line-height:2}.project{min-height:760px;display:grid;grid-template-columns:1.08fr .92fr}.project-light{background:var(--paper);color:var(--ink)}.project-dark{background:#181817}.project-visual{min-height:620px;position:relative;background:linear-gradient(130deg,rgba(255,255,255,.025),transparent 40%),radial-gradient(circle at 28% 35%,rgba(117,67,45,.22),transparent 36%),linear-gradient(145deg,#302b27,#121211 72%);overflow:hidden}.project-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45)),repeating-linear-gradient(115deg,transparent 0 110px,rgba(255,255,255,.018) 111px 112px)}.project-visual>span{position:absolute;z-index:1;bottom:3rem;left:3rem;color:#ddd;font:500 .61rem var(--serif);letter-spacing:.25em}.project-light .project-visual{order:2;background:linear-gradient(145deg,rgba(255,255,255,.05),transparent 42%),radial-gradient(circle at 70% 32%,rgba(135,80,58,.2),transparent 35%),linear-gradient(140deg,#4b4540,#191817 70%)}.project-content{padding:9vw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.project-content h2{font:400 clamp(4rem,7vw,7rem)/1 var(--serif);margin:1.5rem 0}.project-content>p:not(.eyebrow,.ja-title,.formula){max-width:480px;color:var(--muted);line-height:2.3;font-size:.9rem}.project-light .project-content>p{color:#55514c}.ja-title{font-size:1.1rem;margin:0 0 2rem}.formula{font:400 clamp(1.15rem,2vw,1.6rem) var(--serif);letter-spacing:.05em}.formula i{color:var(--gold);padding:0 .35em}.text-link{font:500 .7rem var(--serif);letter-spacing:.2em;border-bottom:1px solid var(--gold);padding:1rem 0;margin-top:2rem;transition:color .25s,padding .25s}.text-link span{margin-left:2rem;color:var(--gold)}.text-link:hover,.text-link:focus-visible{color:var(--gold);padding-right:.5rem}.services{grid-template-columns:10% 1fr 48%;background:#141413}.service-list{list-style:none;padding:0;margin:0}.service-list li{border-top:1px solid rgba(255,255,255,.13)}.service-list li:last-child{border-bottom:1px solid rgba(255,255,255,.13)}.service-list a{display:grid;grid-template-columns:3rem minmax(0,1fr) auto 1rem;align-items:center;gap:1rem;padding:1.5rem 0;transition:padding .25s,background .25s}.service-list a:hover,.service-list a:focus-visible{padding-right:.5rem;padding-left:.5rem;background:rgba(255,255,255,.025)}.service-list span{font:500 .65rem var(--serif);color:var(--gold)}.service-list h3{font-size:.95rem;font-weight:400;margin:0;word-break:keep-all;overflow-wrap:normal}.service-list p{font:400 .72rem var(--serif);color:#77746d;margin:0}.service-list i{color:var(--gold);font-style:normal}.philosophy{background:#292824;text-align:center;padding:11rem 5vw;position:relative;overflow:hidden}.philosophy-mark{position:absolute;left:50%;top:2rem;transform:translateX(-50%);font:400 26rem var(--serif);color:rgba(255,255,255,.025)}.philosophy h2{font-size:clamp(2.5rem,5vw,5.2rem);font-weight:300;line-height:1.55;letter-spacing:.12em;margin:2rem}.philosophy>p:not(.eyebrow){color:#aaa69c;line-height:2.4;font-size:.9rem}.philosophy-words{max-width:900px;margin:6rem auto 0;display:flex;align-items:center;justify-content:space-between;font:500 .65rem var(--serif);letter-spacing:.2em}.philosophy-words i{width:40px;border-top:1px solid var(--gold)}.contact{background:var(--paper);color:var(--ink);text-align:center;padding:10rem 5vw}.contact h2{font-size:clamp(2.4rem,4.4vw,4.7rem);font-weight:300;line-height:1.55;margin:2rem}.contact>p:not(.eyebrow,.contact-note){color:#68645e;line-height:2.2;font-size:.9rem}.contact-button{width:min(480px,100%);min-height:110px;margin:4rem auto 1.5rem;border:1px solid var(--gold);background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;text-align:left;padding:1.7rem 2.2rem;box-shadow:0 14px 35px rgba(17,17,16,.12);transition:transform .3s,background .3s,box-shadow .3s}.contact-button:hover,.contact-button:focus-visible{background:#292824;transform:translateY(-3px);box-shadow:0 20px 45px rgba(17,17,16,.2)}.contact-button span{font-size:1rem}.contact-button small{font:500 .6rem var(--serif);letter-spacing:.23em;color:var(--gold)}.contact-button i{grid-row:1/3;grid-column:2;align-self:center;color:var(--gold);font-style:normal}.contact-note{font-size:.65rem;color:#99958e}footer{padding:5rem 5vw 2.5rem;background:#0c0c0b;display:grid;grid-template-columns:1fr 1fr;gap:5rem}footer>div{display:flex;justify-content:flex-end;gap:2rem;font:500 .65rem var(--serif);letter-spacing:.16em}footer>p{grid-column:1/3;border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;color:#706e68;font:500 .58rem var(--serif);letter-spacing:.15em}.reveal{animation:appear 1.2s both}.hero h1{animation-delay:.15s}.hero-copy{animation-delay:.3s}@keyframes appear{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@media(max-width:850px){.site-header{height:76px;padding:0 22px}.brand>span{width:40px;height:40px}.navigation{position:fixed;inset:0;background:#10100f;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;font-size:1rem;visibility:hidden;opacity:0;transition:.3s}.navigation.open{visibility:visible;opacity:1}.menu-button{display:block;position:relative;z-index:2;width:38px;height:38px}.menu-button span:not(.sr-only){display:block;border-top:1px solid currentColor;margin:7px}.hero h1{font-size:clamp(3.2rem,16vw,6rem)}.hero-glow{width:80vw;right:-5%}.section{padding:7rem 24px;display:block}.section-label{display:none}.about h2,.services h2{font-size:2.2rem}.portrait{height:480px;margin-top:4rem}.project{display:flex;flex-direction:column;min-height:0}.project-light .project-visual{order:0}.project-visual{min-height:430px}.project-content{padding:6rem 24px}.project-content h2{font-size:4rem}.services-head{margin-bottom:4rem}.service-list li{grid-template-columns:2rem 1fr}.service-list li p{grid-column:2}.philosophy{padding:7rem 22px}.philosophy h2{font-size:2.2rem;margin:2rem 0}.philosophy>p:not(.eyebrow){text-align:left}.philosophy-words{flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:4rem}.philosophy-words i{width:12px}.contact{padding:7rem 22px}.contact h2{font-size:2.1rem;margin:2rem 0}.contact br{display:none}footer{display:block;padding:4rem 24px 2rem}footer>div{justify-content:flex-start;flex-wrap:wrap;margin:3rem 0}footer>p{margin-top:2rem}.footer-brand small{display:block}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Editorial photography */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.78) contrast(1.06);
  transform: scale(1.01);
}

.hero::before {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(7, 7, 6, .73) 0%, rgba(8, 8, 7, .35) 44%, rgba(7, 7, 6, .52) 100%),
    linear-gradient(180deg, rgba(7, 7, 6, .54) 0%, transparent 34%, rgba(7, 7, 6, .68) 100%);
}

.hero-glow { z-index: 1; opacity: .45; }
.hero-inner { position: relative; z-index: 2; text-shadow: 0 2px 32px rgba(0, 0, 0, .75); }
.scroll-cue { z-index: 2; }

.portrait {
  margin: 0;
  display: block;
  box-shadow: 0 25px 65px rgba(38, 32, 22, .22);
}

.portrait::after {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 7, .76) 100%);
  filter: none;
  opacity: 1;
}

.portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 58% 48%;
  filter: saturate(.82) contrast(1.03);
}

.portrait figcaption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 26px;
  left: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  font: 500 .75rem var(--serif);
  letter-spacing: .2em;
}

.portrait figcaption small { color: #c8c3b8; font-size: .55rem; }

/* Profile details */
.profile-name { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; color: var(--ink); }
.profile-name strong { font-size: 1.15rem; font-weight: 500; letter-spacing: .12em; }
.profile-name span { font: 500 .72rem var(--serif); color: var(--gold); letter-spacing: .16em; }
.profile-statement { margin: 2rem 0; padding: 1.5rem 0 1.5rem 1.5rem; border-left: 1px solid var(--gold); color: var(--ink); font-size: 1rem; line-height: 2.1; }
.career { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(17,17,16,.14); font-size: .78rem; line-height: 2; color: #625e57; }
.career-title { margin: 0 0 1rem; font: 500 .62rem var(--serif); letter-spacing: .25em; color: var(--gold); }
.career > p { margin: .75rem 0; }
.career ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .7rem 0 1.25rem; padding: 0; list-style: none; font: 500 .72rem var(--serif); letter-spacing: .08em; color: var(--ink); }
.career li:not(:last-child)::after { content: "·"; margin-left: 1.25rem; color: var(--gold); }

/* Contact routes */
.inquiry-list { width: min(920px, 100%); margin: 3.5rem auto 0; padding: 1.5rem 0; border-top: 1px solid rgba(17,17,16,.15); border-bottom: 1px solid rgba(17,17,16,.15); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.5rem; list-style: none; color: #5d5952; font-size: .72rem; line-height: 1.7; }
.inquiry-list li::before { content: "—"; margin-right: .6em; color: var(--gold); }
.contact-actions { width: min(920px, 100%); margin: 3.5rem auto 1.5rem; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1rem; }
.contact-actions .contact-button { width: 100%; min-height: 120px; margin: 0; }
.contact-button-secondary { background: transparent; color: var(--ink); box-shadow: none; }
.contact-button-secondary:hover,.contact-button-secondary:focus-visible { color: var(--paper); }

/* Inquiry form */
.inquiry-panel { scroll-margin-top: 90px; width: min(1040px, 100%); margin: 7rem auto 0; padding: clamp(4rem, 7vw, 6.5rem) clamp(2rem, 8vw, 8rem); background: #ebe8df; color: var(--ink); text-align: left; border: 1px solid rgba(17,17,16,.12); border-top-color: var(--gold); box-shadow: 0 28px 70px rgba(17,17,16,.11); }
.inquiry-heading { width: min(760px, 100%); margin: 0 auto clamp(3.5rem, 6vw, 5rem); padding-bottom: 2.75rem; border-bottom: 1px solid rgba(17,17,16,.16); }
.inquiry-heading h3 { margin: 1.25rem 0 1.5rem; font-size: clamp(2rem, 3.2vw, 3.3rem); font-weight: 300; line-height: 1.55; letter-spacing: .1em; }
.inquiry-heading > p:last-child { margin-bottom: 0; color: #625e57; font-size: .78rem; line-height: 2.2; }
.inquiry-form { width: min(760px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.form-field { min-width: 0; }
.form-field-full { grid-column: 1; }
.form-field label { display: flex; align-items: baseline; justify-content: flex-start; gap: .8rem; margin-bottom: .9rem; color: #302e2a; font-size: .78rem; letter-spacing: .11em; }
.form-field label span { color: var(--gold); font: 600 .5rem var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.form-field input,.form-field select,.form-field textarea { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; margin: 0; border: 1px solid rgba(17,17,16,.28); border-radius: 0; outline: 0; background: rgba(242,240,233,.45); color: var(--ink); font: 300 16px/1.7 var(--jp); letter-spacing: .05em; box-shadow: none; transition: border-color .25s, background-color .25s, box-shadow .25s; }
.form-field input,.form-field select { min-height: 62px; padding: .9rem 1.1rem; }
.form-field textarea { min-height: 240px; padding: 1rem 1.1rem; resize: vertical; }
.form-field input:hover,.form-field select:hover,.form-field textarea:hover { border-color: rgba(166,139,88,.8); }
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible { border-color: var(--gold); background: var(--paper); box-shadow: 0 0 0 2px rgba(166,139,88,.16); }
.select-wrap { position: relative; width: 100%; }
.select-wrap::after { content: "⌄"; position: absolute; top: 50%; right: 1.15rem; color: var(--gold); pointer-events: none; transform: translateY(-58%); }
.form-field select { padding-right: 3.25rem; cursor: pointer; }
.form-field select:invalid { color: #77736b; }
.form-submit { padding-top: .5rem; }
.form-submit button { -webkit-appearance: none; appearance: none; width: 100%; max-width: 100%; min-height: 94px; margin: 0; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; padding: 1.5rem 1.75rem; text-align: left; font: inherit; box-shadow: none; cursor: pointer; transition: border-color .25s, background-color .25s, color .25s, transform .25s, box-shadow .25s, opacity .25s; }
.form-submit button span { font: 600 .82rem var(--serif); letter-spacing: .22em; }
.form-submit button small { font: 400 .65rem var(--jp); letter-spacing: .12em; color: #c7c2b7; }
.form-submit button i { grid-row: 1 / 3; grid-column: 2; color: var(--gold); font-style: normal; font-size: 1.25rem; transition: transform .25s; }
.form-submit button:hover { border-color: var(--gold); background: #292824; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17,17,16,.14); }
.form-submit button:hover i { transform: translateX(4px); }
.form-submit button:focus-visible { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 4px; }
.form-submit button:disabled { border-color: #77736b; background: #77736b; opacity: .68; cursor: wait; transform: none; box-shadow: none; }
.form-submit button:disabled i { transform: none; }
.form-status { min-height: 1.8em; margin: 1rem 0 0; color: #6d6961; font-size: .75rem; line-height: 1.8; }
.form-status.is-success { color: #59683f; }
.form-status.is-error { color: #994f44; }

@media (max-width: 850px) {
  .hero { min-height: 620px; }
  .hero-image { object-position: 54% center; }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(7, 7, 6, .62), rgba(7, 7, 6, .42)),
      linear-gradient(180deg, rgba(7, 7, 6, .64) 0%, transparent 35%, rgba(7, 7, 6, .75) 100%);
  }
  .hero h1 { line-height: .78; }
  .hero h1 span:last-child { letter-spacing: .09em; }
  .portrait { height: min(128vw, 620px); }
  .portrait img { object-position: 58% center; }
  .portrait figcaption { right: 20px; bottom: 20px; left: 20px; }
  .portrait figcaption small { display: none; }
  .career ul { display: block; }
  .career li::after { display: none; }
  .inquiry-list { grid-template-columns: repeat(2, 1fr); text-align: left; }
  .contact-actions { grid-template-columns: 1fr; }
  .contact-actions .contact-button { min-height: 100px; }
  .inquiry-panel { margin-top: 5rem; padding: 3.75rem clamp(1.25rem, 6vw, 2.5rem); }
  .inquiry-heading { margin-bottom: 3rem; padding-bottom: 2.25rem; }
  .inquiry-form { gap: 2rem; }
  .form-field input,.form-field select,.form-field textarea,.form-submit button { width: 100%; max-width: 100%; }
  .form-field textarea { min-height: 220px; }
}

/* Responsive typography and touch-target refinements */
@media (max-width: 850px) {
  .about h2,
  .services h2 { font-size: clamp(1.45rem, 7vw, 2.2rem); letter-spacing: .025em; }
  .project-visual { min-height: clamp(300px, 92vw, 430px); }
  .project-visual > span { bottom: 1.75rem; left: 1.5rem; }
  .service-list a { grid-template-columns: 2rem minmax(0, 1fr) 1rem; min-height: 86px; }
  .service-list a p { grid-column: 2; }
  .service-list a i { grid-column: 3; grid-row: 1 / 3; }
  .service-list h3 { font-size: .9rem; }
  .contact-button { margin-top: 3rem; padding: 1.5rem; }
}

@media (max-width: 380px) {
  .site-header { padding-right: 16px; padding-left: 16px; }
  .brand { gap: 10px; }
  .brand small { max-width: 100px; font-size: .58rem; }
  .section, .project-content, .philosophy, .contact { padding-right: 18px; padding-left: 18px; }
  .hero h1 { font-size: 3rem; }
  footer { padding-right: 18px; padding-left: 18px; }
}

/* Sho Yamazaki personal brand */
.site-header .brand { flex-direction: column; align-items: flex-start; gap: 3px; }
.site-header .brand strong { font: 400 1.08rem var(--jp); letter-spacing: .18em; white-space: nowrap; }
.site-header .brand small { max-width: none; font-size: .58rem; letter-spacing: .22em; line-height: 1.2; white-space: nowrap; }

.hero-inner { width: min(980px, calc(100% - 48px)); }
.hero .eyebrow { margin: 0 0 clamp(1.35rem, 3vh, 2.3rem); }
.hero h1.hero-brand { margin: 0; font: inherit; line-height: 1; letter-spacing: normal; }
.hero-logo-frame { display: block; width: min(100%, 900px); aspect-ratio: 3.55 / 1; margin: 0 auto; overflow: hidden; }
.hero h1 .hero-logo-frame img { display: block; width: 100%; height: auto; transform: translateY(-8.5%); clip-path: polygon(0 0,100% 0,100% 71%,80% 71%,80% 63%,0 63%); filter: drop-shadow(0 4px 18px rgba(0,0,0,.35)); }
.hero h1 .hero-name { display: block; margin-top: clamp(1rem, 2vh, 1.45rem); color: var(--paper); font: 500 clamp(.82rem, 1.25vw, 1.05rem)/1.2 var(--serif); letter-spacing: .38em; }
.hero-divider { display: block; width: 42px; margin: clamp(.9rem, 1.8vh, 1.3rem) auto 0; border-top: 1px solid var(--gold); }
.hero-role { margin: clamp(.9rem, 1.8vh, 1.3rem) 0 0; font-size: clamp(.82rem, 1.1vw, 1rem); font-weight: 300; letter-spacing: .18em; }
.hero-fields { margin: clamp(.7rem, 1.4vh, 1rem) 0 0; color: var(--gold); font: 500 clamp(.55rem, .75vw, .68rem)/1.4 var(--serif); letter-spacing: .28em; }
.hero-copy { margin: clamp(2.6rem, 5.5vh, 4rem) 0 0; }
.hero-role { animation-delay: .25s; }
.hero-fields { animation-delay: .32s; }
.hero-copy { animation-delay: .42s; }

@media (max-width: 850px) {
  .site-header .brand { gap: 2px; }
  .site-header .brand strong { font-size: .92rem; letter-spacing: .14em; }
  .site-header .brand small { font-size: .5rem; letter-spacing: .18em; }
  .hero { min-height: 680px; }
  .hero-inner { width: calc(100% - 40px); padding-top: 3rem; }
  .hero-logo-frame { width: min(100%, 620px); }
  .hero h1 .hero-name { margin-top: 1rem; font-size: .78rem; letter-spacing: .3em; }
  .hero-divider { width: 36px; margin-top: 1rem; }
  .hero-role { margin-top: 1rem; font-size: .78rem; letter-spacing: .12em; }
  .hero-fields { max-width: 100%; margin-top: .75rem; font-size: .52rem; letter-spacing: .15em; white-space: nowrap; }
  .hero-copy { margin-top: 2.75rem; font-size: clamp(.98rem, 4.4vw, 1.15rem); line-height: 2; letter-spacing: .12em; }
}

@media (max-width: 380px) {
  .site-header .brand small { max-width: none; font-size: .48rem; }
  .hero-inner { width: calc(100% - 32px); }
  .hero h1.hero-brand { font-size: inherit; }
  .hero h1 .hero-name { letter-spacing: .25em; }
  .hero-role { font-size: .73rem; letter-spacing: .08em; }
  .hero-fields { font-size: .48rem; letter-spacing: .09em; }
}