:root {
  --sm-a: 244, 213, 122;
  --sm-b: 250, 235, 194;
  --sm-c: 232, 172, 104;
}

body.page-template-page-silly-mare { background: rgb(var(--sm-a)); }
body.sl-silly-modal-open { overflow: hidden; }

.sl-silly {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: clip;
  background: transparent;
}

.sl-silly__wash {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 135vw 110vw at 16% 28%, rgba(255,255,252,.98) 0%, rgba(255,255,252,.86) 28%, rgba(255,255,252,.55) 52%, rgba(255,255,252,.18) 72%, transparent 91%),
    radial-gradient(ellipse 115vw 90vw at 90% 10%, rgba(var(--sm-c), .18) 0%, rgba(var(--sm-c), .10) 44%, transparent 80%),
    radial-gradient(ellipse 120vw 100vw at 72% 94%, rgba(var(--sm-b), .22) 0%, rgba(255,255,255,.12) 50%, transparent 82%),
    linear-gradient(124deg, rgba(255,255,255,.28), rgba(var(--sm-a), .72));
}

.sl-silly__wash::after {
  content:"";
  position:absolute;
  inset:-6%;
  background:
    radial-gradient(ellipse 88vw 70vw at 27% 43%, rgba(255,255,255,.38), transparent 78%),
    linear-gradient(110deg, rgba(255,255,255,.12), transparent 46%, rgba(255,255,255,.05));
  filter: blur(28px);
}

.sl-silly-nav {
  position: relative;
  z-index: 40;
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding: 0 3.2vw;
  border-bottom: 1px solid rgba(0,0,0,.13);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.sl-silly-nav__brand { font-size:15px; letter-spacing:-.02em; }
.sl-silly-nav__links { display:flex; align-items:center; gap:clamp(18px,2.3vw,42px); font-size:14px; }
.sl-silly-nav__links a { position:relative; padding:8px 0; }
.sl-silly-nav__links a::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:currentColor; transition:right .25s ease; }
.sl-silly-nav__links a:hover::after,
.sl-silly-nav__links a.is-current::after { right:0; }

.sl-silly-kicker { font-size:10px; letter-spacing:.15em; text-transform:uppercase; }

.sl-silly-demo { padding: clamp(54px,6vw,100px) 3.2vw 0; }
.sl-silly-demo__heading {
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(280px, .72fr);
  gap:8vw;
  align-items:end;
  margin-bottom: clamp(28px,4vw,56px);
}
.sl-silly-demo__heading h1 { margin:14px 0 0; font-size:clamp(82px,12vw,210px); line-height:.76; letter-spacing:-.075em; font-weight:600; }
.sl-silly-demo__heading p { max-width:620px; margin:0 0 8px; font-size:clamp(15px,1.25vw,22px); line-height:1.3; letter-spacing:-.025em; }

.sl-browser {
  position:relative;
  width:100%;
  height:min(82vh,900px);
  min-height:620px;
  background:#f2f2ef;
  border:1px solid rgba(0,0,0,.2);
  border-radius:24px 24px 0 0;
  overflow:hidden;
  box-shadow:0 28px 100px rgba(40,15,0,.13);
}
.sl-browser__bar { height:46px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 16px; border-bottom:1px solid rgba(0,0,0,.12); background:rgba(245,245,242,.93); font-size:11px; }
.sl-browser__dots { display:flex; gap:6px; }
.sl-browser__dots i { width:8px; height:8px; border-radius:999px; background:rgba(0,0,0,.18); }
.sl-browser__bar > span { opacity:.62; }
.sl-browser__bar > a { justify-self:end; border-bottom:1px solid rgba(0,0,0,.45); }
.sl-browser__frame { width:100%; height:calc(100% - 46px); border:0; background:#fff; display:block; }
.sl-browser__fallback { position:absolute; left:18px; bottom:18px; max-width:440px; padding:12px 14px; display:none; gap:6px; background:rgba(255,255,255,.90); border:1px solid rgba(0,0,0,.12); backdrop-filter:blur(18px); font-size:11px; line-height:1.3; }
.sl-browser.is-blocked .sl-browser__fallback { display:grid; }

.sl-silly-archive {
  position:relative;
  z-index:4;
  margin-top:-9vh;
  padding: clamp(92px,11vw,180px) 3.2vw 12vw;
  border-radius:34px 34px 0 0;
  background:rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.45);
  box-shadow:0 -20px 80px rgba(60,25,0,.05);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.sl-silly-archive__intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.85fr); gap:8vw; align-items:end; margin-bottom:6vw; }
