/******************************/
/** Design: Steve Bauer 2026 **/
/******************************/

/* TOKEN */

:root {
    
/* COLORS */
    --hue-gold: 40;
    --hue-copper: 27;
    --hue-bronze: 22;
    --hue-sand: 35;
    --hue-sunset: 28;
    --hue-wood: 25;

    /* Sand Tones */
    --sand-100: hsl(var(--hue-sand), 55%, 96%);
    --sand-200: hsl(var(--hue-sand), 42%, 90%);
    --sand-300: hsl(var(--hue-sand), 38%, 84%);
    --sand-400: hsl(var(--hue-sand), 32%, 72%);

    /* Base Backgrounds */
    --bg-main: var(--sand-100);
    --bg-muted: var(--sand-200);
    --bg-card: hsl(var(--hue-sand), 58%, 98%);

    /* Metals */
    --gold:        hsl(var(--hue-gold),   68%, 74%);
    --gold-dark:   hsl(var(--hue-gold),   50%, 52%);
    --copper:      hsl(var(--hue-copper), 60%, 66%);
    --copper-dark: hsl(var(--hue-copper), 55%, 44%);
    --bronze:      hsl(var(--hue-bronze), 36%, 32%);
    --bronze-dark: hsl(var(--hue-bronze), 34%, 22%);

    /* Text */
    --text-main:  hsl(var(--hue-wood), 30%, 18%);
    --text-muted: hsl(var(--hue-wood), 25%, 42%);

    /*Shadows */
    --shadow-dark: hsla(var(--hue-gold), 20%, 10%, 1);   
    --shadow-light: hsla(var(--hue-gold), 60%, 96%, 1); 
    --shadow-gold:    0 0 18px hsla(var(--hue-gold),   30%, 85%, 0.10);
    --shadow-link:    0 0 6px  hsla(var(--hue-copper), 45%, 67%, 0.35);
    --shadow-nav:     0 2px 8px  hsla(var(--hue-gold), 20%, 10%, 0.12);
    --shadow-soft:    0 10px 30px hsla(var(--hue-gold), 20%, 10%, 0.18);
    --shadow-card:    0 8px 22px hsla(var(--hue-gold), 20%, 10%, 0.12);
    --shadow-divider: 0 0 6px  hsla(var(--hue-gold), 60%, 96%, 0.50);
    --shadow-footer:  0 -4px 14px hsla(var(--hue-gold), 20%, 10%, 0.06);

    /* Glow */
    --glow-color: hsla(var(--hue-copper), 45%, 67%, 0.12);
    
    /* Business Card & Title */

    --business-card: hsl(var(--hue-gold), 3%, 23%); 
    --color-title:   hsl(var(--hue-gold), 85%, 88%); 
    
/* GRADIENTS */

    /* Navigation */
    --gradient-nav:
        linear-gradient(to bottom, hsl(var(--hue-sand), 45%, 84%), hsl(var(--hue-sand), 35%, 68%));
    --gradient-nav-after:
        linear-gradient(to bottom, hsla(var(--hue-copper), 45%, 67%, 0.12),transparent);
    --gradient-nav-a-after:
        linear-gradient(90deg, var(--copper), var(--copper-dark), var(--copper));

    /* Hero Overlay */
    --gradient-hero-overlay: 
        linear-gradient(to bottom, hsla(var(--hue-sand), 60%, 70%, 0.12), hsla(var(--hue-wood), 30%, 20%, 0.35));

    /* Hero Top Light */
    --gradient-hero-top: 
        linear-gradient(to top, hsla(var(--hue-gold), 70%, 80%, 0.15), transparent 60%);

    /* Buttons */
    --gradient-button: 
        linear-gradient(to bottom, hsla(var(--hue-gold), 70%, 85%, 0.15) 0%, transparent 35%), 
        linear-gradient(135deg, hsl(var(--hue-sunset), 30%, 48%), hsl(var(--hue-sunset), 30%, 45%));

    /* Section Highlight */
    --gradient-section-highlight: 
        radial-gradient(circle at 70% 0%, hsla(var(--hue-copper), 45%, 67%, 0.12), transparent 70%);

    /* Card Accent */
    --gradient-card-accent: 
        linear-gradient(to bottom, var(--sand-100), var(--sand-300));

    --gradient-card-before: 
        radial-gradient(circle at 20% 0%,hsla(var(--hue-copper), 45%, 67%, 0.05),transparent 65%),
        radial-gradient(circle at bottom right, hsla(var(--hue-gold), 60%, 96%, 0.10), transparent 60%);

    /* Footer */
    --gradient-footer: 
        linear-gradient(to bottom, var(--sand-300), var(--sand-400));

/* BORDERS */
    --border-glow:  1px solid hsla(var(--hue-gold),   55%, 63%, 0.35);
    --border-color: 1px solid hsla(var(--hue-copper), 38%, 55%, 0.35);
    --border-muted: 1px solid hsla(var(--hue-gold), 20%, 10%, 0.04);

/* TYPOGRAPHIE */   
    --base-font-size: 16px;
    --font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;

    /* Font sizes */
    --fs-xs: 0.85rem;
    --fs-sm: 0.92rem;
    --fs-base: 1.02rem;
    --fs-lg: 1.2rem;
    --fs-xl: 1.4rem;
    
    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Headings */
    --h1: clamp(3rem, 10vw, 6rem);
    --h2: 1.9rem;
    --h3: 1.35rem;
    --h4: 1.08rem;

    /* Line heights */
    --lh-base: 1.6;
    --lh-tight: 1.25;
    --lh-relaxed: 1.7;
    
    /* word spacing */
    --word-spacing: 0.02em;
    
    /* letter spacing */
    --ls-normal: 0.005em;
    --ls-wide: 0.02em;
    --ls-ultrawide: 0.06em;
    --ls-button: 0.1em;
 

/* LAYOUT */
    /* Container */
    --container-content: 76rem;
    --container-narrow: 50rem;
    --container-column: 37rem;
    
    /* Rhythm (4pt grid) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    
    /* Radii */
    --radius-image: 4px;
    --radius-button: 4px;
    --radius-card: 8px;
    --radius-section: 12px;
    
    /* Z-Indices */    
    --z-base: 1;
    --z-navigation: 10;
    
/* TRANSITION */
    --transition-fast: 0.25s cubic-bezier(0.25, 0.15, 0.15, 1);
}


