/*
Theme Name: Jai Portfolio V2
Theme URI: https://jaicummins.com/
Author: Jai Cummins
Description: Custom single-page portfolio theme converted from the supplied updated HTML design.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jai-portfolio-v2
*/

/* =========================================================
   JAI — PORTFOLIO STYLESHEET
   Sections:
   01. Tokens
   02. Reset & base
   03. Layout container
   04. Typography
   05. Buttons & links
   06. Custom cursor
   07. Navigation
   08. Decorative system (doodles, tape, blobs, clips)
   09. Hero
   10. Notebook (What I Do + About)
   11. Selected Work
   12. Project modal
   13. Contact
   14. Footer
   15. Motion system
   16. Reduced motion & coarse pointer
   ========================================================= */

/* ---------------------------------------------------------
   01. TOKENS
--------------------------------------------------------- */
:root{
  /* palette */
  --cream:#FDF6EC;
  --cream-deep:#F8EEDF;
  --paper:#FFFDF8;
  --ink:#211D33;
  --ink-soft:#4A455E;
  --lavender:#DCCFF5;
  --lavender-soft:#EDE5FA;
  --lavender-ink:#9F86D9;
  --sage:#AFCFB2;
  --sage-soft:#D8EADA;
  --sage-ink:#79A87E;
  --peach:#F8CDB6;
  --peach-soft:#FBE3D6;
  --blue:#BBD6EE;
  --blue-soft:#DCEAF7;
  --butter:#FFDF8E;
  --butter-soft:#FFF0C8;
  --coral:#F2A093;
  --coral-ink:#E58B7B;
  --mint:#CDE7D4;
  --mint-deep:#B9DCC3;

  /* elevation */
  --shadow-soft:0 6px 18px rgba(60,45,90,.08);
  --shadow-lift:0 14px 30px rgba(60,45,90,.14);
  --shadow-photo:0 14px 34px rgba(50,40,85,.2);

  /* radii */
  --r-lg:clamp(20px,3.2vw,34px);
  --r-md:clamp(16px,2.4vw,22px);
  --r-sm:14px;

  /* type */
  --display:'Baloo 2',cursive;
  --body:'DM Sans',sans-serif;
  --hand:'Caveat',cursive;

  /* layout rhythm — everything scales from these two */
  --gutter:clamp(16px,4vw,32px);
  --page-max:1180px;
  --card-pad:clamp(24px,4.4vw,48px);
  --section-gap:clamp(32px,6vw,64px);

  /* stacking order — named, never ad-hoc */
  --z-behind:0;
  --z-decor:1;
  --z-content:2;
  --z-float:3;
  --z-nav:100;
  --z-modal:500;
  --z-cursor:900;
}

/* ---------------------------------------------------------
   02. RESET & BASE
--------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* offset for the sticky nav when jumping to anchors */
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip; /* safety net only — overflow sources are fixed at source */
}

body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  cursor:none;
}

img,svg{max-width:100%}
img{height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:none}

::selection{background:var(--butter);color:var(--ink)}

/* long words / URLs can never blow out a container */
p,h1,h2,h3,li,a,figcaption{overflow-wrap:anywhere}

/* ---------------------------------------------------------
   03. LAYOUT CONTAINER
--------------------------------------------------------- */
.wrap{
  width:min(100% - (var(--gutter) * 2), var(--page-max));
  margin-inline:auto;
}

.sec2,.sec3,.sec4{position:relative}
.sec2{padding-block:clamp(12px,2.5vw,20px) clamp(32px,5vw,54px)}
.sec3{padding-block:clamp(10px,2vw,16px) clamp(32px,5vw,54px)}
.sec4{padding-block:clamp(10px,2vw,16px) clamp(28px,4vw,42px)}

/* every card is a containment boundary for its own decorations */
.notebook,.work-card,.cta-card{
  position:relative;
  isolation:isolate;
}

/* ---------------------------------------------------------
   04. TYPOGRAPHY
--------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--display);
  line-height:1.14;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.hand{font-family:var(--hand)}

/* marker highlight behind key words */
.hl{position:relative;display:inline-block;z-index:1}
.hl::after{
  content:'';position:absolute;left:-2px;right:-2px;bottom:.08em;height:.42em;
  z-index:-1;border-radius:6px;transform:rotate(-.6deg);
}
.hl.butter::after{background:var(--butter)}
.hl.peach::after{background:var(--peach)}
.hl.mintline::after{background:var(--mint-deep)}

.c-lav{color:var(--lavender-ink)}
.c-sage{color:var(--sage-ink)}
.c-coral{color:var(--coral-ink)}

/* section heading + hand-drawn underline */
.sec-h{
  font-size:clamp(1.5rem,3.4vw,2rem);
  font-weight:800;
  display:inline-block;
  position:relative;
  margin-bottom:clamp(20px,3vw,30px);
  max-width:100%;
}
.sec-h .underline{
  position:absolute;left:-4px;right:-8px;bottom:-8px;height:12px;
  pointer-events:none;
}

