@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --color-bg:#1a1c17;
  --color-surface:#282a21;
  --color-text:#eee9dc;
  --color-text-muted:rgba(238,233,220,0.55);
  --color-accent:#b4d92c;
  --color-accent-300:#cbe87a;
  --color-accent-800:#3c4a12;
  --color-divider:rgba(238,233,220,0.13);
  --font-heading:"Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;
  --space-6:52px;
  --space-7:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  text-wrap:pretty;
}
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0;
}
p{margin:0}
img{display:block;max-width:100%}
a{color:var(--color-accent-300);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--color-accent)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}

.hr{
  height:1px;border:0;margin:0;
  background:linear-gradient(to right,transparent,var(--color-divider) 48px,var(--color-divider) calc(100% - 48px),transparent);
}
.lighten{mix-blend-mode:lighten;background-color:transparent}

.field label{
  display:block;font-size:12px;margin-bottom:6px;color:var(--color-text-muted);
}
.field-input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--color-divider);
  color:var(--color-text);font:inherit;font-size:15px;padding:8px 2px;
}
.field-input:hover{border-bottom-color:color-mix(in srgb, var(--color-text) 45%, transparent)}
.field-input:focus-visible{border-bottom-color:var(--color-accent);outline:none}
textarea.field-input{resize:vertical;min-height:64px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;font-family:var(--font-heading);font-weight:500;font-size:14px;
  color:var(--color-accent);background:transparent;border:1px solid var(--color-accent);
  padding:9px 18px;border-radius:var(--radius-md);
}
.btn:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent)}
.btn:active{background:color-mix(in srgb, var(--color-accent) 22%, transparent)}

/* — page layout — */
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
.sep{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,4vw,32px);flex-wrap:wrap}
.sep-label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-300)}
.sep-line{flex:1 1 60px;height:1px;background:linear-gradient(to right,var(--color-divider),transparent)}
.statement{font-size:clamp(26px,4.6vw,40px);line-height:1.18;max-width:20ch}
.meta{font-size:13px;color:var(--color-text-muted);margin-top:12px}
.copy{font-size:16.5px;line-height:1.7;max-width:52ch;margin-top:18px}
.two{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media(min-width:760px){
  .two{grid-template-columns:1.05fr 0.95fr;gap:40px}
  .two-rev > *:first-child{order:2}
}
.shot{border-radius:var(--radius-md);width:100%;object-fit:cover;box-shadow:0 12px 28px rgba(0,0,0,0.45)}
.proj-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
@media(min-width:620px){.proj-grid{grid-template-columns:repeat(2,1fr)}}

/* — click-to-play video cards — */
.play{
  display:block;width:100%;padding:0;border:0;background:var(--color-surface);cursor:pointer;
  position:relative;border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,0.45);
}
.play img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.play .glyph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(to top, rgba(32,33,29,0.55), rgba(32,33,29,0.05));
}
.play .glyph span{
  width:56px;height:56px;border-radius:50%;border:1px solid var(--color-accent);
  background:rgba(32,33,29,0.6);display:flex;align-items:center;justify-content:center;
  color:var(--color-accent);font-size:18px;line-height:1;padding-left:4px;
}
.play:hover .glyph span{background:color-mix(in srgb, var(--color-accent) 22%, rgba(32,33,29,0.6))}
.pending{
  border-radius:var(--radius-md);background:var(--color-surface);
  border:1px dashed var(--color-divider);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-muted);font-size:12px;text-align:center;padding:16px;
}