/* =========================================================================
   TEND SPACE — bespoke case-study theme
   A community art center. Warm, woven, gallery.
   Forest green · bone · butter · sage + coral / teal / mauve.
   Scoped under body.tend.
   ========================================================================= */
@font-face{
  font-family:"Coolvetica";
  src:url("../assets/tend/coolvetica.otf") format("opentype");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
.tend{
  --green:#335D39;
  --green-deep:#264429;
  --sage:#B3D195;
  --butter:#EFDC8A;
  --bone:#EAE9E3;
  --bone-2:#E0DFD5;
  --mauve:#A86E6E;
  --coral:#D96551;
  --maroon:#5A1815;
  --teal:#4B8E92;
  --ink:#2A2722;

  --t-display:"Coolvetica","Schibsted Grotesk",sans-serif;
  --t-serif:"Cormorant Garamond",Georgia,serif;

  --tw-mega: clamp(3rem, 11vw, 11rem);
  --tw-huge: clamp(2.4rem, 6.5vw, 6rem);
  --tw-big:  clamp(1.9rem, 4.4vw, 3.8rem);

  background:var(--bone);
  color:var(--ink);
  cursor:auto;
}
.tend ::selection{ background:var(--green); color:var(--bone); }

.tw-display{ font-family:var(--t-display); font-weight:700; line-height:0.94; letter-spacing:-0.02em; text-wrap:balance; }
.tw-serif{ font-family:var(--t-serif); font-style:italic; }
.tw-kicker{ font-family:var(--t-display); font-weight:700; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; }

/* ---------- screen-print grain ---------- */
.tend .exp-grain{ opacity:0.06; mix-blend-mode:multiply; }
.tend .exp-progress{ background:var(--coral); height:4px; }
.tend .exp-veil{ background:var(--green); color:var(--butter); }
.tend .exp-ambient{ display:none; }
.tend .nav::before{ opacity:1 !important; background:color-mix(in srgb,var(--bone) 86%, transparent); border-bottom-color:rgba(42,39,34,0.12); }

.tw-section{ padding-block:clamp(4rem,9vw,8rem); position:relative; }
.tend .wrap{ position:relative; z-index:2; }

/* =====================================================================
   HERO
   ===================================================================== */
.tw-hero{ background:var(--green); color:var(--bone); position:relative; overflow:hidden; padding-top:clamp(7rem,13vh,10rem); }
.tw-hero__inner{ padding-inline:var(--mx); max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-bottom:clamp(3rem,6vw,5rem); }
@media (max-width:860px){ .tw-hero__inner{ grid-template-columns:1fr; text-align:center; } }
.tw-hero__eyebrow{ display:inline-flex; align-items:center; gap:0.7em; font-family:var(--t-display); font-weight:700; font-size:clamp(0.72rem,1vw,0.84rem); letter-spacing:0.18em; text-transform:uppercase; color:var(--butter); }
.tw-hero__eyebrow::before{ content:""; width:clamp(20px,4vw,46px); height:2px; background:currentColor; }
@media (max-width:860px){ .tw-hero__eyebrow{ justify-content:center; } }
.tw-hero__title{ font-family:var(--t-display); font-weight:700; font-size:var(--tw-mega); line-height:0.86; letter-spacing:-0.03em; margin-top:0.3em; }
.tw-hero__title img{ width:min(100%,500px); height:auto; display:block; margin-top:0.1em; }
@media (max-width:860px){ .tw-hero__title img{ margin-inline:auto; } }
.tw-hero__title small{ display:block; font-size:0.26em; font-weight:600; letter-spacing:0.32em; text-transform:uppercase; color:var(--sage); margin-top:0.6em; }
.tw-hero__tag{ font-family:var(--t-serif); font-style:italic; font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.3; max-width:26ch; margin-top:1.4rem; color:var(--bone); }
@media (max-width:860px){ .tw-hero__tag{ margin-inline:auto; } }
.tw-hero__cta{ display:inline-flex; gap:0.8rem; flex-wrap:wrap; margin-top:1.8rem; }
@media (max-width:860px){ .tw-hero__cta{ justify-content:center; } }
.tw-hero__mark{ display:flex; justify-content:center; }
.tw-hero__mark img{ width:min(80%,360px); height:auto; will-change:transform; }
.tend.tw-motion .tw-hero__mark img{ animation: tw-spin 60s linear infinite; }
@keyframes tw-spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.tw-btn{ display:inline-flex; align-items:center; gap:0.5em; white-space:nowrap; font-family:var(--t-display); font-weight:700; font-size:0.85rem; letter-spacing:0.02em; padding:0.95em 1.6em; border-radius:100px; background:var(--butter); color:var(--green-deep); border:2px solid transparent; transition:transform 0.2s var(--ease), background 0.3s; }
.tw-btn:hover{ transform:translateY(-2px); background:var(--sage); }
.tw-btn--ghost{ background:transparent; color:var(--bone); border-color:rgba(234,233,227,0.4); }
.tw-btn--ghost:hover{ background:rgba(234,233,227,0.1); }
.tw-btn--green{ background:var(--green); color:var(--bone); }
.tw-btn--green:hover{ background:var(--green-deep); }

/* =====================================================================
   MARQUEE
   ===================================================================== */
.tw-marquee{ overflow:hidden; display:flex; background:var(--coral); color:var(--bone); padding-block:clamp(0.7rem,1.4vw,1.1rem); border-block:2px solid var(--green-deep); }
.tw-marquee__track{ display:flex; flex:none; align-items:center; white-space:nowrap; }
.tend.tw-motion .tw-marquee__track{ animation: tw-scroll 34s linear infinite; }
.tw-marquee:hover .tw-marquee__track{ animation-play-state:paused; }
@keyframes tw-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tw-mq{ display:inline-flex; align-items:center; gap:0.7em; font-family:var(--t-display); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.8rem); letter-spacing:0.01em; padding:0 0.6em; }
.tw-mq img{ height:0.9em; width:auto; opacity:0.95; }

