/* =========================================================
ETSAKO HERITAGE
STORY 01 — LAND & LEGACY

## RESPONSIVE / FLUID STANDARD

• Fully responsive
• Fully fluid
• clamp() based sizing
• NO @media queries
• No responsive redesign
• No phone-only fixed sizes
• Desktop remains the visual standard
• Phone text remains highly readable
• Large-screen text scales naturally
• Navigation remains visible
• Footer remains visible
• Continuous auto-fit grid flow
========================================================= */

/* =========================================================
ROOT
========================================================= */

:root {
--gold: #d4af37;
--gold-soft: rgba(212, 175, 55, 0.78);

--white: rgba(255, 255, 255, 0.96);
--white-soft: rgba(255, 255, 255, 0.88);
--white-faint: rgba(255, 255, 255, 0.68);

--line: rgba(255, 255, 255, 0.14);

--page-width: 1180px;

--side-space: clamp(
20px,
4vw,
48px
);
}

/* =========================================================
RESET
========================================================= */

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

html {
scroll-behavior: auto;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
min-width: 280px;

background: #080b09;
color: var(--white);

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-weight: 300;

line-height: 1.8;

overflow-x: hidden;

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}

/* =========================================================
MEDIA
========================================================= */

img {
display: block;

width: auto;
max-width: 100%;
height: auto;
}

/* =========================================================
LINKS
========================================================= */

a {
color: inherit;

-webkit-tap-highlight-color: transparent;
}

/* =========================================================
TEXT SAFETY
========================================================= */

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a {
overflow-wrap: break-word;
word-break: normal;
}

/* =========================================================
PAGE
========================================================= */

.heritage-page {
width: 100%;
min-height: 100vh;

overflow-x: hidden;
}

.heritage-container {
width: min(
calc(100% - (var(--side-space) * 2)),
var(--page-width)
);

margin: 0 auto;

min-width: 0;
}

/* =========================================================
TOP NAVIGATION
========================================================= */

.heritage-nav {
width: 100%;

padding:
clamp(22px, 3.5vw, 42px)
0;

border-bottom:
1px solid var(--line);
}

.heritage-nav-inner {
width: min(
calc(100% - (var(--side-space) * 2)),
var(--page-width)
);

margin: 0 auto;

display: flex;

align-items: center;
justify-content: space-between;

gap: clamp(
18px,
3vw,
42px
);

min-width: 0;
}

/* =========================================================
NAV BRAND
========================================================= */

.heritage-mark {
flex: 1 1 auto;

min-width: 0;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-size: clamp(
0.82rem,
1.05vw,
1rem
);

font-weight: 400;

line-height: 1.3;

letter-spacing: clamp(
1.5px,
0.32vw,
4px
);

text-transform: uppercase;

color: var(--white-faint);
}

/* =========================================================
BACK LINK
========================================================= */

.back-link {
flex: 0 1 auto;

display: inline-flex;

align-items: center;
justify-content: center;

gap: clamp(
7px,
0.8vw,
11px
);

min-height: clamp(
38px,
3.5vw,
48px
);

padding:
clamp(7px, 0.8vw, 12px)
clamp(11px, 1.5vw, 20px);

text-decoration: none;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-size: clamp(
0.82rem,
1vw,
0.98rem
);

font-weight: 400;

line-height: 1.35;

letter-spacing: clamp(
0.5px,
0.14vw,
1.5px
);

color: var(--white-soft);

white-space: nowrap;

border:
1px solid
rgba(255, 255, 255, 0.16);

-webkit-user-select: none;
user-select: none;
}

.back-link span {
color: var(--gold-soft);

font-size: 1.15em;
}

.back-link:hover {
color: var(--white);

border-color:
rgba(212, 175, 55, 0.45);
}

/* =========================================================
HERO / INTRO
========================================================= */

.heritage-intro {
width: 100%;

padding:
clamp(82px, 11vw, 155px)
0
clamp(90px, 12vw, 175px);

text-align: center;

min-width: 0;
}

