@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Lora:wght@400;600&display=swap');

/* ---------- Theme ---------- */
:root{
  --red:#b33b3f;
  --cream:#fff8f0;
  --cocoa:#4c3323;
  --stitch:#5a3a27;

  /* Gingham controls */
  --gingham-size:60px;
  --gingham-color: rgba(198,90,30,.30);
  --gingham-light: rgba(198,90,30,.10);

  /* Music strip controls */
  --music-w:360px;   /* strip width: try 320–420 */
  --music-r:10 / 2;  /* aspect ratio: bigger first number = thinner */
}

/* ---------- Page background (chunky orange gingham) ---------- */
body.home{
  margin:0;
  font-family:"Lora", serif;
  color:var(--cocoa);
  background:
    repeating-linear-gradient(90deg,
      var(--gingham-color) 0 calc(var(--gingham-size)/2),
      var(--gingham-light) calc(var(--gingham-size)/2) var(--gingham-size)),
    repeating-linear-gradient(0deg,
      var(--gingham-color) 0 calc(var(--gingham-size)/2),
      var(--gingham-light) calc(var(--gingham-size)/2) var(--gingham-size)),
    var(--cream);
}

/* Global needle cursor (hotspot set near the needle tip) */
body{
  cursor: url('assets/cursor-needle.png') 2 2, auto;  /* adjust hotspot if needed */
}

/* Keep text-caret where appropriate */
input, textarea{
  cursor: text;
}


/* Optional container width used by hero & music */
.wrap{ max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header & Nav ---------- */
header{ text-align:center; padding:18px 0; }
nav a{
  display:inline-block; margin:0 10px; padding:8px 14px;
  color:var(--red); font-weight:700; text-decoration:none;
  border:2px dashed var(--red); border-radius:10px; background:#fff;
  transition: transform .15s ease;
}
nav a:hover{ transform: translateY(-2px) rotate(-1deg); }

/* ---------- Denim Hero (does NOT expand for Spotify) ---------- */
.hero{
  position:relative; overflow:visible;
  margin:60px auto; max-width:min(820px,92vw);
  width:100%;
  padding:40px 32px; text-align:center; border-radius:18px;
  background:#597089 url('assets/denim-buttons.jpg') center/520px auto repeat;
  box-shadow:0 10px 0 rgba(59,42,29,.08), 0 18px 36px rgba(0,0,0,.12);
}
.hero::before{
  content:""; position:absolute; inset:10px; border-radius:12px;
  border:3px dashed var(--stitch);
  box-shadow:inset 0 0 0 2px rgba(255,224,180,.15);
}
.hero h1{
  margin:0;
  font-family:"Amatic SC", system-ui, sans-serif;
  font-weight:400; /* thin look (400 or 700 only for Amatic) */
  font-size:clamp(48px,10vw,110px);
  letter-spacing:2px;
  color:var(--cocoa);
  text-shadow:none;
  transform:translateY(2px);
}






/* ---------- Pins wiggle ---------- */
.pin{
  position:absolute; width:clamp(38px,6vw,64px); height:auto;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.18));
  cursor:pointer; z-index:3;
  transform:var(--t, rotate(0));
}
.pin-left  { left:-18px; top:-14px;  --t: rotate(-6deg); }
.pin-right { right:-22px; top:-22px; --t: rotate( 8deg); }
.pin-low   { right:12px;  bottom:-18px; --t: rotate(-4deg); }
@keyframes wiggle{
  0%{transform:var(--t) translateY(0)}
  20%{transform:var(--t) rotate(-8deg) translateY(-1px)}
  40%{transform:var(--t) rotate(6deg)  translateY(1px)}
  60%{transform:var(--t) rotate(-4deg) translateY(-1px)}
  80%{transform:var(--t) rotate(2deg)  translateY(0)}
  100%{transform:var(--t) translateY(0)}
}
.pin:hover{ animation: wiggle .6s ease-in-out; }

/* ---------- Coffee / Pie spin (accumulates & stays) ---------- */
.pie{
  position:absolute; bottom:-18px; left:-22px;
  width:120px; transform: rotate(var(--pie-angle, 0deg));
  transform-origin:50% 50%; z-index:4;
}
.pie.spin{ animation: pie-spin .6s linear; }
@keyframes pie-spin{
  from{ transform: rotate(var(--pie-angle, 0deg)); }
  to  { transform: rotate(calc(var(--pie-angle, 0deg) + 360deg)); }
}