.sl-silly-archive__intro h2 { margin:12px 0 0; font-size:clamp(54px,7vw,122px); line-height:.86; letter-spacing:-.065em; font-weight:500; }
.sl-silly-archive__intro p { margin:0; max-width:560px; font-size:15px; line-height:1.45; }

.sl-silly-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,36px); }
.sl-silly-card { min-width:0; }
.sl-silly-card__media { position:relative; width:100%; aspect-ratio:1/1; display:block; border:0; padding:0; background:rgba(248,246,238,.46); overflow:hidden; box-shadow:0 18px 55px rgba(44,16,0,.06); cursor:zoom-in; }
.sl-silly-card__media:disabled { cursor:default; }
.sl-silly-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.75,.25,1); }
.sl-silly-card.has-image:hover img { transform:scale(1.025); }
.sl-silly-card__placeholder { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px; color:rgba(0,0,0,.46); background:radial-gradient(circle at 28% 23%, rgba(255,255,255,.82), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.35), rgba(0,0,0,.03)); }
.sl-silly-card__placeholder small { font-size:9px; letter-spacing:.14em; }
.sl-silly-card__placeholder strong { align-self:flex-end; font-size:clamp(58px,7vw,112px); font-weight:500; line-height:.8; letter-spacing:-.08em; }
.sl-silly-card__caption { padding:12px 2px 4px; display:grid; grid-template-columns:28px 1fr; gap:8px 10px; }
.sl-silly-card__caption > span { grid-row:1 / span 3; padding-top:4px; font-size:9px; letter-spacing:.12em; }
.sl-silly-card__caption h3 { margin:0; font-size:16px; letter-spacing:-.04em; }
.sl-silly-card__caption p { margin:3px 0 0; font-size:10px; line-height:1.35; max-width:330px; opacity:.72; }
.sl-silly-disclosure { max-width:940px; margin:6vw 0 0 auto; padding-top:18px; border-top:1px solid rgba(0,0,0,.2); font-size:11px; line-height:1.5; opacity:.72; }

.sl-silly-journal-zone { position:relative; min-height:115vh; padding:12vw 3.2vw 16vw; display:flex; align-items:flex-start; justify-content:space-between; gap:8vw; }
.sl-silly-journal-copy { position:sticky; top:140px; max-width:620px; }
.sl-silly-journal-copy h2 { margin:14px 0 18px; font-size:clamp(64px,9vw,150px); line-height:.79; letter-spacing:-.075em; font-weight:500; }
.sl-silly-journal-copy p { max-width:400px; font-size:14px; line-height:1.45; }

.sl-journal-card {
  position:sticky;
  top:22vh;
  flex:0 0 min(33vw,510px);
  aspect-ratio:3.2/4.2;
  margin-top:22vh;
  padding:40px 34px 32px 54px;
  border:1px solid rgba(0,0,0,.3);
  background:rgba(245,239,220,.82);
  color:#090909;
  box-shadow:-30px 36px 85px rgba(40,10,0,.13);
  text-align:left;
  transform:translateX(42vw) rotate(3deg);
  transition:transform 1.05s cubic-bezier(.16,.8,.22,1), box-shadow .3s ease;
  cursor:pointer;
  overflow:hidden;
}
.sl-journal-card.is-in-view { transform:translateX(0) rotate(-2deg); }
.sl-journal-card:hover { box-shadow:-38px 45px 100px rgba(40,10,0,.18); }
.sl-journal-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, transparent 0 34px, rgba(0,0,0,.07) 35px 36px); opacity:.25; }
.sl-journal-card__binding { position:absolute; left:17px; top:0; bottom:0; width:10px; border-left:1px solid rgba(0,0,0,.25); border-right:1px solid rgba(0,0,0,.12); }
.sl-journal-card__year { position:relative; z-index:2; font-size:11px; letter-spacing:.14em; }
.sl-journal-card strong { position:relative; z-index:2; display:block; margin-top:28%; font-size:clamp(42px,5vw,78px); line-height:.82; letter-spacing:-.07em; font-weight:500; }
.sl-journal-card__open { position:absolute; z-index:2; left:54px; bottom:32px; font-size:11px; letter-spacing:.12em; }

