/* ------------------------------------------------------------------
   Michelle Teschmaker — "the cover"
   Palette from her photos: warm sand walls, wine reds, ochre.
   ------------------------------------------------------------------ */
:root {
  /* colour */
  --plaster:      #f6e5d5;   /* page */
  --plaster-deep: #ecd2bb;   /* lower page */
  --paper:        #fcf5ee;   /* raised surfaces */
  --wine:         #6b1d29;   /* primary ink + primary action */
  --wine-deep:    #4e1019;   /* pressed / hover */
  --wine-soft:    #8c3a45;   /* secondary ink */
  --ochre:        #94562a;   /* accents */
  --line:         rgba(107, 29, 41, 0.22);

  /* type */
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans:  "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  /* type scale — major third (1.25) from 16px */
  --t-xs:  0.8rem;    /* 12.8 */
  --t-sm:  0.875rem;  /* 14   */
  --t-md:  1rem;      /* 16   */
  --t-lg:  1.25rem;   /* 20   */
  --t-xl:  1.563rem;  /* 25   */
  --t-2xl: 1.953rem;  /* 31   */
  --t-3xl: 2.441rem;  /* 39   */
  --t-4xl: 3.052rem;  /* 49   */

  /* space — 8-point grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --gutter: var(--s-5);
  --radius-sm: 12px;
  --radius-pill: 999px;
  --tap: 48px;           /* minimum touch target */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--plaster-deep);
}

body {
  margin: 0;
  background: linear-gradient(180deg, var(--plaster) 0%, var(--plaster) 55%, var(--plaster-deep) 100%);
  color: var(--wine);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.5;
}

/* Film grain: makes the flat colour feel printed, like the textured wall in her photo */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Page: one screen, no scrolling ---------- */
.page {
  position: relative;
  overflow: hidden;      /* the tilted ribbon is clipped at the page edges */
  min-height: 100vh;
  min-height: 100svh;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ---------- Cover photo ---------- */
.cover {
  position: relative;
  margin: 0;
  flex: 1 1 auto;
  height: 37svh;
  min-height: 190px;
  max-height: 420px;
  overflow: hidden;
  animation: develop 1100ms ease-out both;
}

.cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}

/* Spine: her handle running up the edge, like small print on a magazine spine */
.spine {
  position: absolute;
  z-index: 1;
  top: var(--s-5);
  right: var(--s-3);
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  color: rgba(107, 29, 41, 0.75);
  animation: rise 900ms 700ms cubic-bezier(.2,.7,.2,1) both;
}

/* soft fade so the photo melts into the page under the name */
.cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(246, 229, 213, 0) 0%, var(--plaster) 92%);
  pointer-events: none;
}

@keyframes develop {
  from { opacity: 0; filter: saturate(0.4); }
  to   { opacity: 1; filter: none; }
}

/* ---------- Card (everything under the photo) ---------- */
.card {
  position: relative;
  padding: 0 var(--gutter) max(var(--s-5), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* Masthead: the name sits over the bottom of the photo */
.masthead {
  margin-top: calc(var(--t-4xl) * -1.05);
  position: relative;
}

.name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(var(--t-3xl), 12.4vw, var(--t-4xl));
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.name span {
  display: block;
  animation: rise 900ms cubic-bezier(.2,.7,.2,1) both;
}
.name span:first-child { animation-delay: 250ms; }
.name span + span      { animation-delay: 420ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(0.35em); }
  to   { opacity: 1; transform: none; }
}
.name span + span { padding-left: 0.62em; }   /* staggered, like a cover line */

.role {
  margin: var(--s-3) 0 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.35;
  color: var(--wine-soft);
}

/* ---------- Ribbon: the one bold, moving element ---------- */
.ribbon {
  position: relative;
  z-index: 2;
  margin: var(--s-4) calc(var(--gutter) * -1 - 16px) 0;
  padding: 9px 0;
  background: var(--wine);
  color: var(--paper);
  transform: rotate(-2.2deg);
  box-shadow: 0 6px 16px rgba(78, 16, 25, 0.18);
  overflow: hidden;
  animation: ribbon-in 800ms 600ms cubic-bezier(.2,.7,.2,1) both;
}

.ribbon-track {
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
}

.ribbon-track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.2;
  white-space: nowrap;
  padding: 0 var(--s-3);
}

