/* ============================================================
   Shawn Smith — Components
   Requires tokens.css. Web-tuned (responsive, scrollable).
   ============================================================ */

@import "tokens.css";

/* ----------------------------------------------------------
   Eyebrow — small-caps mono label that sits above headings
   ---------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
}
.eyebrow.rust { color: var(--rust); }
.eyebrow.sage { color: var(--sage); }
.eyebrow.clay { color: var(--clay); }

/* ----------------------------------------------------------
   Display heading — italic serif, hero scale
   Use one <span class="accent"> for a rust emphasis word.
   ---------------------------------------------------------- */
.h-display {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: .95;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.h-display .it     { font-style: italic; font-weight: 400; }
.h-display .accent { color: var(--rust); }

/* ----------------------------------------------------------
   Section heading — serif, used for chapter / page sections
   ---------------------------------------------------------- */
.h-section {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.h-section .it     { font-style: italic; font-weight: 400; }
.h-section .accent { color: var(--rust); }

/* ----------------------------------------------------------
   Body prose
   ---------------------------------------------------------- */
.body {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--w-reading);
}
.body p           { margin: 0 0 1em 0; }
.body p + p       { text-indent: 1.5em; }
.body p.lead      {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink);
  text-indent: 0;
}
.body em          { font-style: italic; }

/* drop-cap modifier — only on the first ¶ of long-form pieces */
.body.drop > p:first-of-type::first-letter,
.body p.drop::first-letter {
  font-family: var(--serif);
  font-style: italic;
  float: left;
  font-size: 5.5em;
  line-height: .85;
  margin: .08em .1em -.05em 0;
  color: var(--ink);
}

/* ----------------------------------------------------------
   Pull quote
   ---------------------------------------------------------- */
.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: var(--w-reading);
  border-left: 2px solid var(--rust);
  padding-left: 24px;
  margin: 0;
}
.pullquote .accent { color: var(--rust); }
.pullquote-attr {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
  display: block;
}

/* ----------------------------------------------------------
   Photo — cream-frame plate with caption gutter
   ---------------------------------------------------------- */
.photo {
  background: var(--cream);
  padding: var(--photo-frame) var(--photo-frame) var(--photo-gutter)
           var(--photo-frame);
  border: 1px solid var(--hair-soft);
  position: relative;
  display: block;
}
.photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: var(--photo-wash);
}
.photo-cap {
  position: absolute;
  left: var(--photo-frame);
  right: var(--photo-frame);
  bottom: 14px;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------
   Caption block — metadata above content
   e.g.  Field   AI · Calm Technology · Self-authorship
   ---------------------------------------------------------- */
.caption {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--muted);
}
.caption .label {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}

/* ----------------------------------------------------------
   Hairline rule
   ---------------------------------------------------------- */
.rule {
  border: 0;
  border-top: var(--hair-w) solid var(--hair);
  margin: 0;
}
.rule.dotted { border-top-style: dotted; }
.rule.short  { width: 64px; }

/* ----------------------------------------------------------
   Diptych — two columns separated by a vertical hairline
   <div class="diptych">
     <div><span class="eyebrow rust">Before</span> ...</div>
     <div><span class="eyebrow">After</span>  ...</div>
   </div>
   ---------------------------------------------------------- */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 32px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.diptych > *:nth-child(2) {
  background: var(--hair);
  align-self: stretch;
}
@media (max-width: 720px) {
  .diptych {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .diptych > *:nth-child(2) { display: none; }
}

/* ----------------------------------------------------------
   Vocabulary — italic term + soft-ink description
   <dl class="vocabulary">
     <dt>Rice Ball Letter</dt>
     <dd>a small written note, shaped to be held in one hand</dd>
   </dl>
   ---------------------------------------------------------- */
.vocabulary {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  column-gap: 28px;
  row-gap: 14px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  border-top: 1px solid var(--hair);
  padding-top: 18px;
  margin: 0;
}
.vocabulary dt {
  font-style: italic;
  color: var(--rust);
}
.vocabulary dd {
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 600px) {
  .vocabulary {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .vocabulary dt { margin-top: 14px; }
}

/* ----------------------------------------------------------
   Layout containers
   ---------------------------------------------------------- */
.container        { max-width: var(--w-full);    margin: 0 auto; padding: 0 var(--pad-page-x); }
.container.reading{ max-width: var(--w-reading); margin: 0 auto; padding: 0 var(--pad-page-x); }
.container.wide   { max-width: var(--w-wide);    margin: 0 auto; padding: 0 var(--pad-page-x); }

.section { margin-block: var(--section-gap); }

/* ----------------------------------------------------------
   Links
   ---------------------------------------------------------- */
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}
a.nav {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 0;
}
a.nav:hover { color: var(--rust); }

/* ----------------------------------------------------------
   Dark section (optional emphasis)
   <section class="dark"> ... </section>
   ---------------------------------------------------------- */
.dark {
  background: var(--dark-bg);
  color: var(--dark-text);
}
.dark .h-section,
.dark .h-display {
  background: linear-gradient(180deg, #E8C890 0%, #D8B074 28%, #C89858 58%, #B07840 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.dark .body            { color: var(--dark-text-soft); }
.dark .body p.lead     { color: var(--dark-text); }
.dark .eyebrow         { color: var(--dark-muted); }
.dark .rule            { border-top-color: rgba(245, 239, 226, .25); }

/* ----------------------------------------------------------
   Brand glyphs — copy these inline as <svg> in your markup.
   ----------------------------------------------------------

   ENSO INK MARK:
   <svg width="48" height="48" viewBox="0 0 64 64" aria-hidden="true">
     <path d="M 32 10 C 18 10, 10 22, 10 32 C 10 44, 22 54, 32 54 C 44 54, 54 44, 54 32 C 54 24, 50 16, 42 12"
       fill="none" stroke="#1F1B16" stroke-width="3" stroke-linecap="round" opacity=".88"/>
     <circle cx="44" cy="14" r="2" fill="#B5552B"/>
   </svg>

   RUST ARROW:
   <svg width="36" height="14" viewBox="0 0 36 14" aria-hidden="true">
     <path d="M 1 7 L 32 7 M 26 2 L 33 7 L 26 12"
       fill="none" stroke="#B5552B" stroke-width="1.5"
       stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
*/