/* ==========================================================================
   Isadora Silva — "Continuity Wall"
   A bone-white wall with the work taped and pinned to it at angles.
   Written to replace the ThemeForest main.css on the public pages.
   ========================================================================== */

:root{
  --wall:#f2efe7;
  --wall-2:#e8e4d9;
  --card:#fffdf8;
  --ink:#1b1a17;
  --pencil:#6f6a5d;
  --pencil-2:#918b7c;
  --tape:rgba(230,220,174,.78);
  --pin:#c0392b;
  --note:#3d4a86;
  --gaffer:#f0db4e;
  --hair:rgba(27,26,23,.16);
  --hair-2:rgba(27,26,23,.3);

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --hand:'Caveat','Bradley Hand',cursive;
  --mono:'Courier Prime','Courier New',monospace;

  --gutter:clamp(18px,4.5vw,60px);
  --maxw:1340px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  background:var(--wall);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

/* wall texture — cheap, no image asset */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em}
.hand{font-family:var(--hand)}
.lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--pencil);
}

/* skip link — keyboard users land here first */
.skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--ink);color:var(--wall);padding:12px 18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--note);outline-offset:3px}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:200;
  background:rgba(242,239,231,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{font-size:23px;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.brand em{font-style:italic}
.site-nav{display:flex;gap:clamp(14px,2.4vw,26px);align-items:center}
.site-nav a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pencil);text-decoration:none;padding:4px 0;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  color:var(--ink);text-decoration:underline;text-underline-offset:5px;
}
/* Brand + three tracked-out nav items overflow a phone. Tighten the type and
   drop Home — the wordmark beside it already goes there. */
@media(max-width:560px){
  .site-head .wrap{height:58px}
  .brand{font-size:19px}
  .site-nav{gap:14px}
  .site-nav a{font-size:9.5px;letter-spacing:.12em}
  .site-nav a[href="index.html"]{display:none}
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(44px,8vw,96px) 0 clamp(32px,6vw,68px)}
.kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--pencil);
}
.hero-name{
  font-size:clamp(52px,13.5vw,190px);line-height:.9;letter-spacing:-.02em;
  margin-top:18px;font-weight:400;
}
.hero-name em{font-style:italic;display:block;margin-left:.14em}
.annot{
  font-family:var(--hand);font-size:clamp(19px,2.5vw,30px);color:var(--note);
  transform:rotate(-3deg);display:inline-block;margin-top:14px;
}
.annot-arrow{display:block;width:112px;height:52px;margin:-4px 0 0 12px;opacity:.75}
.annot-arrow path{fill:none;stroke:var(--note);stroke-width:1.6;stroke-linecap:round}

/* the polaroid pinned beside the name */
.pinned{
  position:absolute;right:var(--gutter);top:clamp(44px,7vw,88px);
  width:min(280px,26vw);background:var(--card);padding:11px 11px 42px;
  box-shadow:0 10px 26px rgba(27,26,23,.2);
  transform:rotate(4deg);z-index:5;
}
/* 16:9 matches the slides she exports, so nothing gets cropped awkwardly. */
.pinned img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--wall-2)}
.pinned .cap{
  position:absolute;bottom:11px;left:14px;
  font-family:var(--hand);font-size:19px;color:var(--pencil);
}
.pin{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#e8695a,var(--pin));
  box-shadow:0 3px 5px rgba(0,0,0,.32);z-index:6;
}
@media(max-width:900px){.pinned{display:none}}

/* ── about ──────────────────────────────────────────────────────────────── */
.about{padding:clamp(38px,6vw,88px) 0;border-top:1px dashed var(--hair-2)}
.split{display:grid;grid-template-columns:170px 1fr;gap:clamp(22px,4vw,56px)}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:14px}}
.about p{font-size:clamp(21px,2.9vw,36px);line-height:1.36;max-width:26em}
.about p + p{margin-top:.7em}
.mark{background:linear-gradient(transparent 60%,var(--gaffer) 60%);padding:0 .06em}

/* ── section heads ──────────────────────────────────────────────────────── */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:clamp(34px,6vw,76px);
}
.sec-head h1,
.sec-head h2{font-size:clamp(38px,7vw,84px);line-height:1;letter-spacing:-.02em;font-weight:400}
.sec-head h1 em,
.sec-head h2 em{font-style:italic}