.ribbon-track span::after {
  content: "✦";
  font-style: normal;
  font-size: 0.6em;
  color: #e3a77a;
  margin-left: var(--s-5);
  vertical-align: 0.25em;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes ribbon-in {
  from { opacity: 0; transform: rotate(-2.2deg) translateX(8%); }
  to   { opacity: 1; transform: rotate(-2.2deg); }
}

/* ---------- Primary actions ---------- */
.actions {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--s-4);
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: var(--t-md);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--wine);
  color: var(--paper);
}
.btn-primary:hover { background: var(--wine-deep); }

.btn-secondary {
  border: 1.5px solid var(--wine);
  color: var(--wine);
}
.btn-secondary:hover { background: var(--wine); color: var(--paper); }

/* ---------- Venture card ---------- */
.venture {
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 64px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--wine);
  text-decoration: none;
  transition: border-color 160ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.venture:hover { border-color: var(--wine); }
.venture:active { transform: scale(0.985); }

.venture-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-sm);
  letter-spacing: -0.02em;
}

.venture-text { display: grid; gap: 2px; }

.venture-name {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.1;
}

.venture-note {
  font-size: var(--t-sm);
  color: var(--ochre);
}

/* ---------- Socials: present, but secondary ---------- */
.socials {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);   /* same rhythm as the action row above */
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(252, 245, 238, 0.6);
  border: 1px solid var(--line);
  color: var(--wine-soft);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.social:hover { background: var(--wine); color: var(--paper); border-color: var(--wine); }
.social:active { transform: scale(0.96); }

a:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
}

/* ---------- Short phones (e.g. iPhone SE with browser bars) ---------- */
@media (max-height: 620px) and (max-width: 879px) {
  .cover { height: 32svh; min-height: 150px; }
  .ribbon { margin-top: var(--s-3); padding: 6px 0; }
  .ribbon-track span { font-size: var(--t-md); }
  .masthead { margin-top: calc(var(--t-3xl) * -1); }
  .name { font-size: var(--t-3xl); }
  .role { margin-top: var(--s-2); font-size: var(--t-sm); }
  .actions { margin-top: var(--s-4); }
  .btn { min-height: var(--tap); }
  .venture { min-height: 60px; padding-block: var(--s-2); }
  .socials { margin-top: var(--s-4); padding-top: var(--s-3); }
}

/* ---------- Desktop: a magazine spread ---------- */
@media (min-width: 880px) {
  body { background: var(--plaster); }

  .page {
    max-width: none;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cover {
    height: auto;
    max-height: none;
  }
  .cover::after { display: none; }
  .cover img { object-position: 50% 20%; }

  .card {
    justify-content: center;
    padding: var(--s-8);
    max-width: 600px;
  }

  /* the name crosses the gutter onto the photo */
  .masthead { margin: 0 0 0 calc(var(--s-8) * -2.25); }
  .name { font-size: clamp(var(--t-4xl), 6.4vw, 5.6rem); }
  .role { margin-left: calc(var(--s-8) * 2.25); font-size: var(--t-lg); }

  .actions { margin-top: var(--s-6); }
  .venture { margin-top: var(--s-4); }
  .socials { margin-top: var(--s-6); }

  .spine { right: auto; left: var(--s-5); top: var(--s-6); font-size: var(--t-md); }

  /* the ribbon cuts diagonally across the whole spread */
  .ribbon {
    position: absolute;
    left: -5vw;
    right: -5vw;
    bottom: 7svh;
    margin: 0;
    padding: 12px 0;
  }
  .ribbon-track span { font-size: var(--t-xl); padding: 0 var(--s-4); }
  .card { position: static; padding-bottom: calc(var(--s-8) + 7svh); }
}

@media (prefers-reduced-motion: reduce) {
  .cover, .spine, .name span, .ribbon, .ribbon-track { animation: none; }
  .btn, .venture, .social { transition: none; }
}