/* Pyle Management | site styles
   Single committed visual world: cool paper, ink ground, one safelight accent. */

:root{
  --ink:#091B32;
  --ink-soft:#142740;
  --ink-line:#24384F;
  --paper:#EDF1F4;
  --paper-2:#E1E7ED;
  --text:#0F1B28;
  --muted:#58687B;
  --line:#C4CEDA;
  --safelight:#B03A2B;
  --focus:#B03A2B;

  --step--1:0.8125rem;
  --step-0:1.0625rem;
  --step-1:1.375rem;
  --step-2:1.875rem;
  --step-3:2.625rem;
  --step-4:clamp(2.75rem,7vw,4.75rem);

  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:var(--step-0);
  line-height:1.6;
  font-optical-sizing:auto;
}

img,svg{max-width:100%;}

a{color:inherit;}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

/* ---------- shared shell ---------- */

.shell{
  width:100%;
  max-width:78rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.masthead{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}

.masthead__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem 2rem;
  padding-block:1rem;
}

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:0.7rem;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 112;
  font-weight:600;
  font-size:var(--step-0);
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
}

.wordmark__mark{
  display:block;
  width:auto;
  height:2.45rem;
  aspect-ratio:139 / 176;
  flex:none;
}

@media (max-width:30rem){
  .wordmark__mark{height:2.05rem;}
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.nav a{
  text-decoration:none;
  color:var(--muted);
  padding-block:0.2rem;
  border-bottom:1px solid transparent;
}

.nav a:hover{color:var(--text);border-bottom-color:var(--safelight);}

.nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--text);}

/* ---------- hero ---------- */

.hero{
  background:var(--ink);
  color:var(--paper);
}

.hero__inner{
  display:flex;
  flex-direction:column;
  gap:2rem;
  padding-block:clamp(2.5rem,6vw,4.25rem) clamp(3rem,7vw,5rem);
}

.hero h1{
  margin:0;
  max-width:20ch;
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 92;
  font-weight:500;
  font-size:var(--step-4);
  line-height:1.04;
  letter-spacing:-0.015em;
  text-wrap:balance;
}

.hero p{
  margin:0;
  max-width:46ch;
  color:#A9BACD;
  font-size:var(--step-1);
  line-height:1.5;
}

.rule-safelight{
  width:3.5rem;
  height:2px;
  background:var(--safelight);
  border:0;
  margin:0;
}

/* set photograph band */

.setshot-wrap{
  background:var(--ink);
  padding-block:0 clamp(2rem,5vw,3.5rem);
}

.setshot{
  margin:0;
}

.setshot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1168 / 784;
  object-fit:cover;
  background:var(--ink-soft);
}

/* ---------- generic page body ---------- */

.page{
  padding-block:clamp(3rem,7vw,5rem);
}

.eyebrow{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1rem;
}

h2,
main.page h1{
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 96;
  font-weight:500;
  font-size:var(--step-3);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 1.5rem;
  text-wrap:balance;
}

h3{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:600;
  font-size:var(--step--1);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin:0 0 0.75rem;
}

.prose{
  max-width:var(--measure);
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

.prose p{margin:0;}

.prose p.lede{
  font-size:var(--step-1);
  line-height:1.5;
}

/* ---------- signposts on home ---------- */

.signposts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0;
  border-top:1px solid var(--line);
}

.signpost{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  padding:2rem 0 2.25rem;
  border-bottom:1px solid var(--line);
  padding-right:2rem;
}

.signpost + .signpost{padding-left:0;}

.signpost h3{margin:0;}

.signpost p{margin:0;color:var(--muted);max-width:32ch;}

.signpost a{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--safelight);
  align-self:flex-start;
  padding-bottom:2px;
}

.signpost a:hover{color:var(--safelight);}

.signpost a.email{
  text-transform:none;
  letter-spacing:0.01em;
  overflow-wrap:anywhere;
}

/* ---------- two column split ---------- */

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:3rem;
}

@media (min-width:56rem){
  .split{grid-template-columns:14rem minmax(0,1fr);gap:4rem;}
}

/* ---------- form ---------- */

.form{
  max-width:38rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin-top:0.5rem;
}

.field{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}

.field label{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.field .req{color:var(--safelight);}

.field input,
.field select,
.field textarea{
  font-family:"Newsreader",Georgia,serif;
  font-size:var(--step-0);
  color:var(--text);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:0;
  padding:0.7rem 0.8rem;
  width:100%;
}

.field textarea{min-height:8rem;resize:vertical;}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--safelight);
}

.hint{
  font-size:var(--step--1);
  color:var(--muted);
  margin:0;
}