.refrain{
  font-family:var(--hand);
  font-size:clamp(1.25rem,2.6vw,1.5rem);
  font-weight:700;
  color:var(--ink);
  margin-block:16px 18px;
  line-height:1.3;
}

/* ---------------------------------------------------------
   05. BUTTONS & LINKS
--------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(.95rem,1.6vw,1.02rem);
  padding:14px clamp(20px,3vw,26px);
  min-height:48px;              /* comfortable tap target */
  border-radius:999px;
  text-decoration:none;
  border:2.5px solid var(--ink);
  position:relative;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background .2s ease;
}
.btn .arr{
  display:inline-block;font-family:var(--body);font-weight:700;
  transition:transform .22s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(45,35,80,.18)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:translateY(-1px) scale(.97);box-shadow:0 4px 10px rgba(45,35,80,.12)}

.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#2E2947}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:#fff}
.btn-yellow{background:var(--butter);color:var(--ink)}
.btn-green{background:var(--sage);color:var(--ink);padding:11px 22px;min-height:44px;font-size:.95rem}

.btn:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--lavender-ink);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------------------------------------------------------
   06. CUSTOM CURSOR
--------------------------------------------------------- */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;
  border-radius:50%;
  pointer-events:none;
  z-index:var(--z-cursor);
  transform:translate(-50%,-50%);
}
.cursor{
  width:34px;height:34px;
  background:var(--peach);opacity:.55;
  mix-blend-mode:multiply;
  transition:width .25s ease,height .25s ease,background .25s ease,opacity .25s ease,border .2s ease;
}
.cursor.is-btn{width:56px;height:56px;background:var(--butter);opacity:.7}
.cursor.is-img{width:70px;height:70px;background:transparent;opacity:1;border:2.5px solid var(--ink)}
.cursor-dot{width:6px;height:6px;background:var(--ink)}

/* ---------------------------------------------------------
   07. NAVIGATION
--------------------------------------------------------- */
.site-nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(253,246,236,.92);
  backdrop-filter:blur(8px);
  padding-block:clamp(10px,2vw,16px);
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:nowrap;
}
.logo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.25rem,3vw,1.5rem);
  color:var(--ink);text-decoration:none;
  background:var(--lavender);
  padding:6px 20px 8px;
  border-radius:20px 26px 22px 28px/26px 20px 28px 22px;
  display:inline-block;flex:none;
  transform:rotate(-1.5deg);
  transition:transform .25s ease;
}
.logo:hover{transform:rotate(0deg) scale(1.04)}

.nav-links{
  display:flex;align-items:center;
  gap:clamp(14px,2.6vw,30px);
  list-style:none;min-width:0;
}
.nav-links a:not(.btn){
  color:var(--ink);text-decoration:none;font-weight:500;
  font-size:clamp(.9rem,1.6vw,1rem);
  position:relative;padding:6px 2px;display:inline-block;white-space:nowrap;
  transition:transform .22s ease;
}
.nav-links a:not(.btn):hover{transform:translateY(-2px)}
.nav-links a:not(.btn)::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:0;
  border-radius:3px;background:var(--ink);
  transition:width .3s cubic-bezier(.65,0,.35,1);
}
.nav-links a:not(.btn):hover::after{width:100%}

/* Tablet & below: drop secondary links, keep the CTA usable.
   Deliberate simplification rather than squeezing 5 items into one row. */
@media (max-width:767px){
  .nav-links li:not(:last-child){display:none}
}

