/* Contact Sheet №01 — steal.grolet.fr
   Decisions, stated once:
   type      Fraunces (display, opsz 144, wonk) + IBM Plex Mono (everything else)
   colour    near-black paper, print white, one safelight orange
   radius    0. A photographic frame has corners.
   grid      12 columns, 28px gutter, 1560 max. Sheet is 3 up, 2 up, 1 up.
   motion    frames develop on entry, loupe follows the pointer, nothing else moves on its own
*/

:root{
  --paper:#0a0908;
  --paper-2:#111010;
  --print:#f4efe6;
  --grey:#8a827a;
  --grey-dim:#544e48;
  --safe:#ff4b12;
  --line:rgba(244,239,230,.14);
  --gut:28px;
  --max:1560px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--print);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;
  line-height:1.55;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0 0 1em}
code{font-size:.92em;color:var(--safe)}

/* ---------- film grain + safelight vignette ---------- */
.grain{
  position:fixed;inset:-50%;
  pointer-events:none;z-index:60;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:55;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,75,18,.06),transparent 55%),
             radial-gradient(100% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55));
}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:80;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .6s var(--ease),visibility .6s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__counter{font-size:13px;letter-spacing:.16em;color:var(--grey)}
.loader__counter span{color:var(--print)}
.loader__counter i{font-style:normal;color:var(--grey-dim)}
.loader__bar{width:180px;height:1px;background:var(--line);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--safe)}

/* ---------- masthead ---------- */
.masthead{
  max-width:var(--max);margin:0 auto;padding:22px var(--gut) 0;
  min-height:100svh;display:flex;flex-direction:column;
}
.masthead__rule{
  display:flex;justify-content:space-between;gap:16px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.masthead__rule span:nth-child(2){color:var(--grey-dim)}
.masthead__title{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;
  font-weight:900;
  font-size:clamp(3.1rem,12.4vw,11.4rem);
  line-height:.86;
  letter-spacing:-.035em;
  margin:auto 0 0;
  padding:8vh 0 0;
}
.masthead__title .line{display:block;overflow:hidden;padding-bottom:.02em}
.masthead__title .line > i{
  display:block;font-style:normal;
  transform:translateY(103%);
  transition:transform 1.15s var(--ease);
}
body.is-ready .masthead__title .line > i{transform:none}
.masthead__title .line:nth-child(2) > i{transition-delay:.09s}
.masthead__title .line:nth-child(3) > i{transition-delay:.18s}
.masthead__meta,.masthead__scroll,.masthead__rule{
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s;
}
body.is-ready .masthead__meta,body.is-ready .masthead__scroll,body.is-ready .masthead__rule{opacity:1;transform:none}
.masthead__title em{font-style:italic;font-weight:300;color:var(--safe)}
.masthead__title b{color:var(--safe);font-weight:900}
.masthead__meta{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gut);align-items:end;
  padding:40px 0 0;
}
.lede{max-width:52ch;color:var(--grey);font-size:14px;margin:0}
.lede br{display:none}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;justify-self:end;width:100%;max-width:520px}
.specs dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim)}
.specs dd{margin:2px 0 0;font-size:13px;color:var(--print)}
.masthead__scroll{
  display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim);
  padding:34px 0 24px;
}
.masthead__scroll i{display:block;width:46px;height:1px;background:var(--grey-dim);position:relative;overflow:hidden}
.masthead__scroll i::after{content:"";position:absolute;inset:0;background:var(--safe);animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- sticky roll strip ---------- */
.sticky-strip{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:18px;
  max-width:var(--max);margin:0 auto;
  padding:12px var(--gut);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.strip__frame{color:var(--safe);font-weight:500}
.strip__name{color:var(--print)}
.strip__hint{margin-left:auto;color:var(--grey-dim)}

/* ---------- the sheet ---------- */
.sheet{
  max-width:var(--max);margin:0 auto;
  padding:var(--gut) var(--gut) 8vh;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);
  position:relative;
}
/* sprocket holes down both gutters of the sheet */
@media (min-width:1660px){
.sheet::before,.sheet::after{
  content:"";position:absolute;top:0;bottom:0;width:9px;
  background-image:repeating-linear-gradient(to bottom,var(--line) 0 10px,transparent 10px 26px);
  opacity:.5;
}
.sheet::before{left:-22px}
.sheet::after{right:-22px}
}

.frame{
  position:relative;border:0;padding:0;margin:0;background:none;
  color:inherit;text-align:left;cursor:pointer;font:inherit;
  display:block;
}
.frame__shot{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:#050505;
  aspect-ratio:16/10;
}
.frame__shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  /* undeveloped: flat, dark, low contrast */
  filter:brightness(.34) contrast(.72) saturate(.15);
  opacity:.5;
  transform:scale(1.02);
  transition:filter 1.1s var(--ease),opacity 1.1s var(--ease),transform 1.1s var(--ease);
}
.frame.is-developed .frame__shot img{filter:none;opacity:1;transform:scale(1)}
.frame__shot::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,75,18,0);
  transition:box-shadow .4s var(--ease);
}
.frame:hover .frame__shot::after,.frame:focus-visible .frame__shot::after{box-shadow:inset 0 0 0 2px var(--safe)}
.frame:focus-visible{outline:none}
.frame:hover .frame__shot img{transform:scale(1.03)}

.frame__no{
  position:absolute;top:8px;left:8px;z-index:2;
  font-size:11px;letter-spacing:.12em;color:var(--print);
  mix-blend-mode:difference;
}
.frame__pick{
  position:absolute;top:6px;right:8px;z-index:2;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--safe);
}
.frame__cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 2px 0;border-top:1px solid transparent;
}
.frame__name{font-size:13px;color:var(--print)}
.frame__tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);text-align:right}
.frame__line{
  padding:6px 2px 0;color:var(--grey);font-size:12.5px;line-height:1.5;
  max-width:44ch;
}

