/* ============================================
   Serious Fun — shared styles
   Palette is set per-page via CSS variables:
   --c1..--c4  band colours
   --text      body text colour
   --accent    pullquotes, buttons
   ============================================ */

:root{
  --paper:#FFF2D4;
  --seam:32px;
  --gutter:56px;
  --pad:64px;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--text);
  font-family:'EB Garamond', Georgia, serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;}

/* ---------- band system ---------- */
.band{position:relative; margin-top:calc(-1 * var(--seam));}
.band:first-of-type{margin-top:0;}
.seam{
  position:absolute; top:0; left:0;
  width:100%; height:var(--seam);
  display:block; z-index:1;
}
.inner{
  position:relative; z-index:2;
  max-width:1240px; margin:0 auto;
  padding:calc(var(--seam) + var(--pad)) var(--gutter) var(--pad);
}
.b1{background:var(--c1);}
.b2{background:var(--c2);}
.b3{background:var(--c3);}
.b4{background:var(--c4);}

/* ---------- type ---------- */
.eyebrow{
  font-size:1.05rem; letter-spacing:0.04em;
  margin:0 0 10px; color:var(--accent);
  display:flex; align-items:center; gap:0.42em;
  flex-wrap:wrap;
}
/* wordmark = "Serious Fun" + mark, kept together */
.eyebrow .wordmark{
  display:inline-flex; align-items:center; gap:0.42em;
  margin-right:1.4em;
}
.eyebrow .wordmark.solo{margin-right:0;}
/* logo mark — inherits the colour of surrounding text via currentColor */
.mark{
  height:1.15em; width:auto; flex:none;
  display:inline-block; vertical-align:-0.14em;
  overflow:visible;
}
footer .mark{height:1.05em;}
h1{
  font-weight:500; font-style:italic;
  font-size:clamp(2.2rem, 6.4vw, 4.2rem);
  line-height:1.06; letter-spacing:-0.015em;
  margin:0; color:var(--headline, var(--accent));
}
.lead{
  font-size:clamp(1.15rem, 2.3vw, 1.5rem);
  line-height:1.5; margin:0 0 20px; max-width:38ch;
}
/* short intro lines that should run the full width of the band */
.lead.wide{max-width:none;}
p{
  font-size:clamp(1.02rem, 1.7vw, 1.16rem);
  line-height:1.7; margin:0 0 20px; max-width:52ch;
}

/* ---------- landing: project entries ---------- */
/* default = photo left; .flip = photo right. DOM order matches. */
.entry{
  display:grid;
  grid-template-columns:minmax(0,390px) minmax(0,1fr);
  gap:clamp(28px, 4.5vw, 56px);
  align-items:center;
}
.entry.flip{grid-template-columns:minmax(0,1fr) minmax(0,390px);}
.shot{margin:0;}
.shot img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block;}
.shot img.low{object-position:center 64%;}
.entry h2{
  font-weight:500; font-style:italic;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  line-height:1.1; margin:0 0 14px;
}
.entry p{margin-bottom:20px; max-width:46ch;}
.go{
  display:inline-block;
  font-size:1.06rem; font-style:italic;
  color:var(--text); text-decoration:none;
  border-bottom:1px solid currentColor; opacity:0.85;
  padding-bottom:2px;
}
.go:hover{opacity:1;}

/* ---------- landing: bio ---------- */
.bio{
  display:grid;
  grid-template-columns:minmax(0,0.7fr) minmax(0,1.3fr);
  gap:clamp(28px, 5vw, 60px);
  align-items:start;
}
.bio img{width:100%; max-width:300px; aspect-ratio:3/4; object-fit:cover; display:block;}
.bio h2{
  font-weight:500; font-style:italic;
  font-size:clamp(1.7rem, 3.4vw, 2.4rem);
  margin:0 0 16px;
}

/* ---------- project pages: hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:clamp(28px, 4.5vw, 56px);
  align-items:center;
}

/* ---------- project pages: split rows ---------- */
/* default = photo left; .flip = photo right. DOM order matches. */
.split{
  display:grid;
  grid-template-columns:minmax(0,370px) minmax(0,1fr);
  gap:clamp(28px, 4.5vw, 56px);
  align-items:center;
}
.split.flip{grid-template-columns:minmax(0,1fr) minmax(0,370px);}
.split .text{max-width:52ch;}

/* ---------- pullquotes ---------- */
.pull{
  font-style:italic; font-weight:600;
  font-size:clamp(1.9rem, 4.4vw, 3rem);
  line-height:1.12; color:var(--accent);
  margin:26px 0 6px; max-width:none;
}

/* ---------- buttons ---------- */
.buttons{display:flex; gap:16px; margin:30px 0 4px; flex-wrap:wrap;}
.btn{
  position:relative; display:inline-flex;
  align-items:center; justify-content:center;
  padding:16px 34px; text-decoration:none;
  min-width:190px;
}
.btn svg{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block;}
.btn span{
  position:relative; z-index:1;
  color:var(--btn-text); font-weight:600;
  font-size:1.1rem; letter-spacing:0.01em;
}
.btn:hover span{opacity:0.82;}

/* ---------- contents grid ---------- */
h2.section{
  font-weight:500; font-style:italic;
  font-size:clamp(1.8rem, 3.6vw, 2.5rem);
  margin:0 0 10px;
}
.items{
  display:grid; grid-template-columns:1fr 1fr;
  gap:38px 56px; margin-top:38px;
}
.item h3{
  font-weight:600; font-style:italic;
  font-size:1.3rem; margin:0 0 8px;
}
.item p{font-size:1.04rem; line-height:1.65; margin:0; max-width:46ch;}
.item img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  display:block; margin-bottom:16px; max-width:260px;
}

/* ---------- footer (cream everywhere) ---------- */
footer{background:var(--paper); padding:30px var(--gutter) 42px; color:#000;}
.footinner{
  max-width:1240px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
}
footer a{color:#000; text-decoration:none; font-size:1.02rem;}
footer a:hover{text-decoration:underline;}
footer .home{display:inline-flex; align-items:center; gap:0.42em;}
footer .home:hover{text-decoration:none;}
footer .home:hover span{text-decoration:underline;}
.welcome{position:relative;}
/* Only on devices with a real pointer — on touch screens :hover latches on tap,
   which would leave the tooltip stuck open. */
@media (hover:hover) and (pointer:fine){
  .welcome::after{
    content:"pun intended";
    position:absolute; bottom:145%; right:0;
    background:#F55EFF; color:#000;
    font-style:italic; font-size:0.84rem;
    padding:5px 11px; white-space:nowrap;
    opacity:0; pointer-events:none;
    transition:opacity 0.18s ease;
  }
  .welcome:hover::after{opacity:1;}
}

/* inline links inside body copy */
.bio a, .text a, p a{
  color:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.bio a:hover, .text a:hover, p a:hover{color:var(--accent);}

/* ---------- mobile ---------- */
@media (max-width:760px){
  :root{ --seam:18px; --gutter:24px; --pad:44px; }
  .entry, .entry.flip, .bio, .hero, .split, .split.flip, .items{ grid-template-columns:1fr; }
  /* flipped rows are text-first in the DOM; on mobile put the photo on top */
  .entry.flip .shot, .split.flip .shot, .hero .shot{ order:-1; }
  .shot img{ aspect-ratio:1/1; }
  .bio img{ max-width:260px; aspect-ratio:1/1; }
  .item img{ max-width:none; aspect-ratio:1/1; }
  .lead, p, .split .text, .item p{ max-width:none; }
  .items{ gap:34px; }
  .btn{ min-width:0; flex:1 1 100%; }
}