/* TYRA STUDIO — Unified Design System 2026.09.04
   Shared visual language for home, studio, artists, portfolio, services and legal pages. */
:root{
  --bg:#050506;
  --bg-deep:#020203;
  --surface:#0b0b0f;
  --surface-2:#111116;
  --surface-3:#16161c;
  --text:#f4f1ea;
  --text-soft:rgba(244,241,234,.78);
  --muted:rgba(244,241,234,.56);
  --muted-2:rgba(244,241,234,.38);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.28);
  --accent:#f4f1ea;
  --accent-ink:#050506;
  --glow:rgba(177,188,255,.16);
  --page-max:1180px;
  --header-h:76px;
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:30px;
  --pill:999px;
  --shadow-card:0 24px 70px rgba(0,0,0,.26);
  --shadow-hover:0 28px 80px rgba(0,0,0,.36);
  --ease:220ms cubic-bezier(.2,.7,.2,1);
}

html{background:var(--bg);color:var(--text)}
body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
  background:
    radial-gradient(900px 520px at 50% -160px,rgba(184,193,255,.10),transparent 68%),
    linear-gradient(180deg,var(--bg-deep) 0%,var(--bg) 34%,#07070a 72%,var(--bg-deep) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Shared chrome */
.inner-page{padding-top:var(--header-h)}
.site-header{
  min-height:var(--header-h);
  padding:12px max(22px,calc((100vw - var(--page-max))/2));
  background:rgba(5,5,6,.78);
  border-bottom:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(20px) saturate(125%);
}
.site-logo{gap:10px;font-size:17px;font-weight:850;letter-spacing:-.035em}
.site-logo img{width:34px;height:34px;border-radius:10px}
.site-nav{gap:4px}
.site-nav a{
  min-height:40px;
  padding:0 14px;
  border-color:transparent;
  background:transparent;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  box-shadow:none;
}
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a.active{
  transform:none;
  border-color:var(--line);
  background:rgba(255,255,255,.055);
  box-shadow:none;
}
.site-nav .nav-cta{
  margin-left:6px;
  padding-inline:17px;
  background:var(--accent)!important;
  color:var(--accent-ink)!important;
  border-color:var(--accent)!important;
}
.menu-toggle{
  min-height:40px;
  padding:0 15px;
  border-color:var(--line);
  background:rgba(255,255,255,.035);
  font-size:10px;
  font-weight:800;
}

/* Shared page rhythm */
.page-shell,.about-main,.portfolio-shell{
  width:min(var(--page-max),calc(100% - 48px));
  margin:0 auto;
  padding:64px 0 92px;
}
.page-intro,.portfolio-intro{
  max-width:780px;
  margin:0 0 44px;
}
.eyebrow,.portfolio-kicker,.mix-only-kicker{
  margin:0 0 14px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  line-height:1.2;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.page-intro h1,.portfolio-heading,.about-hero h1,.legal-page .page-intro h1{
  margin:0 0 18px;
  font-size:clamp(48px,6.6vw,84px);
  line-height:.92;
  letter-spacing:-.06em;
  font-weight:850;
  text-wrap:balance;
}
.page-intro p:not(.eyebrow),.portfolio-lead,.about-lead{
  max-width:690px;
  margin:0;
  color:var(--text-soft);
  font-size:clamp(17px,1.9vw,22px);
  line-height:1.5;
  text-wrap:pretty;
}

/* Studio page: same hierarchy as every other inner page */
.about-hero{
  min-height:auto;
  max-width:820px;
  display:block;
  text-align:left;
  padding:0;
}
.about-hero h1{text-shadow:0 0 50px var(--glow)}
.about-lead{margin:0}
.about-copy{
  max-width:660px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.about-hero .about-actions{justify-content:flex-start}

/* Unified surfaces */
.portrait-card,.about-points article,.equipment-card,.studio-showcase-card,
.portfolio-person,.portfolio-works,.mix-only-card,.legal-body section,.modal-card{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--surface);
  box-shadow:var(--shadow-card);
}
.portrait-card,.about-points article,.equipment-card,.portfolio-person,.legal-body section{border-radius:var(--radius-lg)}
.studio-showcase-card,.portfolio-works,.mix-only-card,.modal-card{border-radius:var(--radius-xl)}
.portrait-card,.about-points article,.equipment-card,.studio-showcase-card,.portfolio-person{
  transition:transform var(--ease),border-color var(--ease),background var(--ease),box-shadow var(--ease);
}
.portrait-card:hover,.about-points article:hover,.equipment-card:hover,.studio-showcase-card:hover,.portfolio-person:hover,
.portrait-card:focus-within,.studio-showcase-card:focus-visible,.portfolio-person:focus-visible{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-hover);
}

/* Shared cards and grids */
.artist-grid,.about-points,.equipment-grid,.studio-showcase-grid,.portfolio-people{gap:18px}
.portrait-card{padding:14px 14px 22px}
.portrait-placeholder.portrait-image{
  height:auto;
  min-height:0;
  aspect-ratio:4/5;
  margin:0 0 18px;
  border-radius:18px;
  background:var(--surface-2);
}
.portrait-image img{min-height:0;aspect-ratio:4/5;object-fit:cover}
.portrait-card h2{margin:0 4px 6px;font-size:24px;line-height:1;letter-spacing:-.035em}
.portrait-card p{margin:0 4px;color:var(--muted);font-size:13px}

.about-points{margin-top:42px}
.about-points article{padding:24px}
.about-points span{margin-bottom:18px;color:var(--muted-2);font-size:10px}
.about-points h2{font-size:20px;letter-spacing:-.025em}
.about-points p{color:var(--muted);font-size:14px}

.studio-showcase-section,.equipment-section{
  margin-top:72px;
  padding-top:54px;
  border-top:1px solid rgba(255,255,255,.09);
}
.studio-showcase-heading,.equipment-heading{margin-bottom:26px}
.studio-showcase-heading h2,.equipment-heading h2{
  font-size:clamp(34px,4.5vw,58px);
  line-height:.96;
  letter-spacing:-.05em;
}
.studio-showcase-heading>p:last-child,.equipment-heading>p{color:var(--muted);font-size:14px;line-height:1.65}
.equipment-card{overflow:hidden}
.equipment-visual{height:250px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.equipment-visual-light{background:#e8e8e8}
.equipment-visual-dark{background:#08080a}
.equipment-copy{padding:20px}

/* Portfolio: same intro and card language */
.portfolio-shell{padding-top:64px}
.portfolio-kicker{margin-bottom:14px}
.portfolio-heading{font-size:clamp(48px,6.6vw,84px)}
.portfolio-lead{margin-top:0}
.portfolio-person{background:var(--surface);border-radius:var(--radius-lg)}
.portfolio-person-media{aspect-ratio:4/3;background:var(--surface-2)}
.portfolio-person-meta{padding:20px 22px 22px}
.portfolio-person-meta strong{font-size:clamp(26px,3vw,36px)}
.portfolio-works{margin-top:20px;padding:28px;background:var(--surface)}
.portfolio-source,.sound-check-panel{background:var(--surface-2);border-color:var(--line)}
.portfolio-contact{border-radius:var(--pill)}

/* Services: bring the conversion card into the same system */
.services-page .page-shell{width:min(var(--page-max),calc(100% - 48px));padding:64px 0 92px}
.services-page .services-centered-intro{
  max-width:780px!important;
  margin:0 0 44px!important;
  text-align:left;
}
.services-page .services-centered-intro p:not(.eyebrow){margin:0;max-width:690px}
.mix-only-section{max-width:820px;margin:0}
.mix-only-card{
  padding:clamp(28px,4.5vw,48px);
  text-align:left;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--surface);
}
.mix-only-copy{max-width:640px;margin:0 0 28px}
.mix-only-copy h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.05em}
.mix-only-copy p{color:var(--muted);font-size:15px;line-height:1.65}
.mix-price-button{
  width:min(520px,100%);
  margin:0;
  min-height:108px;
  border-radius:var(--radius-lg);
  box-shadow:none;
}
.producer-choices{max-width:640px}
.producer-choices-title{text-align:left}
.producer-choice{border-radius:var(--radius-md);background:var(--surface-2)}
.sound-check-panel,.producer-whatsapp{width:min(640px,100%);margin-left:0;margin-right:0}
.producer-whatsapp{border-radius:var(--pill)}
.mix-selection-status{text-align:left}

/* CTA system */
.about-actions{
  margin-top:36px;
  justify-content:flex-start;
  gap:10px;
}
.about-actions a{min-width:0}
.primary-link,.secondary-link,.home-nav-link,.portfolio-close,.sound-check-toggle{
  min-height:46px;
  padding:0 18px;
  border-radius:var(--pill);
  font-size:10px;
  font-weight:850;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.primary-link{
  background:var(--accent)!important;
  color:var(--accent-ink)!important;
  border-color:var(--accent)!important;
}
.secondary-link{
  background:rgba(255,255,255,.035);
  color:var(--text-soft);
  border-color:var(--line);
}
.primary-link:hover,.primary-link:focus-visible,.secondary-link:hover,.secondary-link:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}

/* Modal language */
.modal{background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}
.modal-card{background:var(--surface-2)}
.modal-close{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-color:var(--line);
  background:rgba(255,255,255,.035);
  cursor:pointer;
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.075);
  background:rgba(5,5,6,.76);
}
.footer-inner,.footer-bottom-inner{width:min(var(--page-max),calc(100% - 48px));padding-left:0;padding-right:0}
.footer-inner{padding-top:48px;padding-bottom:34px;gap:40px}
.footer-brand p{color:var(--muted);font-size:13px}
.footer-col h3{color:var(--muted-2);font-size:10px}
.footer-col a{color:var(--muted);font-size:13px}
.footer-col a:hover,.footer-col a.active{color:var(--text)}
.footer-bottom-inner{padding-top:18px;padding-bottom:18px}
.footer-bottom-inner p,.footer-bottom-inner a{color:var(--muted-2)}

/* Legal pages */
.legal-page .page-shell{width:min(860px,calc(100% - 48px));padding:64px 0 92px}
.legal-page .page-intro{margin-bottom:36px}
.legal-body{gap:18px}
.legal-body section{padding:26px}
.legal-toc{gap:8px;margin-bottom:18px}
.legal-toc a{min-height:38px;display:inline-flex;align-items:center;padding:0 13px;border-color:var(--line);font-size:10px}

/* Home: preserve cinematic personality, but reuse the same controls and surface language */
.home-screen{padding:58px 24px 92px}
.home-screen:before{inset:20px;border-color:rgba(255,255,255,.06);border-radius:var(--radius-xl)}
.home-content{width:min(1000px,100%)}
.home-eyebrow{color:var(--muted);font-size:10px;font-weight:850}
.home-logo-mark{border-radius:18px}
.brand-mark h1{
  font-size:clamp(58px,11vw,148px);
  letter-spacing:-.072em;
  text-shadow:0 0 44px var(--glow);
}
.home-tagline{color:var(--text-soft);font-size:clamp(13px,1.5vw,17px)}
.home-value{color:var(--muted);font-size:clamp(12px,1.35vw,15px)}
.home-cta{margin-top:30px}
.home-cta .home-nav-link{min-height:48px;padding-inline:24px}
.language-switcher{margin-top:12px}
.language-btn{
  min-width:54px;
  height:38px;
  border-color:var(--line);
  background:rgba(255,255,255,.03);
}
.home-nav{
  margin-top:22px;
  padding:6px;
  gap:3px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:var(--pill);
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(12px);
}
.home-mini-link{
  min-height:36px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  border-radius:var(--pill);
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
}
.home-mini-link:hover,.home-mini-link:focus-visible{background:rgba(255,255,255,.06);color:var(--text)}
.home-process{margin-top:22px;color:var(--muted-2)}
.home-process b{color:var(--muted)}
.home-legal{border-top:1px solid rgba(255,255,255,.045);background:rgba(5,5,6,.56);backdrop-filter:blur(12px)}

/* Responsive system */
@media(max-width:900px){
  :root{--header-h:72px}
  .site-header{padding:12px 18px}
  .site-nav{
    top:66px;
    left:14px;
    right:14px;
    gap:6px;
    padding:10px;
    border-radius:20px;
    background:rgba(8,8,11,.97);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .site-nav .nav-cta{margin-left:0}
  .page-shell,.about-main,.portfolio-shell,.services-page .page-shell{width:min(100% - 36px,var(--page-max));padding:46px 0 76px}
  .page-intro,.portfolio-intro{margin-bottom:34px}
  .equipment-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner,.footer-bottom-inner{width:calc(100% - 36px)}
}

@media(max-width:640px){
  .page-shell,.about-main,.portfolio-shell,.services-page .page-shell,.legal-page .page-shell{width:calc(100% - 28px);padding:34px 0 66px}
  .page-intro,.portfolio-intro{margin-bottom:30px}
  .page-intro h1,.portfolio-heading,.about-hero h1,.legal-page .page-intro h1{font-size:clamp(42px,13vw,62px);line-height:.94}
  .page-intro p:not(.eyebrow),.portfolio-lead,.about-lead{font-size:17px}
  .about-actions{display:grid;width:100%;margin-top:30px}
  .about-actions a{width:100%;min-height:48px}
  .about-points{margin-top:34px}
  .studio-showcase-section,.equipment-section{margin-top:52px;padding-top:40px}
  .studio-showcase-heading,.equipment-heading{display:block}
  .studio-showcase-heading>p:last-child,.equipment-heading>p{margin-top:12px;text-align:left}
  .equipment-grid{grid-template-columns:1fr}
  .mix-only-card{padding:24px 18px;border-radius:var(--radius-lg)}
  .mix-price-button{min-height:102px;border-radius:var(--radius-md)}
  .producer-choice-grid{grid-template-columns:1fr}
  .home-screen{padding:56px 16px 112px}
  .home-screen:before{inset:12px;border-radius:24px}
  .brand-mark h1{font-size:clamp(50px,16vw,86px)}
  .home-nav{width:min(360px,100%);display:grid;grid-template-columns:1fr 1fr;border-radius:20px}
  .home-mini-link{justify-content:center}
  .home-process{display:grid;gap:7px;text-align:left}
}

@media(max-width:420px){
  .site-logo span{font-size:15px}
  .site-nav{grid-template-columns:1fr 1fr}
  .site-nav .nav-cta{grid-column:1/-1}
  .home-nav{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr}
}