/* ============================================================
   Emma — Seamstress & Designer Portfolio
   Palette + type tuned to match the approved mockup
   ============================================================ */

:root{
  --rose:        #d6859a;   /* "Emma" heading + numbers          */
  --rose-deep:   #c9728a;   /* hover / emphasis                  */
  --rose-pill:   #e0a2b2;   /* solid pink buttons                */
  --rose-soft:   #e8aebe;   /* icons / soft accents              */
  --rose-line:   #e9b6c4;   /* dashed running-stitch lines       */
  --blush:       #fbeff2;   /* soft pink card backgrounds        */
  --blush-deep:  #f6e2e8;
  --ink:         #3a3a3a;   /* body text                         */
  --ink-soft:    #6f6a6c;   /* secondary text                    */
  --bg:          #fdfcfc;   /* page background (warm white)       */
  --white:       #ffffff;
  --stitch: 7px;            /* dash length for running stitch     */
  --maxw: 1280px;
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Poppins", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 48px; }

/* ---------- reusable sewing-button motif ---------- */
.sym{ display:none; }
.btn-dot{ width:34px; height:34px; flex:0 0 auto; }
.btn-dot use{ fill:var(--rose-pill); }
.btn-dot.ring use{ fill:var(--white); stroke:var(--rose-pill); }

/* ---------- running-stitch helpers ---------- */
.stitch-line{
  border:0; height:0;
  border-top:2px dashed var(--rose-line);
}

/* ============================================================
   TAPE-MEASURE SCROLL BAR  (fixed, left edge)
   ============================================================ */
.tape{
  position:fixed; top:0; left:0; z-index:60;
  width:30px; height:100vh;
  background:linear-gradient(90deg,#fdf3d8 0%, #fbeec9 100%);
  border-right:1px solid #e9d9a6;
  box-shadow:2px 0 8px rgba(0,0,0,.04);
}
.tape .ticks{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    to bottom, #cdb978 0 1px, transparent 1px 20px);
}
.tape .ticks.major{
  background-image:repeating-linear-gradient(
    to bottom, #b69a4e 0 1.5px, transparent 1.5px 100px);
}
.tape .marker{
  position:absolute; left:0; right:0; top:0;
  height:2px; background:var(--rose-deep);
  box-shadow:0 0 0 2px rgba(214,133,154,.25);
}
.tape .marker::after{
  content:attr(data-in)'"';
  position:absolute; left:33px; top:-9px;
  font:600 10px/1 var(--sans); color:var(--rose-deep);
  background:var(--white); padding:2px 5px; border-radius:6px;
  border:1px dashed var(--rose-line); white-space:nowrap;
}
@media (max-width:880px){ .tape{ display:none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(253,252,252,.86);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px dashed transparent;
  transition:border-color .3s;
}
.nav.scrolled{ border-bottom-color:var(--rose-line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .name{ font-family:var(--serif); font-size:30px; color:var(--rose); font-weight:700; }
.menu{ display:flex; align-items:center; gap:38px; }
.menu a{
  font-size:12.5px; letter-spacing:.18em; font-weight:600;
  color:var(--ink); text-transform:uppercase; position:relative; padding:4px 0;
}
.menu a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:0;
  border-top:1.5px dashed var(--rose); transition:right .25s ease;
}
.menu a:hover{ color:var(--rose-deep); }
.menu a:hover::after{ right:0; }
.nav-toggle{ display:none; background:none; border:0; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:36px 0 80px; }
.hero .wrap{
  display:grid; max-width:1460px;
  grid-template-columns:minmax(360px,1.12fr) minmax(340px,1fr) 300px;
  gap:46px; align-items:stretch;
}

/* --- hero left --- */
.hero-name{
  font-family:var(--serif); font-weight:700; color:var(--rose);
  font-size:clamp(72px,8.5vw,132px); line-height:.9; margin:6px 0 0;
  letter-spacing:-.01em; white-space:nowrap;
}
.hero-underline{ width:min(360px,100%); height:26px; margin:10px 0 26px; }
.hero-tag{
  font-size:18px; line-height:1.55; color:var(--ink); max-width:380px; margin:0 0 30px;
}
.cta{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--rose-pill); color:#fff; font-weight:600; letter-spacing:.12em;
  font-size:13px; text-transform:uppercase; padding:16px 30px; border-radius:40px;
  border:0; box-shadow:0 10px 24px -10px rgba(214,133,154,.8);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.cta:hover{ background:var(--rose-deep); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(201,114,138,.9); }
.cta svg{ width:20px; height:20px; }

/* qualities card */
.quality{
  margin-top:44px; background:var(--blush); border-radius:18px;
  padding:26px 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.quality .q{ text-align:center; padding:0 6px; position:relative; }
.quality .q + .q::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px;
  border-left:1.5px dashed var(--rose-line);
}
.quality .q svg{ width:40px; height:40px; margin:0 auto 12px; stroke:var(--rose-soft); fill:none; }
.quality .q b{ display:block; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.quality .q span{ display:block; font-size:11px; color:var(--ink-soft); margin-top:4px; line-height:1.35; }

/* --- hero center : journey timeline --- */
.timeline{ position:relative; padding:8px 0; }
.timeline::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  border-left:2px dashed var(--rose-line);
}
.t-row{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
  align-items:center; margin-bottom:30px; min-height:120px;
}
.t-photo{ width:100%; }
.t-photo img{
  width:100%; height:auto; display:block; border-radius:16px;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.3);
}
.t-text{ padding:0 26px; }
.t-num{ font-family:var(--serif); font-size:30px; color:var(--rose); line-height:1; }
.t-text h3{ font-family:var(--serif); font-weight:500; font-size:21px; margin:6px 0 0; color:var(--ink); line-height:1.25; }
/* odd rows: photo left, text right ; even rows mirrored */
.t-row.left  .t-photo{ order:1; padding-right:34px; }
.t-row.left  .t-text { order:2; }
.t-row.right .t-text { order:1; text-align:right; }
.t-row.right .t-photo{ order:2; padding-left:34px; }
/* node button on the center line */
.t-node{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:34px; height:34px; background:var(--white); border-radius:50%;
  display:grid; place-items:center;
}
/* little pointer from node toward the photo */
.t-row.left  .t-node::after,
.t-row.right .t-node::after{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:0; height:0; border:7px solid transparent;
}
.t-row.left  .t-node::after{ right:30px; border-right-color:var(--blush-deep); }
.t-row.right .t-node::after{ left:30px;  border-left-color:var(--blush-deep); }

/* --- hero right : dress-form + needle-and-thread line art ---
   bigger, sitting up near the top-right so it's visible without scrolling */
/* large, anchored to the BOTTOM-right like the reference;
   thread swirls up, dress form sits at the bottom of the hero */
.hero-deco{ position:relative; }
.hero-deco .deco-art{
  position:absolute; right:-46px; bottom:-2px;
  height:760px; width:auto; max-width:none; display:block;
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ padding:96px 0; }
.section.alt{ background:var(--blush); }
.sec-head{ text-align:center; max-width:680px; margin:0 auto 56px; }
.sec-kicker{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--rose); font-weight:600; }
.sec-title{
  font-family:var(--serif); font-size:clamp(34px,4vw,48px); color:var(--ink);
  margin:10px 0 0; font-weight:700; position:relative; display:inline-block;
}
/* stitched underline that "draws in" on reveal */
.sec-title .stitch{
  display:block; height:14px; margin:8px auto 0; width:140px;
}
.sec-sub{ color:var(--ink-soft); font-size:16px; margin:18px auto 0; line-height:1.6; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   PORTFOLIO  (masonry gallery)
   ============================================================ */
.gallery{ columns:3; column-gap:22px; }
@media (max-width:980px){ .gallery{ columns:2; } }
@media (max-width:560px){ .gallery{ columns:1; } }
.tile{
  width:100%; margin:0 0 22px; padding:0; border:0; background:none;
  display:inline-block; position:relative; border-radius:16px; overflow:hidden;
  box-shadow:0 16px 34px -22px rgba(0,0,0,.45); break-inside:avoid;
}
.tile img{ width:100%; height:auto; transition:transform .6s ease; }
.tile:hover img{ transform:scale(1.05); }
.tile .cap{
  position:absolute; inset:auto 0 0 0; padding:42px 18px 16px;
  background:linear-gradient(to top, rgba(58,40,46,.78), transparent);
  color:#fff; text-align:left; opacity:0; transform:translateY(8px); transition:.35s;
}
.tile:hover .cap{ opacity:1; transform:none; }
.tile .cap b{ font-family:var(--serif); font-size:19px; font-weight:600; display:block; }
.tile .cap span{ font-size:12px; letter-spacing:.06em; opacity:.85; }
.tile .pin{
  position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.9); display:grid; place-items:center; opacity:0; transition:.35s;
}
.tile:hover .pin{ opacity:1; }
.tile .pin svg{ width:15px; height:15px; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:900px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svc-grid{ grid-template-columns:1fr; } }
.svc{
  background:var(--white); border:1.5px dashed var(--rose-line); border-radius:18px;
  padding:32px 24px; text-align:center; transition:transform .25s, box-shadow .25s;
}
.svc:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -24px rgba(214,133,154,.7); }
.svc svg{ width:46px; height:46px; stroke:var(--rose-soft); fill:none; margin:0 auto 16px; }
.svc h3{ font-family:var(--serif); font-size:21px; margin:0 0 8px; color:var(--ink); }
.svc p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0; }

/* ============================================================
   EXPERIENCE
   ============================================================ */
.exp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:64px; }
@media (max-width:760px){ .exp-stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ text-align:center; padding:26px 14px; background:var(--white); border-radius:16px;
  box-shadow:0 14px 30px -22px rgba(0,0,0,.4); }