/* =========================================================
HERO NUMBER
========================================================= */

.heritage-number {
display: block;

margin-bottom:
clamp(
20px,
2.8vw,
34px
);

font-family:
"Share Tech Mono",
monospace;

font-size: clamp(
0.70rem,
0.82vw,
0.82rem
);

font-weight: 400;

line-height: 1.5;

letter-spacing: clamp(
2px,
0.5vw,
6px
);

color: var(--gold-soft);
}

/* =========================================================
MAIN H1
========================================================= */

.heritage-intro h1 {
width: 100%;

max-width: clamp(
650px,
65vw,
820px
);

margin: 0 auto;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-size: clamp(
2rem,
4.2vw,
3.5rem
);

line-height: 1.12;

font-weight: 300;

letter-spacing: clamp(
0.5px,
0.14vw,
2px
);

color: var(--white);
}

/* =========================================================
HERO DESCRIPTION
========================================================= */

.heritage-intro p {
width: min(
94%,
760px
);

margin:
clamp(30px, 3.5vw, 46px)
auto
0;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

/*
FLUID:
PHONE      → 1.18rem
FLUID      → 1.70vw + 0.10rem
LARGE      → 1.55rem
*/
font-size: clamp(
1.18rem,
calc(1.70vw + 0.10rem),
1.55rem
);

line-height: clamp(
1.78,
1.90vw + 1.45,
1.95
);

font-weight: 300;

color: var(--white-soft);
}

/* =========================================================
DIVIDER
========================================================= */

.quiet-line {
width: min(
100%,
700px
);

height: 1px;

margin: 0 auto;

background: var(--line);
}

/* =========================================================
HERITAGE SECTIONS
========================================================= */

.heritage-section {
padding:
clamp(78px, 10vw, 150px)
0;

min-width: 0;
}

.heritage-section

* .heritage-section {
  border-top:
  1px solid
  rgba(255, 255, 255, 0.055);
  }

/* =========================================================
SECTION LABEL
========================================================= */

.section-label {
margin-bottom:
clamp(
26px,
3.5vw,
46px
);

font-family:
"Share Tech Mono",
monospace;

font-size: clamp(
0.68rem,
0.82vw,
0.82rem
);

font-weight: 400;

line-height: 1.5;

letter-spacing: clamp(
2px,
0.4vw,
5px
);

text-transform: uppercase;

color: var(--gold-soft);
}

/* =========================================================
SECTION H2
========================================================= */

.heritage-section h2 {
width: 100%;

max-width: clamp(
650px,
70vw,
800px
);

margin:
0 0
clamp(
32px,
3.8vw,
50px
);

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-size: clamp(
1.75rem,
3.1vw,
2.65rem
);

line-height: 1.18;

font-weight: 300;

letter-spacing: clamp(
0.3px,
0.08vw,
1px
);

color: var(--white);
}

/* =========================================================
MAIN BODY COPY
========================================================= */

.heritage-copy {
width: 100%;

max-width: 820px;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

/*
FLUID STORY TEXT

```
 Small phone  → 1.18rem
 Fluid middle → 1.75vw + 0.10rem
 Large screen → 1.55rem
```

*/
font-size: clamp(
1.18rem,
calc(1.75vw + 0.10rem),
1.55rem
);

/*
Smoothly increasing readability
*/
line-height: clamp(
1.78,
calc(1.90vw + 1.45),
1.95
);

font-weight: 300;

color: var(--white-soft);

min-width: 0;
}

/* =========================================================
EVERY MAIN STORY PARAGRAPH
========================================================= */

.heritage-copy p {
width: 100%;

margin:
0 0
clamp(
34px,
4vw,
56px
);

font-size: inherit;

line-height: inherit;

font-weight: 300;

color: var(--white-soft);
}

.heritage-copy p:last-child {
margin-bottom: 0;
}

/* =========================================================
ANCESTRAL QUOTE
========================================================= */

.heritage-quote {
width: 100%;

max-width: 840px;

margin:
clamp(88px, 11vw, 150px)
auto;

padding:
0
clamp(14px, 3vw, 45px);

text-align: center;

min-width: 0;
}

