/* ==========================================================================
   Patrycja Rincon — site styles
   Direction: Noir palette (near-black, bone, amber) + Kontrast type (Anton).
   Single committed dark theme — this is a choice, not an omission.
   ========================================================================== */

:root{
  --pitch:#0B0B0D;
  --smoke:#131418;
  --slate:#1A1C21;
  --bone:#E9E4DA;
  --ink:rgba(233,228,218,.86);   /* body prose — bone, stepped back */
  --dust:rgba(233,228,218,.56);  /* labels, captions, secondary */
  --amber:#C08A3E;
  --hair:rgba(233,228,218,.13);

  --display:"Anton",Impact,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --bar-h:56px;
  --gut:clamp(1.1rem,4vw,3rem);
  --band-gap:clamp(1.6rem,4vw,2.6rem);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--bar-h)}
body{
  margin:0;
  background:var(--pitch);
  color:var(--bone);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:15.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Every photo sits in a fixed frame, so a shot composed for a wide crop can
   lose the subject. Two per-photo values fix that, both set by site.js from
   gallery.js and both editable in the admin page:

     --focus  where the crop holds        (any CSS object-position)
     --zoom   how far in it pushes        (1 = the whole frame)

   They belong on `img` rather than on a list of the four surfaces that use
   them: both default to identity, so this is a no-op on a photo that sets
   neither, and a fifth surface gets crop control without anyone remembering
   to come back here. Custom properties rather than plain inline styles, so
   the hover animation further down can multiply the zoom instead of
   overwriting it. */
img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--focus,50% 50%);
  transform:scale(var(--zoom,1));
  transform-origin:var(--focus,50% 50%);
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* --------------------------------------------------------- type utilities */
.u-mono,
.topbar__mark,
.facts dt,
.clip__meta b,
.credit__prod small,
.chips li,
.specs dt,
.btn{
  font-family:var(--mono);
  text-transform:uppercase;
  font-weight:400;
}
.u-mono{font-size:11px;letter-spacing:.14em;color:var(--dust)}
.u-mono--bright{color:var(--bone)}
.u-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hero__name,
.band__title,
.clip__body h3,
.contact__title,
.route h3{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
}

/* --------------------------------------------------------------- top bar */
.topbar{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:0 var(--gut);
  background:rgba(11,11,13,.88);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.topbar[data-stuck="true"]{border-bottom-color:var(--hair);background:rgba(11,11,13,.94)}
.topbar__mark{font-size:11px;letter-spacing:.2em;color:var(--bone);white-space:nowrap}
.topbar__nav{display:flex;gap:1.4rem}
.topbar__nav a{position:relative;padding:.2rem 0}
.topbar__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--amber);transition:right .25s cubic-bezier(.2,.7,.3,1);
}
.topbar__nav a:hover,
.topbar__nav a[aria-current="page"]{color:var(--bone)}
.topbar__nav a:hover::after,
.topbar__nav a[aria-current="page"]::after{right:0}

.lang{display:flex;align-items:center;gap:.35rem}
.lang button{
  font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;background:none;border:0;cursor:pointer;color:var(--dust);
  padding:.25rem .15rem;transition:color .2s;
}
.lang button:hover{color:var(--bone)}
.lang button[aria-pressed="true"]{color:var(--amber)}
.lang i{font-style:normal;color:var(--hair)}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0}
/* <picture> is inline by default and would collapse the still to nothing */
.hero__media picture{position:absolute;inset:0;display:block}
.hero__media img{filter:grayscale(1) contrast(1.14) brightness(.8)}
/* The showreel sits on the still, wearing the same treatment so the swap is a
   dissolve between two versions of one picture rather than a cut between two
   pictures. It stays transparent until site.js confirms it is playing, which
   makes the still the fallback for every way video can fail. The gradient in
   ::after below is declared after this and so covers both. */
.hero__reel{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(.8);
  opacity:0;transition:opacity 1s ease;
}
.hero__reel[data-playing]{opacity:1}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 85% at 68% 30%, transparent 18%, rgba(11,11,13,.72) 76%),
    linear-gradient(to top, var(--pitch) 3%, rgba(11,11,13,.15) 52%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(2rem,5vw,3.5rem)}
.hero__name{
  font-size:clamp(3.1rem,15vw,13.5rem);line-height:.82;margin:.7rem 0 0;
  letter-spacing:-.012em;
}
.hero__role{
  font-weight:500;
  font-size:clamp(.95rem,2.1vw,1.35rem);letter-spacing:.02em;line-height:1.45;
  margin-top:1.4rem;max-width:46ch;
}
.hero__role b{color:var(--amber);font-weight:500}

