:root{
  --ink:#090806;
  --paper:#eee5d5;
  --muted:#a79d8e;
  --wine:#4e152f;
  --plum:#2c1532;
  --line:rgba(238,229,213,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 84% 19%, rgba(77,19,48,.15), transparent 24%),
    radial-gradient(circle at 12% 78%, rgba(83,45,27,.10), transparent 28%),
    var(--ink);
  color:var(--paper);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  overflow-x:hidden;
}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.nav{
  position:absolute;z-index:20;top:0;left:0;right:0;
  padding:24px 3vw;display:flex;justify-content:space-between;align-items:center;
  text-transform:uppercase;letter-spacing:.19em;font-size:.68rem;font-weight:500;
}
.nav-name{font-weight:700;color:#fff3e3;text-shadow:0 2px 18px rgba(0,0,0,.72)}
.nav nav{display:flex;gap:28px}
.nav a{opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.55)}.nav a:hover{opacity:1}
.hero{
  min-height:100vh;position:relative;display:grid;grid-template-columns:34% 66%;
  align-items:stretch;background:#060504;
}
.hero-art{grid-column:2;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:contain;object-position:center;background:#060504}
.hero-type{
  position:absolute;z-index:4;left:5vw;top:50%;transform:translateY(-42%);
}
.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.92rem;font-weight:600;color:#fff6e9;margin:0 0 20px;text-shadow:0 2px 18px rgba(0,0,0,.78)}
.hero-type h1{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(3.8rem,7.6vw,8.4rem);line-height:.73;letter-spacing:-.055em;
  margin:0;
}
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.orb-one{width:36vw;height:22vw;background:rgba(89,23,58,.22);right:-12vw;bottom:-4vw}
.projects{position:relative;padding:10vw 3vw 7vw;overflow:hidden}
.projects-title{
  min-height:35vw;display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;
}
.projects-title span{
  font-family:"Cormorant Garamond",serif;font-size:clamp(4rem,10vw,11rem);
  line-height:.65;letter-spacing:-.06em;text-transform:uppercase;
}
.projects-title i{
  font-family:Georgia,"Times New Roman",Times,serif;color:#65405a;font-size:2rem;
  margin:1.2rem 0 0 43%;transform:rotate(-7deg);
}
.project{
  display:grid;grid-template-columns:6% 45% 49%;min-height:70vh;
  border-top:1px solid var(--line);align-items:stretch;position:relative;z-index:2;
}
.project-footy{grid-template-columns:6% 60% 34%}
.project-number{padding:28px 0;font-size:.66rem;font-weight:400;color:#8d8478}
.project-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:0 4vw 4vw 0}
.project-copy h2{
  font-family:"Cormorant Garamond",serif;font-size:clamp(2.8rem,5vw,6rem);
  font-weight:400;margin:0 0 .5rem;line-height:.85;
}
.project-copy p{text-transform:uppercase;letter-spacing:.11em;font-size:.96rem;font-weight:600;line-height:1.6;color:#fff3e3;text-shadow:0 2px 16px rgba(0,0,0,.72)}
.project-image{overflow:hidden;background:#080706;min-height:70vh}
.project-image img{height:100%;object-fit:cover}
.project-image.contain{display:flex;align-items:center;justify-content:center}
.project-image.contain img{object-fit:contain;padding:4vw}
.footy-bg{background:linear-gradient(145deg,#17110c,#090806)}
.orb-two{width:46vw;height:28vw;background:rgba(73,16,47,.24);right:-14vw;top:8vw}
.about{
  display:grid;grid-template-columns:55% 45%;min-height:72vh;border-top:1px solid var(--line);
}
.about-image{overflow:hidden}
.about-image img{height:100%;object-fit:cover}
.about-text{padding:8vw 8vw 6vw 6vw;display:flex;flex-direction:column;justify-content:center}
.about-text blockquote{
  font-family:Georgia,"Times New Roman",Times,serif;font-size:clamp(2rem,3.5vw,4.1rem);
  line-height:1.05;margin:0;color:#e5dccd;
}
.micro{margin-top:3rem;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:500;line-height:1.8;color:#cfc3b4}
.hayshed{
  display:grid;grid-template-columns:22% 1fr 1fr 1fr 1fr;
  padding:6vw 3vw;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.hayshed-heading{padding-right:2vw}
.hayshed-heading h2,.credits-title h2{
  font-family:"Cormorant Garamond",serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.8rem,4vw,5rem);line-height:.78;margin:0 0 2rem;letter-spacing:-.045em;
}
.hayshed-heading p{
  text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:500;line-height:1.8;color:#d0c5b7;
}
.studio-tile{margin:0;position:relative;min-height:330px;overflow:hidden;background:#080706}
.studio-tile img{height:100%;object-fit:cover;transition:transform .7s ease}
.studio-tile:hover img{transform:scale(1.025)}
.studio-tile figcaption{
  position:absolute;bottom:14px;left:14px;text-transform:uppercase;letter-spacing:.15em;font-size:.67rem;font-weight:500;
  color:#fff2df;text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.credits{
  position:relative;display:grid;grid-template-columns:28% 1fr 1fr 1fr;
  gap:4vw;padding:8vw 3vw 9vw;overflow:hidden;
}
.credits-title{position:relative;z-index:2}
.credits-title i{
  font-family:Georgia,"Times New Roman",Times,serif;color:#65405a;font-size:1.7rem;
}
.credit-column{position:relative;z-index:2;padding-left:2vw;border-left:1px solid var(--line)}
.credit-column h3{text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;font-weight:500;margin:0 0 2rem;color:#ddd2c3}
.credit-column .second-heading{margin-top:3rem}
.credit-column p{font-size:.75rem;line-height:1.72;color:#c8bdae;margin:0 0 1.6rem}
.credit-column strong{color:#e6ddce;font-weight:400}
.orb-three{width:40vw;height:28vw;background:rgba(83,20,52,.22);left:-14vw;top:0}
.contact{
  min-height:35vh;padding:7vw 5vw;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;
  background:linear-gradient(90deg,rgba(65,34,20,.16),transparent 45%);
}
.contact a{
  font-family:Georgia,"Times New Roman",Times,serif;font-size:clamp(2rem,4.5vw,5rem);
  border-bottom:1px solid rgba(238,229,213,.25);
}
footer{
  padding:22px 3vw;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;color:#c8bcae;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
}
@media(max-width:900px){
  .nav nav{gap:12px}.nav nav a:nth-child(3),.nav nav a:nth-child(4){display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:70px}
  .hero-art{grid-column:1;min-height:auto;height:auto}
  .hero-art img{height:auto;object-fit:contain}
  .hero-type{position:relative;left:auto;top:auto;transform:none;padding:8vw 6vw 12vw}
  .hero-type h1{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(3.8rem,7.6vw,8.4rem);line-height:.73;letter-spacing:-.055em;
  margin:0;
}
  .project,.project-footy{grid-template-columns:8% 1fr}
  .project-image{grid-column:1 / -1;min-height:auto;height:auto}
  .project-image img{height:auto;min-height:0}
  .project-copy{padding:3rem 2rem 2rem 0}
  .about{grid-template-columns:1fr}
  .about-image img{height:auto}
  .hayshed{grid-template-columns:1fr 1fr}
  .hayshed-heading{grid-column:1 / -1;margin-bottom:2rem}
  .credits{grid-template-columns:1fr 1fr}
  .credits-title{grid-column:1 / -1}
}
@media(max-width:560px){
  .nav-name{display:none}
  .nav{justify-content:flex-end}
  .projects{padding-top:20vw}
  .projects-title{min-height:65vw}
  .project{display:block}
  .project-number{padding:28px 0 10px}
  .project-copy{padding:1rem 0 2rem}
  .about-text{padding:16vw 7vw}
  .hayshed{grid-template-columns:1fr}
  .studio-tile{min-height:360px}
  .credits{grid-template-columns:1fr}
  .credit-column{padding:2rem 0 0;border-left:none;border-top:1px solid var(--line)}
  .contact{align-items:flex-start;flex-direction:column;justify-content:flex-end;gap:2rem}
  footer{flex-direction:column;gap:8px}
}

.kassandra-portrait{
  min-height:78vh;
  background:radial-gradient(circle at 55% 38%,rgba(70,30,58,.22),transparent 34%),#080706;
}
.kassandra-portrait img{
  width:100%;height:100%;object-fit:contain;object-position:center;padding:1.5vw;
}
.contact{
  min-height:52vh;display:flex;align-items:center;justify-content:center;padding:8vw 5vw;
  background:radial-gradient(circle at 75% 20%,rgba(78,21,47,.18),transparent 34%),
  linear-gradient(90deg,rgba(65,34,20,.10),transparent 45%);
}
.contact-wrap{width:min(760px,100%)}
.contact-form{display:grid;gap:26px;margin-top:34px}
.contact-form label{display:grid;gap:8px}
.contact-form label>span{text-transform:uppercase;letter-spacing:.14em;font-size:.67rem;color:#c7bcae}
.contact-form input,.contact-form textarea{
  width:100%;border:0;border-bottom:1px solid rgba(238,229,213,.25);background:transparent;
  color:var(--paper);font:inherit;font-size:.9rem;padding:10px 0 12px;outline:none;border-radius:0;
}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input:focus,.contact-form textarea:focus{border-bottom-color:rgba(238,229,213,.78)}
.contact-form button{
  justify-self:start;border:1px solid rgba(238,229,213,.28);background:transparent;color:var(--paper);
  padding:11px 22px;font:inherit;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;cursor:pointer;
}
.contact-form button:hover{border-color:rgba(238,229,213,.78)}
.form-status{min-height:1.5em;margin:0;color:#d9cebf;font-size:.76rem}
.hp-field{
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(1px,1px,1px,1px)!important;white-space:nowrap!important;
}

.contact-form button:disabled{
  opacity:.48;
  cursor:wait;
}