/* Presets page — Evol 01 Emulsion.
   Nav, footer, :root tokens, the paper texture and the Morvila @font-face all
   live in style.css already; this file only adds what this page needs.
   Enqueued from functions.php on is_page('presets'). */

/* ---------------- shared layout ---------------- */
  .presets-page .wrap{max-width:860px; margin:0 auto; padding:0 40px;}
.presets-page section{padding:64px 0; border-bottom:1px dashed var(--dash-soft);}
.presets-page section:last-of-type{border-bottom:none;}
.lede{font-size:17px; max-width:60ch;}
.presets-page p + p{margin-top:18px;}
.sec-label{
    font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--muted); margin-bottom:10px;
  }
.presets-page h2{
    font-family:'Kalam',cursive; font-weight:700;
    font-size:clamp(27px,4.6vw,36px); line-height:1.2; margin-bottom:20px;
    text-wrap:balance;
  }
.presets-page h3{font-size:15px; letter-spacing:0.02em; margin-bottom:8px;}
.body{font-size:16px; max-width:64ch;}
.body a{border-bottom:1px solid var(--ink-red); color:var(--ink-red);}
/* ---------------- hero ---------------- */
  .hero{
    text-align:center; padding:76px 20px 64px;
    border-bottom:1px dashed var(--dash-soft);
  }
.hero .kicker{
    font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--muted); margin-bottom:18px;
  }
.hero h1{
    font-family:'Morvila','Kalam',cursive; font-weight:400;
    font-size:clamp(46px,11vw,104px); line-height:1; letter-spacing:0.01em;
    margin-bottom:6px;
  }
.hero .sub{
    font-family:'Kalam',cursive; font-size:clamp(22px,4vw,30px);
    color:var(--muted); margin-bottom:26px;
  }
.hero .pitch{
    font-size:16px; max-width:52ch; margin:0 auto 34px; line-height:1.8;
  }
/* highlighter, same two-pass treatment as the home page.
     nowrap because the two sweep pseudo-elements are single rectangles — if the
     phrase breaks across lines the highlight covers the empty gap too. Keep the
     highlighted phrase short enough to fit a 320px screen on one line. */
  .hl{position:relative; display:inline-block; z-index:1; white-space:nowrap;}
.hl::before,.hl::after{
    content:""; position:absolute; left:-3%; width:106%;
    background:#fff200; mix-blend-mode:multiply; z-index:-1;
    clip-path:inset(0 100% 0 0);
  }
.hl::before{
    top:14%; bottom:10%; opacity:.5; z-index:-1;
    transform:rotate(-2.4deg);
    border-radius:3px 14px 5px 16px / 8px 4px 12px 5px;
    filter:blur(1.2px);
    animation:hlSweep .8s cubic-bezier(.5,0,.4,1) .45s forwards;
  }
.hl::after{
    top:20%; bottom:16%; opacity:.85; z-index:-2;
    transform:rotate(0.5deg) translateY(3px);
    border-radius:5px 16px 3px 14px / 5px 8px 5px 12px;
    filter:blur(1.2px);
    animation:hlSweep 1.05s cubic-bezier(.5,0,.4,1) 1.2s forwards;
  }
@keyframes hlSweep{to{clip-path:inset(0 0 0 0);}}
@media (prefers-reduced-motion:reduce){
  .hl::before,.hl::after{animation:none; clip-path:inset(0 0 0 0);}
}
/* ---------------- download button (the site's rubber stamp) ------------- */
  .grab{display:flex; flex-direction:column; align-items:center; gap:12px;}
.btn-stamp{
    display:inline-block;
    border:2px solid var(--ink-red); color:var(--ink-red);
    background:transparent;
    font-family:'Special Elite',monospace; font-size:15px;
    letter-spacing:0.06em; text-transform:uppercase;
    padding:15px 30px; transform:rotate(-1.6deg); cursor:pointer;
    transition:transform .18s ease, background .18s ease, color .18s ease;
  }
.btn-stamp:hover,.btn-stamp:focus-visible{
    background:var(--ink-red); color:var(--paper); transform:rotate(-1.6deg) scale(1.03);
  }
.grab .meta{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
/* ---------------- the guarantee list ---------------- */
  .keeps{
    border:1px dashed var(--dash); background:rgba(255,255,255,0.4);
    padding:24px 26px; margin-top:26px;
  }
.keeps h3{margin-bottom:14px;}
.keeps ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px 10px;}
.keeps li{
    font-size:12px; letter-spacing:0.04em;
    border:1px solid var(--dash-soft); background:var(--paper-2);
    padding:5px 10px;
  }
.keeps .after{margin-top:16px; font-size:14px; color:var(--muted); max-width:60ch;}
/* ---------------- before / after ---------------- */
  .compare-grid{display:flex; flex-direction:column; gap:44px; margin-top:8px;}
.compare{max-width:100%;}
/* A portrait-orientation pair gets a narrower column so it doesn't tower over
     the page — the caption row tracks the image width rather than the container. */
  .compare.is-portrait{max-width:460px; margin-inline:auto;}
.compare .cap{
    display:flex; justify-content:space-between; align-items:baseline;
    gap:16px; flex-wrap:wrap; margin-bottom:10px;
  }
.compare .cap .what{font-size:14px;}
/* no text-transform here — the slot IDs are case-sensitive (01a, not 01A) */
  .compare .cap .chain{font-size:12px; letter-spacing:0.06em; color:var(--muted);}
/* 3/2 is only the placeholder default. Once the images load, JS sets
     aspect-ratio from the file's own dimensions, so any orientation fits
     without object-fit cropping it. */
  .ba{
    position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
    border:1px solid var(--dash); background:var(--paper-2);
    cursor:ew-resize; touch-action:none; user-select:none;
  }