/* ---------------------------------------------------------
   08. DECORATIVE SYSTEM
   Rules: decorations are aria-hidden, never receive pointer
   events, and always sit below content in the stack.
--------------------------------------------------------- */
.doodle{
  position:absolute;
  pointer-events:none;
  z-index:var(--z-decor);
}
.doodle path,.doodle circle,.doodle line{
  stroke-linecap:round;stroke-linejoin:round;fill:none;
}
.draw path{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.in-view .draw path,.loaded .hero .draw path{animation:draw 1.1s ease forwards}
.draw path:nth-child(2){animation-delay:.25s}
@keyframes draw{to{stroke-dashoffset:0}}

/* --- named doodle placements (replaces inline style attributes) --- */
.doodle-dotgrid{
  right:-10px;bottom:60px;width:90px;height:90px;color:#C9BBE6;
}
.doodle-star{right:-34px;top:210px;width:44px;height:44px}
.doodle-clip-card{top:-26px;right:56px;width:34px;height:64px;transform:rotate(14deg)}
.doodle-heart{right:-8px;bottom:-30px;width:52px;height:48px}
.doodle-curl{top:34px;right:44px;width:78px;height:74px}

/* masking tape */
.tape{
  position:absolute;width:96px;height:30px;
  background:var(--lavender);opacity:.85;border-radius:3px;
  box-shadow:0 2px 5px rgba(50,40,85,.12);
  z-index:var(--z-float);
}
.tape::before,.tape::after{
  content:'';position:absolute;top:0;bottom:0;width:5px;background:rgba(255,255,255,.4);
}
.tape::before{left:0;clip-path:polygon(0 0,100% 12%,0 24%,100% 38%,0 52%,100% 66%,0 80%,100% 92%,0 100%)}
.tape::after{right:0;clip-path:polygon(100% 0,0 12%,100% 24%,0 38%,100% 52%,0 66%,100% 80%,0 92%,100% 100%)}
.tape-1{top:-14px;left:38px;transform:rotate(-8deg);transition:transform .3s ease}
.tape-2{top:-12px;right:44px;transform:rotate(6deg);background:var(--peach);transition:transform .3s ease}

/* organic paper blobs — sized fluidly, transform-only motion */
.blob{
  position:absolute;
  z-index:var(--z-behind);
  pointer-events:none;
  border-radius:58% 42% 55% 45%/45% 58% 42% 55%;
}

/* ---------------------------------------------------------
   09. HERO
--------------------------------------------------------- */
.hero{
  padding-block:clamp(20px,4vw,34px) clamp(40px,7vw,64px);
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(32px,4.5vw,48px);
  align-items:center;
}
.hero-copy{min-width:0}

.hey{
  font-family:var(--hand);font-weight:700;
  font-size:clamp(1.4rem,3.6vw,1.9rem);
  display:inline-block;margin-bottom:12px;
}
.hey u{text-decoration:none;border-bottom:3px solid var(--coral);padding-bottom:1px}

.hero h1{
  font-size:clamp(2rem,5.2vw,3.85rem);
  font-weight:800;
  max-width:16ch;
  margin-bottom:14px;
}
.hero .sub{
  font-family:var(--hand);
  font-size:clamp(1.25rem,3.2vw,1.95rem);
  font-weight:600;
  margin-bottom:clamp(20px,3vw,26px);
  max-width:32ch;
}

.tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(22px,3.4vw,32px)}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:clamp(.82rem,1.7vw,.92rem);
  padding:9px clamp(13px,2.2vw,18px);
  border-radius:999px;border:2px solid rgba(33,29,51,.15);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.tag:hover{transform:translateY(-3px) rotate(-1deg)}
.tag svg{width:17px;height:17px;flex:none}
.t-peach{background:var(--peach-soft)}
.t-blue{background:var(--blue-soft)}
.t-sage{background:var(--sage-soft)}
.t-lav{background:var(--lavender-soft)}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* --- hero polaroid zone --- */
.pola-zone{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  /* reserves room so the sticky note never needs a negative offset */
  padding-inline:0 clamp(0px,5vw,54px);
  min-width:0;
}
.polaroid{
  background:#fff;
  padding:14px 14px 52px;
  border-radius:6px;
  box-shadow:0 18px 45px rgba(50,40,85,.22),0 4px 10px rgba(50,40,85,.1);
  transform:rotate(4deg);
  position:relative;
  width:min(310px,100%);
  z-index:var(--z-content);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.polaroid img{
  width:100%;
  aspect-ratio:1/.92;
  object-fit:cover;
  object-position:center 12%;
  border-radius:2px;
  filter:saturate(.96) contrast(1.02);
}
.polaroid .cap{
  position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-family:var(--hand);font-size:clamp(1.15rem,2.4vw,1.45rem);
  font-weight:600;color:var(--ink-soft);
}
.polaroid:hover{transform:rotate(2.6deg) translateY(-4px)}
.polaroid:hover .tape-1{transform:rotate(-13deg) translateY(-2px)}

.smiley-badge{
  position:absolute;top:-24px;left:-20px;
  width:clamp(52px,7vw,66px);height:clamp(52px,7vw,66px);
  border-radius:50%;background:var(--butter);
  display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(60,45,20,.18);
  transform:rotate(-8deg);
  z-index:var(--z-float);
}
.smiley-badge svg{width:60%;height:60%}

.blob-hero{
  right:-30px;top:-36px;
  width:clamp(180px,26vw,270px);
  aspect-ratio:1;
  background:var(--sage);
  opacity:.75;
}

/* ---------------------------------------------------------
   10. NOTEBOOK — What I Do + About
--------------------------------------------------------- */
.notebook{
  background:var(--paper);
  border:3px solid var(--lavender);
  border-radius:var(--r-lg);
  padding:var(--card-pad);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4.5vw,52px);
  align-items:start;
  box-shadow:var(--shadow-soft);
  transition:transform .35s ease,box-shadow .35s ease;
}
.notebook:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

/* dashed notebook spine — only meaningful in two-column mode */
.notebook::before{
  content:'';position:absolute;
  left:50%;top:var(--card-pad);bottom:var(--card-pad);
  width:2px;
  background:repeating-linear-gradient(to bottom,rgba(220,207,245,.8) 0 8px,transparent 8px 16px);
  z-index:var(--z-decor);
}

