/* ============================================================
   OPTIONAL · Final Project Showcase — stylesheet
   Living-room aesthetic. Units: rem / % / vw only (no px).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dangrek&family=Caveat:wght@500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

/* ---------- Design tokens ---------- */
:root{
  --paper:#F7F2E9; --oat:#ECE4D5; --walnut:#8A6A4F; --amber:#E0A24E;
  --sienna:#C06B3A; --green:#66734F; --blue:#5E7C89; --pink:#A85E67;
  --ink:#34302A; --cork:#C7A26B; --red:#A02020; --navy:#2C3E4A;
  --card:#FFFDF8;
}

/* ---------- Base / reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Nunito', system-ui, sans-serif; color:var(--ink); line-height:1.6;
  background-color:var(--oat);
  background-image:
    radial-gradient(circle at 15% 4%, rgba(224,162,78,0.15) 0%, rgba(224,162,78,0) 38%),
    radial-gradient(circle at 85% 8%, rgba(94,124,137,0.12) 0%, rgba(94,124,137,0) 40%),
    radial-gradient(circle at 50% 98%, rgba(168,94,103,0.10) 0%, rgba(168,94,103,0) 42%);
  background-attachment:fixed;
}

/* ---------- Page wrapper (box model: outer margin + inner padding) ---------- */
.wrap{ max-width:65rem; margin:0 auto; padding:clamp(1.25rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) 5.6rem; }

/* ---------- Shared block spacing ---------- */
.block{ margin-top:clamp(2.4rem,5vw,4rem); }

/* ---------- HERO ---------- */
.hero{ text-align:center; margin-top:0; margin-bottom:clamp(1.25rem,4vw,2.5rem); }
.hero .eyebrow{ font-family:'Caveat', cursive; font-size:clamp(3.0rem,3vw,3.0rem); color:var(--navy); font-weight:600; }
.hero .couch{ width:100%; max-width:25rem; height:auto; margin:0.25rem auto 0; display:block;
  filter:drop-shadow(0 0.6rem 1.1rem rgba(52,48,42,0.24)); }
.hero .tagline{ font-family:'Caveat', cursive; font-size:clamp(1.6rem,4.5vw,2.3rem); color:var(--navy); font-weight:700; margin-top:-0.4rem; }
.hero .showcase-word{ font-family:'Dangrek', system-ui, sans-serif; font-size:clamp(1.4rem,4vw,2rem);
  color:var(--red); margin-top:0.4rem; letter-spacing:0.03em; }

/* ---------- TOUCHES ANYONE (face wall) ---------- */
.faces-lead{ text-align:center; max-width:60ch; margin:0 auto clamp(1.1rem,3vw,1.6rem); }
.lead-title{ font-family:'Dangrek', system-ui, sans-serif; font-weight:400; font-size:clamp(1.5rem,3.5vw,2.1rem); color:var(--ink); margin-bottom:0.5rem; }
.lead-text{ color:var(--walnut); font-size:clamp(1rem,2vw,1.12rem); }
.faces{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(0.75rem,2.5vw,1.4rem); }
.face{ width:clamp(5.5rem,15vw,8.25rem); }
.face img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:50%;
  border:0.28rem solid var(--paper); box-shadow:0 0.4rem 0.9rem rgba(52,48,42,0.26); background:var(--paper); }
.face:nth-child(6n+1) img{ outline:0.18rem solid var(--sienna); outline-offset:0.19rem; }
.face:nth-child(6n+2) img{ outline:0.18rem solid var(--green); outline-offset:0.19rem; }
.face:nth-child(6n+3) img{ outline:0.18rem solid var(--blue); outline-offset:0.19rem; }
.face:nth-child(6n+4) img{ outline:0.18rem solid var(--pink); outline-offset:0.19rem; }
.face:nth-child(6n+5) img{ outline:0.18rem solid var(--amber); outline-offset:0.19rem; }
.face:nth-child(6n+6) img{ outline:0.18rem solid var(--walnut); outline-offset:0.19rem; }
.faces-caption{ text-align:center; font-family:'Caveat', cursive; font-size:1.35rem; color:var(--navy); margin-top:clamp(1rem,2.5vw,1.5rem); }

/* ---------- Section headers ---------- */
.sec-head{ display:flex; align-items:baseline; gap:0.9rem; margin-bottom:0.9rem; }
.sec-index{ font-family:'Dangrek', system-ui, sans-serif; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--cork); line-height:1; }
.sec-title{ font-family:'Dangrek', system-ui, sans-serif; font-weight:400; font-size:clamp(1.5rem,3.5vw,2rem); color:var(--ink); }

/* ---------- 01 · Problem card + persona (box model: border + padding + margin) ---------- */
.problem-card{ background:var(--card); border:0.13rem solid var(--cork); border-left:0.4rem solid var(--red);
  border-radius:1rem; padding:clamp(1.4rem,3vw,2rem); box-shadow:0 0.4rem 1rem rgba(52,48,42,0.12); }
.ps{ font-size:clamp(1.05rem,2.2vw,1.22rem); color:var(--ink); line-height:1.7; }
.pov{ font-family:'Caveat', cursive; font-size:clamp(1.3rem,2.6vw,1.6rem); color:var(--navy);
  margin-top:1rem; padding-top:1rem; border-top:0.08rem dashed var(--cork); }