.heritage-quote p {
margin: 0;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-size: clamp(
1.25rem,
calc(2vw + 0.05rem),
1.68rem
);

line-height: clamp(
1.78,
1.85vw + 1.35,
1.95
);

font-weight: 300;

font-style: italic;

color:
rgba(255, 255, 255, 0.82);
}

/* =========================================================
ANCESTRAL MAP
========================================================= */

.ancestral-map {
width: 100%;

margin-top:
clamp(
62px,
8vw,
115px
);

min-width: 0;
}

.map-frame {
width: 100%;

padding:
clamp(18px, 2.5vw, 32px)
0;

border-top:
1px solid var(--line);

border-bottom:
1px solid var(--line);
}

.map-frame img {
width: 100%;

max-width: 100%;

height: auto;

object-fit: contain;

opacity: 0.88;
}

/* =========================================================
MAP CAPTION
========================================================= */

.map-caption {
display: flex;

align-items: flex-start;

justify-content: space-between;

gap:
clamp(
14px,
3vw,
30px
);

margin-top:
clamp(
14px,
1.5vw,
19px
);

font-family:
"Share Tech Mono",
monospace;

font-size: clamp(
0.68rem,
0.82vw,
0.80rem
);

font-weight: 400;

line-height: 1.6;

letter-spacing: clamp(
0.8px,
0.14vw,
1.5px
);

color: var(--white-faint);

min-width: 0;
}

/* =========================================================
SETTLEMENT GRID
CONTINUOUS AUTO-FIT
========================================================= */

.settlement-grid {
display: grid;

grid-template-columns:
repeat(
auto-fit,
minmax(
min(100%, 320px),
1fr
)
);

gap:
clamp(
42px,
7vw,
100px
);

margin-top:
clamp(
58px,
8vw,
115px
);

min-width: 0;
}

/* =========================================================
SETTLEMENT
========================================================= */

.settlement {
min-width: 0;

padding-top:
clamp(
18px,
2vw,
24px
);

border-top:
1px solid var(--line);
}

/* =========================================================
SETTLEMENT NUMBER
========================================================= */

.settlement-number {
display: block;

margin-bottom:
clamp(
15px,
1.5vw,
20px
);

font-family:
"Share Tech Mono",
monospace;

font-size: clamp(
0.68rem,
0.78vw,
0.76rem
);

font-weight: 400;

line-height: 1.4;

letter-spacing: clamp(
1.5px,
0.3vw,
2.5px
);

color: var(--gold-soft);
}

/* =========================================================
SETTLEMENT H3
========================================================= */

.settlement h3 {
margin:
0 0
clamp(
18px,
1.8vw,
24px
);

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-size: clamp(
1.42rem,
calc(2vw + 0.05rem),
1.75rem
);

font-weight: 300;

line-height: 1.3;

color: var(--white);
}

/* =========================================================
SETTLEMENT BODY
========================================================= */

.settlement p {
width: 100%;

margin: 0;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

/*
FLUID SETTLEMENT TEXT
*/
font-size: clamp(
1.15rem,
calc(1.65vw + 0.10rem),
1.48rem
);

line-height: clamp(
1.78,
calc(1.90vw + 1.45),
1.95
);

font-weight: 300;

color: var(--white-soft);
}

/* =========================================================
FINAL CLOSING
========================================================= */

.heritage-closing {
text-align: center;

padding:
clamp(108px, 15vw, 200px)
0
clamp(82px, 11vw, 145px);

min-width: 0;
}

/* =========================================================
CLOSING H2
========================================================= */

.heritage-closing h2 {
width: 100%;

max-width: 720px;

margin: 0 auto;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-size: clamp(
1.75rem,
3.1vw,
2.65rem
);

line-height: 1.2;

font-weight: 300;

letter-spacing: 0.4px;

color: var(--white);
}

/* =========================================================
CLOSING PARAGRAPH
========================================================= */

