/* ---------------------------------------------------------------------------
   edifitzroy.com — riddimBank's black house style, tuned for a memorial and an
   archive rather than a promo page. Self-contained: no shared stylesheet, no
   shared nav, nothing tying this page's fate to the riddimbank.com build.

   The accent here is gold rather than reggae green. This is a page about
   someone who died; green reads as a store front.
   --------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0A0A0A; --panel:#141414; --line:#262626;
  --ink:#ffffff; --soft:#C8C8C8; --dim:#8f8f8f;
  --gold:#E8A317; --green:#1DB954;
}
body{
  background:var(--bg); color:var(--ink); line-height:1.65;
  font-family:HelveticaNeue,Arial,'Open Sans','Helvetica Neue',Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
a{color:var(--gold)}
h1,h2,h3,.wordmark{font-family:'Archivo Black',sans-serif;font-weight:400;font-synthesis:none;line-height:1.2}

.hero{border-bottom:1px solid var(--line);padding:30px 20px 24px;text-align:center;background:#0d0d0d}
.hero-logo{width:280px;max-width:72%;height:auto}
.wordmark{font-size:clamp(1.7rem,6vw,2.4rem)}
.dates{color:var(--dim);margin-top:10px;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase}

/* Full-bleed banner, cropped to a band.

   The source file is 1713x1201 — nearly square. Simvoly showed it as a wide
   parallax strip, and that crop is the one Joe wants, so object-fit:cover with
   a wide aspect ratio reproduces it. object-position is left at the default
   centre because that is exactly what a CSS background does, and matching it
   is the whole point.

   The height is a real constraint, not a preference. At 2000px wide the file
   scales to about 1400px tall, and Edi's head runs roughly 600 of those. Cap
   the band at 380px and you are showing a 380px slice of a 600px face — it cuts
   across his eyes, whatever object-position does, because no 380px window
   contains a 600px head. Simvoly showed about 760px of it, which is why the
   whole head fitted there. 540 is the compromise: the face is whole, and it is
   still a third shorter than the 857px this was before the cap existed.

   object-position sits above centre so the crop takes forehead-to-chin rather
   than eyebrows-to-neck. */
.banner{
  display:block;width:100%;height:auto;
  aspect-ratio:2.6/1;max-height:min(52vh,540px);object-fit:cover;
  object-position:center 38%;
  background:#111;border-bottom:1px solid var(--line);
}

main{flex:1 0 auto;width:100%;max-width:760px;margin:0 auto;padding:36px 20px 48px}

section{margin-bottom:46px}
h1{font-size:clamp(1.5rem,4.4vw,2rem);margin-bottom:16px;color:var(--ink)}
h2{font-size:1.25rem;color:var(--gold);margin-bottom:12px}
/* Year headings were added to make 2,770 words scannable. They are markers in
   a timeline, not section titles, so they are small and set apart by a rule. */
h3{
  font-size:.9375rem;color:var(--gold);letter-spacing:.12em;
  margin:36px 0 12px;padding-top:14px;border-top:1px solid var(--line);
}
p{color:var(--soft);margin-bottom:16px}
.lede p:first-of-type{font-size:1.0625rem}
.lede strong{color:var(--ink)}
.lede-sm{color:var(--dim);font-size:.9375rem;margin-bottom:20px}
em{color:var(--ink);font-style:italic}

blockquote{
  border-left:3px solid var(--gold);padding:4px 0 4px 20px;margin:26px 0;
}
blockquote p{color:var(--ink);font-size:1.0625rem;margin-bottom:8px}
cite{color:var(--dim);font-style:normal;font-size:.875rem}

/* ---------------------------------------------------------------- video facade
   Twenty real YouTube iframes would be roughly twenty megabytes of player
   JavaScript, plus twenty sets of cookies, on page load. Instead each figure
   holds a thumbnail and a play button; video.js swaps in the iframe only when
   someone actually clicks. The poster comes from i.ytimg.com, which needs no
   API key, and hqdefault always exists (maxresdefault 404s on older uploads). */
.vid{margin:0 0 26px}
.vid-frame{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:10px;background:#000;border:1px solid var(--line);cursor:pointer;
}
.vid-frame img,.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-frame img{object-fit:cover}
.vid-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;border-radius:12px;border:0;cursor:pointer;
  background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.vid-frame:hover .vid-play{background:#cc0000}
.vid-play::after{content:"";border-style:solid;border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent #fff;margin-left:4px}
.vid figcaption{color:var(--dim);font-size:.9375rem;margin-top:9px}
.credit{font-size:.8125rem;color:#6f6f6f}

.poster{margin:0 0 26px}
.poster img{width:100%;max-width:420px;height:auto;border-radius:9px;border:1px solid var(--line);display:block}
.poster figcaption{color:var(--dim);font-size:.9375rem;margin-top:9px}

/* ------------------------------------------------------------------- gallery
   Two views of one list. .album is the default scrolling strip; adding
   .as-grid to the section swaps in the grid instead. Neither view changes the
   section's height as photographs are added, which is the point. */
/* The album sits directly under the banner, before the writing, because at the
   foot of a 2,770-word page nobody was ever going to reach it. It is OUTSIDE
   <main> — not inside it with a full-bleed hack — so it gets the window's full
   width the same way the banner does, and three photographs across becomes
   six or seven. The 100vw trick was avoided on purpose: it overflows by the
   width of the scrollbar and gives the whole page a horizontal wobble.

   Its heading is a small label rather than an <h2>: a full-size green heading
   three lines under the masthead reads as a second masthead, and "Edi Fitzroy
   is a hero to the people of Jamaica" should still be the first real heading
   on the page. */
#photos{
  background:#0d0d0d;border-bottom:1px solid var(--line);
  padding:20px 0 24px;
}
.album-label{
  color:var(--dim);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 12px;padding:0 20px;
}
.album{position:relative}

.strip{
  display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;                /* proximity, not mandatory: a
     free drag through 88 photographs should not fight the browser on every
     frame — it just settles neatly when it stops */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#3a3a3a transparent;
  padding:0 20px 8px;
  /* A fade at the right edge is the affordance that says "there is more this
     way" on a desktop, where the scrollbar is often invisible until you touch
     it. mask, not an overlay, so it never intercepts a click. */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);
}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-track{background:transparent}
.strip::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:4px}
.strip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* height fixed, width free: portrait and landscape shots each sit at their own
   natural proportion instead of being cropped into a common box */
