/* ellierichards.io — shared styles for the Canva-based pages.
   Palette is lifted from Ellie's map artwork; type is Outfit (display) + Poppins (UI). */
:root{
  --ink:#111111;
  --muted:#6b6b6b;
  --paper:#ffffff;
  --green:#37a75c;
  --orange:#f7683b;
  --sage:#a7bf7c;
  --mist:#b8cbd7;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.display{font-family:Outfit,Poppins,system-ui,sans-serif}

/* pin-label lettering: black type with a soft green shadow sitting just down-right, as in the Canva */
.glow{
  font-weight:700;color:var(--ink);
  text-shadow:.08em .08em .05em rgba(55,167,92,.9);
}

/* toast — shared by the copy-email rows */
#toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,8px);
  background:var(--ink);color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.03em;
  padding:.45rem .9rem;border-radius:999px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:40;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- gallery pages ---------- */
.g-head{
  max-width:1180px;margin:0 auto;padding:2.2rem 1.2rem 1.4rem;
  display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
}
.g-head .back{
  text-decoration:none;font-size:.82rem;letter-spacing:.04em;color:var(--muted);
  margin-right:auto;order:-1;flex-basis:100%;
}
.g-head .back:hover{color:var(--ink)}
.g-head h1{margin:0;font-size:2rem;line-height:1;letter-spacing:-.01em}
.g-head .hint{margin:0;font-size:.9rem;color:var(--muted)}

/* a line of plain text between the heading and the grid */
.intro{
  max-width:1180px;margin:0 auto;padding:0 1.2rem 1.5rem;
  font-size:.95rem;line-height:1.5;color:var(--ink);
}

/* ---------- the wall: masonry that reflows when a photo expands ---------- */
.wallwrap{max-width:1180px;margin:0 auto;padding:0 1.2rem 3rem}
.wall{position:relative;width:100%;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.wall.hasfocus{cursor:zoom-out}

.tile{
  position:absolute;top:0;left:0;overflow:hidden;border-radius:6px;
  background:#ececec;cursor:zoom-in;will-change:transform;
  transform-origin:top left;
  /* only transform animates — width/height are set instantly and corrected by the
     FLIP scale, so no frame ever runs layout */
  transition:transform .52s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.wall.noanim .tile{transition:none!important}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile:hover{box-shadow:0 10px 26px -12px rgba(0,0,0,.35)}
.tile:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.tile.hero{cursor:default;z-index:5;box-shadow:0 18px 50px -20px rgba(0,0,0,.4)}
/* the box already matches the photo's ratio, so contain guarantees nothing is cut */
.tile.hero img{object-fit:contain;background:#f5f5f5}

.tile .cap{
  position:absolute;left:0;right:0;bottom:0;display:none;
  padding:1.6rem .9rem .8rem;text-align:center;
  font-size:.85rem;line-height:1.35;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
}
.tile.hero .cap{display:block}

.tile .x{
  position:absolute;top:10px;right:10px;width:32px;height:32px;
  border:0;border-radius:50%;background:rgba(20,20,20,.55);color:#fff;
  display:none;place-items:center;cursor:pointer;padding:0;
}
.tile.hero .x{display:grid}
.tile .x:hover{background:rgba(20,20,20,.8)}
.tile .x svg{width:16px;height:16px;display:block}