/*
  CONCRETTA DESIGN SYSTEM — V84 — LOCKED REFERENCE
  LOCKED REFERENCE CONTRACT extracted from the approved index.html.
  This file is the canonical visual system for future Concretta pages.
  Future pages should consume these tokens and primitives rather than inventing
  page-specific typography, spacing, radii, colors, header/footer proportions or motion.

  LOCKED BASELINE:
  - Header: 82px normal / 70px compact
  - Content container: 1380px, 72px desktop gutter
  - Typography: Georgia display + Arial/Helvetica interface/body
  - Primary charcoal: #28231f / ink #211d19
  - Section rhythm: 112px desktop / 70px mobile
  - Card radius: 24px desktop / 14px mobile
  - Motion: restrained cubic-bezier(.2,.65,.3,1) with reduced-motion fallback
  - Index V84 is the reference implementation.

  Change these values only as an intentional site-wide design-system revision.
*/
:root{
  /* Brand colors */
  --ctds-ink:#211d19;
  --ctds-ink-soft:#2d2823;
  --ctds-paper:#f6f2eb;
  --ctds-paper-alt:#ede7de;
  --ctds-paper-deep:#eee8df;
  --ctds-charcoal:#28231f;
  --ctds-charcoal-deep:#1d1916;
  --ctds-muted:#756d64;
  --ctds-muted-soft:#918377;
  --ctds-champagne:#d7c4b0;
  --ctds-champagne-soft:#c9b39c;
  --ctds-white:#f2eee7;

  /* Typography */
  --ctds-font-serif:Georgia,"Times New Roman",serif;
  --ctds-font-sans:Arial,Helvetica,sans-serif;
  --ctds-size-kicker:12px;
  --ctds-size-small:14px;
  --ctds-size-body:16px;
  --ctds-size-card:22px;
  --ctds-size-subhead:28px;
  --ctds-size-section:clamp(34px,3.2vw,48px);
  --ctds-size-display:clamp(46px,4.6vw,68px);

  /* Layout */
  --ctds-container:1380px;
  --ctds-gutter:72px;
  --ctds-gutter-tablet:40px;
  --ctds-gutter-mobile:26px;
  --ctds-section-space:112px;
  --ctds-section-space-mobile:70px;
  --ctds-header-height:82px;
  --ctds-header-short:70px;
  --ctds-nav-size:14px;
  --ctds-button-height:46px;
  --ctds-footer-bg:#28231f;
  --ctds-footer-text:#f2eee7;
  --ctds-footer-muted:#b8aca1;

  /* Reference breakpoints (documentation tokens; media queries use literal values) */
  --ctds-breakpoint-tablet:980px;
  --ctds-breakpoint-mobile:700px;

  /* Shape / motion */
  --ctds-radius-card:24px;
  --ctds-radius-card-mobile:14px;
  --ctds-radius-control:3px;
  --ctds-line:rgba(71,61,52,.10);
  --ctds-ease:cubic-bezier(.2,.65,.3,1);
}

/* Future-page primitives. They do not alter the approved index unless applied. */
.ctds-wrap{width:min(var(--ctds-container),calc(100% - var(--ctds-gutter)));margin-inline:auto;}
.ctds-kicker{font:500 var(--ctds-size-kicker)/1.25 var(--ctds-font-sans);letter-spacing:.20em;text-transform:uppercase;color:var(--ctds-muted);}
.ctds-title{font:400 var(--ctds-size-section)/1.08 var(--ctds-font-serif);letter-spacing:-.035em;color:var(--ctds-ink);}
.ctds-body{font:400 var(--ctds-size-body)/1.68 var(--ctds-font-sans);color:var(--ctds-muted);}
.ctds-card{border-radius:var(--ctds-radius-card);overflow:hidden;}
.ctds-text-link{display:inline-flex;align-items:center;gap:10px;color:var(--ctds-ink)!important;text-decoration:none!important;border-bottom:1px solid rgba(42,37,32,.35);padding-bottom:5px;}


/* Font lock: prevents legacy Mobirise display classes from reintroducing remote font dependencies. */
.ct-home .display-1,.ct-home .display-2,.ct-home .display-4,.ct-home .display-5,.ct-home .display-7{font-family:var(--ctds-font-sans)!important;}

/* Accessibility foundation for the reference page and all future pages. */
.ctds-skip-link{
  position:fixed;left:18px;top:12px;z-index:100000;
  transform:translateY(-160%);padding:10px 14px;border-radius:3px;
  background:#f2eee7;color:#211d19!important;
  font:600 13px/1 var(--ctds-font-sans);text-decoration:none!important;
  box-shadow:0 8px 26px rgba(0,0,0,.24);transition:transform .16s ease;
}
.ctds-skip-link:focus{transform:translateY(0);outline:2px solid #d7c4b0;outline-offset:3px;}

.ct-home :where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--ctds-champagne)!important;
  outline-offset:4px;
}

@media(max-width:980px){.ctds-wrap{width:calc(100% - var(--ctds-gutter-tablet));}}
@media(max-width:700px){
  :root{--ctds-size-display:clamp(38px,10vw,48px);--ctds-size-section:32px;--ctds-size-subhead:25px;}
  .ctds-wrap{width:calc(100% - var(--ctds-gutter-mobile));}
  .ctds-card{border-radius:var(--ctds-radius-card-mobile);}
}

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