/* ---------- loupe ---------- */
.loupe{
  position:fixed;top:0;left:0;z-index:50;
  width:230px;height:230px;border-radius:50%;
  border:1px solid rgba(244,239,230,.5);
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.35);
  background-repeat:no-repeat;
  pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.85);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.loupe.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (pointer:coarse),(max-width:900px){.loupe{display:none}}

/* ---------- cuts ---------- */
.cuts{max-width:var(--max);margin:0 auto;padding:0 var(--gut) 10vh;border-top:1px solid var(--line);padding-top:56px}
.cuts__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--gut);align-items:start;margin-bottom:34px}
.cuts__head h2{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 144,"WONK" 1;
  font-weight:300;font-style:italic;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.02em;
}
.cuts__head p{color:var(--grey);max-width:56ch;margin:0}
.cuts__grid{display:grid;grid-template-columns:repeat(9,1fr);gap:12px}
.cut{position:relative;opacity:.6;transition:opacity .35s var(--ease)}
.cut:hover{opacity:1}
.cut picture{display:block}
.cut img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;filter:grayscale(1) contrast(.9) brightness(.95);border:1px solid var(--line)}
.cut svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cut span{display:block;margin-top:8px;font-size:10px;letter-spacing:.1em;color:var(--grey-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- method ---------- */
.method{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut) 12vh;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--gut) * 2);
  border-top:1px solid var(--line);padding-top:56px;
}
.method h2{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 144,"WONK" 1;
  font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;letter-spacing:-.02em;
  margin-bottom:18px;
}
.method p{color:var(--grey);max-width:54ch}

/* ---------- colophon ---------- */
.colophon{
  max-width:var(--max);margin:0 auto;padding:22px var(--gut) 40px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);
}
.colophon div{display:flex;flex-direction:column;gap:6px}
.colophon div:nth-child(2){align-items:center;text-align:center}
.colophon div:nth-child(3){align-items:flex-end;text-align:right}

/* ---------- viewer ---------- */
.viewer{
  position:fixed;inset:0;z-index:70;
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(10px);
  display:grid;place-items:center;
  padding:clamp(16px,4vw,54px);
  opacity:0;transition:opacity .35s var(--ease);
}
.viewer[hidden]{display:none}
.viewer.is-open{opacity:1}
.viewer__figure{
  margin:0;width:100%;max-width:1280px;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:clamp(20px,3vw,44px);
  align-items:center;
}
.viewer__figure img{width:100%;border:1px solid var(--line)}
.viewer__no{font-size:11px;letter-spacing:.2em;color:var(--safe);margin-bottom:10px}
.viewer__figure h3{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 144,"WONK" 1;
  font-weight:600;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1;letter-spacing:-.025em;margin-bottom:14px;
}
.viewer__figure p{color:var(--grey);max-width:42ch}
.tags{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px}
.tags li{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  border:1px solid var(--line);padding:4px 8px;
}
.viewer__link{
  display:inline-block;text-decoration:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:var(--safe);padding:11px 16px;
  transition:transform .3s var(--ease);
}
.viewer__link:hover{transform:translateY(-2px)}
.viewer__close{
  position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);
  background:none;border:1px solid var(--line);color:var(--grey);
  font:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 12px;cursor:pointer;
}
.viewer__close:hover{color:var(--print);border-color:var(--print)}
.viewer__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--grey-dim);font-size:22px;cursor:pointer;padding:16px;
  transition:color .3s var(--ease);
}
.viewer__nav:hover{color:var(--safe)}
.viewer__nav--prev{left:6px}
.viewer__nav--next{right:6px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .sheet{grid-template-columns:repeat(2,1fr)}
  .cuts__grid{grid-template-columns:repeat(5,1fr)}
  .viewer__figure{grid-template-columns:1fr;align-content:center}
  .viewer__figure img{max-height:44svh;object-fit:cover;object-position:top center}
}
@media (max-width:720px){
  :root{--gut:18px}
  body{font-size:13px}
  .masthead__rule span:nth-child(2){display:none}
  .masthead{min-height:auto;padding-bottom:2vh}
  .masthead__title{padding-top:14vh;letter-spacing:-.03em}
  .masthead__meta{grid-template-columns:1fr;gap:26px;align-items:start}
  .specs{justify-self:start;grid-template-columns:repeat(2,1fr);gap:16px 12px}
  .sheet{grid-template-columns:1fr}
  .sheet::before,.sheet::after{display:none}
  .cuts__head{grid-template-columns:1fr;gap:14px}
  .cuts__grid{grid-template-columns:repeat(3,1fr)}
  .viewer__nav{display:none}
  .viewer__figure img{max-height:38svh}
  .method{grid-template-columns:1fr;gap:34px}
  .colophon{grid-template-columns:1fr;gap:16px}
  .colophon div:nth-child(2),.colophon div:nth-child(3){align-items:flex-start;text-align:left}
  .strip__hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .masthead__title .line > i{transform:none}
  .masthead__meta,.masthead__scroll,.masthead__rule{opacity:1;transform:none}
  .masthead__scroll i::after{animation:none}
  .frame__shot img{filter:none;opacity:1;transform:none;transition:none}
  .loupe{display:none}
  *{transition-duration:.01ms !important}
}

/* Printed on paper it should still read as a sheet. */
@media print{
  body{background:#fff;color:#000}
  .grain,.loupe,.loader,.sticky-strip,.viewer{display:none}
  .frame__shot img{filter:none;opacity:1}
}