/* RESET */

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

html { font-size: var(--base-font-size); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem;
 }
body { position: relative; background: var(--bg-main); color: var(--text-main); font-size: var(--fs-base); font-weight: var(--fw-regular); 
    font-family: var(--font-serif); word-spacing: var(--word-spacing); letter-spacing: var(--ls-normal); line-height: var(--lh-base); 
    overflow-x: hidden; hyphens: auto }


/* BASE */

h1, h2, h3, h4 { color: var(--bronze); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); line-height: var(--lh-tight) }
h1 { margin: var(--space-8) 0 var(--space-6); font-size: var(--h1); text-transform: uppercase; text-shadow: var(--shadow-gold) }
h2 { margin: var(--space-5) 0 var(--space-5); font-size: calc(var(--h2) * 0.94); letter-spacing: var(--ls-ultrawide); text-transform: uppercase }
h3 { margin: var(--space-5) 0 var(--space-3); font-size: var(--h3) }
h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--h4); font-weight: var(--fw-semibold) }
p { margin-bottom: var(--space-4); color: var(--text-muted); line-height: var(--lh-base); font-size: var(--fs-base) }

p + h3 { margin-top: var(--space-6) }

.lead { font-size: 1.12em; letter-spacing: var(--ls-wide); line-height: var(--lh-base); font-style: italic }

/* COMPONENTS */

/* Figure */
figure { display: block; width: 100%;  margin-bottom: var(--space-6); background: var(--sand-100); opacity: 0.96; border-radius: var(--radius-button) }
figure .media { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-image) }
figure.portrait .media { aspect-ratio: 2 / 3 }
figure.square .media { aspect-ratio: 1 / 1 }
figure img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-image); border: var(--border-glow) }
figure figcaption { padding: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); text-align: center }

/* Hero divider */
.hero-stars { display: flex; justify-content: center;  transform: translateY(-1rem); gap: clamp(0.8rem, 1.2vw, 1.6rem); margin: var(--space-4) 0 var(--space-5) }
.hero-stars span { color: var(--color-title); font-size:clamp(1.1rem, 1.4vw, 1.8rem); letter-spacing: 0.2em }
.hero-stars span:nth-child(2) { transform: translateY(-0.18rem) }