/* ── filters, written like margin notes ────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:16px;margin:22px 0 44px;align-items:center}
.filters button{
  font-family:var(--hand);font-size:22px;line-height:1.2;
  background:none;border:none;color:var(--pencil);
  cursor:pointer;padding:2px 4px;transition:color .2s;position:relative;
}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink)}
.filters button[aria-pressed="true"]::after{
  content:'';position:absolute;left:-4px;right:-4px;bottom:-1px;height:8px;
  background:var(--gaffer);z-index:-1;transform:rotate(-.8deg);
}

/* ── the wall ───────────────────────────────────────────────────────────── */
/* Grid, not CSS columns: her slides are all 16:9 so masonry buys nothing, and
   columns would flow top-to-bottom — breaking the order she sets in the CMS. */
.wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(30px,3.6vw,58px) clamp(22px,3vw,46px);
  align-items:start;
  padding-bottom:clamp(40px,6vw,72px);
}

.wall-item{
  position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.wall-item .paper{
  background:var(--card);padding:12px 12px 14px;position:relative;
  box-shadow:0 7px 20px rgba(27,26,23,.16);
  transition:box-shadow .35s;
}
.wall-item button.open{
  display:block;width:100%;padding:0;border:none;background:none;
  cursor:pointer;text-align:left;font:inherit;color:inherit;
}
.wall-item img{width:100%;background:var(--wall-2)}

/* Every piece hangs at its own angle. The vertical scatter is margin, not
   transform, so it survives the hover that straightens the card. */
.wall-item:nth-child(6n+1){transform:rotate(-1.4deg)}
.wall-item:nth-child(6n+2){transform:rotate(1.1deg);margin-top:34px}
.wall-item:nth-child(6n+3){transform:rotate(-.5deg)}
.wall-item:nth-child(6n+4){transform:rotate(1.7deg);margin-top:18px}
.wall-item:nth-child(6n+5){transform:rotate(-1.9deg)}
.wall-item:nth-child(6n){transform:rotate(.7deg);margin-top:28px}
.wall-item:hover,
.wall-item:focus-within{transform:rotate(0deg) scale(1.028);z-index:20}
.wall-item:hover .paper,
.wall-item:focus-within .paper{box-shadow:0 16px 40px rgba(27,26,23,.26)}

/* tape strips holding it down */
.strip{
  position:absolute;background:var(--tape);
  border-left:1px dashed rgba(27,26,23,.12);
  border-right:1px dashed rgba(27,26,23,.12);
  z-index:4;pointer-events:none;
}
.strip.a{width:84px;height:26px;top:-13px;left:-16px;transform:rotate(-38deg)}
.strip.b{width:70px;height:23px;bottom:-11px;right:-14px;transform:rotate(-34deg)}

.wall-item .note{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:10px;
}
.wall-item .note .t{font-family:var(--hand);font-size:23px;line-height:1.1}
.wall-item .note .c{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pencil);white-space:nowrap;
}
.wall-item .ref{
  position:absolute;top:-9px;right:14px;z-index:5;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--pencil);
  background:var(--wall);padding:0 5px;
}

.wall-empty{
  font-family:var(--hand);font-size:26px;color:var(--pencil);
  padding:30px 0 60px;
}

