/* ============================================================
   huangyucong.com
   Type   Barlow Condensed (titles) / Barlow (prose) / Courier Prime (data)
   Colour unlit stage green-black, tungsten practical, gel red
   ============================================================ */

:root{
  --stage:#0C1210;
  --stage-2:#131C18;
  --rule:#25332D;
  --chalk:#E4E2D8;
  --dim:#8A948F;
  --tungsten:#E3A24A;
  --gel:#C43A2C;
  --cjk:"Hiragino Sans","Hiragino Kaku Gothic ProN","PingFang TC","PingFang SC",
        "Noto Sans CJK TC","Yu Gothic","Microsoft JhengHei",sans-serif;
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--stage);
  color:var(--chalk);
  font-family:"Barlow",var(--cjk);
  font-size:16px;
  line-height:1.6;
  font-synthesis-weight:none;
}
html.slate-on, html.slate-on *{cursor:none}

img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px}

/* ---------- chrome ---------------------------------------- */

.bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap;
  padding:.9rem clamp(1.1rem,4vw,3rem);
  background:rgba(12,18,16,.86);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule);
}
.bar-name{
  font-family:"Barlow Condensed",var(--cjk);
  font-weight:700;letter-spacing:.09em;font-size:1.05rem;
  text-decoration:none;margin-right:auto;
}
.bar-name span{color:var(--dim);font-weight:400;margin-left:.5rem;letter-spacing:.02em}
.bar nav{display:flex;gap:1.15rem;flex-wrap:wrap}
.bar nav a{
  font-family:"Barlow Condensed",var(--cjk);
  font-size:1rem;letter-spacing:.06em;text-decoration:none;color:var(--dim);
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.bar nav a:hover{color:var(--chalk)}
.bar nav a[aria-current]{color:var(--chalk);border-bottom-color:var(--tungsten)}
body.home .bar{background:transparent;backdrop-filter:none;border-bottom:0;position:absolute;left:0;right:0}
body.home{--dim:#A9B2AD}
@media (max-width:640px){body.home .bar nav{display:none}}

.langs{display:flex;gap:.7rem;padding-left:1.1rem;border-left:1px solid var(--rule)}
.langs a,.langs span{
  font-family:"Courier Prime",monospace;font-size:.72rem;letter-spacing:.04em;
  text-decoration:none;color:var(--dim);
}
.langs a:hover{color:var(--tungsten)}
.langs span{color:var(--chalk)}

/* ---------- home ------------------------------------------ */

.hero{position:relative;min-height:100svh;display:flex;overflow:hidden}
.hero img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 32%;
  filter:saturate(.9) contrast(1.04);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(12,18,16,.94) 0%,rgba(12,18,16,.45) 34%,rgba(12,18,16,.05) 62%),
    linear-gradient(to right,rgba(12,18,16,.7) 0%,rgba(12,18,16,0) 45%);
}
.hero-text{
  position:relative;z-index:2;align-self:flex-end;
  padding:0 clamp(1.1rem,5vw,4.5rem) clamp(2.4rem,7vh,5rem);
  max-width:44rem;
}
.hero h1{
  font-family:"Barlow Condensed",var(--cjk);
  font-weight:700;line-height:.86;letter-spacing:.005em;
  font-size:clamp(3.4rem,12.5vw,9.5rem);
  margin:0;
}
.hero-han{
  font-family:var(--cjk);font-weight:400;
  font-size:clamp(1rem,3.2vw,1.6rem);letter-spacing:.5em;
  color:var(--tungsten);margin:.65rem 0 0;
}
.hero-role{
  font-family:"Courier Prime",monospace;
  font-size:clamp(.8rem,2.2vw,.95rem);color:var(--chalk);
  margin:1.15rem 0 0;max-width:34ch;
}
.hero-enter{
  display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.8rem;
}
.hero-enter a{
  font-family:"Barlow Condensed",var(--cjk);
  font-size:1.22rem;letter-spacing:.09em;text-decoration:none;
  padding-bottom:.2rem;border-bottom:1px solid var(--rule);
}
.hero-enter a:hover{border-bottom-color:var(--tungsten);color:var(--tungsten)}

/* ---------- page shell ------------------------------------ */

main{padding:clamp(2.4rem,7vh,4.5rem) clamp(1.1rem,4vw,3rem) 5rem;max-width:1220px;margin:0 auto}

.page-head{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;
  padding-bottom:1.6rem;margin-bottom:2.8rem;border-bottom:1px solid var(--rule);
}
.page-head h2{
  font-family:"Barlow Condensed",var(--cjk);
  font-weight:700;letter-spacing:.02em;line-height:1;
  font-size:clamp(2.4rem,7vw,4.2rem);margin:0;
}
.page-head p{margin:0;color:var(--dim);max-width:var(--measure)}

