/* Tang & Associates — Brand Guidelines stylesheet.
   Mirrors the design-token system in brand-book.css so spacing, type,
   color, radius, and motion stay consistent across both deliverables.
   No magic numbers in component rules — every value resolves to a token. */

/* ============== TOKENS ============== */
:root{
  /* Spacing scale (4px unit) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Type scale (minor-third 1.2 anchored at 16px) */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   19px;
  --text-lg:   23px;
  --text-xl:   28px;
  --text-2xl:  33px;
  --text-3xl:  40px;
  --text-display: 48px;

  /* Tracking */
  --track-tight:   -0.01em;
  --track-base:     0;
  --track-wide:     0.04em;
  --track-caps:     0.18em;
  --track-eyebrow:  0.22em;

  /* Leading */
  --leading-tight: 1.2;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  /* Radius */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card:  0 1px 2px rgba(31,29,27,0.04);
  --shadow-photo: 0 18px 48px -12px rgba(31,29,27,0.22);
  --shadow-focus: 0 0 0 3px rgba(201,168,124,0.35);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Color — matches brand-book.css */
  --color-page:        #ffffff;
  --color-block:       #f6f6f6;
  --color-paper:       #ffffff;
  --color-ink:         #1a1a1a;
  --color-ink-2:       #2e2e2e;
  --color-ink-soft:    #6e6e6e;
  --color-line:        #e8e8e8;
  --color-line-strong: #d4d4d4;
  --color-accent:      #C9A87C;
  --color-accent-deep: #a88555;
  --color-accent-soft: #e8d3b0;
  --color-harbour:     #2c4a6b;
  --color-harbour-deep:#14253a;
  --color-harbour-soft:#c9d4e1;
  --color-warn:        #c0392b;

  /* Type families */
  --font-sans:  'Lexend','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-serif: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-mono:  'JetBrains Mono','SF Mono',Menlo,Consolas,'Courier New',monospace;

  /* Layout */
  --content-max: 960px;
  --gutter:      var(--space-6);
}

