/* cedric.dog
   Two pages of photographs and nothing else. Palette is river stone: a dark
   ground with a green cast so the photos are the only bright thing, and a sage
   accent. Light theme is the same idea inverted, not a different design. */

:root{
  --ground:#EDEFEA; --surface:#FFFFFF; --ink:#141D18; --muted:#4E5D55;
  --faint:#7E8C84; --rule:#D5DBD3; --accent:#3F6247; --shadow:rgba(20,29,24,.13);
  --serif:"Fraunces",ui-serif,Georgia,serif;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#111614; --surface:#181E1B; --ink:#E9EDE6; --muted:#9AA79E;
    --faint:#66736B; --rule:#252D28; --accent:#AFC896; --shadow:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#111614; --surface:#181E1B; --ink:#E9EDE6; --muted:#9AA79E;
  --faint:#66736B; --rule:#252D28; --accent:#AFC896; --shadow:rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%}

.top{padding:clamp(2.25rem,7vw,5rem) clamp(1rem,5vw,4rem) clamp(1.25rem,3vw,2rem);
     max-width:100rem;margin:0 auto}
.id{display:flex;align-items:center;gap:clamp(.9rem,3vw,2.2rem)}
.idtext{min-width:0}
.avatar{
  width:clamp(68px,13vw,150px); height:auto; aspect-ratio:1; flex:none;
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--rule), 0 8px 24px var(--shadow);
}
.mark{
  font-family:var(--serif); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(2.8rem,13vw,9rem); line-height:.86; letter-spacing:-.035em; margin:0;
}
.mark em{font-style:normal;color:var(--accent)}
.tag{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1rem,2.3vw,1.6rem); color:var(--muted);
  margin:.75rem 0 0; max-width:32ch;
}

nav{
  position:sticky; top:0; z-index:5;
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);
  margin-top:clamp(1.5rem,4vw,3rem);
}
nav ul{list-style:none;display:flex;gap:clamp(1.25rem,4vw,3rem);
       margin:0 auto;padding:.9rem clamp(1rem,5vw,4rem);max-width:100rem}
nav a{
  font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); text-decoration:none; padding-bottom:.25rem;
  border-bottom:1.5px solid transparent; transition:color .18s,border-color .18s;
}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

main{max-width:100rem;margin:0 auto;padding:0 clamp(1rem,5vw,4rem)}

/* Photos ---------------------------------------------------------------- */
.wall{margin-top:clamp(1.5rem,4vw,2.75rem);columns:4 250px;column-gap:clamp(.4rem,1.2vw,1rem)}
.tile{
  border:0;padding:0;font:inherit;color:inherit;width:100%;text-align:left;
  margin:0 0 clamp(.4rem,1.2vw,1rem); break-inside:avoid; display:block;
  overflow:hidden; background:var(--surface); box-shadow:0 1px 2px var(--shadow);
  position:relative; cursor:zoom-in;
}
.tile img{width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){
  .tile:hover img{transform:scale(1.035)}
  .tile::after{
    content:attr(data-when); position:absolute; left:0; right:0; bottom:0;
    padding:1.6rem .7rem .55rem; font-family:var(--mono); font-size:.62rem;
    letter-spacing:.1em; text-transform:uppercase; color:#fff;
    background:linear-gradient(transparent,rgba(0,0,0,.62));
    opacity:0; transition:opacity .25s; pointer-events:none;
  }
  .tile:hover::after{opacity:1}
}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Calendar -------------------------------------------------------------- */
.year{margin:clamp(2rem,5vw,4rem) 0}
.year:first-of-type{margin-top:clamp(1.5rem,4vw,2.75rem)}
.year h3{display:flex;align-items:center;gap:1.25rem;
         margin:0 0 clamp(.9rem,2.5vw,1.6rem);font-weight:400}
.year h3 span{
  font-family:var(--serif); font-optical-sizing:auto; font-weight:300;
  font-size:clamp(2.3rem,8vw,5.5rem); line-height:.85; letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums;
}
.year h3::after{content:"";flex:1;height:1px;background:var(--rule)}

.months{display:grid;gap:clamp(.4rem,1.4vw,1.1rem);grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:900px){.months{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.months{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mo{margin:0}
.mo button{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in}
.mo img,.mo .void{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  background:var(--surface); box-shadow:0 1px 2px var(--shadow);
}
/* an empty month keeps its slot so the months stay aligned between years */
.mo .void{border:1px dashed var(--rule);box-shadow:none;background:transparent}
.mo figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin-top:.45rem;
}
.mo img{transition:filter .3s}
@media(hover:hover){.mo:hover img{filter:brightness(1.08)}}
.mo button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

footer{
  max-width:100rem;margin:clamp(3rem,8vw,6rem) auto 0;
  padding:1.4rem clamp(1rem,5vw,4rem) 3rem; border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.75rem;color:var(--faint);
}

.glightbox-clean .gslide-description{background:transparent}
.gdesc-inner{padding:.75rem 1rem}
.gslide-title{
  font-family:var(--mono)!important; font-size:.7rem!important;
  letter-spacing:.12em; text-transform:uppercase; color:#e9ede6!important; margin:0!important;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}