/* ───────────────────────── technoclub.io ─────────────────────────
   Raffia ground, woven kente bands, mudcloth divider, ink + indigo/ochre/
   rust/olive accents. Pre-launch splash on the front; quiet pages within. */

:root{
  --raffia:   #e8dcc1;
  --raffia-2: #efe5cf;
  --ink:      #241a10;
  --ink-mid:  rgba(36, 26, 16, 0.62);
  --ink-soft: rgba(36, 26, 16, 0.40);
  --indigo:   #2f4561;
  --ochre:    #c4912c;
  --rust:     #b04e2a;
  --olive:    #5d6a37;
  --hair:     rgba(36, 26, 16, 0.16);
  --display: "Fraunces", Georgia, serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh;
  display:flex; flex-direction:column;
  background-color:var(--raffia);
  background-image:
    radial-gradient(130% 80% at 50% -10%, rgba(196,145,44,0.14), transparent 60%),
    radial-gradient(120% 70% at 50% 115%, rgba(47,69,97,0.10), transparent 60%);
  color:var(--ink);
  font-family:var(--body); font-weight:300;
  font-size:clamp(16px, 0.6vw + 14px, 19px); line-height:1.66;
}
/* woven cloth grain */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:0.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{ color:inherit; }

/* woven bands + textile divider */
.weave{ position:relative; z-index:1; width:100%; height:26px; display:block; }
.weave.bottom{ margin-top:auto; }
.divider{ width:100%; height:18px; margin:clamp(2.4rem,7vh,4rem) 0 clamp(1.6rem,5vh,3rem); opacity:0.9; }

/* centered column holding masthead, page, footer */
.wrap{
  position:relative; z-index:1;
  width:100%; max-width:940px; margin:0 auto; flex:1 0 auto;
  padding:clamp(2rem,6vw,4.5rem) clamp(1.5rem,6vw,4rem);
  display:flex; flex-direction:column;
}

/* masthead */
.mast{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(3rem,11vh,7rem); }
.brand{ display:flex; align-items:center; gap:1rem; text-decoration:none; }
.mark{ flex:0 0 auto; }
.wordmark{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.36em;
  text-transform:uppercase; color:var(--ink-mid); transition:color .4s ease;
}
.brand:hover .wordmark{ color:var(--ink); }

/* shared eyebrow */
.eyebrow{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.30em;
  text-transform:uppercase; color:var(--rust); margin:0 0 1.4rem;
}

/* ════════ front-page hero ════════ */
.hero{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; }
h1.title{
  font-family:var(--display); font-optical-sizing:auto; font-weight:330;
  font-size:clamp(3.2rem,11vw,7.6rem); line-height:0.92; letter-spacing:-0.02em;
  margin:0 0 1.6rem; color:var(--ink);
}
h1.title em{ font-style:italic; font-weight:330; color:var(--indigo); }
.lede{
  font-family:var(--display); font-weight:320;
  font-size:clamp(1.25rem,1vw + 1.05rem,1.7rem); line-height:1.5;
  max-width:40ch; margin:0; color:var(--ink);
}
.lede .accent{ color:var(--rust); font-style:italic; }
.lede-2{
  font-family:var(--body); font-weight:300;
  font-size:clamp(1rem,0.5vw + 0.95rem,1.12rem); line-height:1.7;
  max-width:50ch; margin:1.2rem 0 0; color:var(--ink-mid);
}

/* opening-soon promise */
.ahead{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.6rem 2.2rem; }
.ahead .label{
  font-family:var(--mono); font-size:0.64rem; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--ink-soft); width:100%;
}
.ahead .place{
  font-family:var(--display); font-style:italic; font-size:1.18rem;
  color:var(--ink-mid); position:relative; padding-bottom:3px;
}
.ahead .place::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:repeating-linear-gradient(90deg, var(--ochre) 0 6px, transparent 6px 11px);
  opacity:0.7;
}
/* once a place links somewhere, it becomes interactive */
a.ahead-link{ text-decoration:none; }
a.ahead-link .place{ color:var(--indigo); }

/* ════════ interior pages (about, contact, projects) ════════ */
.page{ flex:1 0 auto; }
.page-title{
  font-family:var(--display); font-weight:340; font-optical-sizing:auto;
  font-size:clamp(2.2rem,6vw,3.4rem); line-height:1; letter-spacing:-0.015em;
  margin:0 0 1.6rem; color:var(--ink);
  display:flex; align-items:center; gap:0.7rem;
}
.prose{ max-width:46ch; }
.prose p{ margin:0 0 1.2rem; color:var(--ink-mid); }
.prose .lead{
  font-family:var(--display); font-weight:330; font-size:clamp(1.2rem,2.4vw,1.55rem);
  line-height:1.45; color:var(--ink); max-width:42ch; margin:0 0 1.6rem;
}
.prose strong{ font-weight:400; color:var(--ink); }