.consent{
  display:flex;
  gap:0.7rem;
  align-items:flex-start;
  font-size:var(--step--1);
  color:var(--muted);
  max-width:46ch;
}

.consent input{margin-top:0.3rem;flex:none;}

.button{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  padding:0.85rem 1.9rem;
  cursor:pointer;
  align-self:flex-start;
}

.button:hover{background:var(--safelight);border-color:var(--safelight);}

.form-status{
  font-size:var(--step--1);
  color:var(--muted);
  margin:0;
}

.form-status[data-state="error"]{color:var(--safelight);}

/* ---------- guidance list ---------- */

.guidance{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  max-width:var(--measure);
}

.guidance li{
  padding-left:1.1rem;
  position:relative;
  color:var(--muted);
}

.guidance li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.72em;
  width:0.4rem;
  height:1px;
  background:var(--safelight);
}

/* ---------- direct contact ---------- */

.direct{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}

.direct a{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step-1);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  align-self:flex-start;
}

.direct a:hover{border-bottom-color:var(--safelight);}

/* ---------- footer ---------- */

.footer{
  border-top:1px solid var(--line);
  margin-top:clamp(1.5rem,4vw,3rem);
}

.footer__inner{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2.5rem;
  justify-content:space-between;
  padding-block:2rem 2.5rem;
  align-items:center;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  color:var(--muted);
  letter-spacing:0.04em;
}

.footer a{text-decoration:none;border-bottom:1px solid var(--line);}

.footer__legal{
  max-width:40rem;
  line-height:1.6;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- portrait ---------- */

.portrait{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  max-width:46rem;
}

.portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1800 / 1428;
  object-fit:cover;
  background:var(--paper-2);
}

.portrait figcaption{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- closed notice ---------- */

.notice{
  border-left:2px solid var(--safelight);
  padding:0.25rem 0 0.25rem 1.25rem;
  max-width:var(--measure);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.notice p{margin:0;}

.notice .notice__head{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--safelight);
}



.footer__logo{
  display:block;
  width:clamp(10rem,24vw,13.75rem);
  height:auto;
  aspect-ratio:602 / 296;
}

/* ---------- inline picture band ---------- */

.band{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}

.band img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1168 / 784;
  object-fit:cover;
  background:var(--paper-2);
}

.band figcaption{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- client profile ---------- */

.client-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2rem;
  align-items:start;
}

@media (min-width:52rem){
  .client-head{grid-template-columns:minmax(16rem,22rem) minmax(0,1fr);gap:3.5rem;}
}

.client-head__photo{
  margin:0;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:900 / 1202;
  object-fit:cover;
  background:var(--paper-2);
}

.client-name{
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 94;
  font-weight:500;
  font-size:var(--step-3);
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0 0 0.35rem;
}

.client-legal{
  font-size:var(--step-0);
  color:var(--muted);
  margin:0 0 1.75rem;
}

.spec{
  margin:0;
  display:grid;
  grid-template-columns:minmax(7rem,auto) minmax(0,1fr);
  gap:0.55rem 1.5rem;
  font-size:var(--step-0);
}

.spec dt{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:0.22em;
}

.spec dd{margin:0;}

.linkrow{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:2rem;
}

.linkrow a{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--ink);
  padding:0.7rem 1.4rem;
}

.linkrow a:hover{background:var(--ink);color:var(--paper);}

.linkrow a.is-primary{background:var(--ink);color:var(--paper);}

.linkrow a.is-primary:hover{background:var(--safelight);border-color:var(--safelight);}

.credits-wrap{overflow-x:auto;}

table.credits{
  width:100%;
  border-collapse:collapse;
  font-size:var(--step-0);
  min-width:34rem;
}

table.credits th{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:0 1.25rem 0.6rem 0;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

table.credits td{
  padding:0.8rem 1.25rem 0.8rem 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

table.credits td.year{
  font-family:"Archivo",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:var(--step--1);
  letter-spacing:0.04em;
  color:var(--muted);
  white-space:nowrap;
}

table.credits td.title{font-weight:500;}

table.credits td.title .orig{
  display:block;
  color:var(--muted);
  font-size:var(--step--1);
}

table.credits tr:last-child td{border-bottom:0;}

.client-bio{
  margin:0 0 1.75rem;
  max-width:54ch;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--text);
}

.credits-note{
  margin:1.25rem 0 0;
  max-width:60ch;
  font-size:var(--step--1);
  line-height:1.5;
  color:var(--muted);
}

.credits-note strong{color:var(--text);font-weight:600;}

.eyebrow--sub{
  margin:0 0 0.9rem;
  color:var(--muted);
}

.linkrow--casting{
  margin-top:0.85rem;
}