/* ==========================================================================
   LIT — shared design system
   The Jackie Project

   Soft, warm, editorial. Built for people who read board papers for a living:
   restrained colour, generous space, serif display, nothing shouting.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Karla:wght@300;400;500;600;700&display=swap');

:root{
  color-scheme: light;

  /* --- ground ------------------------------------------------------------ */
  --paper:      #F4F0E9;   /* warm ivory */
  --paper-2:    #ECE5DA;   /* banded section */
  --card:       #FBF8F2;   /* raised surface */
  --card-2:     #F7F2E9;

  /* --- ink -------------------------------------------------------------- */
  --ink:        #262320;   /* warm off-black, never #000 */
  --ink-2:      #524B43;   /* body copy */
  --ink-3:      #8A8177;   /* captions, labels */

  /* --- rules ------------------------------------------------------------ */
  --line:       #DCD3C5;
  --line-soft:  #E7E0D4;

  /* --- the two directions ----------------------------------------------- */
  --ember:      #B0793F;   /* depleted — soft ochre */
  --ember-tint: #F1E7D7;
  --ember-wash: #F8F2E8;
  --blaze:      #A65B45;   /* overfilled — soft brick */
  --blaze-tint: #F1E2DB;
  --blaze-wash: #F9F0EC;

  /* --- calm secondary --------------------------------------------------- */
  --sage:       #6D7A66;
  --sage-tint:  #E3E8DE;

  /* --- coffee ----------------------------------------------------------- */
  --coffee:       #6A4A33;
  --coffee-light: #8D6647;
  --crema:        #C9A279;

  /* --- type ------------------------------------------------------------- */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body: 'Karla', 'Helvetica Neue', Arial, sans-serif;

  /* --- depth ------------------------------------------------------------ */
  --lift-1: 0 1px 2px rgba(38,35,32,0.04), 0 2px 10px rgba(38,35,32,0.03);
  --lift-2: 0 2px 4px rgba(38,35,32,0.05), 0 14px 40px -12px rgba(38,35,32,0.14);
  --lift-3: 0 4px 8px rgba(38,35,32,0.06), 0 28px 60px -18px rgba(38,35,32,0.20);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html, body{ background: var(--paper); }

body{
  color: var(--ink-2);
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain — fixed, non-interactive, never inside a scroll container. */
body::before{
  content:'';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

img, svg, canvas{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }

::selection{ background: var(--ember-tint); color: var(--ink); }

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

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .display{
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.14;
}

h1, .h1{ font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2, .h2{ font-size: clamp(1.9rem, 3.4vw, 2.85rem); }
h3, .h3{ font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height:1.25; }

em, .italic{ font-style: italic; }

.lede{
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.62;
  color: var(--ink-2);
  font-weight: 300;
}

.label{
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label--ember{ color: var(--ember); }
.label--blaze{ color: var(--blaze); }

.muted{ color: var(--ink-3); }
.rule{ height:1px; background: var(--line); border:0; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.shell{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}

.band{ padding: clamp(4.5rem, 11vh, 8.5rem) 0; }
.band--tight{ padding: clamp(3rem, 7vh, 5rem) 0; }
.band--paper2{ background: var(--paper-2); }
.band--edge{ border-top: 1px solid var(--line); }

.section-head{ max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .label{ display:block; margin-bottom: 1.1rem; }
.section-head p{ margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  font-family: var(--body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.35s var(--ease);
}
.btn:hover{ background:#3A342E; border-color:#3A342E; transform: translateY(-1px); box-shadow: var(--lift-2); }
.btn:active{ transform: translateY(0); }

.btn--quiet{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--quiet:hover{ background: var(--card); border-color: var(--ink-3); color: var(--ink); box-shadow: var(--lift-1); }

.btn--ember{ background: var(--ember); border-color: var(--ember); color:#FFF9F0; }
.btn--ember:hover{ background:#9C6A36; border-color:#9C6A36; }

.btn--sm{ padding: 0.75rem 1.35rem; font-size: 0.76rem; }
.btn--wide{ width: 100%; justify-content: center; }
.btn[disabled]{ opacity: 0.4; cursor: not-allowed; transform:none; box-shadow:none; }

.btn .arrow{ transition: transform 0.35s var(--ease); }
.btn:hover .arrow{ transform: translateX(3px); }

/* Text link with a rule that draws in on hover */
.tlink{
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 2px;
}
.tlink::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.tlink:hover::after{ transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead{
  position: sticky; top: 0; z-index: 90;
  background: rgba(244,240,233,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.masthead.is-stuck{ border-bottom-color: var(--line); }
.masthead__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.05rem clamp(1.4rem, 5vw, 4rem);
  max-width: 1180px; margin: 0 auto;
}
.wordmark{ display:flex; align-items: baseline; gap: 0.6rem; }
.wordmark__lit{
  font-family: var(--display);
  font-size: 1.28rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  line-height: 1;
}
.wordmark__org{
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.navlinks{ display:flex; align-items:center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.navlinks a{
  font-size: 0.79rem; font-weight: 500; letter-spacing: 0.05em;
  color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
.navlinks a:hover{ color: var(--ink); }
.navlinks a.is-current{ color: var(--ink); }
@media (max-width: 860px){
  .navlinks .navlinks__hide{ display:none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot{
  border-top: 1px solid var(--line);
  padding: 2.8rem 0 3.2rem;
}
.foot__inner{
  display:flex; flex-wrap: wrap; gap: 1.2rem 2.5rem;
  align-items: baseline; justify-content: space-between;
}
.foot__mark{ font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.12em; color: var(--ink); }
.foot__line{ font-size: 0.74rem; letter-spacing: 0.05em; color: var(--ink-3); }
.foot__nav{ display:flex; gap: 1.4rem; }
.foot__nav a{ font-size: 0.74rem; letter-spacing: 0.05em; color: var(--ink-3); }
.foot__nav a:hover{ color: var(--ink); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field{ display:block; margin-bottom: 1.4rem; }
.field__label{
  display:block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.input, .textarea, .select{
  width: 100%;
  font-family: var(--body);
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.textarea{ min-height: 9rem; resize: vertical; line-height: 1.6; }
.input:hover, .textarea:hover, .select:hover{ border-color: var(--ink-3); }
.input:focus, .textarea:focus, .select:focus{
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-wash);
  background: #FFFDF8;
}
.input::placeholder, .textarea::placeholder{ color: #B4AB9F; }

.field__error{
  display:none;
  margin-top: 0.45rem;
  font-size: 0.78rem; font-weight: 500; color: var(--blaze);
}
.field.has-error .input,
.field.has-error .textarea{ border-color: var(--blaze); box-shadow: 0 0 0 3px var(--blaze-wash); }
.field.has-error .field__error{ display:block; }

.note{
  font-size: 0.78rem; line-height: 1.6; color: var(--ink-3);
}

/* Inline status message */
.status{
  border: 1px solid var(--line);
  border-left: 2px solid var(--ember);
  background: var(--card);
  padding: 0.85rem 1rem;
  font-size: 0.86rem;
  color: var(--ink-2);
  border-radius: 2px;
  margin-bottom: 1.2rem;
}
.status--bad{ border-left-color: var(--blaze); }
.status--good{ border-left-color: var(--sage); }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}