.sl-silly-modal, .sl-journal-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:3vw; background:rgba(20,8,4,.58); backdrop-filter:blur(24px); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.sl-silly-modal.is-open, .sl-journal-modal.is-open { opacity:1; visibility:visible; }
.sl-silly-modal__close, .sl-journal-modal__close { position:absolute; top:24px; right:28px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.14); color:#fff; font-size:28px; cursor:pointer; z-index:3; }
.sl-silly-modal__stage { max-width:min(90vw,1500px); max-height:88vh; display:flex; align-items:center; justify-content:center; }
.sl-silly-modal__stage img { max-width:100%; max-height:88vh; object-fit:contain; box-shadow:0 26px 100px rgba(0,0,0,.28); }

.sl-journal-book { width:min(94vw,1420px); max-height:88vh; min-height:650px; display:grid; grid-template-columns:.72fr 1.28fr; overflow:hidden; background:#eee6d1; box-shadow:0 35px 120px rgba(0,0,0,.35); transform:translateY(26px) scale(.98); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.sl-journal-modal.is-open .sl-journal-book { transform:none; }
.sl-journal-book__cover { padding:70px 52px; border-right:1px solid rgba(0,0,0,.18); background:linear-gradient(145deg, rgba(255,255,255,.52), rgba(206,188,150,.55)); display:flex; flex-direction:column; }
.sl-journal-book__cover > span { font-size:10px; letter-spacing:.15em; }
.sl-journal-book__cover h2 { margin:auto 0 18px; font-size:clamp(58px,7vw,112px); line-height:.78; letter-spacing:-.075em; font-weight:500; }
.sl-journal-book__cover p { margin:0; font-size:13px; }
.sl-journal-book__pages { overflow:auto; padding:58px 50px 90px; background:repeating-linear-gradient(0deg, rgba(255,255,255,.42) 0 34px, rgba(0,0,0,.055) 35px 36px); }
.sl-journal-entry { display:grid; grid-template-columns:42px 1fr; gap:8px 20px; padding:0 0 54px; margin-bottom:48px; border-bottom:1px solid rgba(0,0,0,.22); }
.sl-journal-entry > span { grid-row:1 / span 2; padding-top:7px; font-size:10px; letter-spacing:.12em; }
.sl-journal-entry h3 { margin:0; font-size:clamp(26px,3vw,48px); line-height:.95; letter-spacing:-.055em; font-weight:500; }
.sl-journal-entry > div, .sl-journal-entry > p { grid-column:2; margin:10px 0 0; max-width:720px; font-family:Georgia, 'Times New Roman', serif; font-size:16px; line-height:1.65; }
.sl-journal-entry > div p { margin:.6em 0; }

@media (max-width: 980px) {
  .sl-silly-nav { grid-template-columns:1fr; min-height:auto; padding:18px 22px; gap:14px; }
  .sl-silly-nav__links { overflow-x:auto; gap:22px; padding-bottom:2px; white-space:nowrap; }
  .sl-silly-demo__heading, .sl-silly-archive__intro { grid-template-columns:1fr; gap:28px; }
  .sl-browser { min-height:520px; height:72vh; }
  .sl-silly-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sl-silly-journal-zone { min-height:auto; display:block; }
  .sl-silly-journal-copy { position:relative; top:auto; }
  .sl-journal-card { position:relative; top:auto; width:min(72vw,500px); margin:90px 0 0 auto; }
  .sl-journal-book { grid-template-columns:1fr; max-height:90vh; overflow:auto; }
  .sl-journal-book__cover { min-height:380px; }
  .sl-journal-book__pages { overflow:visible; }
}

@media (max-width: 640px) {
  .sl-silly-demo { padding-left:18px; padding-right:18px; }
  .sl-silly-demo__heading h1 { font-size:clamp(68px,24vw,110px); }
  .sl-browser { min-height:520px; border-radius:18px 18px 0 0; }
  .sl-silly-archive { margin-top:-5vh; padding-left:18px; padding-right:18px; }
  .sl-silly-grid { grid-template-columns:1fr; gap:34px; }
  .sl-silly-journal-zone { padding-left:18px; padding-right:18px; }
  .sl-journal-card { width:88vw; padding-left:46px; }
  .sl-silly-modal, .sl-journal-modal { padding:12px; }
  .sl-journal-book__cover, .sl-journal-book__pages { padding:42px 28px; }
}

/* v0.19 archive usability refinements */
/* Preserve the original proportions of every archive image instead of cropping it. */
.sl-silly-card__media {
  aspect-ratio:auto;
  min-height:220px;
  display:grid;
  place-items:center;
  background:#fff;
}
.sl-silly-card.has-image .sl-silly-card__media {
  min-height:0;
}
.sl-silly-card__media img {
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  background:#fff;
}
.sl-silly-card.has-image:hover img { transform:scale(1.012); }

/* Enlarged archive images always sit on opaque white, even for transparent PNGs. */
.sl-silly-modal__stage {
  width:min(92vw,1500px);
  height:min(90vh,1000px);
  padding:clamp(18px,3vw,46px);
  background:#fff;
  box-shadow:0 26px 100px rgba(0,0,0,.28);
}
.sl-silly-modal__stage img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  background:#fff;
  box-shadow:none;
}

