/* Graundit — house style of the videos: paper, ink, one red; ITC Garamond for headlines, Courier for the HUD. */
@font-face{font-family:GarBk;src:url('fonts/GarBk.woff2') format('woff2');font-display:swap}
@font-face{font-family:GarBkCond;src:url('fonts/GarBkCond.woff2') format('woff2');font-display:swap}
@font-face{font-family:GarLtCond;src:url('fonts/GarLtCond.woff2') format('woff2');font-display:swap}
@font-face{font-family:Cour;src:url('fonts/Cour.woff2') format('woff2');font-display:swap}
@font-face{font-family:CourBd;src:url('fonts/CourBd.woff2') format('woff2');font-display:swap}

:root{--paper:#F0ECE1;--paper2:#E6E0D3;--ink:#1E1E1E;--sub:#3A362F;--grey:#5F594F;--hair:#1e1e1e2e;--red:#D50019;--cream:#F3EEE2;--gut:16px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:GarBk,Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:var(--cream)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* paper grain, as in the films */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.mono{font-family:Cour,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.mono b{font-family:CourBd,monospace;font-weight:400}

/* ---- graundit.com ---- */
.soon{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:48px var(--gut);text-align:center}
.soon img{width:min(380px,76vw);height:auto}
.soon p{font-family:GarBkCond;font-size:clamp(34px,8vw,52px);line-height:1}
.soon a{border-bottom:1px solid var(--ink);padding-bottom:3px}
.soon a:hover{color:var(--red);border-color:var(--red)}

/* ---- graundit.com/links ---- */
.page{max-width:560px;margin:0 auto;padding:22px var(--gut) 40px}

/* the HUD strip from the covers */
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:9px;border-bottom:3px double var(--ink)}
.hd .series{font-family:GarBkCond;font-size:21px;white-space:nowrap;line-height:1}
.hd .mono{font-size:11px}

.top{padding-top:24px}
.top img{width:130px;height:auto}
.tag{font-family:GarLtCond;font-size:24px;line-height:1.12;margin-top:16px}

section{margin-top:38px}
.lab{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--ink)}

/* follow rows */
.row{display:flex;align-items:baseline;gap:12px;padding:15px 0 14px;border-bottom:1px solid var(--hair);transition:padding .18s ease,color .18s ease}
.row .n{font-family:GarBkCond;font-size:31px;line-height:1}
.row .h{margin-left:auto;font-size:11px;color:var(--grey);letter-spacing:.08em;text-transform:none;white-space:nowrap;transition:color .18s ease}
.row .a{font-family:Cour,monospace;font-size:15px;transition:transform .18s ease}
@media (hover:hover){
  .row:hover{color:var(--red);padding-left:8px}
  .row:hover .h{color:var(--red)}
  .row:hover .a{transform:translateX(3px)}
}

/* now showing */
.film{position:relative;display:block;width:100%;aspect-ratio:16/9;margin-top:12px;background:var(--ink);overflow:hidden}
.film img,.film iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.film .play{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:9px;padding:7px 15px 7px 12px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:99px;font-family:GarBkCond;font-size:19px;line-height:1;transition:background .18s ease,color .18s ease}
.film .play svg{width:12px;height:13px;fill:currentColor}
.film:hover .play{background:var(--red);border-color:var(--red);color:var(--cream)}
.ft{font-family:GarBkCond;font-size:27px;line-height:1.05;margin-top:14px}
.ask{font-size:16px;line-height:1.4;color:var(--sub);margin-top:8px}
.ask a{border-bottom:1px solid currentColor}
.ask a:hover{color:var(--red)}

.now{padding:30px 0 34px;color:var(--cream);background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
.now .lab{border-color:var(--cream)}
.now .film{border:0}
.now .film .play{border-color:var(--paper)}
.now .ask{color:var(--cream)}
.now .ask a:hover{color:#FF6B78}

/* series */
.series-list{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.series-list a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 0 11px;border-bottom:1px solid var(--hair);font-family:GarBkCond;font-size:21px;line-height:1.05}
.series-list a span{font-family:Cour,monospace;font-size:13px}
.series-list a:hover{color:var(--red)}

/* work with us */
.wh{font-family:GarBkCond;font-size:27px;line-height:1.05;margin-top:14px}
.wp{font-size:16px;line-height:1.45;color:var(--sub);margin-top:8px}
.wl{list-style:none;margin-top:6px}
.wl li{padding:12px 0 11px;border-bottom:1px solid var(--hair)}
.wl strong{display:block;font-family:GarBkCond;font-weight:400;font-size:21px;line-height:1.05}
.wl span{display:block;font-size:15px;line-height:1.4;color:var(--grey);margin-top:3px}
.work .row{border-bottom-color:var(--ink)}

/* in the workshop */
.shop div:not(.lab){display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0 12px;border-bottom:1px solid var(--hair)}
.shop strong{font-family:GarBkCond;font-weight:400;font-size:23px;line-height:1.05}
.shop .mono{color:var(--grey);font-size:11px;white-space:nowrap}

footer{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:9px;border-top:3px double var(--ink);color:var(--grey)}
footer .mono{font-size:11px}

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