.ba img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
    /* Without these the browser starts its own image-drag on mousedown, which
       cancels the pointer stream — the handle would only jump on click and
       never follow the cursor. pointer-events:none also means the box itself
       receives every event, so there is nothing to retarget. */
    pointer-events:none;
    -webkit-user-drag:none;
    user-select:none; -webkit-user-select:none;
  }
.ba .after-img{clip-path:inset(0 0 0 50%);}
.ba .handle{
    position:absolute; top:0; bottom:0; left:50%; width:2px;
    background:var(--paper); box-shadow:0 0 0 1px rgba(43,36,28,.35); pointer-events:none;
  }
.ba .handle::after{
    content:""; position:absolute; top:50%; left:50%;
    width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%;
    background:var(--paper); box-shadow:0 0 0 1px rgba(43,36,28,.35);
  }
.ba .tagB,.ba .tagA{
    position:absolute; bottom:10px; font-size:10px; letter-spacing:0.12em;
    text-transform:uppercase; padding:3px 8px; pointer-events:none;
    background:rgba(244,243,239,.85); color:var(--ink);
  }
.ba .tagB{left:10px;}
.ba .tagA{right:10px;}
/* shown until real photos are dropped in */
  .ba.empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; border-style:dashed; cursor:default; text-align:center; padding:20px;
  }
.ba.empty .note{font-size:13px; color:var(--muted); max-width:34ch;}
.ba.empty .file{font-size:11px; letter-spacing:0.06em; color:var(--ink-red);}
.ba.empty img,.ba.empty .handle,.ba.empty .tagB,.ba.empty .tagA{display:none;}
/* ---------------- modules ---------------- */
  .mods{display:flex; flex-direction:column; gap:0; margin-top:6px;}
.mod{
    display:grid; grid-template-columns:66px 1fr; gap:4px 20px;
    padding:22px 0; border-bottom:1px dashed var(--dash-soft);
  }
.mod:last-child{border-bottom:none;}
.mod .num{
    font-size:12px; letter-spacing:0.08em; color:var(--ink-red);
    border:1px solid var(--ink-red); padding:3px 0; text-align:center;
    align-self:start; transform:rotate(-1.5deg);
  }
.mod .name{font-size:16px; margin-bottom:6px;}
.mod .name .alt{color:var(--muted); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;}
.mod .txt{font-size:15px; color:var(--ink); max-width:58ch;}
.mod .txt em{font-style:normal; border-bottom:1px dotted var(--muted);}
@media (max-width:620px){
  .mod{grid-template-columns:1fr; gap:10px;}
  .mod .num{justify-self:start; padding:3px 12px;}
}
.slotnote{
    font-size:14px; color:var(--muted); border-left:2px solid var(--ink-red);
    padding-left:16px; margin-top:22px; max-width:58ch;
  }
/* ---------------- chains ---------------- */
  /* 300px minimum lands this as a 2x2 inside the 780px content column, rather
     than an unbalanced 3 + 1 */
  .chains{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:8px;}
.chain-card{border:1px dashed var(--dash); background:rgba(255,255,255,0.4); padding:18px 20px;}
.chain-card h3{margin-bottom:10px;}
.chain-card .steps{font-size:13px; color:var(--ink-red); letter-spacing:0.04em; margin-bottom:8px;}
.chain-card p{font-size:14px; color:var(--muted);}
/* ---------------- install ---------------- */
  .install{display:flex; flex-direction:column; gap:26px; margin-top:8px;}
.install .step h3{margin-bottom:6px;}
.install .step p{font-size:15px; max-width:60ch;}
.install .warn{
    font-family:'Kalam',cursive; font-size:16px; color:var(--ink-red);
    margin-top:8px; transform:rotate(-.6deg); display:inline-block;
  }
/* ---------------- coming next ---------------- */
  .next{display:flex; flex-direction:column; gap:20px; margin-top:8px;}
.next .item{display:grid; grid-template-columns:130px 1fr; gap:6px 20px;}
.next .item .t{font-size:15px; color:var(--ink-red);}
.next .item p{font-size:15px; color:var(--ink); max-width:56ch;}
@media (max-width:620px){
  .next .item{grid-template-columns:1fr; gap:4px;}
}
/* Threads callout — the site's rubber-stamp treatment, sized up so it reads
     as an invitation rather than a footer link */
  .threads-note{
    display:inline-flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    margin-top:24px; padding:14px 24px;
    border:2px solid var(--ink-red); color:var(--ink-red);
    transform:rotate(-1.2deg);
    transition:background .18s ease, color .18s ease, transform .18s ease;
  }
.threads-note:hover,.threads-note:focus-visible{
    background:var(--ink-red); color:var(--paper); transform:rotate(-1.2deg) scale(1.02);
  }
.threads-note .at{font-family:'Kalam',cursive; font-weight:700; font-size:21px; line-height:1;}
.threads-note .on{font-size:11px; letter-spacing:0.14em; text-transform:uppercase;}
.licence{font-size:14px; color:var(--muted); max-width:62ch; margin-top:20px;}
.licence strong{color:var(--ink); font-weight:normal; border-bottom:1px dotted var(--muted);}
.closer{text-align:center; padding:68px 20px 76px;}
.closer .line{font-family:'Kalam',cursive; font-size:26px; color:var(--muted); margin-bottom:24px;}
/* ---------------- mobile ---------------- */
  @media (max-width:860px){
  .presets-page .wrap{padding:0 22px;}
  .presets-page section{padding:48px 0;}
}