/* ============== LOCAL BRAND FONTS ============== */
@font-face{
  font-family:'Cormorant Garamond';
  font-weight:300 700;
  font-style:normal;
  src:url('../assets/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
      url('../assets/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-weight:300 700;
  font-style:italic;
  src:url('../assets/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
      url('../assets/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend';
  font-weight:100 900;
  font-style:normal;
  src:url('../assets/fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations'),
      url('../assets/fonts/Lexend-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend Deca';
  font-weight:100 900;
  font-style:normal;
  src:url('../assets/fonts/LexendDeca-VariableFont_wght.ttf') format('truetype-variations'),
      url('../assets/fonts/LexendDeca-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend Exa';
  font-weight:300;
  font-style:normal;
  src:url('../assets/fonts/LexendExa-Light.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend Exa';
  font-weight:400;
  font-style:normal;
  src:url('../assets/fonts/LexendExa-Regular.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend Exa';
  font-weight:500;
  font-style:normal;
  src:url('../assets/fonts/LexendExa-Medium.ttf') format('truetype');
  font-display:swap;
}

/* ============== RESET ============== */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  background:var(--color-page);
  color:var(--color-ink);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-base);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--color-ink); }
a:hover{ color:var(--color-accent-deep); }

/* Accessible focus ring */
:focus-visible{
  outline:none;
  box-shadow:var(--shadow-focus);
  border-radius:var(--radius-md);
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px;
  padding:var(--space-3) var(--space-4);
  background:var(--color-ink); color:var(--color-paper);
  border-radius:var(--radius-md);
  font-size:var(--text-sm); text-decoration:none;
}
.skip-link:focus-visible{ left:var(--space-4); top:var(--space-4); }

/* ============== DECK HEADER (matches brand-book) ============== */
.deck-header{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding:var(--space-6) var(--gutter) var(--space-4);
  display:grid; align-items:center;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  gap:var(--space-4);
}
.deck-header__brand{
  display:inline-flex; align-items:center;
  justify-self:start;
  justify-content:center;
  width:174px;
  max-width:44vw;
  color:var(--color-ink);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.deck-header__brand:hover{ color:var(--color-accent-deep); }
.deck-header__brand img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
.deck-header__meta{
  margin:0;
  justify-self:center;
  font-size:var(--text-xs);
  color:var(--color-ink-soft);
  text-transform:uppercase;
  letter-spacing:var(--track-caps);
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.deck-header__actions{
  display:inline-flex; align-items:center;
  justify-self:end;
  gap:var(--space-3);
}

/* ============== BUTTON ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2);
  min-height:36px;
  padding:var(--space-2) var(--space-4);
  font:inherit;
  font-size:var(--text-sm);
  font-weight:500;
  line-height:1;
  letter-spacing:var(--track-base);
  color:var(--color-ink);
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
  -webkit-appearance:none; appearance:none;
}
.btn:hover{ border-color:var(--color-line-strong); }
.btn:active{ transform:none; }
.btn--primary{
  background:var(--color-ink);
  border-color:var(--color-ink);
  color:var(--color-paper);
}
.btn--primary:hover{
  background:var(--color-accent-deep);
  border-color:var(--color-accent-deep);
}
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:var(--color-paper); }
.btn__icon{ font-size:0.9em; line-height:1; display:inline-block; }

/* ============== PAGE LAYOUT ============== */
.guidelines-main{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding:var(--space-2) var(--gutter) var(--space-9);
  display:flex; flex-direction:column;
  gap:var(--space-9);
}
.guidelines-main:focus-visible{ box-shadow:none; }

.guidelines-intro{
  display:flex; flex-direction:column;
  gap:var(--space-2);
}

/* ============== TYPOGRAPHY ============== */
h1, h2, h3{
  font-family:var(--font-serif);
  font-weight:500;
  letter-spacing:var(--track-tight);
  line-height:var(--leading-tight);
  margin:0;
}
h1{ font-size:var(--text-display); }
h2{ font-size:var(--text-xl); }
h3{ font-size:var(--text-md); }

p{
  margin:0;
  max-width:70ch;
}

.eyebrow{
  font-size:var(--text-sm);
  font-weight:500;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--color-ink-soft);
  margin:0;
}
.muted{ color:var(--color-ink-soft); }
.small{ font-size:var(--text-sm); }

code{
  font-family:var(--font-mono);
  font-size:0.92em;
  background:var(--color-paper);
  padding:1px var(--space-2);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
}

/* ============== SECTION ============== */
/* Each <section> mirrors a deck spread: eyebrow + headline + body.
   The eyebrow ("04 / Color") echoes the deck's spread label; the headline row
   pairs the heading with an optional cross-link to the matching deck spread. */
.section{
  display:flex; flex-direction:column;
  gap:var(--space-5);
}
.section__head{
  display:flex; flex-direction:column;
  gap:var(--space-3);
}
.section__eyebrow{
  font-size:var(--text-sm);
  font-weight:500;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--color-ink-soft);
  margin:0;
  font-variant-numeric:tabular-nums;
}
.section__headline{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-4);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--color-line);
}
.section__headline > h2{ flex:1 1 auto; }
.section__crosslink{
  display:inline-flex; align-items:center; gap:var(--space-2);
  flex:0 0 auto;
  padding:var(--space-2) var(--space-3);
  font-family:var(--font-sans);
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-ink-soft);
  text-decoration:none;
  border-radius:var(--radius-md);
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
.section__crosslink:hover{
  color:var(--color-ink);
  background:var(--color-paper);
}
.subsection{
  display:flex; flex-direction:column;
  gap:var(--space-3);
}

/* ============== HERO ============== */
.hero{
  display:flex; align-items:center; gap:var(--space-7);
  padding:var(--space-6) var(--space-7);
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
}
.hero__mark{ width:auto; height:80px; flex-shrink:0; }
.hero__body{
  display:flex; flex-direction:column;
  gap:var(--space-3);
}

/* ============== CARD GRID ============== */
.card-grid{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.card{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-none);
  padding:var(--space-5);
  display:flex; flex-direction:column;
  gap:var(--space-3);
}

.compact-list{
  margin:0;
  padding-left:1.15rem;
  color:var(--color-ink-soft);
  font-size:var(--text-sm);
  line-height:var(--leading-loose);
}

.rules{
  background:var(--color-block);
  border:1px solid var(--color-line);
  border-radius:var(--radius-none);
  padding:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.rules ul{
  margin:0;
  padding-left:1.15rem;
  color:var(--color-ink-soft);
  line-height:var(--leading-loose);
}

/* ============== SWATCH ============== */
.swatch{
  display:flex; align-items:center; gap:var(--space-4);
}
.swatch__chip{
  width:80px; height:80px;
  border-radius:var(--radius-md);
  border:1px solid var(--color-line);
  flex-shrink:0;
  background:var(--swatch-hex, var(--color-accent));
}
.swatch__data{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-1) var(--space-3);
  font-size:var(--text-sm);
}
.swatch__data dt{ color:var(--color-ink-soft); }
.swatch__data dd{ margin:0; }

.swatch-grid{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.swatch-card{
  min-height:150px;
  background:var(--swatch-hex);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  color:var(--color-ink);
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--space-3);
}
.swatch-card--dark{
  color:var(--color-paper);
  border-color:rgba(255,255,255,0.18);
}
.swatch-card span,
.swatch-card em{
  font-size:var(--text-xs);
  font-style:normal;
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  opacity:0.72;
}
.swatch-card strong{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:500;
}

/* ============== TABLE ============== */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-paper);
}
table{
  border-collapse:collapse;
  font-size:var(--text-sm);
  width:100%;
}
caption{
  text-align:left;
  padding:var(--space-3) var(--space-4);
  color:var(--color-ink-soft);
  font-weight:500;
}
th, td{
  text-align:left;
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-line);
}
th{ color:var(--color-ink-soft); font-weight:500; }
tbody tr:last-child th,
tbody tr:last-child td{ border-bottom:0; }