/* ---------- work grids ------------------------------------ */

.works{display:grid;gap:clamp(2rem,4vw,3.2rem)}
.works.rows{gap:0}
.works.rows .work{
  display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.4rem);
  padding:2.2rem 0;border-top:1px solid var(--rule);
}
.works.rows .work:first-child{border-top:0;padding-top:0}
.works.rows .meta h3{margin-top:0}
.works.rows .plate{align-self:start}
@media (max-width:640px){
  .works.rows .work{grid-template-columns:minmax(0,1fr);gap:0}
  .works.rows .work>.plate{max-width:190px}
  .works.rows h3{margin-top:1rem}
}
.works.posters{grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
.works.frames{grid-template-columns:repeat(2,minmax(0,1fr))}
.works.frames .work.wide{grid-column:1 / -1}
@media (max-width:720px){
  .works.frames{grid-template-columns:minmax(0,1fr)}
  .works.posters{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

.work{min-width:0}

/* viewfinder brackets */
.plate{position:relative;background:var(--stage-2);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover}
.corner{
  position:absolute;width:15px;height:15px;pointer-events:none;
  border:1px solid rgba(228,226,216,.34);transition:border-color .18s ease;
}
.corner.tl{top:7px;left:7px;border-right:0;border-bottom:0}
.corner.tr{top:7px;right:7px;border-left:0;border-bottom:0}
.corner.bl{bottom:7px;left:7px;border-right:0;border-top:0}
.corner.br{bottom:7px;right:7px;border-left:0;border-top:0}
.work:hover .corner{border-color:var(--tungsten)}

.ratio-tag{
  position:absolute;right:8px;bottom:8px;
  font-family:"Courier Prime",monospace;font-size:.66rem;letter-spacing:.05em;
  color:var(--chalk);background:rgba(12,18,16,.72);padding:.1rem .35rem;
}

.meta{min-width:0}
.work h3{
  font-family:"Barlow Condensed",var(--cjk);
  font-weight:700;font-size:1.5rem;line-height:1.1;letter-spacing:.02em;
  margin:1rem 0 .1rem;
}
.work .han{font-family:var(--cjk);font-size:.86rem;color:var(--dim);margin:0}
.work .log{
  font-family:"Courier Prime",monospace;font-size:.82rem;line-height:1.55;
  margin:.75rem 0 0;max-width:46ch;
}
.work .note{margin:.75rem 0 0;font-size:.86rem;color:var(--dim);max-width:var(--measure)}

dl.spec{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.16rem .9rem;margin:.9rem 0 0;
  font-family:"Courier Prime",monospace;font-size:.74rem;line-height:1.5;
}
dl.spec dt{color:var(--dim)}
dl.spec dd{margin:0}
dl.spec dd ul{margin:0;padding:0;list-style:none}

.works.tail{margin-top:2.6rem}
.rule-label{
  display:flex;align-items:center;gap:1rem;
  margin:4.5rem 0 2.4rem;color:var(--dim);
  font-family:"Barlow Condensed",var(--cjk);font-size:1.2rem;letter-spacing:.14em;
}
.rule-label::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---------- about ----------------------------------------- */

.about{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vw,3rem);align-items:start}
@media (min-width:840px){.about{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}}
.about .plate{aspect-ratio:4/5}
.about p{max-width:var(--measure);font-size:1.03rem}
.about em{font-style:italic;color:var(--tungsten);font-weight:500}

/* ---------- footer ---------------------------------------- */

footer{
  border-top:1px solid var(--rule);
  padding:1.5rem clamp(1.1rem,4vw,3rem) 3rem;
  font-family:"Courier Prime",monospace;font-size:.7rem;color:var(--dim);
  display:flex;gap:1.4rem;flex-wrap:wrap;
}

/* ---------- clapperboard cursor --------------------------- */

#slate{
  position:fixed;top:0;left:0;z-index:9000;pointer-events:none;
  width:38px;height:34px;margin:-6px 0 0 -5px;
  will-change:transform;
}
#slate .arm{transform-box:fill-box;transform-origin:2% 90%;
  transform:rotate(-24deg);transition:transform .11s cubic-bezier(.3,1.5,.5,1)}
#slate.snap .arm{transform:rotate(0deg)}
#slate .body{fill:rgba(12,18,16,.55);stroke:var(--chalk);stroke-width:1.4}
#slate .arm rect{fill:var(--chalk)}
#slate .arm rect.dark{fill:var(--stage)}
#slate.hot .body{stroke:var(--tungsten)}
#slate.hot .arm rect{fill:var(--tungsten)}
@media (pointer:coarse){#slate{display:none}}
@media (prefers-reduced-motion:reduce){
  #slate .arm{transition:none}
  *{scroll-behavior:auto!important}
}