/* ==========================================================================
   Craton Holdings — Landing Page
   Built to Craton Holdings Brand Kit v1.1 (LOCKED, 1 September 2026)

   Everything you would normally want to change lives in the :root block
   below. Colours, type sizes and spacing are all tokens. Editing a token
   updates every place it is used.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS  (self-hosted — no Google Fonts request, works offline)
   EB Garamond = display, wordmark, all significant figures, italics
   Inter       = body copy, labels, sublines
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. BRAND TOKENS  (Brand Kit §3 palette — do not introduce new colours)
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --green:          #1B3B31;  /* Primary. Covers, bands, plates            */
  --green-deep:     #122A22;  /* Gradient partner                          */
  --green-mid:      #2A5245;  /* Secondary bars                            */
  --ivory:          #FAF8F2;  /* Page ground; text on green                */
  --ivory-2:        #F3F0E7;  /* Quiet panels, chart tracks                */
  --white:          #FFFFFF;  /* Cards and exhibit surfaces on ivory       */
  --gold:           #B99B5E;  /* The signature. Mark base, rules, accents  */
  --gold-deep:      #96793F;  /* Labels and small gold text on LIGHT only  */
  --gold-soft:      rgba(185, 155, 94, 0.40);  /* Cover frame hairline     */
  --ink:            #1E241F;  /* Body text on light                        */
  --dim:            #5A6058;  /* Secondary text on light                   */
  --faint:          #8B9089;  /* Rails, footers, fine print on light       */
  --hairline:       rgba(27, 59, 49, 0.16);
  --hairline-gold:  rgba(185, 155, 94, 0.35);

  /* Ivory-on-green opacity ladder (Brand Kit §3 rules) */
  --on-green-primary:   rgba(250, 248, 242, 0.92);
  --on-green-secondary: rgba(250, 248, 242, 0.72);
  --on-green-quiet:     rgba(250, 248, 242, 0.66);  /* .5 is the kit floor; lifted
                                                       to clear WCAG AA 4.5:1 on
                                                       the green ground */
  --on-green-rail:      rgba(250, 248, 242, 0.58);

  /* Type */
  --display: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Cover frame (Brand Kit §5.1) */
  --frame-inset: 26px;
  --frame-tick: 26px;
}

/* NO BLACK ANYWHERE. No charcoal fields. Gold never carries body sentences. */

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--green-deep);
  color: var(--on-green-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Every numeral forces lining tabular figures (Brand Kit §4).
   EB Garamond ships old-style figures; unforced numerals are a defect. */
.fig,
time,
.meta {
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* --------------------------------------------------------------------------
   4. THE COVER FIELD
   Full green gradient, gold inset frame, corner ticks top-left and
   bottom-right, 3% paper-grain overlay.
   -------------------------------------------------------------------------- */

.cover {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 28px;
  background: linear-gradient(158deg, var(--green) 0%, var(--green-deep) 100%);
  overflow: hidden;
}

/* Paper grain, 3% (Brand Kit §3) */
.cover::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 1px gold-soft inset frame */
.frame {
  position: absolute;
  inset: var(--frame-inset);
  border: 1px solid var(--gold-soft);
  pointer-events: none;
}

/* 26px solid-gold corner ticks — top-left and bottom-right only */
.frame::before,
.frame::after {
  content: '';
  position: absolute;
  width: var(--frame-tick);
  height: var(--frame-tick);
}
.frame::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
}
.frame::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}

/* --------------------------------------------------------------------------
   5. THE LOCKUP  —  mark › CRATON › HOLDINGS
   -------------------------------------------------------------------------- */

.lockup {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Stepped Foundation mark. Locked geometry lives in the SVG in index.html;
   this only controls display size. Minimum 16px wide, ever. */
.mark {
  width: clamp(76px, 9vw, 104px);
  height: auto;
  display: block;
  margin-bottom: clamp(28px, 4vh, 44px);
}

/* Cover wordmark: EB Garamond 500, 64–74px, tracking .22em, uppercase, ivory.
   text-indent equal to the tracking re-centres the optical block. */
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 8.2vw, 74px);
  line-height: 1;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
}

/* Corporate subline: HOLDINGS — Inter 500, 11.5px, tracking .66em, gold */
.subline {
  margin: clamp(16px, 2.4vh, 22px) 0 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(9px, 1.15vw, 11.5px);
  letter-spacing: 0.66em;
  text-indent: 0.66em;
  text-transform: uppercase;
  color: var(--gold);
}

