/* ============================================================
   Hot Water — "Loud Dharma 4A" design system  (warm-forward)
   Pop-art modernism: big block type, single-color fields,
   billboard quotes, untreated photos with a sharp seam,
   IBM Plex Mono metadata. One family, reads as one.
   ============================================================ */

:root{
  /* Warm-led spectrum */
  --flamingo:#FF3B47;   /* primary */
  --saffron:#FF7A1A;
  --sun:#FFD60A;
  --oxblood:#B82832;
  /* Cool counterpoint */
  --sky:#4A90E2;
  --midnight:#1E3A8A;
  /* Section accents */
  --matcha:#7BA23A;   /* Outer / tea house */
  --iris:#4A3CB5;     /* Secret / retreat */
  /* Card accents */
  --cobalt:#1A5CE0;   /* Vision card */
  --fuchsia:#D6006E;  /* Model card */
  /* Neutrals */
  --cream:#FBF7EF;      /* paper */
  --ink:#1A1510;        /* warm near-black text */
  --ink-soft:#5A5047;
  --line:#E7DECF;
  --line-strong:#D8CCB6;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Display type: Fraunces italic, heavy, high optical size ---- */
.display{
  font-family:var(--display);
  font-style:italic;
  font-weight:900;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  letter-spacing:-0.032em;
  line-height:0.94;
  margin:0;
}
.subdisplay{
  font-family:var(--display);
  font-style:italic;
  font-weight:800;
  font-variation-settings:"opsz" 80,"SOFT" 0,"WONK" 0;
  letter-spacing:-0.02em;
  line-height:1.02;
  margin:0;
}
.serif{font-family:var(--display);font-style:italic;font-variation-settings:"opsz" 40;}

/* ---- Metadata label: mono, uppercase, wide tracking ---- */
.meta{
  font-family:var(--mono);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:12.5px;
  line-height:1.5;
}
.meta-sm{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.18em;font-size:10px;font-weight:500;}

/* ---- Single-color fields ("each block one color") ---- */
.on-flamingo{background:var(--flamingo);color:#fff;}
.on-saffron {background:var(--saffron); color:#1A0E00;}
.on-sun     {background:var(--sun);     color:#241A00;}
.on-oxblood {background:var(--oxblood); color:#fff;}
.on-sky     {background:var(--sky);     color:#06152B;}
.on-midnight{background:var(--midnight);color:#fff;}
.on-cream   {background:var(--cream);   color:var(--ink);}
.on-ink     {background:#171009;        color:var(--cream);}
.on-matcha  {background:var(--matcha);  color:#fff;}
.on-iris    {background:var(--iris);    color:#fff;}
.on-cobalt  {background:var(--cobalt);  color:#fff;}
.on-fuchsia {background:var(--fuchsia); color:#fff;}

/* accent text colors */
.t-flamingo{color:var(--flamingo);} .t-saffron{color:var(--saffron);} .t-sun{color:var(--sun);}
.t-sky{color:var(--sky);} .t-midnight{color:var(--midnight);} .t-oxblood{color:var(--oxblood);}

/* ---- Photo with a sharp seam (no rounded corners on the color join) ---- */
.seam{display:block;width:100%;height:100%;object-fit:cover;}

/* ---- Buttons ---- */
.btn{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.12em;font-size:12px;font-weight:600;
  background:var(--ink);color:var(--cream);border:none;padding:12px 18px;cursor:pointer;text-decoration:none;display:inline-block;
  border-radius:0;transition:background .15s,color .15s;
}
.btn:hover{background:var(--flamingo);color:#fff;}
.btn.alt{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn.alt:hover{background:var(--ink);color:var(--cream);}

::selection{background:var(--flamingo);color:#fff;}
a{color:var(--flamingo);}