/* ===========================================================
   TRM - Live Cupping | shared brand layer
   Palette, type and rules lifted straight from the TRM brand
   guidelines and the trm.coffee site. Nothing invented here.
   =========================================================== */

@font-face{
  font-family:'Komet';
  src:url('../fonts/Komet-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:'Komet';
  src:url('../fonts/Komet-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:block;
}
@font-face{
  font-family:'Regeneration';
  src:url('../fonts/CCRegeneration.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:block;
}

:root{
  /* brand - primary */
  --pale:#F4F5C7;
  --ink:#3D2B23;
  --black:#000;
  --white:#fff;
  /* brand - secondary */
  --sand:#E0D1C5;
  --clay:#603E34;
  --mist:#C6D2D2;
  --bone:#F7F5EB;

  --la:'Komet', ui-sans-serif, system-ui, sans-serif;
  --dis:'Regeneration', 'Komet', sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:.7s var(--ease);
}

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

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--la);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

img,svg{ display:block; max-width:100%; }
svg{ fill:currentColor; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

/* The brand's small technical voice - "ROASTED / BATCH.001".
   Every label, counter and caption in this app is one of these. */
.stamp{
  font-family:var(--la);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* The headline voice. Always uppercase, always tight. */
.dis{
  font-family:var(--dis);
  font-weight:700;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.005em;
}

/* Counters must not jitter as they climb. */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* -- motion ------------------------------------------------
   Fade and a short lift. Nothing else. If it reads as an
   effect rather than a transition, it does not belong here. */

@keyframes trm-rise{
  from{ opacity:0; transform:translateY(.55em); }
  to  { opacity:1; transform:none; }
}
@keyframes trm-fade{
  from{ opacity:0; }
  to  { opacity:1; }
}

.rise{ animation:trm-rise .62s var(--ease) both; }
.fade{ animation:trm-fade .5s var(--ease) both; }

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

.logo{ color:currentColor; }