/* Tollesbury Arts — artist page styles. Self-hosted fonts, no external requests.
   Single, deliberate cream theme (matches the main site). */

@font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/lora-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/lora-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/lora-500-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/lora-500-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:700; font-display:swap;
  src:url(../fonts/playfairdisplay-700-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:700; font-display:swap;
  src:url(../fonts/playfairdisplay-700-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/playfairdisplay-700-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:800; font-display:swap;
  src:url(../fonts/playfairdisplay-800-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }

:root{
  --paper:#F4EEDE; --ink:#23221F; --soft:#3a3833; --red:#C0352B;
  --muted:#6b665c; --line:#e3dcc9; --white:#fff;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Lora',Georgia,serif; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--red); }

/* header */
.site{
  max-width:820px; margin:0 auto; padding:1.4rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ font-family:'Playfair Display',serif; font-weight:800; font-size:1.15rem; color:var(--ink); text-decoration:none; letter-spacing:.01em; }
.brand em{ font-style:italic; font-weight:700; color:var(--red); }
.back{ font-family:'Lora',serif; font-weight:500; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; color:var(--red); text-decoration:none; }
.back:hover{ text-decoration:underline; }

/* article */
.artist{ max-width:760px; margin:0 auto; padding:1rem 1.25rem 4.5rem; }
.eyebrow{ font-family:'Lora',serif; font-weight:500; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--red); margin:1.2rem 0 .6rem; text-align:center; }
.name{ font-family:'Playfair Display',serif; font-style:italic; font-weight:700; font-size:clamp(2.6rem,9vw,4.4rem); line-height:.98; margin:0; text-align:center; text-wrap:balance; }
.discipline{ font-family:'Lora',serif; font-weight:500; font-size:clamp(1.05rem,2.6vw,1.25rem); color:var(--soft); margin:.7rem 0 0; text-align:center; }
.rule{ width:84px; height:2px; background:var(--red); border:0; margin:1.9rem auto; opacity:.6; }

.lead{ margin:2rem 0 0; }
.lead img{ display:block; width:100%; border-radius:16px; border:1px solid var(--line); }

.bio{ max-width:34rem; margin:2.2rem auto 0; font-size:1.06rem; }
.bio p{ margin:0 0 1rem; }
.bio p:last-child{ margin-bottom:0; }

section.block{ margin:3rem auto 0; }
.block > h2{
  font-family:'Playfair Display',serif; font-weight:800; font-size:clamp(1.3rem,3.4vw,1.7rem);
  margin:0 0 1.1rem; text-align:center;
}
.block > h2 .sub{ display:block; font-family:'Lora',serif; font-weight:400; font-style:normal; font-size:.9rem; color:var(--muted); letter-spacing:0; text-transform:none; margin-top:.35rem; }

/* video */
.frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000; }
.frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.frame .placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  background:var(--white); color:var(--muted); text-align:center; padding:1rem;
  border:2px dashed var(--line);
}
.frame .placeholder strong{ color:var(--soft); font-weight:500; }
.frame .placeholder small{ font-size:.8rem; }

/* gallery */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.shot{ margin:0; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white); cursor:zoom-in; aspect-ratio:1/1; }
.shot img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.shot:hover img{ transform:scale(1.04); }
.shot:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.shot.empty{ display:flex; align-items:center; justify-content:center; cursor:default; border-style:dashed; color:var(--muted); font-size:.82rem; text-align:center; padding:.5rem; }

/* find */
.find{ text-align:center; }
.find p{ max-width:34rem; margin:0 auto; color:var(--soft); }
.links{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.2rem; }
.chip{ font-family:'Lora',serif; font-weight:500; font-size:.85rem; text-decoration:none; color:var(--red); border:1px solid var(--red); border-radius:999px; padding:.5rem 1rem; }
.chip:hover{ background:var(--red); color:#fff; }
.chip.muted{ color:var(--muted); border-color:var(--line); border-style:dashed; }

/* group variant: "when they meet & how to join" panel */
.meets{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:1.7rem 1.8rem; max-width:34rem; margin:2.4rem auto 0; }
.meets h2{ text-align:left; margin:0 0 1.1rem; }
.meets dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.7rem 1.2rem; align-items:baseline; }
.meets dt{ font-family:'Lora',serif; font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--red); }
.meets dd{ margin:0; color:var(--soft); }
.meets dd .todo{ color:var(--muted); font-style:italic; }
.meets .join{ display:inline-block; margin-top:1.5rem; background:var(--red); color:#fff; text-decoration:none;
  font-family:'Lora',serif; font-weight:500; letter-spacing:.02em; padding:.7rem 1.4rem; border-radius:999px; }
.meets .join:hover{ background:#a52a22; }

/* footer */
.foot{ max-width:820px; margin:3.5rem auto 0; padding:2rem 1.25rem; border-top:1px solid var(--line); text-align:center; }
.foot a{ color:var(--red); text-decoration:none; font-weight:500; }
.foot .mk{ font-family:'Playfair Display',serif; font-weight:800; color:var(--ink); font-size:1rem; }
.foot .mk em{ font-style:italic; color:var(--red); }
.foot small{ display:block; margin-top:.6rem; color:var(--muted); font-size:.8rem; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(20,17,12,.9); cursor:zoom-out; }
.lb.open{ display:flex; }
.lb img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:pointer; }
.lb .x{ position:absolute; top:16px; right:18px; background:none; border:0; color:#fff; font-size:2rem; line-height:1; cursor:pointer; opacity:.8; }
.lb .x:hover{ opacity:1; }
.lb .nav{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:66px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); border:0; border-radius:10px; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; opacity:.85; }
.lb .nav:hover{ opacity:1; background:rgba(0,0,0,.55); }
.lb .prev{ left:14px; } .lb .next{ right:14px; }

/* previous / next artist pager */
.pager{ max-width:760px; margin:3rem auto 0; padding:1.6rem 1.25rem 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1.2rem; }
.pager a{ text-decoration:none; max-width:47%; }
.pager .p-next{ text-align:right; margin-left:auto; }
.pager span{ display:block; font-family:'Lora',serif; font-weight:500; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--red); }
.pager strong{ display:block; font-family:'Playfair Display',serif; font-weight:700; font-style:italic; color:var(--ink); font-size:clamp(1rem,3vw,1.2rem); margin-top:.25rem; line-height:1.1; }
.pager a:hover strong{ color:var(--red); }

@media (prefers-reduced-motion:reduce){ .shot img{ transition:none; } }