/* =========================================================
   ripleymagic.com — holding page.

   Self-contained: this directory ships on its own, so it has
   no dependency on ../shared.

   The palette and type here come from the printed business
   card, NOT from the design study's palettes. The cards are
   already printed, so they are the fixed brand: stark near-black
   on white, geometric sans, wide caps tracking. Match them.
   ========================================================= */

:root{
  --paper:#FFFFFF;      /* the card stock */
  --field:#F4F4F4;      /* the grey surround on the card */
  --ink:#221F1F;        /* the card's near-black */
  --body:#55514F;
  --rule:#D8D6D4;

  --sans:Jost, "Century Gothic", Futura, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);

  --step--1:clamp(12.5px,.35vw + 11.6px,13.5px);
  --step-0: 16px;
  --step-1: clamp(16px,.5vw + 14.6px,18px);

  /* The wordmark. Upper bound is set by the widest line,
     "THE MAGICIAN": 12 caps at .12em tracking must fit inside
     the card's content box (34rem less 2x --pad) or the whole
     card is pushed wider than the viewport. */
  --step-3: clamp(22px,6.2vw,46px);

  --gut:clamp(16px,5vw,40px);   /* page margin, outside the card */
  --pad:clamp(20px,5vw,36px);   /* card's own inner padding    */
}

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

html{color-scheme:light}

body{
  margin:0;min-height:100dvh;
  background:var(--field);color:var(--body);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

.stage{
  min-height:100dvh;display:grid;place-items:center;
  padding:clamp(16px,4vh,56px) var(--gut);
}

.card{
  width:100%;max-width:34rem;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 var(--pad) clamp(28px,5vw,40px);
}

/* Flex children default to min-width:auto, which lets a long
   tracked-out word push the card past its max-width. */
.card > *{max-width:100%;min-width:0}

/* Full-bleed against the card's padding. The width/height attributes
   on the <img> reserve the correct box before the file loads, so no
   aspect-ratio or object-fit is needed and nothing can crop. */
.photo{
  display:block;width:calc(100% + (2 * var(--pad)));max-width:none;height:auto;
  margin:0 calc(-1 * var(--pad)) clamp(24px,4.5vw,34px);
}

.eyebrow{
  margin:0 0 clamp(12px,2vw,16px);
  font-size:var(--step--1);letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--body);
}

/* Two lines, caps, wide tracking, light weight — as the card sets it.
   Tracking adds space after the final glyph too, so the negative
   right margin pulls the block back to optical centre. */
h1{
  margin:0 0 clamp(16px,3vw,24px);margin-right:-.12em;
  font-weight:400;color:var(--ink);
  font-size:var(--step-3);line-height:1.16;
  letter-spacing:.12em;text-transform:uppercase;
  text-wrap:balance;
}

.lede{
  margin:0 0 clamp(18px,3vw,26px);
  font-size:var(--step-1);color:var(--ink);text-wrap:balance;
}

.actions{display:flex;flex-direction:column;gap:10px;width:100%}

.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:54px;padding:14px 22px;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  text-decoration:none;white-space:nowrap;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.btn-solid{background:var(--ink);color:var(--paper)}

@media (hover:hover){
  .btn:hover{background:var(--ink);color:var(--paper)}
  .btn-solid:hover{background:var(--body);border-color:var(--body)}
}

/* Side by side only once both stay comfortably tappable. */
@media (min-width:30rem){
  .actions{flex-direction:row;justify-content:center}
  .btn{flex:1}
}

.note{
  margin:clamp(22px,4vw,30px) 0 0;width:100%;
  font-size:var(--step--1);color:var(--body);
  letter-spacing:.12em;text-transform:uppercase;
  padding-top:clamp(18px,3vw,24px);border-top:1px solid var(--rule);
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}