.stat b{ font-family:var(--serif); font-size:42px; color:var(--rose); display:block; line-height:1; }
.stat span{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; display:block; }

.exp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:54px; }
@media (max-width:840px){ .exp-cols{ grid-template-columns:1fr; gap:40px; } }
.exp-block h3{
  font-family:var(--serif); font-size:24px; color:var(--ink); margin:0 0 22px;
  display:flex; align-items:center; gap:12px;
}
.exp-block h3 svg{ width:26px; height:26px; }

/* awards / experience list with button bullets */
.elist{ list-style:none; margin:0; padding:0; }
.elist li{ position:relative; padding:0 0 22px 38px; }
.elist li::before{
  content:''; position:absolute; left:13px; top:6px; bottom:-6px;
  border-left:2px dashed var(--rose-line);
}
.elist li:last-child::before{ display:none; }
.elist li .dot{ position:absolute; left:0; top:2px; width:28px; height:28px; }
.elist li b{ display:block; font-weight:600; font-size:15.5px; color:var(--ink); }
.elist li span{ display:block; font-size:13.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }

/* handmade build feature card (Adirondack chairs) */
.make-card{
  margin:56px auto 0; max-width:680px; background:var(--white); border-radius:18px;
  overflow:hidden; border:1.5px dashed var(--rose-line);
  box-shadow:0 18px 38px -24px rgba(0,0,0,.45);
}
.make-card img{ width:100%; height:auto; display:block; }
.make-card figcaption{ padding:18px 24px 20px; text-align:center; }
.make-card figcaption b{ font-family:var(--serif); font-size:21px; color:var(--ink); display:block; }
.make-card figcaption span{ font-size:13.5px; color:var(--ink-soft); }