/* The journal itself stays fixed on screen while its page column scrolls. */
.sl-journal-book {
  height:min(88vh,900px);
  max-height:88vh;
  min-height:0;
}
.sl-journal-book__cover,
.sl-journal-book__pages { min-height:0; }
.sl-journal-book__pages {
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.sl-journal-book__pages::-webkit-scrollbar { width:9px; }
.sl-journal-book__pages::-webkit-scrollbar-thumb { background:rgba(0,0,0,.22); border-radius:999px; }

@media (max-width:980px) {
  .sl-journal-book { height:90vh; max-height:90vh; overflow:hidden; }
  .sl-journal-book__cover { min-height:300px; }
  .sl-journal-book__pages { overflow-y:auto; }
}

/* v0.21 — Selected Pieces uses the same natural-ratio, editorial masonry
   rhythm as Portfolio instead of a rigid equal-height grid. */
.sl-silly-grid {
  display:block;
  columns:3;
  column-gap:clamp(14px,1.8vw,30px);
}
.sl-silly-card {
  position:relative;
  display:inline-block;
  width:100%;
  margin:0 0 clamp(14px,1.8vw,30px);
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  vertical-align:top;
}
.sl-silly-card__media,
.sl-silly-card.has-image .sl-silly-card__media {
  width:100%;
  min-height:0;
  aspect-ratio:auto;
  overflow:visible;
  display:block;
  background:#fff;
  box-shadow:none;
}
.sl-silly-card__media img {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  background:#fff;
  transform:none;
  box-shadow:0 12px 38px rgba(0,0,0,.05);
  transition:transform .5s cubic-bezier(.2,.75,.25,1), box-shadow .5s ease;
}
.sl-silly-card.has-image:hover .sl-silly-card__media img {
  transform:translateY(-4px) scale(1.008);
  box-shadow:0 20px 48px rgba(0,0,0,.09);
}
.sl-silly-card__caption {
  position:absolute;
  z-index:2;
  left:clamp(8px,1vw,14px);
  right:clamp(8px,1vw,14px);
  bottom:clamp(8px,1vw,14px);
  display:grid;
  grid-template-columns:28px 1fr;
  gap:6px 10px;
  padding:11px 13px 10px;
  background:rgba(250,249,246,.88);
  border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.sl-silly-card__caption > span { grid-row:1 / span 3; padding-top:3px; }
.sl-silly-card__caption h3 { font-size:clamp(15px,1.25vw,21px); line-height:1; }
.sl-silly-card__caption p {
  max-width:100%;
  margin:2px 0 0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:9.5px;
  line-height:1.3;
}
.sl-silly-card.is-placeholder .sl-silly-card__media {
  min-height:280px;
  position:relative;
  overflow:hidden;
}
.sl-silly-card.is-placeholder .sl-silly-card__caption { position:relative; inset:auto; margin-top:8px; }

@media (max-width:980px) {
  .sl-silly-grid { columns:2; }
}
@media (max-width:640px) {
  .sl-silly-grid { columns:1; }
  .sl-silly-card__caption { position:relative; inset:auto; margin-top:-1px; }
}