.notebook > *{min-width:0}

/* services list */
.svc{display:flex;gap:clamp(12px,2vw,18px);align-items:flex-start;padding-block:12px}
.svc-icon{
  width:clamp(46px,6vw,56px);height:clamp(46px,6vw,56px);
  border-radius:16px;display:grid;place-items:center;flex:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.svc-icon svg{width:26px;height:26px}
.svc-text{min-width:0}
.svc h3{font-size:clamp(1.02rem,2vw,1.18rem);font-weight:700;margin-bottom:2px}
.svc p{color:var(--ink-soft);font-size:clamp(.92rem,1.8vw,.98rem)}
.i-peach{background:var(--peach-soft)}
.i-blue{background:var(--blue-soft)}
.i-sage{background:var(--sage-soft)}
.i-lav{background:var(--lavender-soft)}

/* about column */
.about-side{position:relative;min-width:0}
.about-layout{
  display:grid;
  grid-template-columns:clamp(150px,16vw,180px) minmax(0,1fr);
  gap:clamp(20px,3vw,28px);
  align-items:start;
}
.about-copy{min-width:0}
.about-side p{
  color:var(--ink-soft);
  font-size:clamp(.95rem,1.9vw,1.02rem);
  margin-bottom:16px;
  max-width:62ch;
}
.about-side p strong{color:var(--ink)}

/* wrapper enforcing the polaroid stack: blob (back) -> frame+photo
   (middle) -> paper clip (front). The blob is a SIBLING of the figure,
   never a child, so a transformed figure can't trap it above the img. */
.about-photo{
  position:relative;width:100%;min-width:0;
  isolation:isolate; /* locks the blob->frame->photo->clip stack */
}
.about-photo .pola-blob{z-index:0}
.about-photo .pola-sm{z-index:1}

.pola-sm{
  background:#fff;
  padding:10px 10px 38px;
  border-radius:6px;
  width:100%;
  box-shadow:var(--shadow-photo);
  transform:rotate(-3deg);
  position:relative;
  z-index:var(--z-content);
  transition:transform .3s ease;
}
.pola-sm:hover{transform:rotate(-3.5deg) translateY(-3px)}
.pola-sm img{
  width:100%;
  aspect-ratio:1/1.05;
  object-fit:cover;
  object-position:center 10%;
  border-radius:2px;
}
.pola-sm .cap{
  position:absolute;bottom:9px;left:0;right:0;text-align:center;
  font-family:var(--hand);font-size:clamp(1rem,2vw,1.2rem);
  font-weight:600;color:var(--ink-soft);
}
.clip{
  position:absolute;top:-22px;left:16px;
  transform:rotate(-14deg);
  transform-origin:top center;
  z-index:var(--z-float);
  transition:transform .3s ease;
}
.pola-sm:hover .clip{transform:rotate(-20deg)}

.pola-blob{
  top:-18px;left:-24px;
  width:clamp(150px,20vw,205px);
  aspect-ratio:1;
  background:var(--peach);
  opacity:.6;
  border-radius:52% 48% 44% 56%/48% 52% 56% 44%;
}

/* ---------------------------------------------------------
   11. SELECTED WORK
--------------------------------------------------------- */
.work-card{
  background:var(--peach-soft);
  border-radius:var(--r-lg);
  padding:var(--card-pad);
  padding-bottom:calc(var(--card-pad) + 8px);
}
.work-head{margin-bottom:clamp(22px,3.4vw,30px)}
.work-head p{max-width:60ch;margin-top:16px;color:var(--ink-soft)}

.projects{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,18px);
}

