/* CSS Document */

/* =========================================
TOKENS + BASE
========================================= */

:root{
--bg:#000000;
--panel:#2F2400;

  --color-dark: #2F2400;
  --color-medium: #4F3800;
  --color-light: #FCF9DD;

  --color-deep:#171200;
  --color-accent: #171200;

--radius:2px;
--max:1080px;

--line-thin:1.5px dotted #2F2400;

--gutter:clamp(16px,2.2vw,24px);
--card-pad:clamp(18px,3.2vw,32px);

--space-1:clamp(10px,1.8vw,14px);
--space-2:clamp(14px,2.4vw,18px);
--space-4:clamp(28px,4.8vw,36px);
  
  

--gap-2:clamp(12px,2vw,16px);

/* One shared top rhythm token */
--page-top:clamp(10px,2vw,14px);

/* Corner plate tokens */
--plate-color:rgba(79,56,0,.7);
--plate-size:26px;
--plate-offset:12px;
--plate-weight:2px;

/* Fluid type */

  --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);
 
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

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

a,button,[role="button"]{ cursor:zoom-in; }
button{ font:inherit; }

html,body{
background-color:#000000 !important;
color:var(--color-light);
}

@font-face{
font-family:'stencil';
src:url('fonts/butler_bold_stencil-webfont.woff2') format('woff2'),
    url('fonts/butler_bold_stencil-webfont.woff') format('woff');
font-weight:normal;
font-style:normal;
}

@font-face{
font-family:'fragment';
src: url('fonts/aifragment-webfont.woff2') format('woff2'), 
     url('fonts/aifragment-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

/* Utilities */
.stencil { font-family:'stencil';  }
.fragment { font-family:'fragment';  }



/* Global Link/Interactive Cursor */
a,
button,
.button,
.nav-toggle,
.drawer-close,
.modal-close,
[role="button"]{
  cursor: zoom-in;
}

.h1, h1{ font-size: var(--step-5); line-height: 1.05; margin: 0; }
.h2, h2{ font-size: var(--step-4); line-height: 1.10; margin: 0; }
.h3, h3{ font-size: var(--step-3); line-height: 1.20; margin: 0; }
.h4, h4{ font-size: var(--step-2); line-height: 1.25; margin: 0; }
.h5, h5{ font-size: var(--step-1); line-height: 1.30; margin: 0; }
.h6, h6{ font-size: var(--step-0); line-height: 1.40; margin: 0; }

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



/* ==========================================================================
  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;
}

/* Prevent tiny-screen horizontal drift from any wide media */
html,body{ overflow-x:hidden; }
img,svg,video,canvas{ max-width:100%; height:auto; }


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

.section-divider {
  border: none; margin-top: 24px;
  border-top: 1px dashed var(--color-medium);
  height: 0; /* Set height to 0 when using border-top for the line thickness */
}


.container{
max-width:var(--max);
margin-top:40px;
padding:0 var(--gutter);
}

footer {
background-color: transparent;
backdrop-filter: blur(2px);
text-align: center;
padding: 1rem;
position: fixed;
width: 100%;
left: 0;
bottom: 24px;
z-index: 1000;
border-top: 1px dotted var(--color-light);
font-size: 0.9rem;
}


/* =========================================
GRID CARDS
two-up: 1 col small, 2 cols at 700px+
========================================= */

.grid.cards{
display:grid;
gap:var(--gap-2);
width:100%;
margin:0; 
}

.grid.cards.two-up{
display:grid;
grid-template-columns:1fr;
gap:var(--gap-2);
}

@media (min-width:700px){
.grid.cards.two-up{
grid-template-columns:1fr 1fr;
  
}
}

/* =========================================
ART SLIDER CARD (Juxtapose)
========================================= */

.art-card{
border:1px dotted rgba(79,56,0,.55);
background:var(--bg);
border-radius:var(--radius);
padding:var(--card-pad);
width:100%;
}

.art-card .juxtapose{
width:100%;
height:auto;
margin:0;
}

/* Optional: add a little top separation if needed */
@media (max-width:699px){
.art-card{
margin-top:var(--gap-2);
}
}

/* important margin correction */
.art-frame{
box-sizing:border-box;
width:100%;
padding:0 0 0.5rem 0.2rem;
}
.art-frame .juxtapose{
width:100% !important;
max-width:100%;
padding:0.8rem 0 0 0.5rem;
}


/* Equal-height cards in the two-up layout */
.art-card{
width:100%;
height:100%;
display:flex;
flex-direction:column;
}

/* Juxtapose: force the widget to respect the card width */
.art-frame,.art-frame .juxtapose{ width:100% !important; max-width:100%; }
.juxtapose{ overflow:hidden; }

/* FORCE equal 2-up columns even if another stylesheet tries to override */
@media (min-width:700px){
.section .grid.cards.two-up{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}

/* Defensive: prevent any child from forcing a column wider/narrower */
.grid.cards.two-up > *{
min-width:0;
}

/* Defensive: if any older rule tries to pin width */
.art-card{
max-width:none !important;
justify-self:stretch !important;
}


/* Hard stop any sideways overflow */
html,body{
max-width:100%;
overflow-x:hidden;
}

/* Extra safety on the page wrap */
.container,
.section,
.grid.cards{
max-width:100%;
overflow-x:clip;
}

/* Cards should never leak content sideways */
.art-card{
overflow:hidden;
}


.ticker-wrap{
width: 100%;
overflow: hidden;
background: transparent;
color: var(--color-light);
border: 1px dotted var(--bg);
padding: calc(var(--gap-1) * 0.9) 0;
margin-top: 24px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.ticker{
display: flex;
white-space: nowrap;
width: max-content;
animation: ticker-move 30s linear infinite;
}
.ticker-group{
display: flex;
flex-shrink: 0;
}
.ticker__item{
padding: 0 2rem;
font-family: var(--font-mono);
color: var(--color-light);
text-decoration: none;
cursor: pointer !important;
pointer-events: auto !important;
transition: color 0.3s;
display: inline-block;
}
.ticker__item::after{
content: none !important;
display: none !important;
}
.ticker__item:hover{
color: var(--color-medium);
}
.ticker-wrap:hover .ticker{
animation-play-state: paused;
}
@keyframes ticker-move{
0%{
transform: translateX(0);
}
100%{
transform: translateX(-50%);
}
}