/* ============== SPECIMEN ============== */
.specimen{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin:0;
}
.specimen__row{
  display:flex; align-items:center; gap:var(--space-5);
  padding:var(--space-5);
  border-bottom:1px solid var(--color-line);
  margin:0;
}
.specimen__row:last-child{ border-bottom:0; }
.specimen__row > img{ flex-shrink:0; }
.specimen__row--mark > img{ width:80px; height:80px; }
.specimen__row--lockup > img{ width:auto; height:48px; }
.specimen__row--dark{ background:#1a1a1a; color:#fff; }
.specimen__row--paper{ background:#fff; }
.specimen__caption{
  display:flex; flex-direction:column; gap:var(--space-1);
}
.specimen__label{
  font-size:var(--text-xs);
  color:var(--color-ink-soft);
}
.specimen__row--dark .specimen__label{ color:rgba(255,255,255,0.7); }

/* ============== CLEARSPACE (grid-positioned, no absolute) ============== */
.clearspace{
  display:flex; gap:var(--space-5); align-items:flex-start;
  padding:var(--space-5);
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
}
.clearspace__frame{
  width:200px; height:200px;
  flex-shrink:0;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:1fr 2fr 1fr;
  background:
    linear-gradient(to right, rgba(201,168,124,0.18) 0, rgba(201,168,124,0.18) 1px, transparent 1px) 0 0/25% 100%,
    linear-gradient(to bottom, rgba(201,168,124,0.18) 0, rgba(201,168,124,0.18) 1px, transparent 1px) 0 0/100% 25%;
  border:1px dashed var(--color-line);
}
.clearspace__frame img{
  grid-column:2; grid-row:2;
  width:100%; height:100%;
  object-fit:contain;
}
.clearspace__body{
  display:flex; flex-direction:column;
  gap:var(--space-3);
}

/* ============== LOCKUP ROW ============== */
.lockup-row{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.lockup-row__item{
  display:flex; align-items:center; gap:var(--space-5);
  padding:var(--space-6) var(--space-7);
  border-bottom:1px solid var(--color-line);
}
.lockup-row__item:last-child{ border-bottom:0; }
.lockup-row__item--dark{ background:#1a1a1a; color:#fff; }
.lockup-row__item--paper{ background:#fff; }
.lockup-row__item > img{
  flex-shrink:0;
  width:auto; height:56px;
}
.lockup-row__item--stacked > img{ height:auto; max-height:160px; max-width:240px; }
.lockup-row__caption{
  display:flex; flex-direction:column; gap:var(--space-1);
}
.lockup-row__meta{
  font-size:var(--text-xs);
  color:var(--color-ink-soft);
}
.lockup-row__item--dark .lockup-row__meta{ color:rgba(255,255,255,0.65); }

/* ============== DON'TS (grid-stacked overlay, no absolute) ============== */
.donts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.dont{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  text-align:center;
  margin:0;
  display:flex; flex-direction:column;
  gap:var(--space-2);
}
.dont__demo{
  height:100px;
  display:grid;
  place-items:center;
}
.dont__demo > *{
  grid-column:1; grid-row:1;
}
.dont__demo > img{
  width:70px; height:70px;
}
.dont__demo::after{
  content:'';
  grid-column:1; grid-row:1;
  width:100%; height:100%;
  margin:var(--space-2);
  background:linear-gradient(135deg,
    transparent calc(50% - 1px),
    var(--color-warn) calc(50% - 1px),
    var(--color-warn) calc(50% + 1px),
    transparent calc(50% + 1px));
  pointer-events:none;
}
.dont__caption{
  margin:0;
  font-size:var(--text-xs);
  color:var(--color-ink-soft);
}

/* Per-don't transform modifiers — keep mod data in CSS, not inline styles */
.dont__demo--stretch > img{ transform:scaleX(1.5); }
.dont__demo--recolor > img{ filter:hue-rotate(180deg) saturate(1.4); }
.dont__demo--rotate  > img{ transform:rotate(20deg); }
.dont__demo--gold-bg{
  background:var(--color-accent);
  border-radius:var(--radius-md);
}
.dont__demo--shadow > img{ filter:drop-shadow(2px 4px 4px rgba(0,0,0,0.3)); }
.dont__demo--redundant > .dont__demo-pair{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-serif);
  font-size:var(--text-lg);
}
.dont__demo--redundant .dont__demo-pair img{
  width:50px; height:50px;
}

/* ============== TYPE SAMPLES ============== */
.type-stack{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.type-card{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-none);
  padding:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.type-card > span{
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--color-harbour);
}
.type-sample--lexend-exa{
  font-family:'Lexend Exa', sans-serif;
  font-size:clamp(1.7rem, 5vw, 3rem);
  font-weight:300;
  letter-spacing:0;
}
.type-sample--cormorant{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(2rem, 5vw, 4rem);
  font-weight:400;
  letter-spacing:-0.01em;
}
.type-sample--cormorant em{
  color:var(--color-accent-deep);
}
.type-sample--lexend{
  font-family:'Lexend', sans-serif;
  font-size:var(--text-md);
  line-height:1.65;
  color:var(--color-ink-2);
}

@media (max-width:620px){
  .deck-header{
    display:grid;
    grid-template-columns:1fr;
    gap:12px 16px;
    padding-inline:16px;
    justify-items:center;
  }
  .deck-header__brand{ justify-self:center; }
  .deck-header__brand{ width:min(174px, 100%); max-width:none; }
  .deck-header__brand img{ width:100%; max-width:100%; }
  .deck-header__meta{
    grid-column:1;
    flex-basis:100%;
    margin:0;
    justify-self:center;
  }
  .deck-header__actions{
    grid-column:1;
    justify-self:center;
    justify-content:center;
    flex-wrap:wrap;
    margin-left:0;
  }
}

@media (max-width:430px){
  .deck-header{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .deck-header__brand,
  .deck-header__meta,
  .deck-header__actions{
    justify-self:center;
  }
  .deck-header__actions{
    grid-column:1;
    flex-wrap:wrap;
    justify-content:center;
  }
}

/* ============== FOOTER ============== */
.guidelines-foot{
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:1px solid var(--color-line);
  color:var(--color-ink-soft);
  font-size:var(--text-xs);
}
.guidelines-foot a{ color:var(--color-ink-soft); }