.proj{
  background:var(--paper);
  border-radius:var(--r-md);
  padding:12px 12px 18px;
  box-shadow:var(--shadow-soft);
  position:relative;
  display:flex;flex-direction:column;
  text-align:left;
  font-family:var(--body);
  cursor:pointer;
  min-width:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
/* slight scrapbook rotation, cancelled on interaction */
.proj:nth-child(2){transform:rotate(.6deg)}
.proj:nth-child(3){transform:rotate(-.5deg)}
.proj:hover,.proj:focus-visible{
  transform:translateY(-8px) rotate(0deg);
  box-shadow:var(--shadow-lift);
  z-index:var(--z-content);
}
.proj:active{transform:translateY(-3px) scale(.985)}

.proj .thumb{
  border-radius:14px;overflow:hidden;position:relative;
  aspect-ratio:4/3;margin-bottom:14px;
}
.proj .thumb .inner{
  position:absolute;inset:0;
  display:grid;place-items:center;
  transition:transform .45s ease;
}
.proj:hover .thumb .inner{transform:scale(1.04)}

.ptag{
  position:absolute;top:10px;left:10px;z-index:var(--z-content);
  font-size:.68rem;font-weight:800;letter-spacing:.08em;
  padding:5px 12px;border-radius:999px;color:var(--ink);
  max-width:calc(100% - 20px);
  transition:padding .25s ease;
}
.proj:hover .ptag{padding:5px 16px}

.proj h3{font-size:clamp(1rem,1.9vw,1.12rem);font-weight:700;padding-inline:6px;margin-bottom:4px}
.proj .desc{color:var(--ink-soft);font-size:.92rem;padding-inline:6px;flex:1}
.proj .go{
  align-self:flex-end;margin:16px 4px 2px 0;
  width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  display:grid;place-items:center;font-weight:700;
  transition:transform .25s ease,background .2s ease;
}
.proj:hover .go{transform:translateX(5px) scale(1.04);background:#2E2947}

.washi{
  position:absolute;bottom:-14px;left:36px;
  width:min(120px,26%);height:32px;
  transform:rotate(-7deg);
  background:repeating-linear-gradient(45deg,var(--blue) 0 10px,var(--blue-soft) 10px 20px);
  opacity:.85;border-radius:3px;
  box-shadow:0 3px 8px rgba(50,40,85,.12);
  z-index:var(--z-decor);pointer-events:none;
}

/* ---------------------------------------------------------
   12. PROJECT MODAL
--------------------------------------------------------- */
.overlay{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:grid;place-items:center;
  padding:clamp(14px,4vw,28px);
  background:rgba(33,29,51,.34);
  backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.overlay.open{opacity:1;pointer-events:auto}

.ov-card{
  background:var(--paper);
  border-radius:var(--r-lg);
  width:min(620px,100%);
  max-height:min(86dvh,760px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:clamp(26px,5vw,44px);
  padding-right:clamp(26px,5vw,44px);
  padding-top:clamp(58px,7vw,44px); /* clears the close button on narrow screens */
  position:relative;
  box-shadow:0 30px 70px rgba(30,22,60,.3);
  transform:scale(.7);opacity:0;
  transform-origin:var(--ox,50%) var(--oy,50%);
  transition:transform .4s cubic-bezier(.22,1.2,.36,1),opacity .28s ease;
}
.overlay.open .ov-card{transform:scale(1);opacity:1}

.ov-card .ptag{position:static;display:inline-block;margin-bottom:14px;max-width:100%}
.ov-card h3{font-size:clamp(1.3rem,3.4vw,1.7rem);margin-bottom:12px}
.ov-card p{color:var(--ink-soft);margin-bottom:14px;max-width:60ch}

.ov-close{
  position:absolute;top:14px;right:14px;
  width:44px;height:44px;border-radius:50%;
  border:2.5px solid var(--ink);background:var(--butter);
  font-size:1.15rem;font-weight:700;
  display:grid;place-items:center;
  z-index:var(--z-float);
  transition:transform .2s ease;
}
.ov-close:hover{transform:rotate(90deg)}

.ov-note{
  font-family:var(--hand);font-size:clamp(1.1rem,2.4vw,1.3rem);
  font-weight:600;color:var(--ink);
  background:var(--butter-soft);
  display:inline-block;padding:8px 16px;border-radius:4px;
  transform:rotate(-1deg);margin-top:6px;max-width:100%;
}

body.modal-open{overflow:hidden}

/* ---------------------------------------------------------
   13. CONTACT
--------------------------------------------------------- */
.cta-card{
  background:var(--mint);
  border-radius:var(--r-lg);
  padding:var(--card-pad);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,4vw,50px);
  align-items:center;
  overflow:hidden;             /* clips the corner clouds to the card */
}
.cta-copy,.cta-media{position:relative;z-index:var(--z-content);min-width:0}

.cta-card h2{
  font-size:clamp(1.7rem,4.4vw,2.7rem);
  font-weight:800;display:inline-block;position:relative;margin-bottom:18px;
}
.cta-card p{color:#37503F;max-width:52ch;margin-bottom:clamp(22px,3vw,30px)}

.cta-btn-row{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(12px,2vw,20px);
  position:relative;
}
/* the guiding arrow is decorative: it sits in normal flow so it can
   never land on top of the button, and drops out when space is tight */
.cta-arrow{
  position:static;flex:none;
  width:clamp(40px,6vw,58px);height:auto;
  transform:rotate(6deg);
}

.desk-illo{
  background:var(--paper);
  border-radius:var(--r-md);
  padding:clamp(12px,2.4vw,18px);
  transform:rotate(1.6deg);
  box-shadow:0 14px 34px rgba(40,60,45,.16);
  position:relative;
  transition:transform .3s ease;
}
.desk-illo:hover{transform:rotate(.8deg) translateY(-4px)}
.desk-tape{
  position:absolute;top:-13px;left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:min(104px,40%);height:28px;
  background:var(--butter);opacity:.9;border-radius:3px;
  box-shadow:0 2px 5px rgba(60,45,20,.15);
  z-index:var(--z-float);
}

.contact-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px}
.contact-links a{
  font-weight:700;color:var(--ink);text-decoration:none;
  display:inline-flex;gap:8px;align-items:center;
  min-height:44px;
  border-bottom:3px solid rgba(33,29,51,.25);
  transition:border-color .2s ease;
}
.contact-links a:hover{border-color:var(--ink)}

/* --- corner cloud decorations --- */
.frame-blob{
  position:absolute;
  z-index:var(--z-behind);
  pointer-events:none;
  display:block;
  opacity:.75;
}
.frame-blob-left{
  left:clamp(-140px,-10vw,-70px);
  bottom:clamp(-150px,-11vw,-80px);
  width:clamp(230px,34vw,400px);
  animation:frameFloatLeft 26s ease-in-out infinite;
}
.frame-blob-right{
  right:clamp(-160px,-11vw,-80px);
  bottom:clamp(-160px,-12vw,-90px);
  width:clamp(250px,36vw,460px);
  animation:frameFloatRight 30s ease-in-out infinite;
}
@keyframes frameFloatLeft{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(10px,-12px) scale(1.03)}
}
@keyframes frameFloatRight{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-12px,-10px) scale(1.02)}
}