/* the four "what pieces do" lines */
.kinds{ margin:1.4rem 0; }
.kinds dt{
  font-family:var(--display); font-style:italic; font-size:1.18rem;
  color:var(--indigo); margin-top:1.1rem;
}
.kinds dd{ margin:0.15rem 0 0; color:var(--ink-mid); }

/* project subpages */
.project-tagline{
  font-family:var(--display); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.45rem);
  color:var(--indigo); margin:0 0 1.6rem;
}
.dev-note{
  display:inline-block; font-family:var(--mono); font-size:0.66rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mid);
  border:1px solid var(--hair); border-radius:2px; padding:7px 12px; margin:0.4rem 0 1.6rem;
}

/* contact list */
.contact-list{ list-style:none; padding:0; margin:1.6rem 0 0; }
.contact-list li{
  display:flex; gap:1.4rem; padding:0.85rem 0; align-items:baseline;
  border-top:1px solid var(--hair);
}
.contact-list li:last-child{ border-bottom:1px solid var(--hair); }
.cl-k{
  width:72px; flex:none; font-family:var(--mono); font-size:0.62rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft);
}
.cl-v{ font-size:1rem; color:var(--ink); }

/* projects table */
.ptable{ width:100%; max-width:780px; border-collapse:collapse; margin-top:0.5rem; }
.ptable tr{ border-top:1px solid var(--hair); }
.ptable tr:last-child{ border-bottom:1px solid var(--hair); }
.ptable td{ padding:1.15rem 1.2rem 1.15rem 0; vertical-align:baseline; }
.pt-name{ white-space:nowrap; }
.pt-name a{
  font-family:var(--display); font-size:1.2rem; color:var(--indigo);
  text-decoration:none; border-bottom:1px solid var(--ochre); padding-bottom:1px;
  transition:color .3s;
}
.pt-name a:hover{ color:var(--rust); }
.pt-path{
  display:block; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:5px;
}
.pt-desc{ color:var(--ink-mid); }
@media (max-width:560px){
  .ptable td{ display:block; padding:0.25rem 0; }
  .ptable tr{ padding:0.9rem 0; }
  .pt-name{ white-space:normal; }
  .pt-desc{ padding-bottom:0.9rem; }
}

/* contact form (in the spirit of dalejoachim.net) */
.cform{ max-width:440px; margin:1.6rem 0 0; display:flex; flex-direction:column; gap:1rem; }
.cform label{ display:block; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-soft); }
.cform .fld{
  display:block; width:100%; margin-top:0.4rem; font-family:var(--body); font-size:1rem;
  color:var(--ink); background:var(--raffia-2); border:1px solid var(--hair);
  border-radius:3px; padding:0.7rem 0.85rem; transition:border-color .3s;
}
.cform textarea.fld{ min-height:140px; resize:vertical; line-height:1.6; }
.cform .fld:focus{ outline:none; border-color:var(--indigo); }
.cform .hp{ position:absolute; left:-9999px; width:1px; height:1px; }
.cbtn{
  align-self:flex-start; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--raffia-2); background:var(--indigo);
  border:none; border-radius:3px; padding:0.85rem 1.6rem; cursor:pointer; transition:background .3s;
}
.cbtn:hover{ background:var(--rust); }
.cerr{ color:var(--rust); font-size:0.95rem; }
.clinks{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1.4rem; margin-top:2.2rem;
  font-family:var(--mono); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase;
}
.clinks a{ color:var(--ink-mid); text-decoration:none; border-bottom:1px solid var(--ochre); padding-bottom:2px; transition:color .3s; }
.clinks a:hover{ color:var(--rust); }
.cplace{ color:var(--ink-soft); }

/* signature */
.sign{ font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--ink); margin-top:2rem; }
.sign::before{ content:""; display:block; width:34px; height:2px; background:var(--ochre); margin-bottom:0.8rem; }

/* links */
.ulink{
  color:var(--indigo); text-decoration:none;
  border-bottom:1px solid var(--ochre); padding-bottom:1px; transition:color .4s ease;
}
.ulink:hover{ color:var(--rust); }

/* footer */
.foot{
  flex-shrink:0; margin-top:clamp(2.5rem,8vh,5rem);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:0.6rem 1.5rem;
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.foot > :first-child{ justify-self:start; }
.foot > :nth-child(2){ justify-self:center; }
.foot > :last-child{ justify-self:end; }
.foot a{ color:var(--ink-mid); text-decoration:none; transition:color .4s ease; }
.foot a:hover{ color:var(--rust); }
.foot-name{ color:var(--ink-soft); }   /* wordmark doubles as the home link */
@media (max-width:480px){
  .foot{ grid-template-columns:1fr; justify-items:center; gap:0.55rem; }
  .foot > *{ justify-self:center !important; }
}

/* entrance */
.rise{ opacity:0; transform:translateY(14px); animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{ animation-delay:.05s; } .d2{ animation-delay:.2s; }
.d3{ animation-delay:.36s; } .d4{ animation-delay:.54s; } .d5{ animation-delay:.7s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (max-width:560px){ .ahead{ gap:0.5rem 1.4rem; } }
@media (prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; animation:none; } }