/* ============================================================
   TOKENS — change the whole mood from this one block.
   ============================================================ */
:root {
  --blush:      #FBEFF2;   /* page background: the tissue-paper pink   */
  --blush-deep: #F3DDE3;   /* slightly deeper pink for cards/frames    */
  --chain:       #9AA2AB;   /* the chain metal: brushed silver          */
  --chain-shine: #DDE2E7;   /* highlight pass on the chain              */
  --ink:        #4A3B40;   /* warm plum-brown text, softer than black  */
  --cream:      #FFFDFD;   /* charm tag fill                           */

  --font-script: 'Parisienne', cursive;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--blush);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.6;
}

a { color: inherit; }

/* ============================================================
   HEADER — the bracelet lives here.
   position:relative so the wordmark can float inside the
   hollow of the chain's drape.
   ============================================================ */
header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.wordmark {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: 0.02em;
  pointer-events: none;          /* clicks pass through to the chain */
}
.wordmark a { pointer-events: auto; text-decoration: none; }

/* ============================================================
   DESKTOP NAV — an inline SVG.
   The chain is ONE <path> stroked twice:
     pass 1: fat dashes with round caps  -> the links
     pass 2: thin lighter line on top    -> the shine
   Each menu item is an SVG <a> group: jump ring + bail + tag.
   ============================================================ */
.bracelet-nav { display: block; width: 100%; height: auto; }

.chain-links {
  fill: none;
  stroke: var(--chain);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1 11;        /* tiny dash + gap = a run of round beads/links */
}
.chain-shine {
  fill: none;
  stroke: var(--chain-shine);
  stroke-width: 2;
  stroke-dasharray: 1 11;
  stroke-linecap: round;
}

/* The clasp — home. A ring with a little lever, like a lobster clasp. */
.clasp circle {
  fill: none;
  stroke: var(--chain);
  stroke-width: 4;
}
.clasp line { stroke: var(--chain); stroke-width: 3; stroke-linecap: round; }
.clasp:hover circle, .clasp:focus circle { stroke: var(--ink); }

/* Each charm: jump ring (circle), bail (short line), tag (rect + text) */
.charm circle {
  fill: var(--blush);
  stroke: var(--chain);
  stroke-width: 3;
}
.charm line { stroke: var(--chain); stroke-width: 2.5; }
.charm rect {
  fill: var(--cream);
  stroke: var(--chain);
  stroke-width: 1.5;
  rx: 17;                        /* rounded tag, like a stamped metal blank */
}
.charm text {
  font-family: var(--font-serif);
  font-size: 19px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Hover/focus: the charm swings gently from its jump ring.
   transform-box + transform-origin make the ring the pivot point. */
.charm .swing {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}
.charm:hover .swing,
.charm:focus .swing { animation: sway 1.1s ease-in-out; }
.charm:hover rect,
.charm:focus rect { stroke: var(--ink); }

@keyframes sway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  55%  { transform: rotate(-3.5deg); }
  80%  { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}

/* Anyone who prefers less motion gets a still bracelet. */
@media (prefers-reduced-motion: reduce) {
  .charm:hover .swing, .charm:focus .swing { animation: none; }
}

/* Keyboard focus ring, so tab navigation is visible */
.charm:focus, .clasp:focus { outline: none; }
.charm:focus rect { stroke-width: 3; }
.clasp:focus circle { stroke-width: 6; }

/* ============================================================
   MOBILE NAV — hidden on desktop, shown under 720px.
   The chain here is just a dotted border: cheap, honest,
   and it reads as the same bracelet held up by the clasp.
   ============================================================ */
.bracelet-nav-mobile { display: none; }

@media (max-width: 720px) {
  .bracelet-nav { display: none; }          /* put the drape away        */
  .bracelet-nav-mobile { display: block; }  /* let the bracelet dangle   */

  .wordmark {
    position: static;                        /* wordmark sits above nav  */
    padding: 26px 0 10px;
  }

  .bracelet-nav-mobile ul {
    list-style: none;
    margin: 0 0 0 42px;
    border-left: 5px dotted var(--chain);  /* the vertical chain */
    padding: 10px 0 4px;
  }

  .bracelet-nav-mobile li { margin: 26px 0; }

  .bracelet-nav-mobile a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    font-size: 1.25rem;
    padding: 2px 14px 2px 34px;
  }

  /* Each link's jump ring, hung on the chain with ::before */
  .bracelet-nav-mobile a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    border: 3px solid var(--chain);
    border-radius: 50%;
    background: var(--blush);
  }
  .bracelet-nav-mobile a:hover::before,
  .bracelet-nav-mobile a:focus::before { border-color: var(--ink); }

  /* The clasp closes the bottom of the chain, per the sketch */
  .clasp-end {
    width: 22px;
    height: 22px;
    border: 4px solid var(--chain);
    border-radius: 50%;
    margin: 4px 0 0 33px;
  }
}

/* ============================================================
   PLACEHOLDER CONTENT — just so the fold is visible.
   Swap in the real portfolio grid here.
   ============================================================ */
main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 46px 24px 80px;
}

main h2 {
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.frames div {
  background: var(--blush-deep);
  border: 1px solid #EBC9D2;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  font-style: italic;
  color: #4A3B40;
}

.frames img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 8px;
}

footer {
  text-align: center;
  padding: 30px 20px 50px;
  font-size: 1rem;
  font-style: italic;
}

.jump-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;          /* stacks gracefully on narrow phones */
  padding: 10px 0 0;
  font-style: italic;
}
.jump-links a {
  text-decoration: none;
  border-bottom: 1px solid var(--chain);
  padding-bottom: 2px;
}
.jump-links a:hover { border-color: var(--ink); }

html { scroll-behavior: smooth; }

section { scroll-margin-top: 20px; }