/* smiley reacts to the Let's Talk button */
#smiley2{flex:none}
#smiley2 .face{transition:fill .28s ease}
#smiley2 .mouth{transition:opacity .22s ease}
#smiley2 .mouth-grin{opacity:0}
.cta-btn-row .btn-dark:hover ~ #smiley2 .face,
.cta-btn-row .btn-dark:focus-visible ~ #smiley2 .face{fill:var(--butter)}
.cta-btn-row .btn-dark:hover ~ #smiley2 .mouth-rest,
.cta-btn-row .btn-dark:focus-visible ~ #smiley2 .mouth-rest{opacity:0}
.cta-btn-row .btn-dark:hover ~ #smiley2 .mouth-grin,
.cta-btn-row .btn-dark:focus-visible ~ #smiley2 .mouth-grin{opacity:1}
.cta-btn-row .btn-dark:hover ~ #smiley2,
.cta-btn-row .btn-dark:focus-visible ~ #smiley2{
  animation:smileyPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes smileyPop{
  0%{transform:scale(1) rotate(0deg)}
  55%{transform:scale(1.14) rotate(-7deg)}
  100%{transform:scale(1) rotate(0deg)}
}

/* ---------------------------------------------------------
   09b. BRAND MARQUEE (infinite logo carousel)
--------------------------------------------------------- */
.logo-strip{padding-block:clamp(6px,1.4vw,14px) clamp(26px,4vw,40px)}
.ls-label{
  font-family:var(--hand);font-weight:700;
  font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--ink-soft);
  margin-bottom:clamp(14px,2.4vw,20px);
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex;align-items:center;
  width:max-content;
  animation:marqueeScroll 34s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{
  height:clamp(30px,4.4vw,46px);
  width:auto;flex:none;
  margin-right:clamp(44px,7vw,84px);
  opacity:.7;
  filter:grayscale(1) contrast(1.05);
  transition:opacity .25s ease,filter .25s ease;
}
.marquee-track img:hover{opacity:1;filter:grayscale(0) contrast(1)}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .marquee{mask-image:none;-webkit-mask-image:none}
  .marquee-track{
    animation:none;width:auto;
    flex-wrap:wrap;justify-content:center;
    gap:18px clamp(28px,4vw,48px);
  }
  .marquee-track img{margin-right:0}
  .marquee-track img[aria-hidden="true"]{display:none}
}

/* ---------------------------------------------------------
   14. FOOTER
--------------------------------------------------------- */
footer{
  padding-block:clamp(20px,3vw,26px) clamp(28px,4vw,36px);
  text-align:center;color:var(--ink-soft);
  font-size:clamp(.86rem,1.7vw,.94rem);
}
footer .hand{font-size:clamp(1.15rem,2.6vw,1.35rem);color:var(--ink)}

/* ---------------------------------------------------------
   15. MOTION SYSTEM
   Entrances, ambient drift, idle micro-moments.
   Transform + opacity only.
--------------------------------------------------------- */