.heritage-closing p {
width: min(
94%,
760px
);

margin:
clamp(
32px,
3.8vw,
46px
)
auto
0;

font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

/*
FLUID CLOSING TEXT
*/
font-size: clamp(
1.18rem,
calc(1.70vw + 0.10rem),
1.55rem
);

line-height: clamp(
1.78,
calc(1.90vw + 1.45),
1.95
);

font-weight: 300;

color: var(--white-soft);
}

/* =========================================================
FOOTER
========================================================= */

.heritage-footer {
width: 100%;

padding:
clamp(38px, 4vw, 54px)
var(--side-space)
clamp(58px, 6vw, 78px);

border-top:
1px solid var(--line);

text-align: center;

min-width: 0;
}

/* =========================================================
FOOTER LINK
========================================================= */

.heritage-footer a {
display: inline-flex;

align-items: center;

justify-content: center;

min-height: clamp(
40px,
4vw,
50px
);

max-width: 100%;

padding:
clamp(8px, 0.8vw, 12px)
clamp(14px, 1.8vw, 24px);

text-decoration: none;

font-family:
"Share Tech Mono",
monospace;

font-size: clamp(
0.70rem,
0.85vw,
0.84rem
);

font-weight: 400;

line-height: 1.5;

letter-spacing: clamp(
1px,
0.2vw,
2px
);

text-transform: uppercase;

color: var(--white-faint);

border:
1px solid
rgba(255, 255, 255, 0.14);

-webkit-user-select: none;
user-select: none;
}

.heritage-footer a:hover {
color: var(--white);

border-color:
rgba(212, 175, 55, 0.45);
}

/* =========================================================
GLOBAL HEADING CONTROL
========================================================= */

.heritage-page h1,
.heritage-page h2,
.heritage-page h3,
.heritage-page h4,
.heritage-page h5,
.heritage-page h6 {
font-family:
"Cormorant Garamond",
"Times New Roman",
Georgia,
serif;

font-weight: 300;

max-width: 100%;

overflow-wrap: break-word;
}

/* =========================================================
UNIVERSAL TEXT VISIBILITY
========================================================= */

.heritage-page p {
max-width: 100%;

overflow-wrap: break-word;

word-break: normal;

hyphens: none;
}

/* =========================================================
FLUID WIDTH SAFETY
========================================================= */

.heritage-container,
.heritage-nav-inner,
.heritage-intro,
.heritage-section,
.heritage-closing,
.heritage-footer {
min-width: 0;

overflow-wrap: break-word;
}

/* =========================================================
NARROW-VIEWPORT PROTECTION
NO MEDIA QUERY
========================================================= */

.back-link,
.heritage-mark,
.map-caption,
.settlement,
.heritage-copy,
.heritage-intro p,
.heritage-closing p {
min-width: 0;
}

/* =========================================================
FINAL PARAGRAPH PRIORITY
------------------------

FINAL AUTHORITY FOR ALL STORY TEXT
========================================================= */

.heritage-page .heritage-copy p {
font-size: clamp(
1.18rem,
calc(1.75vw + 0.10rem),
1.55rem
);

line-height: clamp(
1.78,
calc(1.90vw + 1.45),
1.95
);

color: var(--white-soft);
}

.heritage-page .settlement p {
font-size: clamp(
1.15rem,
calc(1.65vw + 0.10rem),
1.48rem
);

line-height: clamp(
1.78,
calc(1.90vw + 1.45),
1.95
);

color: var(--white-soft);
}

.heritage-page .heritage-intro p {
font-size: clamp(
1.18rem,
calc(1.70vw + 0.10rem),
1.55rem
);

line-height: clamp(
1.78,
calc(1.90vw + 1.45),
1.95
);

color: var(--white-soft);
}

.heritage-page .heritage-closing p {
font-size: clamp(
1.18rem,
calc(1.70vw + 0.10rem),
1.55rem
);

line-height: clamp(
1.78,
calc(1.90vw + 1.45),
1.95
);

color: var(--white-soft);
}

/* =========================================================
END
========================================================= */