/* 64px gold rule (Brand Kit §5.1) */
.rule {
  width: 64px;
  height: 1px;
  margin: clamp(34px, 5vh, 48px) 0;
  background: var(--gold);
  border: 0;
}

/* --------------------------------------------------------------------------
   6. THE MESSAGE
   -------------------------------------------------------------------------- */

.statement {
  position: relative;
  max-width: 620px;
  text-align: center;
}

/* Headline — EB Garamond italic, ivory */
.headline {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(27px, 4.6vw, 40px);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--ivory);
}

/* One-line positioning — Inter body, secondary ivory */
.positioning {
  margin: clamp(20px, 3vh, 28px) auto 0;
  max-width: 56ch;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.72;
  letter-spacing: 0.005em;
  color: var(--on-green-secondary);
}

/* The canonical craton definition — quiet, italic, subordinate */
.definition {
  margin: clamp(30px, 4.4vh, 44px) auto 0;
  max-width: 50ch;
  padding-top: clamp(24px, 3.4vh, 32px);
  border-top: 1px solid var(--hairline-gold);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13.5px, 1.6vw, 16px);
  line-height: 1.66;
  color: var(--on-green-quiet);
}

/* --------------------------------------------------------------------------
   7. CONTACT
   -------------------------------------------------------------------------- */

.contact {
  position: relative;
  margin-top: clamp(38px, 5.5vh, 56px);
  text-align: center;
}

.contact-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 6.4px;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
}

.contact-link {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(16px, 2.1vw, 20px);
  letter-spacing: 0.045em;
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-gold);
  padding-bottom: 4px;
  transition: border-color 0.35s ease, color 0.35s ease;
}
.contact-link:hover,
.contact-link:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.contact-link:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   8. FOOT META  —  location line. No year on the website, by direction. The .sep
      rule below is kept in case a second item is ever added back.
   -------------------------------------------------------------------------- */

.meta {
  position: relative;
  margin-top: auto;
  padding-top: clamp(48px, 8vh, 88px);
  font-family: var(--body);
  font-weight: 500;
  font-size: 6.6px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--on-green-rail);
  text-align: center;
}

.meta .sep {
  padding: 0 0.7em;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   9. ENTRANCE  (restrained — nothing shouts)
   -------------------------------------------------------------------------- */

.fade {
  opacity: 0;
  transform: translateY(10px);
  animation: rise 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.fade-1 { animation-delay: 0.10s; }
.fade-2 { animation-delay: 0.30s; }
.fade-3 { animation-delay: 0.50s; }
.fade-4 { animation-delay: 0.70s; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .contact-link { transition: none; }
}

/* --------------------------------------------------------------------------
   10. SMALL SCREENS
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --frame-inset: 14px;
    --frame-tick: 18px;
  }
  .cover { padding: 56px 22px; }
  .subline { letter-spacing: 0.42em; text-indent: 0.42em; }
  .meta { letter-spacing: 0.26em; text-indent: 0.26em; }
}

/* Short viewports (laptops at 100% zoom, landscape phones). The page must
   never scroll: overflow is a build failure. */
@media (max-height: 760px) {
  .definition { display: none; }
  .cover { padding: 44px 28px; }
  .mark { margin-bottom: 24px; }
  .rule { margin: 26px 0; }
  .contact { margin-top: 30px; }
  .meta { padding-top: 40px; }
}

@media (max-height: 620px) {
  .cover { padding: 28px 24px; }
  .mark { width: clamp(64px, 7vw, 84px); margin-bottom: 18px; }
  .rule { margin: 20px 0; }
  .subline { margin-top: 14px; }
  .contact { margin-top: 24px; }
  .meta { padding-top: 26px; }
}

/* Phones held sideways */
@media (max-height: 480px) {
  .cover { padding: 22px 24px; }
  .mark { width: 56px; margin-bottom: 14px; }
  .wordmark { font-size: clamp(26px, 4.6vw, 40px); }
  .subline { margin-top: 10px; font-size: 8px; }
  .rule { margin: 16px 0; }
  .headline { font-size: clamp(19px, 2.8vw, 26px); }
  .positioning { margin-top: 13px; font-size: 12.5px; }
  .contact { margin-top: 18px; }
  .contact-label { margin-bottom: 8px; }
  .contact-link { font-size: 15px; }
  .meta { padding-top: 18px; }
}

/* --------------------------------------------------------------------------
   11. PRINT  (a landing page still gets printed and screenshotted)
   -------------------------------------------------------------------------- */

@media print {
  .cover { min-height: auto; background: var(--green); }
  .fade { animation: none; opacity: 1; transform: none; }
}