/* page-load sequence */
.lz{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.loaded .lz{opacity:1;transform:translateY(0)}
.loaded .d1{transition-delay:.05s}
.loaded .d2{transition-delay:.18s}
.loaded .d3{transition-delay:.3s}
.loaded .d4{transition-delay:.42s}
.loaded .d5{transition-delay:.54s}

.hl span.w{opacity:0;transition:opacity .4s ease}
.loaded .hl span.w{opacity:1}
.loaded .hero h1 .w:nth-of-type(1){transition-delay:.38s}
.loaded .hero h1 .w:nth-of-type(2){transition-delay:.52s}
.loaded .hero h1 .w:nth-of-type(3){transition-delay:.66s}

.pol-load{opacity:0;transform:translateY(50px) rotate(9deg)}
.loaded .pol-load{animation:polIn .95s cubic-bezier(.34,1.4,.5,1) .35s forwards}
@keyframes polIn{
  0%{opacity:0;transform:translateY(50px) rotate(9deg)}
  70%{opacity:1;transform:translateY(-6px) rotate(3.2deg)}
  100%{opacity:1;transform:translateY(0) rotate(4deg)}
}


/* scroll reveals */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in-view{opacity:1;transform:translateY(0)}
.rv-stagger > *{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.rv-stagger.in-view > *{opacity:1;transform:translateY(0)}
.rv-stagger.in-view > *:nth-child(1){transition-delay:.05s}
.rv-stagger.in-view > *:nth-child(2){transition-delay:.16s}
.rv-stagger.in-view > *:nth-child(3){transition-delay:.27s}
.rv-stagger.in-view > *:nth-child(4){transition-delay:.38s}

/* "paper being placed down" entrance for the big cards */
/* fill-mode deliberately NOT "both"/"forwards": a held final keyframe
   would permanently override the :hover transform transitions below */
.notebook.rv.in-view,
.work-card.rv.in-view,
.cta-card.rv.in-view{
  animation:paperSettle .82s cubic-bezier(.22,1,.36,1);
}
@keyframes paperSettle{
  0%{opacity:0;transform:translateY(34px) rotate(.4deg)}
  72%{opacity:1;transform:translateY(-3px) rotate(-.1deg)}
  100%{opacity:1;transform:translateY(0) rotate(0deg)}
}
.notebook.in-view .pola-sm{
  animation:smallPolaroidIn .85s cubic-bezier(.34,1.25,.64,1) .14s backwards;
}
@keyframes smallPolaroidIn{
  0%{opacity:0;transform:translateY(28px) rotate(-7deg)}
  72%{opacity:1;transform:translateY(-3px) rotate(-2deg)}
  100%{opacity:1;transform:translateY(0) rotate(-3deg)}
}

/* hover micro-interactions */
.svc:hover .svc-icon{animation:iconBounce .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes iconBounce{
  0%{transform:translateY(0) rotate(0deg)}
  55%{transform:translateY(-6px) rotate(-4deg) scale(1.04)}
  100%{transform:translateY(-4px) rotate(-3deg)}
}

/* ambient drift — transform only, no border-radius morphing */
/* the drift lives on ::before so the .blob-hero element itself is free
   to take a hover transform as part of the hero group composition */
.blob-hero{background:none;transition:transform .5s ease}
.blob-hero::before{
  content:'';position:absolute;inset:0;
  border-radius:inherit;background:var(--sage);
  animation:blobDrift 22s ease-in-out infinite;
}
@keyframes blobDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-8px,10px) scale(1.04)}
}
.smiley-badge{animation:smileyDrift 8s ease-in-out infinite}
@keyframes smileyDrift{
  0%,100%{transform:rotate(-8deg) translateY(0)}
  50%{transform:rotate(-8deg) translateY(-4px)}
}
/* ambient float sits on the parent .cta-media; the illustration itself
   keeps its own :hover lift ("paper lifted from a desk") */
.contact-float{animation:contactFloat 7s ease-in-out infinite}
@keyframes contactFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.contact-float:hover{animation-play-state:paused}

/* hero polaroid group: one coordinated composition on hover */
@media (hover:hover) and (pointer:fine){
  .pola-zone:hover .polaroid{transform:rotate(2.4deg) translateY(-5px)}
  .pola-zone:hover .tape-1{transform:rotate(-13deg) translateY(-2px)}
  .pola-zone:hover .tape-2{transform:rotate(9deg) translateY(-1px)}
  .pola-zone:hover .blob-hero{transform:translate(-7px,7px) scale(1.02)}
}

/* idle micro-moments */
@keyframes blink{0%,88%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
.idle-blink{animation:blink 1.2s ease}
@keyframes spin1{to{transform:rotate(360deg)}}
.idle-spin{animation:spin1 .9s cubic-bezier(.4,0,.3,1)}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}}
.idle-wig{animation:wig .8s ease}
@keyframes nudge{
  0%,100%{transform:rotate(-14deg)}
  50%{transform:rotate(-20deg) translateY(-2px)}
}
.idle-nudge{animation:nudge .8s ease}

/* =========================================================
   RESPONSIVE LAYERS
   1280+  large desktop (base rules above)
   1024–1279 standard desktop
   768–1023 tablet
   480–767  mobile
   <480     small mobile
   ========================================================= */

/* ---- Standard desktop ---- */
@media (max-width:1279px){
  .doodle-star{right:-18px;top:190px}
  .blob-hero{right:-14px}
}