.persona{ display:flex; gap:clamp(1.1rem,3vw,1.9rem); align-items:center; margin-top:1.5rem;
  background:var(--card); border:0.13rem solid var(--cork); border-radius:1rem; padding:clamp(1.25rem,3vw,1.75rem);
  box-shadow:0 0.4rem 1rem rgba(52,48,42,0.12); flex-wrap:wrap; }
.persona-img{ width:clamp(7.5rem,20vw,10rem); height:clamp(7.5rem,20vw,10rem); border-radius:50%; object-fit:cover;
  border:0.3rem solid var(--sienna); box-shadow:0 0.4rem 0.9rem rgba(52,48,42,0.24); flex-shrink:0; }
.persona-body{ flex:1; min-width:15rem; }
.meet{ font-family:'Caveat', cursive; font-size:1.3rem; color:var(--green); font-weight:600; }
.persona-name{ font-family:'Dangrek', system-ui, sans-serif; font-weight:400; font-size:clamp(1.4rem,3vw,1.8rem); color:var(--ink); margin:0.13rem 0 0.4rem; }
.persona-text{ font-size:0.98rem; color:var(--ink); margin-bottom:0.65rem; }
.voice{ font-family:'Caveat', cursive; font-size:1.35rem; color:var(--navy); border-left:0.2rem solid var(--cork); padding-left:0.9rem; }

/* ---------- 02 · Key features grid ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.feat{ position:relative; background:var(--card); border:0.13rem solid var(--cork); border-radius:0.9rem;
  padding:1.4rem 1.25rem; box-shadow:0 0.3rem 0.8rem rgba(52,48,42,0.1); }
.feat::before{ content:""; position:absolute; top:-0.56rem; left:1.5rem; width:0.94rem; height:0.94rem; border-radius:50%;
  background:var(--sienna); box-shadow:0 0.13rem 0.25rem rgba(52,48,42,0.35), inset 0 -0.13rem 0.19rem rgba(0,0,0,0.2); }
.feat:nth-child(2)::before{ background:var(--green); }
.feat:nth-child(3)::before{ background:var(--blue); }
.feat:nth-child(4)::before{ background:var(--amber); }
.feat:nth-child(5)::before{ background:var(--pink); }
.feat:nth-child(6)::before{ background:var(--walnut); }
.feat-title{ font-family:'Dangrek', system-ui, sans-serif; font-weight:400; font-size:1.25rem; color:var(--ink); margin-bottom:0.4rem; }
.feat-text{ font-size:0.9rem; color:var(--ink); }

/* ---------- 03 · Testing summary ---------- */
.summary-card{ background:var(--card); border:0.13rem solid var(--cork); border-left:0.4rem solid var(--blue);
  border-radius:1rem; padding:clamp(1.4rem,3vw,1.9rem); box-shadow:0 0.4rem 1rem rgba(52,48,42,0.12); }
.summary-text{ font-size:1rem; color:var(--ink); }
.summary-text + .summary-text{ margin-top:0.9rem; }
.summary-text b{ color:var(--sienna); }

/* ---------- 04 · Prototype embed (phone shell) ---------- */
.proto-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.proto-shell{ background:#34302A; border:0.63rem solid #34302A; border-radius:2.75rem; overflow:hidden;
  box-shadow:0 1.2rem 2.4rem rgba(52,48,42,0.32); width:21.25rem; max-width:100%; }
.proto-frame{ width:100%; height:40rem; border:none; display:block; background:var(--paper); overflow:hidden; }
.proto-fallback{ text-align:center; }
.proto-link{ display:inline-block; font-weight:700; font-size:1rem; color:var(--paper);
  background:var(--sienna); padding:0.75rem 1.6rem; border-radius:62rem; text-decoration:none;
  box-shadow:0 0.31rem 0.88rem rgba(192,107,58,0.32); transition:transform .1s ease, box-shadow .1s ease; }
.proto-link:hover{ transform:translateY(-0.13rem); box-shadow:0 0.44rem 1.13rem rgba(192,107,58,0.42); }
.proto-note{ display:block; font-size:0.88rem; color:var(--walnut); margin-top:0.5rem; }

/* ---------- 05 · Reflection ---------- */
.reflect{ position:relative; background:var(--card); border:0.13rem solid var(--cork); border-radius:1rem;
  padding:clamp(1.5rem,4vw,2.5rem); box-shadow:0 0.4rem 1rem rgba(52,48,42,0.12); }
.reflect::before{ content:"\201C"; position:absolute; top:-0.38rem; left:1.25rem; font-family:'Nunito', cursive;
  font-size:5rem; color:var(--cork); line-height:1; }
.reflect-text{ font-family:'Caveat', cursive; font-size:clamp(1.35rem,2.8vw,1.7rem); color:var(--navy); line-height:1.5; }
.reflect-text + .reflect-text{ margin-top:0.9rem; }

/* ---------- Footer ---------- */
.foot{ text-align:center; color:var(--walnut); font-size:0.9rem; }
.mark{ font-family:'Dangrek', system-ui, sans-serif; color:var(--red); font-size:1.3rem; }
.foot-tag{ font-family:'Caveat', cursive; font-size:1.2rem; color:var(--navy); }

/* ---------- Responsive ---------- */
@media (max-width:47.5rem){
  .feat-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:32.5rem){
  .feat-grid{ grid-template-columns:1fr; }
  .persona{ flex-direction:column; text-align:center; }
  .voice{ border-left:none; padding-left:0; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .proto-link{ transition:none; }
}

codecraft-web-project-footer {
    display: none !important;
}