:root{
  --paper:#f3eee6;
  --paper-elevated:#f8f3ec;
  --ink:#28211e;
  --red:#8b1315;
  --red-line:#b77876;
  --taupe:#bba994;
  --dim:#705447;
  --serif:'GFS Didot','Bodoni MT',Didot,'Times New Roman',serif;
  --sans:'DM Sans','Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-synthesis:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:5px}
::selection{background:var(--red);color:#fff}
.site-shell{width:100%;min-height:max(760px,100svh);position:relative;isolation:isolate;overflow:hidden;background:var(--paper)}
.masthead{position:absolute;z-index:20;top:clamp(25px,4.4vh,47px);left:4.05%;right:4.05%;display:flex;justify-content:space-between;align-items:center;gap:32px;animation:fadeIn .85s both}
.wordmark{font:400 clamp(32px,2.85vw,47px)/1 var(--serif);letter-spacing:-.058em;text-decoration:none;color:var(--ink);white-space:nowrap}
.practice{margin:0 0 1px;font:500 10px/1.5 var(--sans);letter-spacing:.32em;text-transform:uppercase;text-align:right;white-space:nowrap}
.artwork{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.artwork-letter{position:absolute;left:-10%;top:5.6%;color:var(--red);font:400 clamp(770px,69vw,1200px)/.88 var(--serif);letter-spacing:-.056em;white-space:nowrap;user-select:none;transform-origin:48% 48%;transform:rotate(-8deg) translate3d(var(--move-x,0px),var(--move-y,0px),0);animation:revealLetter 1.3s cubic-bezier(.16,1,.3,1) .07s both,letterFloat 16s ease-in-out 1.35s infinite alternate;will-change:transform,clip-path}
.artwork-line{position:absolute;left:3.1%;top:73.9%;height:1.4px;width:45%;background:var(--red);transform-origin:left center;transform:rotate(-12deg);opacity:.95}
.artwork-line::after{content:"";position:absolute;inset:0;background:var(--red-line);transform:scaleX(0);transform-origin:left;animation:drawLine 1.2s cubic-bezier(.22,1,.36,1) .7s forwards}
/* The underlying rule remains invisible until its animated ink appears. */
.artwork-line{background:transparent}
.hero{position:absolute;left:50.5%;top:23.7%;z-index:10;width:47.3%;max-width:770px}
.eyebrow{display:flex;align-items:center;gap:25px;margin:0 0 clamp(35px,4.9vh,54px);font-size:10px;font-weight:600;letter-spacing:.38em;text-transform:uppercase;line-height:1.5;animation:riseIn .9s cubic-bezier(.16,1,.3,1) .45s both}
.eyebrow-line{width:58px;height:1px;background:var(--taupe);opacity:.9}
h1{font:400 clamp(61px,6.15vw,104px)/.995 var(--serif);letter-spacing:-.032em;margin:0;white-space:nowrap;font-feature-settings:'kern' 1}
h1 em{font-family:'Bodoni Moda',var(--serif);font-weight:400;font-style:italic;font-synthesis:style}
.headline-accent{color:var(--ink)}
.headline-line{display:block;animation:riseIn 1s cubic-bezier(.16,1,.3,1) both}
.headline-line:nth-child(1){animation-delay:.56s}
.headline-line:nth-child(2){animation-delay:.70s}
.headline-line:nth-child(3){animation-delay:.84s}
.disciplines{margin:clamp(34px,4.4vh,45px) 0 29px;font:500 10px/1.5 var(--sans);letter-spacing:.40em;text-transform:uppercase;animation:riseIn .9s cubic-bezier(.16,1,.3,1) 1.02s both}
.contact-cta{appearance:none;min-width:192px;height:56px;padding:0 23px;display:inline-flex;justify-content:space-between;align-items:center;gap:39px;background:transparent;color:var(--ink);border:1px solid var(--taupe);font:600 10px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);animation:riseIn .95s cubic-bezier(.16,1,.3,1) 1.14s both}
.contact-cta:hover{background:var(--red);color:#fff;transform:translateY(-3px)}
.contact-arrow{display:inline-block;font-size:21px;font-weight:400;line-height:1;letter-spacing:0;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.contact-cta:hover .contact-arrow{transform:translateX(5px)}
.footer{position:absolute;z-index:20;left:4.05%;right:4.05%;bottom:3.8%;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;animation:fadeIn 1s ease 1.1s both}
.footer p{margin:0;font-size:9px;font-weight:500;line-height:1.7;letter-spacing:.31em;text-transform:uppercase}
.footer .issue{text-align:right}
/* Dialog is a native, keyboard-accessible contact window rather than a dead CTA. */
.contact-dialog{border:0;padding:0;width:min(620px,calc(100vw - 34px));max-height:min(740px,calc(100svh - 34px));overflow:auto;background:var(--paper-elevated);color:var(--ink);box-shadow:0 20px 100px rgba(24,19,17,.25)}
.contact-dialog::backdrop{background:rgba(21,17,15,.56);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.contact-dialog[open]{animation:dialogEnter .5s cubic-bezier(.16,1,.3,1) both}
.contact-panel{padding:clamp(27px,5vw,55px)}
.panel-top,.panel-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}
.panel-overline,.panel-bottom{font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:500}
.close-cta{border:1px solid rgba(39,34,30,.38);background:none;width:39px;height:39px;display:grid;place-items:center;color:var(--ink);cursor:pointer;transition:background .22s,color .22s,border .22s}
.close-cta span{font:300 28px/1 Arial,sans-serif;transform:translateY(-1px)}
.close-cta:hover{background:var(--red);color:white;border-color:var(--red)}
.panel-eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;margin:75px 0 28px}
.contact-panel h2{font:400 clamp(48px,5vw,74px)/.97 var(--serif);letter-spacing:-.038em;margin:0 0 32px}
.contact-panel h2 em{font-style:italic;font-weight:400}
.panel-description{font:400 14px/1.8 var(--sans);max-width:420px;color:var(--dim);margin:0 0 39px}
.email-link{display:flex;justify-content:space-between;align-items:center;gap:20px;font:400 clamp(25px,3vw,43px)/1.2 var(--serif);letter-spacing:-.026em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:13px;transition:color .2s}
.email-link:hover{color:var(--red)}
.email-link span:last-child{font-size:26px}
.panel-bottom{padding-top:55px;color:var(--dim)}
.copy-email{background:none;border:0;padding:8px 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(39,34,30,.3);text-underline-offset:4px}
.copy-email:hover{color:var(--red)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes drawLine{to{transform:scaleX(1)}}
@keyframes revealLetter{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes letterFloat{from{transform:rotate(-8deg) translate3d(-2px,-1px,0)}to{transform:rotate(-8deg) translate3d(5px,4px,0)}}
@keyframes dialogEnter{from{opacity:0;transform:translateY(24px) scale(.984)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Compact laptops: retain the original composition while protecting the footer. */
@media (min-width:821px) and (max-height:820px){
  .hero{top:19%}
  .eyebrow{margin-bottom:25px}
  h1{font-size:clamp(59px,5.75vw,92px)}
  .disciplines{margin:27px 0 22px}
  .artwork-line{top:77%}
}
@media (min-width:821px) and (max-width:1100px){
  .hero{left:48%;width:49%}
  .artwork-letter{font-size:90vw;left:-16%}
  .practice{font-size:8px}
  h1{font-size:clamp(55px,5.8vw,77px)}
}
/* Tablet and phone: the Z becomes its own opening graphic, not a miniature desktop hero. */
@media (max-width:820px){
  .site-shell{min-height:max(760px,100svh);display:flex;flex-direction:column;padding:24px 25px 24px;overflow:hidden}
  .masthead{position:relative;top:auto;left:auto;right:auto;width:100%;align-items:flex-start;flex-shrink:0}
  .wordmark{font-size:32px;letter-spacing:-.065em}
  .practice{max-width:125px;font-size:7px;line-height:1.6;letter-spacing:.18em;white-space:normal;text-align:right;margin-top:2px}
  .artwork{position:relative;margin:0 -25px;inset:auto;height:clamp(194px,27svh,275px);flex:0 0 auto;overflow:hidden}
  .artwork-letter{font-size:clamp(420px,119vw,640px);top:-13px;left:-35%;letter-spacing:-.07em;transform:rotate(-8deg)}
  .artwork-line{top:73%;left:-10%;width:112%;transform:rotate(-11deg);height:1.3px}
  .hero{position:relative;top:auto;left:auto;right:auto;width:100%;max-width:none;margin-top:7px}
  .eyebrow{font-size:9px;letter-spacing:.34em;gap:12px;margin:0 0 30px}
  .eyebrow-line{width:32px}
  h1{font-size:clamp(48px,11.95vw,78px);letter-spacing:-.04em;line-height:1.025}
  .disciplines{font-size:8.5px;letter-spacing:.27em;line-height:1.6;margin:31px 0 23px}
  .contact-cta{min-width:170px;height:50px;padding:0 18px;gap:36px;font-size:10px}
  .footer{position:relative;left:auto;right:auto;bottom:auto;width:100%;padding-top:95px;margin-top:auto;align-items:flex-end}
  .footer p{font-size:7px;line-height:1.8;letter-spacing:.19em}
  .contact-dialog{width:calc(100vw - 26px)}
  .panel-bottom{flex-wrap:wrap;row-gap:10px}
  .panel-eyebrow{margin-top:52px}
}
@media (max-width:370px){
  .site-shell{padding-left:20px;padding-right:20px}
  .artwork{margin-left:-20px;margin-right:-20px;height:190px}
  .hero h1{font-size:clamp(42px,11.4vw,50px)}
  .eyebrow{margin-bottom:22px}
  .disciplines{margin:23px 0 18px}
  .footer{padding-top:75px}
}
@media (max-width:820px) and (orientation:landscape){
  .site-shell{min-height:700px}
  .artwork{height:170px}
  .artwork-letter{font-size:500px;top:-40px;left:-15%}
  .artwork-line{top:70%}
  .hero{max-width:560px}
  h1{font-size:65px}
  .footer{padding-top:60px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .artwork-letter{will-change:auto}
}