/* Lydia Martland — freelance producer & production manager
   Two families, no accent colour: the work supplies every colour on the page. */

:root{
  --paper:#F2F0EB;
  --paper-deep:#E9E6DF;
  --ink:#16150F;
  --ink-soft:#3A382F;
  --ink-mute:#66625A;
  --rule:rgba(22,21,15,.13);
  --rule-strong:rgba(22,21,15,.30);
  --shade:#12110C;

  --display:"Syne","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t:.5s;

  --pad:clamp(20px,4vw,56px);
  --gut:2px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video{max-width:100%;display:block}

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

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- shared type ---------- */

.label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

.wordmark{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.055em;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}

/* ---------- header ---------- */

.head{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px var(--pad);
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.head .wordmark{font-size:clamp(13px,1.3vw,17px)}

.nav{display:flex;gap:clamp(14px,2.2vw,30px);align-items:baseline;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-mute);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--rule-strong)}

@media (max-width:720px){
  .head{flex-direction:column;align-items:flex-start;gap:11px;padding:18px var(--pad)}
  .head .nav{justify-content:flex-start;gap:16px;flex-wrap:nowrap;width:100%}
  .head .nav a{font-size:9.5px;letter-spacing:.12em;white-space:nowrap}
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- home ---------- */

.cover{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:.58fr auto 1.42fr;
  align-items:center;
  background:var(--paper);
  overflow:hidden;
}
.cover__mid{
  grid-row:2;
  display:flex;flex-direction:column;align-items:center;gap:clamp(22px,4.2vh,42px);
  padding:0 var(--pad);
  text-align:center;
}
.cover__mid h1,.cover__mid p{margin:0}

.logo{width:min(660px,80vw)}
.logo svg{width:100%;height:auto;display:block;overflow:visible}

.cover__role{
  color:var(--ink-mute);
  font-size:clamp(9.5px,1.05vw,12px);
  letter-spacing:.30em;
}
.cover__nav{grid-row:3;align-self:end;padding:0 var(--pad) clamp(28px,6vh,56px);text-align:center}
.cover__nav .nav{justify-content:center;gap:clamp(16px,3vw,38px)}
.cover__foot{
  position:absolute;left:0;right:0;bottom:clamp(12px,2.4vh,20px);
  display:flex;justify-content:center;
}
.cover__foot a{
  color:var(--ink-mute);
  font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  font-family:var(--mono);
  transition:color var(--t) var(--ease);
}
.cover__foot a:hover{color:var(--ink)}

/* the mark settles a letter at a time, the way it was drawn */
.js .logo .ltr{
  opacity:0;
  animation:ink .52s var(--ease) forwards;
  animation-delay:calc(var(--i) * 42ms + 90ms);
  transform-box:fill-box;
  transform-origin:50% 50%;
}
@keyframes ink{
  from{opacity:0;transform:translateY(-7px) rotate(-3.2deg) scale(.93)}
  to  {opacity:1;transform:none}
}
.cover__role,.cover__nav,.cover__foot{animation:settle .8s var(--ease) both}
.cover__role{animation-delay:.72s}
.cover__nav{animation-delay:.82s}
.cover__foot{animation-delay:.9s}
@keyframes settle{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- work index ---------- */

/* present to screen readers and search, invisible on the page */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gut);
  padding:var(--gut) 0 var(--gut);
}
/* an odd number of jobs: the last one runs the full width instead of leaving a hole */
.grid > .item:last-child:nth-child(odd){grid-column:1/-1}
.grid > .item:last-child:nth-child(odd) .tile{aspect-ratio:21/9}
@media (max-width:720px){.grid{grid-template-columns:1fr}}

.item{display:block;position:relative}
.tile{
  position:relative;display:block;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--paper-deep);
  isolation:isolate;
}
.tile img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,14,.30) 0%,rgba(10,10,14,.16) 45%,rgba(10,10,14,.42) 100%);
  opacity:0;transition:opacity .55s var(--ease);
}
.item:hover .tile img,.item:focus-visible .tile img{transform:scale(1.038)}
.item:hover .tile::after,.item:focus-visible .tile::after{opacity:1}

.tile__cap{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:20px;text-align:center;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.item:hover .tile__cap,.item:focus-visible .tile__cap{opacity:1;transform:none}
.tile__name{
  font-family:var(--mono);
  font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.22em;text-transform:uppercase;
  color:#F6F4EF;
  text-shadow:0 1px 3px rgba(6,6,10,.8),0 4px 22px rgba(6,6,10,.6);
}
.tile__role{
  font-family:var(--mono);
  font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;
  color:rgba(246,244,239,.72);
  text-shadow:0 1px 3px rgba(6,6,10,.85);
}
.tile__film{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,244,239,.9);
  background:rgba(10,10,14,.42);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(246,244,239,.22);
  border-radius:2px;padding:4px 8px;
  opacity:.85;
}

/* A hover caption is a desktop luxury. Touch screens and narrow screens get a
   real caption under the tile, so a job is never unlabelled. */
.tile__below{display:none}
@media (hover:none),(max-width:720px){
  .tile__cap{display:none}
  .tile{aspect-ratio:3/2}
  .tile__below{
    display:flex;flex-direction:column;gap:5px;
    padding:11px 0 22px;
  }
  .tile__below .tile__name{color:var(--ink);text-shadow:none;font-size:11px}
  .tile__below .tile__role{color:var(--ink-mute);text-shadow:none}
  .grid{gap:0;padding-left:var(--pad);padding-right:var(--pad)}
  .grid > .item:last-child:nth-child(odd) .tile{aspect-ratio:3/2}
}

