/* ===========================================================
   Jennie's Portfolio — shared design system
   Warm editorial palette · script + serif + grotesk blend
   =========================================================== */

:root {
  /* core palette (from brief) */
  --maroon:   #6f1d1b;
  --tan:      #bb9457;
  --espresso: #432818;
  --rust:     #99582a;
  --cream:    #ffe6a7;

  /* derived working tones */
  --paper:      #fbf3e1;  /* light base background */
  --paper-deep: #f4e7c8;  /* warmer cream panel     */
  --ink:        #2c1a10;  /* near-black warm text    */
  --ink-soft:   #5c4631;  /* muted brown body text   */
  --line:       #e4d3ad;  /* hairline on cream       */

  /* type */
  --script: "Pinyon Script", cursive;
  --serif:  "Cormorant Garamond", Georgia, serif;
  --sans:   "Hanken Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* ---- type helpers ---- */
.script  { font-family: var(--script); font-weight: 400; line-height: 0.9; }
.serif   { font-family: var(--serif); }
.sans    { font-family: var(--sans); }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ===========================================================
   NAV BAR (shared across directions)
   =========================================================== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 56px;
  font-family: var(--sans);
}
.nav .nav-links {
  display: flex;
  gap: 38px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav .nav-links a { text-decoration: none; color: inherit; opacity: 0.78; transition: opacity .2s; }
.nav .nav-links a:hover { opacity: 1; }
.nav .nav-brand { font-family: var(--script); font-size: 34px; line-height: 1; }

/* ===========================================================
   ROTATING ROLE
   =========================================================== */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
}
.rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity .7s ease, transform .7s ease;
  white-space: nowrap;
}
.rotator > span.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================
   CUTE 3D CREAM FOLDER
   =========================================================== */
.folder {
  position: relative;
  width: 188px;
  height: 138px;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  filter: drop-shadow(0 16px 22px rgba(67,40,24,0.22));
}
.folder:hover { transform: translateY(-10px) rotate(-1deg); }

/* the back wall of the folder + its tab */
.folder .folder-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f3e3b6, #e9d49b);
  border-radius: 12px 14px 14px 14px;
}
.folder .folder-back::before {  /* tab */
  content: "";
  position: absolute;
  top: -16px;
  left: 14px;
  width: 78px;
  height: 22px;
  background: linear-gradient(180deg, #f3e3b6, #ecd9a6);
  border-radius: 10px 12px 0 0;
}

/* the inner sheet — carries the revealed project title */
.folder .folder-paper {
  position: absolute;
  left: 12px;
  right: 14px;
  top: 6px;
  bottom: 26px;
  background: #fffaf0;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(67,40,24,.10);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 14px;
  text-align: center;
}
.folder:hover .folder-paper { transform: translateY(-16px) rotate(1deg); }
.folder .folder-paper .p-cat {
  font-family: var(--script);
  font-size: 24px;
  color: var(--rust);
  line-height: 1;
}
.folder .folder-paper .p-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--espresso);
}

/* the front cover */
.folder .folder-front {
  position: absolute;
  inset: 0;
  top: 18px;
  background: linear-gradient(165deg, #fdeecb 0%, #eed9a4 100%);
  border-radius: 6px 12px 14px 14px;
  transform-origin: bottom center;
  transform: perspective(620px) rotateX(0deg);
  transition: transform .42s cubic-bezier(.2,.7,.3,1);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  z-index: 2;
}
.folder:hover .folder-front { transform: perspective(620px) rotateX(-58deg); }
.folder .folder-front .cover-word {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
  opacity: 0.85;
}

/* ---- scrapbook polaroid ---- */
.polaroid {
  background: #fffdf7;
  padding: 12px 12px 44px;
  box-shadow: 0 18px 30px rgba(67,40,24,.26);
  border-radius: 2px;
}
.polaroid .tape {
  position: absolute;
  top: -14px; left: 50%;
  width: 96px; height: 30px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,230,167,.6);
  box-shadow: 0 2px 6px rgba(67,40,24,.15);
}
.polaroid .cap {
  font-family: var(--script);
  font-size: 26px;
  text-align: center;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* image-slot fallback styling so placeholders read clearly */
image-slot {
  --is-bg: #efe0bd;
}

/* ===========================================================
   PERSISTENT NAV DOCK (Figma-style, all pages)
   =========================================================== */
.dock {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100vw - 24px);
  background: var(--espresso);
  color: var(--cream);
  padding: 7px 7px 7px 18px;
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(67,40,24,.34);
  font-family: var(--sans);
  z-index: 80;
}
.dock .dock-brand {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--cream);
  text-decoration: none;
  opacity: .92;
  white-space: nowrap;
}
.dock .dock-div {
  width: 1px;
  height: 22px;
  background: rgba(255,230,167,.2);
  margin: 0 4px;
}
.dock .dock-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.dock .dock-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cream);
  text-decoration: none;
  opacity: .64;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .01em;
  padding: 8px 12px;
  border-radius: 9px;
  white-space: nowrap;
  transition: opacity .18s, background .18s;
}
.dock .dock-links a svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dock .dock-links a:hover { opacity: 1; background: rgba(255,230,167,.12); }
.dock .dock-links a.is-active { opacity: 1; background: rgba(255,230,167,.14); }
.dock .dock-cta {
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  color: var(--espresso);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s, box-shadow .18s;
}
.dock .dock-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.dock .dock-cta svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

@media (max-width: 820px) {
  .dock { padding-left: 14px; }
  .dock .dock-brand, .dock .dock-div { display: none; }
}
@media (max-width: 560px) {
  .dock .dock-links a span { display: none; }
  .dock .dock-links a { padding: 9px 11px; }
  .dock .dock-cta { padding: 10px 14px; }
}