/* ---------- Lace Bow with gentle sway ---------- */
.lace-bow{
  position:absolute; bottom:-140px; left:50%;
  transform:translateX(-50%); transform-origin:top center;
  width:240px; height:auto; z-index:4;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.15));
}
@keyframes sway{
  0% { transform:translateX(-50%) rotate(0deg); }
  25%{ transform:translateX(-50%) rotate(3deg); }
  50%{ transform:translateX(-50%) rotate(-2.5deg); }
  75%{ transform:translateX(-50%) rotate(2deg); }
  100%{ transform:translateX(-50%) rotate(0deg); }
}
.lace-bow:hover{ animation:sway 3s ease-in-out infinite; }
.lace-bow.leave{ animation:sway 3s ease-in-out 1; }






/* ---------- Music strip (outside hero, edges flush) ---------- */
.music{ margin:0 0 70px; }
.music-box{
  /* Make music line up with hero's right edge:
     Use same max width, then right-align the inner elements. */
  max-width:min(820px,92vw);
  margin:0 auto;
  display:grid;
  justify-items:end;  /* push children to RIGHT edge */
  gap:8px;
}
.music-title{
  width:var(--music-w);
  margin:0;
  text-align:center;
  font-family:"Amatic SC",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(10px,4.8vw,30px);
  color:var(--cocoa);
  justify-self:end;  /* align with patch */
}
.patch-card{
  width:var(--music-w);
  aspect-ratio: var(--music-r);
  background:url('assets/quilt-patch.png') center/cover no-repeat;
  border-radius:14px;
  display:grid; place-items:center;
  padding:6px;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.12));
  justify-self:end;  /* RIGHT edge flush with hero */
}
.player{
  width:88%;
  background:rgba(255,255,255,.94);
  border-radius:10px;
  padding:4px;
  box-shadow:0 4px 0 rgba(0,0,0,.08);
}
.player iframe{
  display:block; width:100%; height:64px; border-radius:8px;
}

/* Smaller strip on tiny screens so it never hits the bow */
@media (max-width:520px){
  :root{ --music-w:320px; }
}

/* Utility (if you use visually hidden headings) */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* keep clear of the bow on tiny screens */
@media (max-width: 520px){
  :root{ --frame-w: 320px; --frame-nudge: 6px; }
}







/* --- FEATURED FRAME (left-aligned under hero) --- */
:root{
  --frame-w: 100px;     /* width of the card: 320–420 is nice */
  --frame-r: 4 / 5;     /* portrait window; use 1 / 1 for square */
  --frame-nudge: 10px;  /* nudges right to visually line with hero inset */
}

/* sits under hero in the same frame */
.feature{ margin: 8px 0 56px; }

.feature-box{
  max-width: min(820px, 92vw);
  margin: 0 auto;
  display: grid;
  justify-items: start;            /* flush LEFT like the hero */
  gap: 8px;
  transform: translateX(var(--frame-nudge));
}

/* matches your heading font */
.feature-title{
  width: var(--frame-w);
  margin: 0;
  text-align: center;
  font-family: "Amatic SC", system-ui, sans-serif;
  font-weight: 400; /* thin */
  font-size: clamp(26px, 4.8vw, 40px);
  color: var(--cocoa);
}

/* Outer frame: shows even if PNG missing (border fallback) */
.frame-card{
  display: grid;
  place-items: center;
  width: var(--frame-w);
  aspect-ratio: var(--frame-r);
  background: url('assets/patchwork-frame.png') center/contain no-repeat;
  text-decoration: none;
  border-radius: 14px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.12));
  transition: transform .08s ease;
  /* fallback so you SEE something even if PNG path is wrong */
  background-color: #fff3e6; 
  border: 4px dashed var(--stitch);
}
.frame-card:hover{ transform: translateY(-2px) rotate(-.4deg); }

/* inner “glass/mat” window that constrains the image */
.art-window{
  width: 82%;
  height: 82%;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
  overflow: hidden;
  display: grid; place-items: center;
}