/* ---- Tablet: collapse to single-column layouts ---- */
@media (max-width:1023px){
  html{scroll-padding-top:76px}

  /* hero: copy first, photo beneath and centred */
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(36px,6vw,54px);
  }
  .hero h1{max-width:20ch}
  .pola-zone{padding-inline:0}
  .polaroid{width:min(330px,72vw)}
  .blob-hero{right:6vw;top:-26px}
  .doodle-dotgrid{right:2vw;bottom:20px}
  .doodle-star{right:4vw;top:auto;bottom:-10px}

  /* notebook: one column, spine removed */
  .notebook{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(34px,5vw,44px);
  }
  .notebook::before{display:none}
  .doodle-clip-card{right:32px}

  /* work: two columns */
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* contact: stack, copy first */
  .cta-card{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(28px,4vw,38px);
  }
  .cta-media{max-width:520px;margin-inline:auto;width:100%}
}

/* ---- Mobile ---- */
@media (max-width:767px){
  html{scroll-padding-top:70px}

  /* --- hero flow: copy -> photo -> pills+CTAs ---
     .hero-copy dissolves (display:contents) so its children become
     grid items that can be reordered around the photo. Spacing comes
     from the elements' own margins, so gap is zeroed. */
  .hero{padding-bottom:clamp(32px,7vw,48px)}
  .hero-grid{gap:0}
  .hero-copy{display:contents}
  .hero h1{max-width:none}
  .hero .sub{max-width:none}
  .pola-zone{order:4;margin-block:18px 34px}
  .tags{order:5}
  .hero-cta{order:6;gap:12px}
  .hero-cta .btn{flex:1 1 100%}

  .polaroid{width:min(300px,78vw)}

  /* declutter: these doodles have no room to breathe here */
  .doodle-dotgrid,
  .doodle-star,
  .doodle-heart{display:none}

  /* --- notebook flow: About first, then What I Do --- */
  .about-side{order:-1}

  /* about: photo above copy, centred */
  .about-layout{grid-template-columns:minmax(0,1fr);gap:22px;justify-items:center}
  .about-photo{width:min(220px,64vw)}
  .about-copy{width:100%}
  .pola-blob{left:-14px;top:-14px}

  /* work: single column */
  .projects{grid-template-columns:minmax(0,1fr)}
  .proj:nth-child(n){transform:none}      /* drop rotation when stacked */
  .proj:hover,.proj:focus-visible{transform:translateY(-5px)}
  .washi{left:24px;width:96px}

  /* contact: hide the illustration on mobile for a cleaner card */
  .cta-media{display:none}
  .contact-links{gap:14px}
}

/* ---- Small mobile ---- */
@media (max-width:479px){
  .hero .hey{font-size:1.35rem}
  .polaroid{width:min(270px,84vw)}
  .pola-zone{flex-direction:column;align-items:center}

  .doodle-clip-card{display:none}
  .doodle-curl{display:none}

  /* clouds shrink so they stay decorative, not dominant */
  .frame-blob-left{width:200px;left:-70px;bottom:-70px}
  .frame-blob-right{width:210px;right:-70px;bottom:-75px}

  .cta-arrow{display:none}
  .cta-btn-row .btn{flex:1 1 100%}

  .ov-card{padding:52px 20px 24px}
  .ov-close{top:10px;right:10px}
}

/* ---------------------------------------------------------
   16. REDUCED MOTION & COARSE POINTERS
--------------------------------------------------------- */

/* touch devices: no custom cursor, no hover-dependent movement */
@media (hover:none),(pointer:coarse){
  body{cursor:auto}
  .cursor,.cursor-dot{display:none !important}
  .proj:hover{transform:none;box-shadow:var(--shadow-soft)}
  .proj:nth-child(n){transform:none}
  .polaroid:hover,.pola-sm:hover,.desk-illo:hover,.notebook:hover{transform:none}
  .blob-hero::before,.smiley-badge,.contact-float,.frame-blob{animation:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .lz,.rv,.rv-stagger > *,.pol-load,.hl span.w{
    opacity:1 !important;transform:none !important;
  }
  .draw path{stroke-dashoffset:0 !important}
  html{scroll-behavior:auto}
  body{cursor:auto}
  .cursor,.cursor-dot{display:none}
}


/* WordPress integration */
.admin-bar .site-nav{top:32px}
@media (max-width:782px){
  .admin-bar .site-nav{top:46px}
}

.wp-page-shell{
  min-height:70vh;
  padding-block:clamp(36px,7vw,84px);
}
.wp-page-card{
  background:var(--paper);
  border:3px solid var(--lavender);
  border-radius:var(--r-lg);
  padding:var(--card-pad);
  box-shadow:var(--shadow-soft);
}
.wp-page-card h1{
  font-size:clamp(2rem,5vw,3.5rem);
  margin-bottom:24px;
}
.wp-page-card :where(p,ul,ol,blockquote){
  margin-bottom:1.25rem;
}
.wp-page-card :where(ul,ol){
  padding-left:1.4rem;
}
.wp-page-card a{
  color:var(--ink);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}