/*
Theme Name: I Hated Black And White Movies
Theme URI: https://ihatedblackandwhitemovies.com
Author: ihatedblackandwhitemovies
Description: A screening-room theme for a film-review blog. The interface is black and white; the only colour comes from the film stills, which sit in grayscale and turn to colour on hover. Each post is one review, read straight from its title, featured image, categories, and content. Film-strip sprockets and a single grease-pencil red mark carry the contact-sheet idea.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ihbwm
*/

:root{
  --bg:#121211;
  --bg-2:#1a1917;
  --ink:#ededea;
  --ink-dim:#9b9a93;
  --mute:#6f6e68;
  --line:rgba(237,237,234,.13);
  --line-soft:rgba(237,237,234,.07);
  --spot:#cf3b2b;            /* the one grease-pencil mark */
  --film:#000;
  --hole:#9b9a93;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;position:relative;z-index:1;}

a{color:inherit;}
.eyebrow,.meta,.label,nav a,.cat-line{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.13em;}

/* film strip of sprocket holes */
.filmstrip{height:20px;background:var(--film) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Crect width='40' height='20' fill='black'/%3E%3Crect x='9' y='5' width='22' height='10' rx='2.5' fill='%239b9a93'/%3E%3C/svg%3E") repeat-x center/40px 20px;}

/* masthead */
header.masthead{background:rgba(18,18,17,.86);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 30px;}
.brand{text-decoration:none;display:flex;align-items:center;gap:14px;}
.brand .reel{width:30px;height:30px;flex:0 0 auto;border:1.5px solid var(--ink);border-radius:50%;position:relative;}
.brand .reel::before,.brand .reel::after{content:"";position:absolute;inset:0;margin:auto;}
.brand .reel::before{width:7px;height:7px;border-radius:50%;background:var(--ink);}
.brand .reel::after{width:18px;height:18px;border:1.5px solid var(--line);border-radius:50%;}
.brand .name{font-family:"DM Serif Display",serif;font-size:23px;line-height:1.05;color:var(--ink);max-width:30ch;}
.brand .tag{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--mute);margin-top:3px;}
nav{display:flex;align-items:center;gap:22px;}
nav ul.menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center;}
nav a{color:var(--ink-dim);text-decoration:none;font-size:12px;font-weight:500;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;}
nav a:hover,nav a:focus-visible{color:var(--ink);border-color:var(--spot);}
.search-toggle{background:none;border:none;color:var(--mute);font-size:18px;cursor:pointer;line-height:1;}
.search-toggle:hover{color:var(--ink);}
.search-panel{border-top:1px solid var(--line);background:var(--bg-2);}
.search-panel .wrap{padding:14px 30px;}
.search-panel label{display:none;}
.search-panel input[type=search]{background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:10px 12px;width:100%;max-width:440px;font-family:"Archivo",sans-serif;font-size:16px;}
.search-panel input[type=submit]{display:none;}
.nav-toggle{display:none;}

/* generic frame: a still bordered by two sprocket strips */
.frame{position:relative;background:var(--film);}
.frame .filmstrip{display:block;}
.frame .still{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.06) brightness(.9);transition:filter .55s ease;}
@media(hover:hover){.frame:hover .still{filter:none;}}
@media(hover:none){.frame .still{filter:none;}}
.frame .mark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* hero */
.hero{padding:56px 0 60px;}
.hero .wrap{max-width:980px;}
.hero .eyebrow{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--spot);margin-bottom:20px;}
.hero .eyebrow .date{color:var(--mute);}
.hero .frame{margin-bottom:30px;box-shadow:0 30px 60px -30px #000;}
.title{font-family:"DM Serif Display",serif;font-weight:400;color:var(--ink);letter-spacing:.005em;}
.hero .title{font-size:clamp(34px,5.4vw,60px);line-height:1.04;margin:0 0 18px;}
.meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--mute);}
.meta .year{color:var(--ink);border:1px solid var(--line);padding:3px 9px;letter-spacing:.14em;}
.meta a{color:var(--mute);text-decoration:none;}
.meta a:hover{color:var(--ink);}
.meta .sep{color:var(--line);}
.hero .excerpt{font-size:20px;line-height:1.6;color:var(--ink-dim);margin:24px 0 0;max-width:62ch;}
.hero .excerpt p{margin:0;}
.read{display:inline-block;margin-top:22px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--spot);padding-bottom:3px;}
.read:hover{color:var(--spot);}