.shot{
  flex:0 0 auto;height:250px;width:auto;padding:0;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:#161616;cursor:pointer;
  scroll-snap-align:start;
}
.shot img{height:250px;width:auto;display:block;transition:opacity .2s ease}
.shot:hover img{opacity:.82}
.shot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.arrow{
  position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:2;
  width:40px;height:66px;border:1px solid var(--line);border-radius:8px;
  background:rgba(10,10,10,.82);color:var(--ink);font-size:30px;line-height:1;
  cursor:pointer;
}
.arrow:hover:not([disabled]){background:rgba(232,163,23,.92);color:#0A0A0A}
.arrow[disabled]{opacity:.25;cursor:default}
.arrow[hidden]{display:none}
.arrow-prev{left:10px} .arrow-next{right:10px}
/* Touch devices swipe the strip directly; the arrows would only be in the way. */
@media (hover:none){ .arrow{display:none} }

.grid{
  display:none;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
  max-width:1500px;margin:0 auto;padding:0 20px;
}
.cell{
  padding:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  background:#161616;cursor:pointer;aspect-ratio:4/3;display:block;
}
.cell img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .2s ease,opacity .2s ease}
.cell:hover img{transform:scale(1.05);opacity:.85}
.cell:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.as-grid .album{display:none}
.as-grid .grid{display:grid}

.more{
  display:block;width:calc(100% - 40px);margin:14px 20px 0;padding:13px 20px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  color:var(--soft);font-size:.9375rem;font-family:inherit;cursor:pointer;
}
.more:hover{border-color:var(--gold);color:var(--gold)}
.more[hidden]{display:none}

.lb{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);
  display:flex;align-items:center;justify-content:center;
}
.lb[hidden]{display:none}
.lb-img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:4px}
.lb-close,.lb-nav{
  position:absolute;background:rgba(255,255,255,.08);color:#fff;border:0;
  cursor:pointer;line-height:1;border-radius:8px;
}
.lb-close{top:14px;right:14px;width:46px;height:46px;font-size:30px}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:76px;font-size:38px}
.lb-prev{left:12px} .lb-next{right:12px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-count{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  color:var(--dim);font-size:.875rem;margin:0}

/* --------------------------------------------------------------------- banks */
.bank{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease,background .15s ease;
}
.bank:hover{border-color:#3d3d3d;background:#181818}
.bank-name{display:block;font-size:1.0625rem;font-weight:600;margin-bottom:4px}
.bank-note{display:block;color:var(--dim);font-size:.875rem}
.bank-row{display:flex;gap:12px;flex-wrap:wrap}
.bank-row .bank{flex:1 1 200px}

/* ---------------------------------------------------------------------- form */
.form{display:flex;flex-direction:column;gap:14px;max-width:520px}
.form label{display:flex;flex-direction:column;gap:6px;color:var(--soft);font-size:.9375rem}
.form input,.form textarea{
  background:#181818;border:1px solid #333;border-radius:8px;color:var(--ink);
  padding:12px 14px;font-size:16px;font-family:inherit;width:100%;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form textarea{resize:vertical;min-height:140px}
/* Genuinely invisible but NOT display:none — some bots skip hidden fields,
   and screen readers are handled by aria-hidden. */
.gotcha{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.btn{
  background:var(--gold);color:#0A0A0A;border:0;border-radius:60px;padding:14px 32px;
  font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;align-self:flex-start;
}
.btn:hover{background:#f5b331}
.btn[disabled]{opacity:.5;cursor:default}
.form-msg{color:var(--dim);font-size:.9375rem;min-height:1.2em}
.form-msg.ok{color:var(--gold)}

footer{
  flex-shrink:0;border-top:1px solid var(--line);padding:22px 20px;text-align:center;
  color:var(--dim);font-size:.875rem;
}
.fine{margin-top:4px;font-size:.8125rem}

@media(max-width:640px){
  main{padding:26px 16px 36px}
  /* A 2.6:1 crop of a face is a letterbox slit on a phone, so the band gets
     squarer as the screen narrows — and shorter, because vertical space is
     scarcer there, not more plentiful. */
  .banner{aspect-ratio:16/9;max-height:34vh}
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
  .shot,.shot img{height:190px}
  .strip{-webkit-mask-image:none;mask-image:none}   /* no fade needed where swipe is obvious */
  .lb-nav{width:40px;height:64px;font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .cell img,.shot img,.vid-play{transition:none}
  .cell:hover img{transform:none}
  .strip{scroll-behavior:auto}
}