/* coursework chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.chip{
  font-size:12.5px; padding:8px 16px; border-radius:30px; color:var(--ink);
  background:var(--white); border:1.5px dashed var(--rose-line); font-weight:500;
}
.section.alt .chip{ background:var(--bg); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-card{
  max-width:720px; margin:0 auto; background:var(--white); border-radius:24px;
  border:1.5px dashed var(--rose-line); padding:48px; text-align:center;
}
.contact-card p{ color:var(--ink-soft); font-size:16px; line-height:1.6; }
.contact-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.contact-actions a{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:40px;
  font-weight:600; letter-spacing:.06em; font-size:14px;
}
.contact-actions .primary{ background:var(--rose-pill); color:#fff; }
.contact-actions .primary:hover{ background:var(--rose-deep); }
.contact-actions .ghost{ border:1.5px dashed var(--rose-line); color:var(--rose-deep); }
.contact-actions svg{ width:18px; height:18px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ text-align:center; padding:40px 0 56px; color:var(--ink-soft); font-size:13px; }
.foot .brand{ justify-content:center; margin-bottom:14px; }

/* ============================================================
   LIGHTBOX / MODAL
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:40px;
  background:rgba(253,247,249,.55);            /* translucent — homepage shows through */
  backdrop-filter:blur(4px);
}
.modal.open{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.modal-panel{
  position:relative; width:min(1100px,100%); max-height:86vh; overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr;
  background:rgba(255,255,255,.94);            /* slightly transparent panel */
  border-radius:20px; border:1px solid rgba(233,182,196,.6);
  box-shadow:0 40px 90px -30px rgba(58,40,46,.55);
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{ from{ transform:scale(.94); opacity:0; } to{ transform:none; opacity:1; } }
.modal-panel{ grid-template-columns:1.45fr .85fr; }
.modal-figure{ position:relative; background:#f3e9ec; display:flex; align-items:center; justify-content:center; }
.modal-figure img#mImg{ width:100%; height:100%; max-height:86vh; object-fit:cover; }
/* carousel arrows */
.car-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.86); color:var(--rose-deep);
  display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
  transition:background .2s, transform .2s;
}
.car-nav:hover{ background:#fff; }
.car-nav.prev{ left:14px; } .car-nav.next{ right:14px; }
.car-nav svg{ width:22px; height:22px; }
/* thumbnail strip */
.car-thumbs{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; gap:8px; padding:12px 14px; justify-content:center; flex-wrap:wrap;
  background:linear-gradient(to top, rgba(40,28,32,.55), transparent);
}
.car-thumb{
  width:46px; height:54px; padding:0; border:2px solid transparent; border-radius:8px;
  overflow:hidden; cursor:pointer; background:none; opacity:.7; transition:.2s;
}
.car-thumb img{ width:100%; height:100%; object-fit:cover; }
.car-thumb:hover{ opacity:1; }
.car-thumb.active{ opacity:1; border-color:#fff; }
/* photo-count badge on gallery tiles */
.tile .count{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(58,40,46,.72); color:#fff; font-size:12px; font-weight:600;
  padding:5px 9px; border-radius:30px; backdrop-filter:blur(2px);
}
.tile .count svg{ width:13px; height:13px; }
.modal-info{
  padding:40px 36px; overflow-y:auto; background:var(--blush);
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
}
.modal-info .k{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-deep); font-weight:600;
}
.modal-info h2{ font-family:var(--serif); font-size:30px; line-height:1.1; margin:14px 0 12px; color:var(--ink); }
.modal-info .modal-tag{
  display:inline-block; font-size:12px; color:var(--ink-soft);
  background:var(--white); border:1px dashed var(--rose-line); border-radius:30px; padding:6px 14px;
}
.modal-note{
  background:var(--white); border-radius:16px; padding:22px 22px 24px; text-align:center;
  box-shadow:inset 0 0 0 1.5px rgba(233,182,196,.35);
}
.modal-note .note-label{
  display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rose); font-weight:600; margin-bottom:12px;
}
.modal-info .desc{ color:var(--ink); font-size:15.5px; line-height:1.7; margin:0; }
.modal-info .desc.placeholder{ color:#bd95a1; font-style:italic; }
.modal-foot{
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  text-align:center; padding-top:6px; border-top:2px dashed var(--rose-line);
}
.modal-close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; border-radius:50%; border:0;
  background:rgba(255,255,255,.92); color:var(--rose-deep); font-size:20px;
  display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
  transition:transform .2s, background .2s;
}
.modal-close:hover{ transform:rotate(90deg) scale(1.05); background:var(--rose-pill); color:#fff; }
@media (max-width:760px){
  .modal{ padding:16px; }
  .modal-panel{ grid-template-columns:1fr; max-height:92vh; overflow-y:auto; }
  .modal-figure img{ max-height:46vh; }
}

/* ============================================================
   RESPONSIVE — hero collapse
   ============================================================ */
@media (max-width:1080px){
  .hero .wrap{ grid-template-columns:minmax(0,1fr); }
  .hero-deco{ display:none; }
  .hero-left{ min-width:0; max-width:100%; }
  .hero-left > *{ max-width:100%; }
  .hero-name{ white-space:normal; overflow-wrap:anywhere; }
  .hero-tag{ max-width:100%; }
  .quality{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .timeline{ max-width:620px; margin:30px auto 0; }
}
@media (max-width:880px){
  .wrap{ padding:0 22px; }
  .menu{ display:none; }
  .menu.show{
    display:flex; position:absolute; top:80px; left:0; right:0; flex-direction:column;
    gap:0; background:var(--white); border-bottom:1px dashed var(--rose-line); padding:8px 22px 18px;
  }
  .menu.show a{ padding:14px 0; border-bottom:1px dashed var(--blush-deep); }
  .nav-toggle{ display:block; }
  .quality{ grid-template-columns:repeat(2,1fr); gap:18px 6px; }
  .quality .q:nth-child(3)::before{ display:none; }
}
/* ---- phones: timeline as a 2-column grid of milestone cards ---- */
@media (max-width:700px){
  .timeline{ display:grid; grid-template-columns:1fr 1fr; gap:24px 16px; align-items:start; }
  .timeline::before{ display:none; }
  .t-row,
  .t-row.left,
  .t-row.right{ display:flex; flex-direction:column; margin:0; min-height:0; }
  .t-node{ display:none; }
  .t-row .t-text,
  .t-row.right .t-text{ order:1; text-align:left; padding:0 0 8px; }
  .t-row .t-photo,
  .t-row.left .t-photo,
  .t-row.right .t-photo{ order:2; padding:0; }
  .t-photo img{ width:100%; height:auto; border-radius:14px; }
  .t-num{ font-size:21px; }
  .t-text h3{ font-size:14.5px; line-height:1.25; }
}
@media (max-width:560px){
  .hero-name{ font-size:64px; }
}