/* contact sheet grid */
.sheet{border-top:1px solid var(--line);padding:54px 0 30px;}
.sheet-head{display:flex;align-items:center;gap:16px;margin-bottom:30px;}
.sheet-head h2{font-family:"DM Serif Display",serif;font-weight:400;font-size:clamp(24px,3.4vw,34px);margin:0;color:var(--ink);}
.sheet-head .filmstrip{flex:1;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.card .frame{margin-bottom:14px;}
.card .frame .filmstrip{height:14px;background-size:28px 14px;}
.card .num{font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.16em;color:var(--mute);position:absolute;top:18px;left:8px;z-index:2;background:rgba(0,0,0,.55);padding:1px 6px;}
.card .card-title{font-family:"DM Serif Display",serif;font-size:21px;line-height:1.12;color:var(--ink);margin:0 0 8px;transition:color .15s;}
.card:hover .card-title{color:var(--spot);}
.card .meta{font-size:11px;}
.empty{color:var(--mute);}

/* single review */
.review{padding:48px 0 10px;}
.review .wrap{max-width:760px;}
.review .eyebrow{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--spot);margin-bottom:18px;}
.review .eyebrow .date{color:var(--mute);}
.review .frame{margin:0 0 26px;}
.review .frame .still{filter:none;}
.review .title{font-size:clamp(30px,4.6vw,50px);line-height:1.05;margin:0 0 16px;}
.review .meta{margin-bottom:34px;}
.prose{font-size:19px;line-height:1.72;color:var(--ink);}
.prose p{margin:0 0 1.2em;}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--spot);text-underline-offset:3px;}
.prose img{display:block;max-width:100%;height:auto;margin:0 auto;}
.prose figure{margin:1.7em auto;text-align:center;}
.prose figure img,.prose .wp-caption img{margin:0 auto;}
.prose .wp-caption{width:auto !important;max-width:100%;}
.prose figcaption,
.prose .wp-element-caption,
.prose .wp-caption-text{display:block;text-align:center;margin:9px auto 0;font-family:"Archivo",sans-serif;font-style:normal;font-size:13px;line-height:1.5;color:var(--ink-dim);max-width:62ch;}
.prose figcaption small,
.prose .wp-element-caption small,
.prose .wp-caption-text small{font-size:1em;}
.prose h2,.prose h3{font-family:"DM Serif Display",serif;font-weight:400;color:var(--ink);}
.prose blockquote{margin:1.4em 0;padding-left:18px;border-left:2px solid var(--spot);color:var(--ink-dim);font-style:italic;}
/* references: everything after a separator reads as a greyed footnote block */
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0;height:0;}
.prose hr ~ *{font-size:14px;line-height:1.6;color:var(--ink-dim);}
.prose hr ~ * a{color:var(--ink-dim);text-decoration-color:var(--line);}

.postnav{border-top:1px solid var(--line);margin-top:46px;padding:24px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:11px;}
.postnav a{color:var(--ink-dim);text-decoration:none;}
.postnav a:hover{color:var(--spot);}
.postnav .back a{color:var(--mute);}

/* pages */
.page-wrap{padding:48px 0 10px;}
.page-wrap .wrap{max-width:820px;}
.page-head{display:flex;align-items:center;gap:16px;margin-bottom:26px;}
.page-head h1{font-family:"DM Serif Display",serif;font-weight:400;font-size:clamp(28px,4vw,42px);margin:0;color:var(--ink);}
.page-head .filmstrip{flex:1;}
.prose .wp-block-table{overflow-x:auto;margin:16px 0;}
.prose table{width:100%;border-collapse:collapse;margin:8px 0;font-size:15px;background:transparent;}
/* author tables are often coloured for a light theme; neutralise on dark */
.prose .wp-block-table table,
.prose table[style*="background"]{background:transparent !important;}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink) !important;}
.prose th{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--mute) !important;font-weight:500;}
.prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:var(--bg-2) !important;}
.prose .wp-block-table tbody tr:hover{background:rgba(237,237,234,.05);}
.prose td a{text-decoration:none;border-bottom:1px solid var(--spot);color:var(--ink);}
.prose td a:hover{color:var(--spot);}
.prose .wp-block-table img{width:96px !important;max-width:96px;height:auto;display:block;border:1px solid var(--line);filter:grayscale(1) contrast(1.05) brightness(.95);transition:filter .4s ease;}
.prose .wp-block-table tbody tr:hover img{filter:none;}
@media(min-width:640px){.prose .wp-block-table table{min-width:680px;}}

/* comments */
.comments{max-width:760px;border-top:1px solid var(--line);margin-top:10px;padding:34px 0;}
.comments-title{font-family:"DM Serif Display",serif;font-weight:400;font-size:24px;color:var(--ink);}
.commentlist{list-style:none;padding:0;}
.commentlist .comment{border-top:1px solid var(--line-soft);padding:16px 0;}
.comment-form label{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:var(--mute);margin-bottom:4px;}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);padding:10px;margin-bottom:14px;font-family:"Archivo",sans-serif;font-size:16px;}
.comment-form .submit{width:auto;background:var(--spot);color:#fff;border:none;padding:11px 22px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:12px;cursor:pointer;}

/* pagination */
.navigation.pagination{margin-top:30px;}
.nav-links{display:flex;gap:12px;flex-wrap:wrap;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:11px;}
.nav-links a,.nav-links span{color:var(--ink-dim);text-decoration:none;border:1px solid var(--line);padding:7px 11px;}
.nav-links a:hover{color:var(--ink);border-color:var(--spot);}
.nav-links .current{color:var(--spot);border-color:var(--spot);}

/* footer */
footer{border-top:1px solid var(--line);margin-top:56px;padding:42px 0 58px;}
footer .filmstrip{margin-bottom:30px;}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
footer .name{font-family:"DM Serif Display",serif;font-size:22px;color:var(--ink);max-width:30ch;}
footer .tag{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--mute);margin-top:6px;}
footer .colophon{font-size:14px;color:var(--mute);max-width:34ch;text-align:right;}

/* load motion */
.fade{opacity:0;transform:translateY(10px);animation:rise .8s ease forwards;}
.fade.d1{animation-delay:.08s;}.fade.d2{animation-delay:.2s;}
@keyframes rise{to{opacity:1;transform:none;}}

@media(max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr;}
  nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);}
  nav.open{display:flex;}
  nav ul.menu{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  nav a{display:block;padding:14px 30px;border-bottom:1px solid var(--line-soft);}
  .search-toggle{padding:14px 30px;text-align:left;border-bottom:1px solid var(--line-soft);}
  .nav-toggle{display:inline-flex;background:none;border:1px solid var(--line);color:var(--ink-dim);font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:11px;padding:8px 12px;cursor:pointer;}
  footer .colophon{text-align:left;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
  .fade{opacity:1;transform:none;}
}