/* Sophia Collender — a white box.
   Thin black and grey sans, images carry everything, metallic copper only in hairlines. */

:root{
  --ink:#111;
  --grey:#666666;
  --light:#767676;
  --rule:#E9E9E9;
  --copper:#A4592A;
  --metal:linear-gradient(100deg,#8C4A22 0%,#C98A5A 20%,#F3D2B0 36%,#BE6F3F 54%,#8C4A22 74%,#DDA678 100%);
  --pad:clamp(20px,4vw,58px);
  --sans:Arial,sans-serif;
  --serif:"Times New Roman",Times,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#fff;-webkit-text-size-adjust:100%}
body{font:300 13px/2 var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--copper);outline-offset:4px}
::selection{background:#E2AC82;color:#111}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px 10px;z-index:9}

/* ---------- header: name left, nav right ---------- */
.hd{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:clamp(22px,3.4vw,44px) var(--pad) 0;flex-wrap:wrap}
.hd .name{font:400 21px/1.2 var(--serif);letter-spacing:0}
.hd nav{display:flex;gap:clamp(16px,2.4vw,32px);font:400 16px/1.2 var(--serif);flex-wrap:wrap}
.hd nav a{color:var(--grey);padding-bottom:3px;background:linear-gradient(90deg,transparent,transparent) 0 100%/100% 1px no-repeat;transition:color .25s}
.hd nav a:hover{color:var(--ink)}
.hd nav a[aria-current="page"]{color:var(--ink);background-image:var(--metal)}

main{flex:1;padding:clamp(28px,5vw,72px) var(--pad) 0}

/* ---------- home: square tiles ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,5.5vw,96px);max-width:1000px;margin:clamp(12px,3vw,40px) auto 0}
.tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#F6F6F5}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1),opacity .4s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.025)}
.tile .t{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;font:300 14px/1.3 var(--sans);color:var(--ink);background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.93) 62%);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.tile .t small{display:block;margin-top:3px;font-size:12px;color:var(--grey)}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--metal);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.tile:hover .t,.tile:focus-visible .t{opacity:1;transform:none}
.tile:hover::after,.tile:focus-visible::after{transform:scaleX(1)}
@media(hover:none){.tile .t{opacity:1;transform:none}}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.grid{gap:28px}.tile .t{padding:30px 10px 10px;font-size:12px}.tile .t small{display:none}}

/* ---------- home: uneven field of uncropped images ---------- */
.field{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,36px);row-gap:clamp(56px,8vw,128px);max-width:1240px;margin:clamp(8px,2vw,24px) auto 0;align-items:start}
.piece{grid-column:var(--c)/span var(--s);margin-top:calc(var(--y) * clamp(6px,1vw,14px));display:block;position:relative}
.piece img{width:100%;height:auto;transition:opacity .35s}
.piece .t{display:block;margin-top:10px;font-size:12px;line-height:1.5;color:var(--grey);opacity:0;transition:opacity .3s}
.piece .t small{margin-left:.8em;font-size:12px;color:var(--light)}
.piece::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--metal);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.piece:hover .t,.piece:focus-visible .t{opacity:1}
.piece:hover::after,.piece:focus-visible::after{transform:scaleX(1)}
@media(hover:none){.piece .t{opacity:1}}
.elsewhere{max-width:1240px;margin:0 auto clamp(28px,4vw,56px);font-size:13px;color:var(--grey)}
.elsewhere a{color:var(--ink);border-bottom:1px solid #D9B596;transition:color .2s,border-color .2s}
.elsewhere a:hover{color:var(--copper);border-bottom-color:var(--copper)}
@media(max-width:760px){
  .field{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:48px}
  .piece{grid-column:1/span 6;margin-top:0}
  .piece:nth-child(3n+2){grid-column:2/span 5}
  .piece:nth-child(3n){grid-column:1/span 4}
}

/* ---------- project: one image at a time ---------- */
.show{position:relative}
.stage{position:relative;height:min(72vh,820px);min-height:300px;display:flex;align-items:center;justify-content:center}
.slide{display:none;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0 auto}
.slide.on{display:block}
img.slide.on{cursor:pointer}
video.slide{background:#000}
.arr{position:absolute;top:0;bottom:0;width:clamp(36px,5vw,72px);background:none;border:0;color:var(--grey);font:200 34px/1 var(--sans);cursor:pointer;z-index:3;transition:color .2s}
.arr:hover{color:var(--copper)}
.arr.l{left:calc(-1 * var(--pad) + 4px);text-align:left;padding-left:12px}
.arr.r{right:calc(-1 * var(--pad) + 4px);text-align:right;padding-right:12px}
.count{display:flex;justify-content:space-between;gap:20px;margin-top:14px;font-size:12px;color:var(--grey);letter-spacing:.04em}
.count .cap{flex:1}
.count .n{flex:none;font-variant-numeric:tabular-nums}
.one .arr,.one .count .n{display:none}

.info{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--pad);margin-top:clamp(36px,6vw,84px);padding-top:26px;border-top:1px solid var(--rule)}
.info h1{font:200 clamp(26px,3vw,38px)/1.1 var(--sans);letter-spacing:-.025em}
.info .m{margin-top:10px;color:var(--grey);font-size:12px;line-height:2}
.info p{max-width:38em;color:#333}
.info p+p{margin-top:1em}
.info .ln{margin-top:1.2em;font-size:13px}
.info .ln a{border-bottom:1px solid var(--copper);margin-right:1.4em;padding-bottom:1px}
.pn{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(36px,6vw,84px);padding:22px 0;border-top:1px solid var(--rule);font-size:14px}
.pn a small{display:block;font-size:11px;color:var(--light);letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.pn a:hover span{color:var(--copper)}
.pn .nx{text-align:right}
@media(max-width:800px){.info{grid-template-columns:1fr;gap:18px}.arr{display:none}}

/* ---------- text pages ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad);align-items:start}
.two img{width:100%}
.txt{max-width:36em}
.txt p+p{margin-top:1em}
.txt h1{font:200 clamp(26px,3vw,38px)/1.1 var(--sans);letter-spacing:-.025em;margin-bottom:1.1em}
.txt a,.rows a,.cv a{border-bottom:1px solid #D9B596}
.txt a:hover,.rows a:hover,.cv a:hover{border-bottom-color:var(--copper);color:var(--copper)}
@media(max-width:800px){.two{grid-template-columns:1fr}}
.about{grid-template-columns:minmax(180px,260px) minmax(0,36em);gap:clamp(36px,7vw,112px);justify-content:center;max-width:1100px;margin:0 auto}
.about .portrait{aspect-ratio:4/5;object-fit:cover;margin-top:.35em}
@media(max-width:800px){.about{grid-template-columns:1fr;justify-content:start}.about .portrait{width:min(100%,230px)}}
.sub{margin:2.4em 0 .6em;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.rows{border-top:1px solid var(--rule)}
.rows .r,.cv .r{display:grid;grid-template-columns:7em minmax(0,1fr);gap:clamp(14px,3vw,40px);padding:16px 0;border-bottom:1px solid var(--rule)}
.rows .y,.cv .y{color:var(--grey);font-size:13px;font-variant-numeric:tabular-nums}
.rows .t{font-size:17px;line-height:1.35;letter-spacing:-.005em}
.rows .d{margin-top:4px;color:#555;max-width:44em}
.rows .l{margin-top:8px;font-size:13px}.rows .l a{margin-right:1.4em}
.cv{max-width:60em}
.cv h2{font:300 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:3em 0 .6em}
.cv h2:first-of-type{margin-top:0}
.cv .r{padding:9px 0;border-bottom:1px solid var(--rule);grid-template-columns:5em minmax(0,1fr)}
.big{font:100 clamp(30px,5vw,68px)/1.1 var(--sans);letter-spacing:-.035em}
.big a{border-bottom:1px solid #D9B596}
.links2{margin-top:2.4em;display:flex;flex-direction:column;gap:6px}

/* ---------- footer ---------- */
.ft{padding:clamp(60px,9vw,120px) var(--pad) 30px;font-size:12px;color:var(--light);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ft::before{content:"";flex-basis:100%;height:1px;background:var(--metal);margin-bottom:22px;opacity:.7}

@media(max-width:800px){.stage{height:auto;min-height:0}.slide{max-height:68vh}}

/* ---------- copper trace: the cursor draws on the ground, until refresh ---------- */
body{position:relative}
#trace{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
.hd,main,.ft{position:relative;z-index:1}

/* ---------- accessibility ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.piece:hover img,.tile:hover img{transform:none}}