/* Greg Hickox, Upwork portfolio.
   Register taken from getlayers.ai: near-black ground, light-weight display type,
   pill badges on hairline borders, generous radii, and a softly graded rounded
   panel carrying the opening. Principles only, never their values (rule 295).
   Deliberately monochrome chrome, so the eight thumbnails are the only colour on
   the page. That is what keeps a portfolio reading as the work rather than as the
   frame, and it is also what stops this looking like the reference. */

:root{
  --ground:#08070A;
  --ground-2:#0E0D12;
  --panel-a:#141319;
  --panel-b:#0B0A0E;
  --paper:#F4F3F6;
  --paper-70:#A9A7B2;
  --paper-45:#77747F;
  --hair:rgba(255,255,255,.10);
  --hair-2:rgba(255,255,255,.18);

  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --wrap:min(94%,1500px);
  --sec-y:clamp(4rem,8vw,7.5rem);
  --nav-h:5rem;
  --r:22px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--paper);
  font-family:var(--sans);
  font-size:clamp(1rem,.4vw + .93rem,1.06rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:400;background:var(--paper);color:var(--ground);padding:.6rem 1rem}

.wrap{width:var(--wrap);margin-inline:auto}

/* Display is light and large, the way the reference sets it. Nothing sits in the
   20 to 40px range (rule 311). */
h1{
  font-family:var(--sans);font-weight:200;
  font-size:clamp(2.6rem,5.6vw,5rem);
  line-height:1.04;letter-spacing:-.035em;
  margin:1.4rem 0 0;max-width:19ch;text-wrap:balance;
}
h2{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1.9rem,2.9vw,2.7rem);
  line-height:1.08;letter-spacing:-.03em;margin:.9rem 0 .65rem;
}
.close h2{font-weight:200;font-size:clamp(2.2rem,4vw,3.6rem);max-width:21ch;text-wrap:balance}
.lede{max-width:60ch;color:var(--paper-70);margin:1.4rem 0 0;font-weight:300}

/* Pill badge, the reference's most repeated device. */
.pill{
  display:inline-flex;align-items:center;
  padding:.42rem .85rem;border-radius:999px;
  border:1px solid var(--hair);background:rgba(255,255,255,.03);
  font-size:.75rem;font-weight:500;color:var(--paper-70);margin:0;
}

.name{font-weight:700;font-size:1.1rem;letter-spacing:-.025em;margin:0;color:var(--paper)}
.foot-name{font-size:1.2rem;margin-bottom:.35rem}

.nav{
  height:var(--nav-h);position:sticky;top:0;z-index:60;
  background:rgba(8,7,10,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair);
}
.nav-inner{height:100%;display:flex;align-items:center;gap:1rem}
.nav-pill{margin-left:.35rem}
.nav-upwork{
  margin:0 0 0 auto;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--paper-45);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:0 1.7rem;border-radius:999px;
  background:var(--paper);color:var(--ground);
  font-size:.9rem;font-weight:600;letter-spacing:-.005em;
  transition:transform .22s ease,background .22s ease;
}
.btn:hover{background:#fff;transform:translateY(-1px)}
.btn-quiet{background:rgba(255,255,255,.04);color:var(--paper);border:1px solid var(--hair);font-weight:500}
.btn-quiet:hover{background:rgba(255,255,255,.09);border-color:var(--hair-2);transform:translateY(-1px)}

/* The opening sits inside a rounded, softly graded panel, as the reference does. */
.intro{padding-block:clamp(1.25rem,2.5vw,2rem) clamp(3rem,6vw,5rem)}
.panel{
  border-radius:var(--r);border:1px solid var(--hair);
  background:
    radial-gradient(125% 145% at 50% -25%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  padding:clamp(2.5rem,6vw,5.5rem) clamp(1.5rem,4vw,4rem) clamp(2.5rem,5vw,4.5rem);
}
.intro-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}

.work{padding-bottom:var(--sec-y)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,3.5vw,3.5rem) clamp(1.25rem,2.4vw,2.25rem)}

.card-media{
  display:block;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--hair);background:var(--ground-2);
  transition:border-color .3s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.card-media img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.card-media:hover{border-color:var(--hair-2);transform:translateY(-3px)}
.card-media:hover img{transform:scale(1.03)}

.card-body{padding:1.15rem .15rem 0}
.meta{display:flex;align-items:center;gap:.7rem}
.num{font-family:var(--mono);font-size:.6875rem;color:var(--paper-45);font-feature-settings:'tnum' 1}
.tag{display:inline-flex;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--hair);font-size:.7rem;color:var(--paper-70)}
.card-body p{color:var(--paper-70);margin:0 0 1.3rem;max-width:52ch;font-weight:300}
.card-body .btn-quiet{min-height:44px;padding:0 1.2rem;font-size:.82rem}

.close{padding-block:var(--sec-y);border-top:1px solid var(--hair)}
.upwork-note{max-width:56ch;color:var(--paper-70);margin:1.8rem 0 0;font-weight:300}

.foot{border-top:1px solid var(--hair);padding-block:clamp(3rem,5vw,4.5rem)}
.foot-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,6rem)}
.foot-note{color:var(--paper-45);font-size:.9rem;margin:.6rem 0 0;max-width:56ch;font-weight:300}

/* Hidden state only under .js, so a script failure leaves the page visible (rule 317). */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .card-media,.card-media img{transition:none}
}

/* Layout responds to width; interaction mode is its own query (rule 114). */
@media (max-width:900px){
  .grid{grid-template-columns:minmax(0,1fr);gap:clamp(2.25rem,6vw,3rem)}
  .foot-inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .nav-pill,.nav-upwork{display:none}
  .panel{padding:2.25rem 1.25rem 2.5rem}
}
@media (max-width:480px){
  .intro-actions .btn{width:100%}
}
@media (pointer:coarse){
  .card-media:hover{transform:none}
  .card-media:hover img{transform:none}
}

/* The reference centres its opening inside the panel, which also removes the dead
   right-hand half a left-aligned block leaves behind at this width. */
.panel{text-align:center;display:flex;flex-direction:column;align-items:center}
.panel h1{max-width:16ch;margin-inline:auto}
.panel .lede{max-width:52ch;margin-inline:auto}
.panel .intro-actions{justify-content:center}
@media (max-width:640px){ .panel{text-align:left;align-items:flex-start} .panel .intro-actions{justify-content:flex-start} }

/* The still is the resting state and the poster; the scroll-through plays on
   hover. With no JS, or before hover, the page is complete either way (rule 317). */
.card-media{position:relative}
.card-media .shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.card-media:hover .shot{opacity:1}
@media (prefers-reduced-motion:reduce){ .card-media .shot{display:none} }
@media (pointer:coarse){ .card-media .shot{display:none} }