/* ============================================================
   AW Webdesign — werk.html, the full project index
   black editorial page: giant thin "WERK", numbered project
   rows that alternate sides, letter-roll titles
   ============================================================ */
:root{--black:#0a0a0a;--white:#f6f5f2;--orange:#ff844f;--line:rgba(246,245,242,.16);
  --muted:rgba(246,245,242,.5);--pad:clamp(1.5rem,5vw,5rem);--ease:cubic-bezier(.22,1,.36,1)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--black);color:var(--white);font-family:Montserrat,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--orange);color:var(--white)}

/* header — fixed, inverts over light areas like the rest of the site */
.wk-head{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;
  align-items:center;padding:1.5rem var(--pad);color:#fff;mix-blend-mode:difference}
.mark{height:20px;display:block}
.wk-back{position:relative;font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:.3rem}
.wk-back::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.wk-back:hover::after{transform:scaleX(1);transform-origin:left}

/* small uppercase label used across the page */
.lbl{font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---------------- hero ---------------- */
.wk-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:7.5rem var(--pad) 2.6rem}
.wk-hero-top{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.wk-hero-top .lbl:nth-child(2){text-align:center}
.wk-hero-top .lbl:nth-child(3){text-align:right}
.wk-word{display:flex;align-items:flex-start;margin:6vh 0 4vh -.04em;
  font-weight:200;text-transform:uppercase;letter-spacing:-.045em;line-height:.78;
  font-size:clamp(6rem,27vw,34rem)}
.wk-word .ch{display:inline-block}
.wk-word .mask{display:inline-block;flex:none;white-space:nowrap;overflow:hidden;padding:.02em .02em 0}
.wk-count{margin:.55em 0 0 .25em;font-size:.09em;font-weight:400;letter-spacing:.06em;color:var(--orange)}
.wk-hero-foot{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.wk-intro{max-width:46ch;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:300;line-height:1.6;
  color:rgba(246,245,242,.82)}
.wk-intro em{font-style:normal;color:var(--orange)}
.wk-down{width:56px;height:56px;border:1.5px solid rgba(246,245,242,.5);border-radius:50%;
  display:grid;place-items:center;transition:background .35s,border-color .35s,color .35s}
.wk-down:hover{background:var(--orange);border-color:var(--orange);color:var(--black)}
.wk-down svg{width:18px}

/* ---------------- project rows ---------------- */
.wk-projects{padding:4vh var(--pad) 6vh}
.wk-row{display:block;position:relative;padding:4.5vh 0 14vh}
.wk-rule{height:1px;background:var(--line);transform-origin:left}
.wk-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;padding-top:1.2rem}
.wk-meta .lbl:nth-child(2){text-align:center}
.wk-meta .lbl:nth-child(3){text-align:right}
.wk-meta b{font-weight:500;color:var(--white)}

/* title: every letter is a 1em window holding a white and an orange copy;
   on hover the column rolls up, letter by letter */
.wk-title{margin-top:5vh;font-weight:200;text-transform:uppercase;letter-spacing:-.02em;
  line-height:1;font-size:clamp(2.6rem,7.6vw,9.5rem);white-space:nowrap}
.wk-row.alt .wk-title{text-align:right}
.wk-title .w{display:inline-block;white-space:nowrap}
.wk-title .r{display:inline-block;overflow:hidden;height:1em;vertical-align:top}
.wk-title .r>span{display:flex;flex-direction:column;transition:transform .6s var(--ease)}
.wk-title .r>span>span{display:block;height:1em}
.wk-title .r>span>span+span{color:var(--orange)}
.wk-row:hover .wk-title .r>span{transform:translateY(-1em)}

.wk-body{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem);
  margin-top:5vh;align-items:end}
.wk-media{grid-column:1/9;position:relative;overflow:hidden;aspect-ratio:1896/895;background:#151515}
/* hover zoom lives on a wrapper; the screenshot itself is never cropped at rest */
.wk-zoom{position:absolute;inset:0;transition:transform 1s var(--ease)}
.wk-row:hover .wk-zoom{transform:scale(1.04)}
.wk-media img{width:100%;height:100%;object-fit:cover;object-position:top}
/* "view case" tag slides up from the image's bottom edge on hover */
.wk-tag{position:absolute;left:1.2rem;bottom:1.2rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--orange);color:var(--black);border-radius:999px;padding:.75rem 1.3rem;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transform:translateY(calc(100% + 1.4rem));transition:transform .5s var(--ease)}
.wk-tag svg{width:.95em;height:.95em}
.wk-row:hover .wk-tag{transform:none}

.wk-side{grid-column:9/13;display:flex;flex-direction:column;gap:1.4rem;padding-bottom:.2rem}
.wk-row.alt .wk-media{grid-column:5/13}
.wk-row.alt .wk-side{grid-column:1/5;grid-row:1}
.wk-desc{font-size:.98rem;font-weight:300;line-height:1.75;color:rgba(246,245,242,.72)}
.wk-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.wk-chips span{border:1px solid rgba(246,245,242,.28);border-radius:999px;padding:.42rem .95rem;
  font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,245,242,.85)}