/* ── "see the rest" call to action ─────────────────────────────────────── */
.cta-row{padding:clamp(24px,4vw,52px) 0 clamp(40px,6vw,80px)}
.cta{
  display:inline-flex;align-items:baseline;gap:12px;text-decoration:none;
  font-family:var(--hand);font-size:clamp(26px,3.4vw,40px);color:var(--ink);
  position:relative;
}
.cta::after{
  content:'';position:absolute;left:0;right:34px;bottom:2px;height:9px;
  background:var(--gaffer);z-index:-1;transform:rotate(-.6deg);
  transition:right .28s cubic-bezier(.2,.7,.3,1);
}
.cta:hover::after{right:0}
.cta .arw{font-family:var(--serif);font-size:.8em;transition:transform .28s}
.cta:hover .arw{transform:translateX(7px)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{
  border-top:1px dashed var(--hair-2);
  padding:clamp(36px,5vw,72px) 0 34px;margin-top:16px;
}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.fgrid .v{font-size:22px;margin-top:8px;line-height:1.45}
.fgrid a{text-decoration:none;border-bottom:1px solid var(--hair-2)}
.fgrid a:hover{border-bottom-color:var(--ink)}
.fbot{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;margin-top:46px;
  font-size:9.5px;color:var(--pencil);
}
.sign{
  font-family:var(--hand);font-size:30px;color:var(--pencil);
  transform:rotate(-3deg);display:inline-block;
}

/* her way in — a taped-on note, not a hidden easter egg */
.foot-login{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pencil);background:none;border:none;cursor:pointer;
  padding:6px 10px;position:relative;
}
.foot-login::before{
  content:'';position:absolute;inset:0;background:var(--tape);
  transform:rotate(-1.4deg);z-index:-1;opacity:0;transition:opacity .2s;
}
.foot-login:hover{color:var(--ink)}
.foot-login:hover::before{opacity:1}

/* ── lightbox ───────────────────────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:500;
  background:rgba(242,239,231,.97);
  display:none;align-items:center;justify-content:center;
  padding:6vh 5vw;
}
.lightbox[open],.lightbox.is-open{display:flex}
.lightbox .holder{
  background:var(--card);padding:16px;max-height:88vh;
  box-shadow:0 24px 70px rgba(27,26,23,.3);
}
.lightbox img{max-width:100%;max-height:70vh;margin:0 auto}
.lightbox .meta{
  margin-top:12px;font-family:var(--hand);font-size:24px;
  color:var(--pencil);text-align:center;
}
.lightbox .x,
.lightbox .nav{
  position:absolute;background:none;border:none;cursor:pointer;
  font-family:var(--hand);color:var(--pencil);
}
.lightbox .x{top:3.5vh;right:5vw;font-size:26px}
.lightbox .nav{top:50%;transform:translateY(-50%);font-size:40px;padding:10px 16px}
.lightbox .prev{left:1vw}
.lightbox .next{right:1vw}
.lightbox .x:hover,.lightbox .nav:hover{color:var(--ink)}
@media(max-width:680px){
  .lightbox .nav{font-size:30px}
  .lightbox .prev{left:-2vw}
  .lightbox .next{right:-2vw}
}

/* ── sign-in modal ──────────────────────────────────────────────────────── */
.signin{
  position:fixed;inset:0;z-index:600;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.signin.is-open{display:flex}
.signin-veil{position:absolute;inset:0;background:rgba(27,26,23,.55)}
.signin-card{
  position:relative;width:min(400px,100%);
  background:var(--card);padding:34px 30px 30px;
  box-shadow:0 26px 70px rgba(27,26,23,.4);
  transform:rotate(-.7deg);
}
.signin-card::before{ /* a strip of tape across the top */
  content:'';position:absolute;top:-14px;left:50%;
  width:110px;height:28px;margin-left:-55px;
  background:var(--tape);transform:rotate(-2deg);
  border-left:1px dashed rgba(27,26,23,.12);
  border-right:1px dashed rgba(27,26,23,.12);
}
.signin-card h2{font-size:32px;font-weight:400;line-height:1.1}
.signin-card .why{font-family:var(--hand);font-size:20px;color:var(--pencil);margin-top:6px}
.signin-card label{display:block;margin-top:22px}
.signin-card input{
  width:100%;margin-top:8px;padding:12px 13px;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;
  background:var(--wall);color:var(--ink);
  border:1px solid var(--hair-2);border-radius:0;
}
.signin-card input:focus{outline:2px solid var(--note);outline-offset:1px}
.signin-actions{display:flex;gap:10px;align-items:center;margin-top:22px}
.btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:12px 20px;cursor:pointer;border:1px solid var(--ink);
  background:var(--ink);color:var(--wall);transition:.18s;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn-quiet{background:none;color:var(--pencil);border-color:transparent}
.btn-quiet:hover{background:none;color:var(--ink)}
.signin-msg{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  margin-top:14px;min-height:1.2em;color:var(--pin);
}
.signin-msg.ok{color:var(--note)}