/* fact strip under the hero */
.facts{
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.facts div{
  flex:1 1 160px;padding:.85rem var(--gut);
  border-right:1px solid var(--hair);
  display:flex;flex-direction:column;gap:.15rem;
}
.facts div:last-child{border-right:0}
.facts dt{font-size:10px;letter-spacing:.16em;color:var(--dust)}
.facts dd{margin:0;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ generic band */
.band{padding:clamp(3.2rem,8vw,6.5rem) var(--gut)}
.band--smoke{background:var(--smoke)}
.band--tight{padding-bottom:clamp(2rem,4vw,3rem)}
/* a page with no hero has to clear the fixed bar itself */
.band--below-bar{padding-top:calc(var(--bar-h) + clamp(2rem,6vw,4rem))}
.band__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  border-bottom:1px solid var(--hair);padding-bottom:.9rem;margin-bottom:var(--band-gap);
}
.band__title{font-size:clamp(1.5rem,4.2vw,3rem);line-height:1;margin:0;letter-spacing:.004em}
.band__note{max-width:62ch;color:var(--dust);margin:0 0 var(--band-gap)}

/* ------------------------------------------------------------ work / reel */
.reel{
  display:flex;gap:.75rem;overflow-x:auto;padding-bottom:1.1rem;
  /* full-bleed: pull out to the page edge, then hold the gutter back inside.
     scroll-padding keeps snap from landing past that gutter and clipping shot 1. */
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent;
}
.reel::-webkit-scrollbar{height:6px}
.reel::-webkit-scrollbar-thumb{background:var(--hair)}
.reel figure{margin:0;flex:0 0 clamp(230px,27vw,340px);scroll-snap-align:start}

/* ------------------------------------------------------------- photo grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.4vw,1rem)}
.grid figure{margin:0}
.grid__more{margin-top:clamp(1.4rem,3vw,2rem);display:flex;justify-content:center;
  gap:.7rem;flex-wrap:wrap}

/* tiles — one look, two surfaces.
   Her work is shown in true colour: clients book from what they actually see. */
.reel__shot,
.grid__shot{aspect-ratio:3/4;overflow:hidden;background:var(--slate)}
.reel__shot img,
.grid__shot img{filter:brightness(.94);transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .45s}
.reel figure:hover .reel__shot img,
.reel figure:focus-within .reel__shot img,
.grid figure:hover .grid__shot img,
.grid figure:focus-within .grid__shot img{
  /* multiplies whatever zoom the photo already carries, rather than resetting it */
  transform:scale(calc(var(--zoom,1) * 1.04));filter:brightness(1.03);
}
.reel figcaption,
.grid figcaption{display:flex;justify-content:space-between;margin-top:.55rem;gap:.8rem}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid var(--hair);background:none;cursor:pointer;
  padding:.7rem 1.4rem;font-size:11px;letter-spacing:.16em;color:var(--bone);
  transition:border-color .25s,color .25s;
}
.btn:hover{border-color:var(--amber);color:var(--amber)}

/* --------------------------------------------------------------- showreel */
.clip{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center}
/* a second film and beyond — the rule keeps them from reading as one block */
.clip + .clip{
  margin-top:clamp(2.2rem,5vw,3.6rem);padding-top:clamp(2.2rem,5vw,3.6rem);
  border-top:1px solid var(--hair);
}
.clip__player{background:#000;border:1px solid var(--hair)}
/* natural ratio — the source was cropped to its content, so no letterboxing */
.clip__player video{display:block;width:100%;height:auto;background:#000}
.clip__body h3{font-size:clamp(1.3rem,3.2vw,2rem);margin:.7rem 0 0;letter-spacing:.01em}
.clip__body p{margin:.9rem 0 0;max-width:52ch;color:var(--ink)}
.clip__meta{margin:1.4rem 0 0;padding:0;list-style:none;display:grid;gap:.35rem}
.clip__meta li{display:flex;gap:.8rem}
.clip__meta b{font-size:10.5px;letter-spacing:.14em;color:var(--dust);min-width:6.5rem}

/* ---------------------------------------------------------------- credits */
.creditgroup{margin-bottom:clamp(2rem,5vw,3.2rem)}
.creditgroup:last-child{margin-bottom:0}
.creditgroup__label{display:flex;align-items:center;gap:.9rem;margin-bottom:.6rem}
.creditgroup__label::after{content:"";flex:1;height:1px;background:var(--hair)}

.credit{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);
  gap:1.4rem;align-items:baseline;
  padding:.9rem 0;border-bottom:1px solid var(--hair);
}
.credit__role{text-align:right}          /* the rest comes from .u-mono */
.credit__dot{color:var(--amber);font-size:8px;line-height:1}
.credit__prod{font-size:1.02rem;font-weight:500}
.credit__prod small{
  display:block;margin-top:.2rem;
  font-size:10.5px;letter-spacing:.12em;color:var(--dust);
}

/* --------------------------------------------------------- acting / skills */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.8rem,5vw,4rem);align-items:start}
.prose p{margin:0 0 1.05rem;max-width:62ch;color:var(--ink)}
.prose p:last-child{margin-bottom:0}
.prose .lead{font-size:clamp(1.05rem,2.1vw,1.3rem);line-height:1.5;color:var(--bone)}

