/* ==========================================================================
   Expertise & Skills — page-scoped styling (sk- prefixed, loaded only by
   skills.html). Recreates the designer's Canva page: a crumpled-paper
   receipt beside a large açaí bowl, on the site's deep-maroon ground.
   ========================================================================== */

.sk-theme { background: #300204; }

.sk-hero {
  position: relative;
  min-height: 100vh;
  background: #300204;
  overflow: hidden;
}

/* ---------- Receipt ---------- */
/* "The Seasons" (the original design's receipt font) is a commercial
   foundry font with no free CDN source and no confirmed webfont license
   for this site, so --font-receipt stands in for it until a licensed
   file is supplied. Scoped locally rather than overriding the site-wide
   --font-display token, which stays Playfair Display elsewhere. */
.sk-receipt {
  position: absolute;
  left: 51.4%;
  width: 31.6%;
  top: 0;
  bottom: 2.1%;
  z-index: 2;

  --font-receipt: 'DM Serif Display', Georgia, serif;
  --font-receipt-script: 'Shadows Into Light', cursive;
}

/* Authentic crumpled-paper photo, filling the panel exactly. Its own
   alpha carries the torn bottom edge and transparent exterior, so no
   clip-path or generated texture is needed here. */
.sk-receipt-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

.sk-receipt-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.01vw 2.21vw 1.26vw;
}

.sk-receipt-title {
  font-family: var(--font-receipt);
  font-weight: 400;
  font-size: clamp(2.1rem, 2.9vw, 3rem);
  line-height: 1.08;
  color: #15110d;
  margin: 0 0 0.35rem;
}

.sk-receipt-subtitle {
  font-family: var(--font-receipt-script);
  font-weight: 400;
  font-size: 1.3rem;
  color: #3a352e;
  margin: 0 0 0.9rem;
}

.sk-rule {
  border: none;
  border-top: 1.5px solid #8c887f;
  margin: 0 0 1.1rem;
}

.sk-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4.6vh;
}

.sk-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-receipt);
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  color: #1c1812;
}

.sk-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.sk-barcode {
  width: 34%;
  height: auto;
  flex-shrink: 0;
}

.sk-total-label {
  font-family: var(--font-receipt);
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  color: #15110d;
  white-space: nowrap;
}

.sk-stamp {
  width: 23%;
  height: auto;
  flex-shrink: 0;
  transform: rotate(-9deg);
}

/* ---------- Bowl ---------- */
.sk-bowl {
  position: absolute;
  left: 28.4%;
  width: 24.31%;
  top: 41.03%;
  z-index: 3;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.5));
}

/* ---------- Arrow ---------- */
.sk-arrow {
  position: absolute;
  left: 13.5%;
  width: 19.8%;
  top: 38.2%;
  z-index: 1;
}
.sk-arrow svg { display: block; width: 100%; height: auto; }

/* ---------- Caption ---------- */
.sk-caption {
  position: absolute;
  left: 5.2%;
  width: 20.1%;
  top: 61.8%;
  z-index: 1;
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--gold);
}

/* ==========================================================================
   Responsive recomposition (tablet / mobile)

   The 1440px layout above is untouched. Below ~900px the absolute,
   side-by-side composition (tall receipt + overlapping bowl) stops
   working as a layout, not just as a size — there isn't a wide-enough
   column to hold a full-height receipt beside a full-size bowl. So this
   recomposes into a centered vertical stack in the same DOM order
   (arrow, caption, bowl, receipt): the arrow turns to point down into
   the bowl beneath it instead of down-left across the page, the caption
   centers under it, the bowl becomes a standalone hero image, and the
   receipt becomes a normal-flow card whose height is set by its own
   content (title/list/total) rather than a percentage of the viewport —
   the torn-paper photo still fills it via inset:0, it just resolves
   against that content-driven height instead of a fixed hero height.
   ========================================================================== */
@media (max-width: 900px) {
  .sk-hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 1.5rem 4rem;
  }

  .sk-arrow {
    position: static;
    width: 70px;
    margin: 0 auto;
    transform: rotate(-40deg);
  }

  .sk-caption {
    position: static;
    width: auto;
    max-width: 30rem;
    margin: 0.75rem 0 2rem;
    text-align: center;
  }

  .sk-bowl {
    position: static;
    width: min(62vw, 360px);
    margin: 0 0 2.5rem;
  }

  .sk-receipt {
    /* must stay a positioned ancestor (not static) — .sk-receipt-paper
       is `position:absolute; inset:0` and needs to fill *this* box, not
       fall through to .sk-hero */
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: min(90vw, 460px);
    margin: 0 auto;
  }

  .sk-receipt-content {
    padding: 2.4rem 2rem 2rem;
  }

  .sk-list { gap: 1.1rem; }
}

@media (max-width: 480px) {
  .sk-hero { padding: 3rem 1.25rem 3.5rem; }

  .sk-bowl { width: min(68vw, 300px); margin-bottom: 2rem; }

  .sk-receipt { width: 100%; }

  .sk-receipt-content { padding: 2rem 1.4rem 1.6rem; }

  .sk-receipt-title { font-size: 2rem; }
  .sk-receipt-subtitle { font-size: 1.1rem; }

  .sk-list { gap: 0.85rem; }
  .sk-list li { font-size: 0.92rem; }

  .sk-total-label { font-size: 1.3rem; }
  .sk-barcode { width: 30%; }
  .sk-stamp { width: 26%; }

  .sk-caption { font-size: 1rem; padding: 0 0.5rem; }
}