.wk-link{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;position:relative;
  padding-bottom:.35rem;font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.wk-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--orange);
  transform:scaleX(.25);transform-origin:left;transition:transform .45s var(--ease)}
.wk-row:hover .wk-link::after{transform:scaleX(1)}
.wk-link svg{width:1em;height:1em;color:var(--orange);transition:transform .35s var(--ease)}
.wk-row:hover .wk-link svg{transform:translate(3px,-3px)}

/* ---------------- closing cta ---------------- */
.wk-cta{padding:12vh var(--pad) 16vh;border-top:1px solid var(--line)}
.wk-cta-big{display:block;margin-top:4vh;font-weight:200;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.95;font-size:clamp(2.8rem,10vw,12rem)}
.wk-cta-big .dot{color:var(--orange)}
.wk-cta-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;margin-top:6vh}
.wk-cta-row p{max-width:40ch;font-weight:300;line-height:1.65;color:rgba(246,245,242,.72)}
.wk-btn{display:inline-flex;align-items:center;gap:.7rem;border:1px solid rgba(246,245,242,.35);border-radius:999px;
  padding:1.1rem 2.2rem;font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:background .35s,border-color .35s,color .35s,transform .35s var(--ease)}
.wk-btn svg{width:1em;height:1em;transition:transform .35s var(--ease)}
.wk-btn:hover{background:var(--orange);border-color:var(--orange);color:var(--black);transform:translateY(-2px)}
.wk-btn:hover svg{transform:translate(3px,-3px)}

/* ---------------- footer ---------------- */
.wk-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  padding:2.4rem var(--pad);border-top:1px solid var(--line);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,245,242,.45)}
.wk-legal{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.wk-legal a{transition:color .3s}
.wk-legal a:hover{color:var(--orange)}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  .wk-hero{padding-top:6.5rem;min-height:86svh}
  .wk-word{font-size:26vw}
  .wk-hero-top{grid-template-columns:1fr 1fr}
  .wk-hero-top .lbl:nth-child(2){display:none}
  .wk-title,.wk-row.alt .wk-title{text-align:left;white-space:normal;font-size:clamp(2.2rem,11vw,5rem)}
  .wk-body{grid-template-columns:1fr;gap:1.8rem;margin-top:3.5vh}
  .wk-media,.wk-row.alt .wk-media,.wk-side,.wk-row.alt .wk-side{grid-column:auto;grid-row:auto}
  .wk-meta{grid-template-columns:1fr 1fr}
  .wk-meta .lbl:nth-child(2){display:none}
  .wk-row{padding-bottom:10vh}
  /* touch: no hover, and the case link below already says it */
  .wk-tag{display:none}
}
@media (max-width:600px){
  .wk-hero-foot{grid-template-columns:1fr}
  .wk-down{display:none}
}