.panel{border:1px solid var(--hair);padding:clamp(1.2rem,3vw,1.8rem)}
.panel + .panel{margin-top:1rem}
.panel__title{margin:0 0 .9rem}
.panel p{margin:0;color:var(--dust)}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.chips li{
  border:1px solid var(--hair);padding:.32rem .75rem;
  font-size:10.5px;letter-spacing:.12em;color:rgba(233,228,218,.82);
}
.chips li[data-key="true"]{border-color:var(--amber);color:var(--amber)}

.rules{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.rules li{display:flex;gap:.7rem;align-items:baseline;font-size:14px}
.rules li::before{content:"—";color:var(--amber);flex:none}
.rules li[data-no="true"]::before{content:"×";color:var(--dust)}

/* ---------------------------------------------------------------- dossier */
.dossier{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,4rem);align-items:start}
.specs{margin:2.2rem 0 0;display:grid}
.specs > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.62rem 0;border-bottom:1px solid var(--hair);
}
.specs dt{font-size:10.5px;letter-spacing:.14em;color:var(--dust)}
.specs dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.specs dd span{color:var(--dust);font-weight:400}

.portrait{aspect-ratio:4/5;overflow:hidden;background:var(--slate)}
.portrait img{filter:brightness(.96)}

/* ---------------------------------------------------------------- contact */
.contact{text-align:center;padding:clamp(4rem,10vw,8rem) var(--gut)}
/* 404: the page has no content of its own, so centre what little there is */
.contact--center{min-height:70svh;display:flex;flex-direction:column;justify-content:center}
.band__note--center{margin-inline:auto;margin-top:1.6rem;text-align:center}
.contact__title{
  font-size:clamp(2.4rem,10vw,7.5rem);line-height:.86;margin:1rem 0 0;letter-spacing:-.008em;
}
.contact__mail{margin:1.6rem 0 0}
.routes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);
  max-width:820px;margin:clamp(2rem,5vw,3.4rem) auto 0;text-align:left;
}
.route{background:var(--pitch);padding:clamp(1.3rem,3vw,2rem);display:flex;flex-direction:column;gap:.5rem}
.route h3{margin:.4rem 0 0;font-size:1.25rem;letter-spacing:.01em}
.route p{margin:0;color:var(--dust);font-size:14px}
/* not scoped to .route — archive.html uses the same link outside that block */
.route__link{
  margin-top:.6rem;color:var(--amber);border-bottom:1px solid rgba(192,138,62,.4);
  padding-bottom:.15rem;align-self:flex-start;word-break:break-word;
  transition:border-color .2s;
}
.route__link:hover{border-bottom-color:var(--amber)}

.social{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;padding:0;margin:2.6rem 0 0}
.social a:hover{color:var(--amber)}

footer{
  border-top:1px solid var(--hair);padding:1.2rem var(--gut);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
}

/* ------------------------------------------------------------- responsive */
@media (min-width:901px){
  /* a full-width blur repaints on every scroll frame — desktop only */
  .topbar{background:rgba(11,11,13,.72);backdrop-filter:blur(14px)}
}
@media (max-width:900px){
  .split,.dossier{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .routes{grid-template-columns:1fr}
  .topbar__nav{display:none}
  .credit{grid-template-columns:1fr;gap:.15rem;padding:.85rem 0}
  .credit__role{text-align:left;order:2}
  .credit__prod{order:1}
  .credit__dot{display:none}
  .facts div{flex-basis:50%;border-bottom:1px solid var(--hair)}
  .facts div:nth-child(2n){border-right:0}
  .clip{grid-template-columns:1fr}
  .clip__player{max-width:480px}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .facts div{flex-basis:100%;border-right:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after,*::before{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

@media print{
  .topbar,.hero__media,.social,.btn{display:none}
  body{background:#fff;color:#000}
}