/* =====================================================================
   EYEBROW / STATEMENT
   ===================================================================== */
.tw-eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.tw-eyebrow .t{ font-family:var(--t-display); font-weight:700; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--coral); white-space:nowrap; }
.tw-eyebrow .ln{ flex:1; height:2px; background:rgba(42,39,34,0.18); }
.tw-eyebrow .n{ font-family:var(--t-serif); font-style:italic; font-size:1rem; color:var(--green); }
.tw-statement{ font-family:var(--t-display); font-weight:700; font-size:var(--tw-huge); line-height:0.98; letter-spacing:-0.025em; text-wrap:balance; }
.tw-statement em{ font-family:var(--t-serif); font-style:italic; font-weight:400; color:var(--coral); }
.tw-lead{ font-family:var(--t-display); font-weight:500; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.55; color:#54514a; max-width:54ch; }
.tw-lead em{ font-style:normal; color:var(--green); font-weight:600; }

/* =====================================================================
   THE MARK story
   ===================================================================== */
.tw-mark{ background:var(--green); color:var(--bone); }
.tw-mark__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
@media (max-width:820px){ .tw-mark__grid{ grid-template-columns:1fr; text-align:center; } }
.tw-mark__art{ display:flex; justify-content:center; }
.tw-mark__art img{ width:min(72%,300px); height:auto; }
.tend.tw-motion .tw-mark__art img{ animation: tw-breathe 6s ease-in-out infinite; }
@keyframes tw-breathe{ 0%,100%{transform:rotate(-3deg) scale(1)} 50%{transform:rotate(3deg) scale(1.04)} }
.tw-mark__h{ font-family:var(--t-display); font-weight:700; font-size:var(--tw-big); line-height:0.98; letter-spacing:-0.02em; color:var(--butter); }
.tw-mark__p{ font-family:var(--t-serif); font-style:italic; font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.35; margin-top:1rem; max-width:30ch; }
@media (max-width:820px){ .tw-mark__p{ margin-inline:auto; } }
.tw-mark__tags{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1.6rem; }
@media (max-width:820px){ .tw-mark__tags{ justify-content:center; } }
.tw-mark__tags span{ font-family:var(--t-display); font-weight:600; font-size:0.82rem; border:1.5px solid rgba(234,233,227,0.4); border-radius:100px; padding:0.4em 1em; color:var(--sage); }

/* =====================================================================
   LOGO SYSTEM
   ===================================================================== */
.tw-logos{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.7rem,1.4vw,1.1rem); }
@media (max-width:760px){ .tw-logos{ grid-template-columns:repeat(2,1fr); } }
.tw-logo{ aspect-ratio:3/4; border-radius:18px; position:relative; display:flex; align-items:center; justify-content:center; padding:1.4rem; overflow:hidden; transition:transform 0.3s var(--ease); }
.tw-logo:hover{ transform:translateY(-5px); }
.tw-logo .cap{ position:absolute; top:1.1rem; left:1.2rem; font-family:var(--t-display); font-weight:700; font-size:0.78rem; letter-spacing:0.02em; }
.tw-logo img{ max-width:74%; max-height:46%; width:auto; object-fit:contain; }
.tw-logo .note{ position:absolute; bottom:1rem; left:1.1rem; right:1.1rem; font-family:var(--t-serif); font-style:italic; font-size:0.8rem; line-height:1.25; }