/* Main divider */
.divider { display: flex; align-items: center; justify-content: center; margin-top: var(--space-3); gap: var(--space-4) }
.divider-line { flex: 1; height: 2px; border-radius: 999px }
.divider-line.left { background: linear-gradient(to left, var(--copper-dark), transparent) }
.divider-line.right { background: linear-gradient(to right, var(--copper-dark), transparent) }

.divider-dot { position: relative;  transform: translateY(-0.20rem); display: flex; align-items: center; justify-content: center; width: 2rem; height: 0.2rem; margin-bottom: 1px; color: var(--copper-dark); opacity: 0.9; text-shadow: var(--shadow-divider) }

.divider-dot::before,
.divider-dot::after { position: absolute; color: var(--copper-dark); font-size: 0.6rem; padding-inline: var(--space-1); text-shadow: var(--shadow-divider); transform: translateY(0.12rem) }
.divider-dot::before { content: "✦"; left: -1.1em }
.divider-dot::after { content: "✦"; right: -1.1em }


/* Text links */
.text-link { display: inline-block; margin-top: var(--space-2); color: var(--copper-dark); text-decoration: none; font-weight: var(--fw-bold) }
.text-link:hover {text-decoration: underline; text-shadow: var(--shadow-link) }

/* Link Separator */
 .sep { margin: 0 var(--space-2); color: var(--text-muted) }


/* HERO */

.hero { position: relative; display: flex; align-items: center; justify-content: center; height: 70vh; min-height: 31rem; background: url("background-hero1.webp") center/cover no-repeat }
.hero-content { padding: var(--space-4); max-width: var(--container-narrow); text-align: center }
.home-link  {text-decoration: none }
.home-link h1 {text-decoration: none; color: var(--color-title) }
.hero p { margin: 0 auto var(--space-5); max-width: var(--container-column); color: var(--sand-100); font-size: var(--fs-lg); text-shadow: var(--shadow-gold) }
.hero-button  { display: inline-block; padding: var(--space-3) var(--space-6); background: var(--gradient-button); color: var(--sand-100); text-decoration: none; border-radius: var(--radius-button); border: var(--border-color); box-shadow: var(--shadow-gold); font-weight: var(--fw-semibold); letter-spacing: var(--ls-button); text-transform: uppercase; font-size: var(--fs-xs); line-height: var(--lh-relaxed); transition: transform var(--transition-fast) }
.hero a:hover { transform: translateY(-1px) }

.gradient {background: var(--gradient-hero-overlay), var(--gradient-hero-top), url("background-hero1.webp") center/cover no-repeat }

/* MAIN NAVIGATION */

.main-nav { position: relative; background: var(--gradient-nav); box-shadow: var(--shadow-nav); border-bottom: var(--border-color); z-index: var(--z-navigation) }
.nav-inner { margin: 0 auto; padding: var(--space-3) var(--space-4); max-width: var(--container-content) }
.main-nav::before { content: ""; position: absolute; top: 0; left: 50%; width: 80%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: translateX(-50%) }
.main-nav::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 35%; background: var(--gradient-nav-after); pointer-events: none }
.main-nav ul { display: flex; flex-direction: column; align-items: center; list-style: none; gap: var(--space-3) }
.main-nav a { position: relative; padding: var(--space-1) 0 var(--space-1); color: var(--bronze-dark); text-decoration: none; font-weight: var(--fw-semibold); letter-spacing: var(--ls-ultrawide); text-transform: uppercase; font-size: var(--fs-sm) }
.main-nav a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; opacity: 0.9; background: var(--gradient-nav-a-after); transform: translateX(-50%); transition:var(--transition-fast) }
.main-nav a:hover::after { width: 100% }
.main-nav a:focus { outline: 2px solid var(--copper); outline-offset: 4px }


/* MAIN LAYOUT */

.page { margin-inline: auto; padding: var(--space-8) var(--space-4) var(--space-8); max-width: var(--container-content) }

/* Content grid */
.content-grid, .content-grid-full { display: grid; grid-template-columns: 1fr; gap: var(--space-6) }

