:root{
/* Core palette */
--bg:#000000;

--color-dark:#2F2400;
--color-medium:#D9D4A8;
--color-light:#FCF9DD;


--soft:rgba(0,0,0,0.45);

/* Gradient depth */
--grad-start:#000000;
--grad-end:#FCF9DD;

/* Type base */
--text-base:16px;
--lead-texting:1.55;

/* Fluid type scale */
--step--1:clamp(0.875rem,0.85rem + 0.2vw,0.95rem);
--step-0:clamp(1rem,0.98rem + 0.25vw,1.0625rem);
--step-1:clamp(1.125rem,1.07rem + 0.45vw,1.25rem);
--step-2:clamp(1.25rem,1.15rem + 0.75vw,1.5rem);
--step-3:clamp(1.5rem,1.35rem + 1.05vw,1.75rem);
--step-4:clamp(1.75rem,1.55rem + 1.6vw,2.25rem);
--step-5:clamp(2.5rem,2.1rem + 3vw,4.5rem);

/* Alias: small note text */
--step--0:var(--step--1);
}

body{
margin:0;
color:var(--color-light);
text-rendering:optimizeLegibility;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
line-height:1.55;
background-color:var(--bg);
cursor:crosshair;
}

/* Applies to the entire website */
/* ==========================================================================
  CUSTOM CURSOR (pointer dot + ring) + CURSOR OVERRIDES
========================================================================== */
#pointer-dot{
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  position: fixed;
  border-radius: 50%;
  border: 2.5px solid var(--color-light);
  pointer-events: none;
  z-index: 1000;
}

#pointer-ring{
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: 14px;
  position: fixed;
  border-radius: 50%;
  border: 2px solid var(--color-medium);
  pointer-events: none;
  z-index: 999;
}

html, body, a, button, .link-style-btn, .copy-wrapper{
  cursor: none !important;
}




/* Links */
a{
color:var(--color-light);
text-decoration:none;
cursor:none;
position:relative;
display:inline-block;
transition:color 0.4s;
}

a:hover{
color:var(--color-medium);
cursor:zoom-in !important;
}

/* Sliding underline */
a::after{
content:'';
position:absolute;
width:100%;
height:2px;
bottom:-2px;
left:0;
background-color:currentColor;
transform:scaleX(0);
transform-origin:bottom right;
transition:transform 0.3s ease-out;
}

a:hover::after{
transform:scaleX(1);
transform-origin:bottom left;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

/* ==========================================================================
   05. TYPOGRAPHY: HEADINGS + BODY
========================================================================== */
h1{ font-size:var(--step-5); line-height:1.05; margin:0; }
h2{ font-size:var(--step-4); line-height:1.10; margin:0; }
h3{ font-size:var(--step-3); line-height:1.20; margin:0; }
h4{ font-size:var(--step-2); line-height:1.25; margin:0; }
h5{ font-size:var(--step-1); line-height:1.30; margin:0; }
h6{ font-size:var(--step-0); line-height:1.40; margin:0; }

p{ font-size:var(--step-0); margin:0; }

/* =========================================
   STAGE
========================================= */
.stage{
position:relative;
min-height:100svh;
overflow:hidden;
}

.image-layer{
position:absolute;
inset:0;
background-image:url("where-did-i-leave-myself.jpg");
background-size:cover;
/* Desktop: keep figure slightly left of center */
background-position:48% 50%;
}

/* Desktop overlay: darken left side for readable text */
.image-layer::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,0.62) 0%,rgba(0,0,0,0.18) 38%,rgba(0,0,0,0) 62%);
}

/* =========================================
   CONTENT LAYER
========================================= */
.content{
position:relative;
z-index:2;
padding:clamp(20px,5vw,84px);
padding-bottom:clamp(64px,10vh,96px);
display:flex;
justify-content:flex-start;
align-items:flex-start;
min-height:100svh;
}

.text-column{
width:min(460px,92vw);
}

/* =========================================
   TYPE + BLOCKS
========================================= */

/* Index + label lockup */
.index-lockup{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
margin:0 0 28px 0;
}

/* Giant index (fluid shrink) */
.macro-label{
font-size:clamp(72px,12vw,176px);
margin:0;
letter-spacing:-0.035em;
line-height:0.95;
}

/* Inverse scaling micro-label */
.micro-label{
font-size: clamp(24px, 2.4vw, 32px);
letter-spacing: 0.28em;
text-transform:uppercase;
opacity:0.88;
color:var(--color-light);
}

/* Mobile micro-tuning */
@media (max-width:480px){
.macro-label{
letter-spacing:-0.02em;
line-height:1;
}
.micro-label{
letter-spacing:0.18em;
}
}

.intro{
margin:0 0 32px 0;
opacity:0.9;
}

.block{
margin-bottom:28px;
padding-top:12px;
border-top:1px dotted rgba(252,249,221,0.35);
}

.block h2{
font-size:13px;
letter-spacing:0.12em;
text-transform:uppercase;
margin:0 0 8px 0;
}

.block p{
margin:0;
max-width:48ch;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width:980px){
.image-layer{
background-position:50% 50%;
}
.text-column{
width:min(520px,94vw);
}
}

@media (max-width:640px){
.content{
justify-content:center;
padding:24px 18px 40px 18px;
}

.image-layer{
background-position:50% 55%;
}

.image-layer::after{
background:linear-gradient(90deg,rgba(0,0,0,0.44) 0%,rgba(0,0,0,0.12) 45%,rgba(0,0,0,0.24) 100%);
}
}

@media (max-width:380px){
.content{
padding:18px 14px 34px 14px;
}
.block{
margin-bottom:22px;
}
}

/* =========================================
   FIXED FOOTER
========================================= */
.site-footer{
position:fixed;
left:0;
right:0;
bottom:16px;
z-index:3;
pointer-events:none;
}

.footer-inner{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
padding:10px clamp(16px,4vw,36px);
font-size:12px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--color-light);
background:rgba(0,0,0,0.12);
}

.footer-inner a{
color:inherit;
text-decoration:none;
pointer-events:auto;
}

.footer-inner a:hover{
text-decoration:underline;
}

.footer-inner .dot{
opacity:0.8;
}
.site-footer{
pointer-events:none;
}

.footer-inner{
pointer-events:auto;
}

.copy-toast{
position:fixed;
bottom:64px;
left:50%;
transform:translateX(-50%);
padding:8px 14px;
font-size:12px;
letter-spacing:0.12em;
text-transform:uppercase;
background:rgba(0,0,0,1.0);
color:var(--color-light);
opacity:0;
pointer-events:none;
transition:opacity 0.25s ease;
}

.copy-toast.is-visible{
opacity:1;
}

.footer-copy{
background:none;
border:none;
color:inherit;
font:inherit;
letter-spacing:inherit;
cursor:zoom-in;
padding:0;
}