/* =====================================================================
   COLOR
   ===================================================================== */
.tw-swrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.6rem,1.2vw,1rem); }
@media (max-width:680px){ .tw-swrow{ grid-template-columns:repeat(2,1fr); } }
.tw-sw{ aspect-ratio:4/3.4; border-radius:14px; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; font-family:var(--t-display); font-weight:600; font-size:0.9rem; transition:transform 0.3s var(--ease); }
.tw-sw:hover{ transform:translateY(-4px); }
.tw-sw b{ font-weight:700; font-size:0.98rem; }
.tw-sw span{ opacity:0.75; font-size:0.78rem; }
.tw-sw.brd{ border:1.5px solid rgba(51,93,57,0.22); }

/* =====================================================================
   TYPE
   ===================================================================== */
.tw-type{ background:var(--teal); color:var(--bone); }
.tw-spec{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.8rem); }
@media (max-width:760px){ .tw-spec{ grid-template-columns:1fr; } }
.tw-spec .role{ font-family:var(--t-display); font-weight:600; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; opacity:0.8; margin-bottom:0.8rem; }
.tw-spec .nm{ font-size:clamp(1.9rem,3vw,2.7rem); line-height:1.0; color:var(--butter); }
.tw-spec .ex{ font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.1; margin-top:0.4rem; color:var(--butter); }

/* =====================================================================
   GALLERY (applications)
   ===================================================================== */
.tw-gal{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,1.8vw,1.6rem); }
.tw-frame{ position:relative; border-radius:16px; overflow:hidden; background:var(--bone-2); box-shadow:0 18px 40px -24px rgba(42,39,34,0.5); }
.tw-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.8s var(--ease); }
.tw-frame:hover img{ transform:scale(1.04); }
.tw-frame__cap{ position:absolute; left:0.9rem; bottom:0.9rem; z-index:2; font-family:var(--t-display); font-weight:600; font-size:0.72rem; letter-spacing:0.02em; color:var(--bone); background:rgba(42,39,34,0.7); backdrop-filter:blur(6px); border-radius:100px; padding:0.4em 0.85em; }
.tw-sp-7{ grid-column:span 7; } .tw-sp-5{ grid-column:span 5; }
.tw-sp-6{ grid-column:span 6; } .tw-sp-12{ grid-column:span 12; }
.tw-ar-wide{ aspect-ratio:16/9; } .tw-ar-43{ aspect-ratio:4/3; } .tw-ar-219{ aspect-ratio:21/9; }
@media (max-width:760px){ .tw-gal > *{ grid-column:1 / -1 !important; } }

/* =====================================================================
   FINALE
   ===================================================================== */
.tw-finale{ background:var(--green); color:var(--bone); text-align:center; overflow:hidden; }
.tw-finale__mark{ width:clamp(80px,11vw,140px); height:auto; margin:0 auto clamp(1.6rem,3vw,2.4rem); display:block; }
.tend.tw-motion .tw-finale__mark{ animation: tw-spin 50s linear infinite; }
.tw-finale .tw-display{ font-size:var(--tw-mega); }
.tw-finale .tw-display em{ font-family:var(--t-serif); font-style:italic; font-weight:400; color:var(--butter); }
.tw-finale__cta{ margin-top:clamp(2rem,4vw,3rem); display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* next project */
.tend .nextproj{ border-top:2px solid rgba(42,39,34,0.16); padding-block:clamp(3rem,6vw,5rem); }
.tend .nextproj .label{ display:block; margin-bottom:0.8rem; color:var(--coral); }
.tend .nextproj .big{ font-family:var(--t-display); font-weight:700; font-size:var(--tw-big); line-height:0.98; letter-spacing:-0.02em; color:var(--ink); display:inline-flex; align-items:center; gap:0.4em; }
.tend .nextproj a:hover .big{ color:var(--green); opacity:1; }
.tend .nextproj a:hover .big .arr{ transform:translateX(10px); }
.tend .nextproj .big .arr{ transition:transform 0.4s var(--ease); }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .tend [data-pop]{ opacity:0; transform:translateY(32px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay:var(--d,0ms); }
  .tend [data-pop].is-in{ opacity:1; transform:none; }
}
@media (max-width:600px){ .tend{ --tw-mega:clamp(2.6rem,13vw,4.4rem); --tw-huge:clamp(2.1rem,9vw,3.2rem); } }