/* THE STUDIO VELVET: shared base (tokens, type, buttons, curtain, header).
   Taken from the approved design (source/the-studio-velvet-2026-10-04.html); change it there first. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-vf.woff2) format("woff2")}

:root{
  --white:#FFFFFF;--bg:#FFFFFF;
  --panel:#ECEAE7;--panel-2:#E2DFDB;
  --text:#1A1918;--muted:#625D58;
  --line:rgba(26,25,24,.16);--line-strong:rgba(26,25,24,.85);
  --header-bg:rgba(255,255,255,.86);
  --velvet:#4A1A22;--velvet-hi:#6A2A37;--velvet-lo:#3A131A;
  --accent-text:#5A1F2A;--on-velvet:#F4EFED;--on-velvet-muted:rgba(244,239,237,.7);
  --serif:"Instrument Serif","Bodoni 72","Didot","Times New Roman",Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
  --m:clamp(16px,2.5vw,40px);--g:clamp(12px,1.6vw,24px);--pg:clamp(8px,1vw,14px);
  --r:clamp(14px,1.4vw,22px);--hh:72px;
  --ease:cubic-bezier(.7,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,figure{margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--velvet);outline-offset:3px}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--text);color:var(--bg);padding:12px 18px;border-radius:999px;text-decoration:none;font-size:14px;transition:top .3s}
.skip:focus{top:12px}

.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--m)}
.panel{border-radius:var(--r);overflow:hidden;position:relative;isolation:isolate}
.panel-stone{background:var(--panel)}
.label{font-size:12px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.display{font-family:var(--serif);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;text-wrap:balance}
.muted{color:var(--muted)}

/* Buttons */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--h);padding:0 8px 0 26px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer;position:relative;white-space:nowrap;transition:box-shadow .5s var(--ease-out),background-color .3s,color .3s;-webkit-tap-highlight-color:transparent}
.btn-primary{color:#fff;background-color:var(--velvet);background-image:linear-gradient(180deg,var(--velvet-hi) 0%,var(--velvet) 55%,var(--velvet-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 1px rgba(58,19,26,.3),0 10px 24px -10px rgba(74,26,34,.7)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.2),0 2px 2px rgba(58,19,26,.25),0 20px 36px -14px rgba(74,26,34,.75)}
.btn-primary:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 1px 1px rgba(58,19,26,.2)}
.btn-sm{--h:42px;font-size:13px;padding:0 20px}
.roll{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3}
.roll>span{display:block;transition:transform .6s var(--ease)}
.roll>span::after{content:attr(data-text);display:block}
.btn:hover .roll>span,.btn:focus-visible .roll>span{transform:translateY(-50%)}
.btn-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:transform .6s var(--ease)}
.btn:hover .btn-ic{transform:rotate(45deg)}
.btn svg{width:16px;height:16px}

.link-line{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;text-decoration:none;padding:6px 0}
.link-line::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform-origin:left;transition:transform .6s var(--ease)}
.link-line:hover::after{transform:scaleX(0);transform-origin:right}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .4s,box-shadow .4s}
.site-header.is-scrolled{background:var(--header-bg);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);box-shadow:0 1px 0 var(--line)}
.header-inner{display:grid;grid-template-columns:1fr auto;align-items:center;height:var(--hh)}
.brand{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;justify-self:start;padding:8px 0}
@media (max-width:560px){.header-inner .btn{display:none}}

/* The velvet curtain: pure CSS. It lifts by itself and then removes itself, so a failed script can never leave the page covered. */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;text-align:center;pointer-events:none;animation:loader-gone 0s linear 3.45s forwards}
.pleats{position:absolute;inset:0;display:flex}
.pleats span{flex:1;background:var(--velvet);margin-right:-1px;animation:curtain-lift 1.25s var(--ease) calc(1.95s + var(--d,0s)) forwards}
.pleats span:nth-child(even){background:#4F1C25}
.pleats span:nth-child(4),.pleats span:nth-child(5){--d:0s}
.pleats span:nth-child(3),.pleats span:nth-child(6){--d:.05s}
.pleats span:nth-child(2),.pleats span:nth-child(7){--d:.1s}
.pleats span:nth-child(1),.pleats span:nth-child(8){--d:.15s}
.loader-inner{position:relative;color:var(--on-velvet)}
.loader-mark{font-family:var(--serif);text-transform:uppercase;font-size:clamp(40px,8vw,132px);line-height:.92;white-space:nowrap;letter-spacing:-.005em;display:flex;justify-content:center;gap:.26em}
.loader-mark .lw{display:block;overflow:hidden;padding-bottom:.06em}
.loader-mark .lw>span{display:block;animation:lm-in 1.1s var(--ease-out) calc(.15s + var(--i,0)*.07s) backwards,lm-out .7s cubic-bezier(.7,0,.84,0) calc(1.5s + var(--i,0)*.04s) forwards}
.loader-sub{margin-top:18px;color:var(--on-velvet-muted);animation:fade-in .8s var(--ease-out) .55s backwards,fade-out .4s linear 1.5s forwards}
html.no-loader .loader{display:none}
@keyframes lm-in{from{transform:translateY(115%)}}
@keyframes lm-out{to{transform:translateY(-115%)}}
@keyframes fade-in{from{opacity:0;transform:translateY(10px)}}
@keyframes fade-out{to{opacity:0}}
@keyframes curtain-lift{to{transform:translateY(-100%)}}
@keyframes loader-gone{to{visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  .loader{display:none!important}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}