/* swap utility */
.swap-left { order: 2 }
.swap-right { order: 1 }

/* Sections */
.section, .section-muted, .section-highlight { margin-bottom: var(--space-8) }
.section-highlight { position: relative; padding: var(--space-6) var(--space-5); background: var(--gradient-card-accent); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); border: var(--border-glow); overflow: hidden }
.section-highlight::before { content: ""; position: absolute; inset: 0; background: var(--gradient-section-highlight); pointer-events: none }
.section-muted { padding: var(--space-6) var(--space-5); background: var(--bg-muted); border-radius: 12px; box-shadow: var(--shadow-soft); border: var(--border-muted) }
.section-header { margin-bottom: var(--space-5); text-align: center }

/* Cards */
.card, .card-accent { position: relative; padding: var(--space-5); background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: var(--border-muted); overflow: hidden }
.card::before, .card-accent::before { content: ""; position: absolute; inset: 0; background: var(--gradient-card-before); pointer-events: none }
.card-accent { background: var(--gradient-card-accent); border: var(--border-glow) }
.card ul, .card ol { margin: var(--space-3) 0 var(--space-5); padding: 0; line-height: var(--lh-base) }
.card li { margin-left: var(--space-6); margin-bottom: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm) }
.card ul li::marker { color: var(--copper-dark); font-size: var(--fs-sm); opacity: 0.6; }
.card hr { border: 0; border-top: var(--border-glow); margin: var(--space-5) 0 }

/* Columns */
.columns { columns: 1;  margin-bottom: var(--space-6); column-gap: var(--space-6); orphans: 3; widows: 3; hyphens: auto; column-rule: var(--border-glow)  }
.columns h3 { break-after: avoid-column }
.columns p { break-inside: avoid-column }
.columns figure { break-inside: avoid-column }

/* Floating Figure */
.card figure.float-left { float: none; width: 100%; margin: 0 0 var(--space-4) 0; background: var(--sand-200); border-radius: var(--radius-image); overflow: hidden }
.card figure.float-left.portrait { aspect-ratio: 2 / 3 }
.card figure.float-left.square { aspect-ratio: 1 / 1 }
.card figure.float-left img { width: 100%; height: 100%; object-fit: cover; display: block }
.card::after { content: ""; display: block; clear: both }


/* FOOTER */

.footer { padding: var(--space-4) var(--space-2); background: var(--gradient-footer); color: var(--bronze-dark); font-size: var(--fs-sm); box-shadow: var(--shadow-footer) }
.footer-inner { margin: 0 auto; max-width: var(--container-content); text-align: center }
.footer-links { margin-top: var(--space-1) }
.footer-links a { color: var(--bronze-dark); text-decoration: none; font-weight: var(--fw-semibold) }
.footer-links a:hover { text-decoration: underline }


/* MEDIA QUERIES */

@media (min-width: 640px) {
    .content-grid-full { hyphens: none }
    .card figure.float-left { float: left; width: min(50%, 22rem); margin: var(--space-5) var(--space-6) var(--space-3) 0 }
}

@media (min-width: 700px) {
    .main-nav ul { flex-direction: row; justify-content: center; gap: var(--space-8) }
    .swap-left { order: 1 }
    .swap-right {order: 2 }    
}

@media (min-width: 800px) {
    .main-nav { position: sticky; top: 0 }
    .content-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr); hyphens: none }
    .columns { columns: 2 18rem }
}

@media (min-width: 1600px) {
    html { font-size: clamp(17px, 0.45vw + 7px, 22px) }
}

@media (min-width: 2300px) {
    html { font-size: clamp(22px, 0.42vw + 9px, 28px) }
}

@media (min-width: 2700px) {
    html { font-size: clamp(28px, 0.40vw + 11px, 34px) }
}

@media (min-width: 3100px) {
    html { font-size: clamp(34px, 0.38vw + 13px, 40px) }
}

@media (min-width: 3500px) {
    html { font-size: clamp(40px, 0.36vw + 15px, 46px) }
}

@media (min-width: 4000px) {
    html { font-size: clamp(46px, 0.34vw + 17px, 53px) }
}

@media (min-width: 4600px) {
    html { font-size: clamp(53px, 0.32vw + 19px, 60px) }
}