/* scroll entrance */
.js .rise{opacity:0;transform:translateY(10px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}

/* ---------- project page ---------- */

.proj{padding:clamp(52px,10vh,110px) var(--pad) 0;text-align:center}
.proj h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,2.3vw,29px);
  letter-spacing:.05em;text-transform:uppercase;line-height:1.3;
  margin:0 auto;max-width:min(90vw,900px);
  color:var(--ink);
}
.proj h1 span{white-space:nowrap}
.proj h1 i{font-style:normal;color:var(--ink-mute);padding:0 .12em}
.meta{
  margin:clamp(18px,3vh,30px) auto 0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 0;
  max-width:820px;
}
.meta div{
  display:flex;align-items:baseline;gap:8px;
  padding:0 clamp(10px,1.4vw,18px);
  border-right:1px solid var(--rule);
}
.meta div:last-child{border-right:0}
.meta dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-mute);margin:0;
}
.meta dd{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);margin:0;
}

.plate{padding:clamp(38px,7vh,80px) var(--pad) 0;display:flex;flex-direction:column;gap:var(--pad);align-items:center}
.plate figure{margin:0;width:100%;max-width:1180px}
.plate img{width:100%;height:auto;background:var(--paper-deep)}

/* click-to-play film */
.film{position:relative;width:100%;max-width:1180px;background:var(--shade);aspect-ratio:16/9;overflow:hidden}
.film img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--shade)}
.film video{display:none}
.film.playing video{display:block}
.film.playing .film__btn,.film.playing img{display:none}
.film__btn{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(10,10,14,.24);
  border:0;cursor:pointer;color:#F6F4EF;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .5s var(--ease);
}
.film__btn:hover{background:rgba(10,10,14,.10)}
.film__ring{
  width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(246,244,239,.7);
  display:grid;place-items:center;
  transition:transform .6s var(--ease),background .6s var(--ease);
}
.film__btn:hover .film__ring{transform:scale(1.07);background:rgba(246,244,239,.12)}
.film__ring::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:13px solid #F6F4EF;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}

.next{
  margin-top:clamp(60px,11vh,130px);
  border-top:1px solid var(--rule);
  padding:clamp(28px,5vh,48px) var(--pad) clamp(46px,8vh,80px);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
}
.next a{
  font-family:var(--mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-mute);
  transition:color var(--t) var(--ease);
}
.next a:hover{color:var(--ink)}
.next .nx{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.next .nx span{font-size:9.5px;letter-spacing:.2em;color:var(--ink-mute)}
.next .nx b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}

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

.about{
  padding:clamp(26px,4vh,48px) var(--pad) clamp(40px,7vh,70px);
  max-width:760px;
}

.about h1.about__lede{
  font-family:var(--display);font-weight:700;
  font-size:clamp(19px,2.2vw,28px);
  line-height:1.4;letter-spacing:-.005em;
  margin:0 0 clamp(22px,3.4vh,34px);
  max-width:22ch;
  color:var(--ink);
}
.about h1.about__lede{font-weight:400}
.about p{
  font-family:var(--mono);font-size:13px;line-height:1.95;letter-spacing:.035em;
  color:var(--ink-soft);margin:0 0 15px;max-width:56ch;
}
.about p:last-child{margin-bottom:0}

.card{border-top:1px solid var(--rule-strong);padding-top:18px}
.card + .card{margin-top:30px}
.card h2{margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);font-weight:400}
.card a{
  font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--ink);
  border-bottom:1px solid var(--rule-strong);padding-bottom:2px;
  transition:border-color var(--t) var(--ease),opacity var(--t) var(--ease);
  overflow-wrap:anywhere;
}
.card a:hover{border-bottom-color:var(--ink)}
.clients{
  display:flex;flex-wrap:wrap;gap:5px 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);
  line-height:1.9;
}
.clients span::after{content:"·";padding:0 9px;color:var(--ink-mute)}
.clients span:last-child::after{content:""}

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

.foot{
  border-top:1px solid var(--rule);
  padding:26px var(--pad) 34px;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.foot a{transition:color var(--t) var(--ease)}
.foot a:hover{color:var(--ink)}

/* ---------- touch targets ---------- */
@media (pointer:coarse){
  .nav a,.foot a,.next a,.card a{
    min-height:44px;display:inline-flex;align-items:center;justify-content:flex-start;
  }
  .nav a{justify-content:center}
  .next .nx a{justify-content:flex-end}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .js .rise{opacity:1;transform:none}
  .cover__role,.cover__nav,.cover__foot{opacity:1;transform:none}
  .js .logo .ltr{opacity:1;animation:none;transform:none}
  .tile__cap{opacity:1;transform:none}
  .tile::after{opacity:1}
}

/* ---------- contact, simplified ---------- */
.reach__h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.6vw,32px);letter-spacing:-.01em;line-height:1.2;
  margin:clamp(40px,6vh,64px) 0 14px;color:var(--ink);
}
.reach__p{max-width:46ch;margin:0 0 clamp(26px,4vh,36px)}
.reach{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.reach a{
  font-family:var(--mono);font-size:14px;letter-spacing:.03em;color:var(--ink);
  border-bottom:1px solid var(--rule-strong);padding-bottom:3px;
  transition:border-color var(--t) var(--ease);overflow-wrap:anywhere;
}
.reach a:hover{border-bottom-color:var(--ink)}
.about .card{margin-top:clamp(46px,7vh,72px)}

/* ---------- square outfit reels, three up ---------- */
.reels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);
  width:100%;max-width:1180px;
}
.reels .film{aspect-ratio:1/1;max-width:none}
.reels .film__ring{width:48px;height:48px}
.reels .film__btn{font-size:9px;letter-spacing:.2em;gap:10px}
@media (max-width:720px){.reels{grid-template-columns:1fr;gap:2px}}