/* artwork scales nicely (change to 'contain' for no crop) */
.art-window img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== Fix: gallery grid image sizing ===== */
.gallery.quilt{
  background: rgba(255,255,255,.92);
  border: 4px dashed var(--stitch);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 0 rgba(0,0,0,.08);
  margin: 30px 0 80px;
}
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 12px;
}
.card{
  margin:0; background:#fff; border-radius:12px; overflow:hidden;
  border:2px solid #caa; box-shadow:0 4px 0 rgba(0,0,0,.07);
}
.card img{
  width:100%;
  height:180px;          /* <- this keeps them from going huge */
  object-fit:cover;      /* use 'contain' if you don’t want crop */
  display:block;
}
.card figcaption{
  padding:8px 10px; font-size:14px; color:#563;
  display:flex; flex-direction:column; gap:2px;
}
.card figcaption strong{ color:var(--cocoa); }



/* Gallery grid sizing */
.gallery.quilt{
  background: rgba(255,255,255,.92);
  border: 4px dashed var(--stitch);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 0 rgba(0,0,0,.08);
  margin: 30px 0 80px;
}
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 12px;
}
.card{
  margin:0; background:#fff; border-radius:12px; overflow:hidden;
  border:2px solid #caa; box-shadow:0 4px 0 rgba(0,0,0,.07);
}
.card img{
  width:100%;
  height:160px;       /* <<< this prevents full-page blow-up */
  object-fit:cover;   /* change to 'contain' if you hate cropping */
  display:block;
}
.card figcaption{
  padding:8px 10px; font-size:14px; color:#563;
  display:flex; flex-direction:column; gap:2px;
}
.card figcaption strong{ color:var(--cocoa); }










/* ========== Needle cursor ========== */
/* hotspot (x y) is where the “click point” is on the image */
:root{
  --needle-x: 2;   /* tweak if click feels offset */
  --needle-y: 2;
}

/* default needle everywhere */
html, body {
  cursor: url('assets/cursor-needle.png') var(--needle-x) var(--needle-y), auto;
}

/* keep I-beam in editable fields */
input, textarea, select, [contenteditable="true"] {
  cursor: text !important;
}

/* clickable things: use needle + pointer fallback */
a, button, [role="button"], nav a, .pin, .lace-bow, .player {
  cursor: url('assets/cursor-needle.png') var(--needle-x) var(--needle-y), pointer;
}

/* cute tilt on hover */
a:hover, button:hover, [role="button"]:hover, nav a:hover,
.pin:hover, .lace-bow:hover {
  cursor: url('assets/cursor-needle-tilt.png') var(--needle-x) var(--needle-y), pointer;
}






/* ==== TEST MODE: force the needle cursor everywhere ==== */
:root{ --needle-x: 2; --needle-y: 2; }

* {
  cursor: url('assets/cursor-needle.png') var(--needle-x) var(--needle-y), auto !important;
}

/* keep I-beam where you type */
input, textarea, select, [contenteditable="true"] {
  cursor: text !important;
}

/* tilt variant on obvious click targets */
a:hover, button:hover, [role="button"]:hover, nav a:hover,
.pin:hover, .lace-bow:hover {
  cursor: url('assets/cursor-needle-tilt.png') var(--needle-x) var(--needle-y), pointer !important;
}





/* ===== Fix: force framed image to fit the frame ===== */

/* Make sure the frame has a real height even on older browsers */
.frame-card{
  width: var(--frame-w, 360px);
  aspect-ratio: var(--frame-r, 4 / 5);
}
@supports not (aspect-ratio: 1){
  /* 4/5 = 1.25 × width */
  .frame-card{ height: calc(var(--frame-w, 360px) * 1.25); }
}

/* The inner window defines the visible area */
.art-window{
  width: 82%;
  height: 82%;
  overflow: hidden;
  border-radius: 10px;
}

/* HARD CLAMP the featured image */
#latestArt{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* use 'contain' if you prefer no crop */
  display: block;
}

/* Safety net in case the image isn’t inside .art-window by mistake */
.feature img:not(.lace-bow):not(.pin):not(.pie){
  max-width: 100%;
  height: auto;
}