/*
Theme Name: Photo Archive
Theme URI: http://blog.peterhainer.com/
Author: Peter Hainer (design), built with Claude
Description: A dark, photo-first archive theme. Daily and monthly views, a By Date browser (decade → year → month) and a multi-select By Tag browser. Fluid type from phone to desktop.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: photo-archive
*/

/* Self-hosted fonts (SIL Open Font License, see assets/fonts) */
@font-face{font-family:"National Park";src:url("assets/fonts/NationalPark.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("assets/fonts/Newsreader-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#000; --fg:#fff; --mute:#7e7e7e; --dark:#303030; --line:#737373;
  --font-body:"National Park", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  /* Fluid type: phone (390px) → desktop (1440px) */
  --fs-display: clamp(56px, 8.9vw, 128px);
  --fs-lead:    clamp(15px, 3.33vw, 48px);
  --fs-meta:    clamp(13px, 1.67vw, 24px);
  --fs-label:   clamp(13px, 2.5vw, 36px);
  --fs-nav:     clamp(16px, 3.33vw, 48px);
  --fs-menu:    clamp(18px, 2.5vw, 36px);
  --fs-caption: clamp(12px, 1.1vw, 16px);
  --pad:   clamp(20px, 8.33vw, 120px);   /* text side padding */
  --gut:   8px;                           /* photo gutter */
  --ease: cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--fs-meta);line-height:1.3;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.15em}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* ---------- Header / menu ---------- */
.site-header{position:relative;z-index:20;background:var(--bg)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:60px var(--pad) 40px;border-bottom:1px solid var(--line);margin-inline:0}
.bar-inner{display:contents}
.logo{display:block;width:56px;height:56px;flex:none}
.logo svg{width:100%;height:100%;display:block}
.nav{display:flex;align-items:center;gap:clamp(20px,3.3vw,48px)}
.nav-item{display:flex;align-items:center;gap:12px;font-size:var(--fs-menu);line-height:1.1;color:var(--mute);white-space:nowrap}
.nav-item:hover{color:var(--fg);text-decoration:none}
.nav-item .ico{width:28px;height:28px;flex:none;display:grid;place-items:center}
.nav-item .ico svg{width:28px;height:28px;display:block}
.nav-item .ico svg.on{display:none}
.nav-item[aria-current="page"],.nav-item[aria-expanded="true"]{color:var(--fg)}
.nav-item[aria-current="page"] .ico svg.on,.nav-item[aria-expanded="true"] .ico svg.on{display:block}
.nav-item[aria-current="page"] .ico svg.off,.nav-item[aria-expanded="true"] .ico svg.off{display:none}
.nav-item:hover .off path{fill:#fff}

/* ---------- Panels (By Date / By Tag) ---------- */
.panel{display:none;padding:40px var(--pad) 56px;border-bottom:1px solid var(--line);background:var(--bg)}
.panel.is-open{display:block}
.panel-head{display:none}
.panel-close{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
.panel-close svg{width:24px;height:24px}
/* Date */
.dates{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:24px}
.decade{display:flex;flex-direction:column;gap:clamp(8px,1.4vw,20px);min-width:0}
.decade-label{display:none}
.decade-years{display:flex;flex-direction:column;gap:clamp(8px,1.4vw,20px)}
.year,.month{font-size:var(--fs-menu);line-height:1.1;color:#d9d9d9;text-align:left;white-space:nowrap}
.year:hover,.month:hover{color:var(--fg);text-decoration:none}
.year[aria-disabled="true"],.month[aria-disabled="true"]{color:var(--dark);pointer-events:none}
.dates.has-year .year:not(.is-selected){color:var(--dark)}
.dates.has-year .year.is-selected{color:var(--fg)}
.months{display:none;flex-direction:column;gap:clamp(8px,1.4vw,20px)}
.months.is-open{display:flex}
.months-back{display:none}
.months-all{font-size:var(--fs-menu);line-height:1.1;color:var(--fg);display:flex;align-items:center;gap:10px}
.months-all svg{width:.45em;height:.8em}
/* Tag */
.tags{display:flex;flex-wrap:wrap;gap:clamp(8px,1.2vw,18px) clamp(16px,2vw,30px)}
.tag{font-size:var(--fs-menu);line-height:1.1;color:var(--mute)}
.tag:hover{color:var(--fg)}
.tag[aria-pressed="true"]{color:var(--fg)}
.tag-all[aria-pressed="true"]{color:var(--fg)}
.tag-actions{display:flex;justify-content:flex-end;align-items:center;gap:32px;margin-top:40px}
.tag-clear{font-size:clamp(16px,1.4vw,20px)}
.tag-go{background:var(--fg);color:var(--bg);border-radius:999px;padding:14px 28px;font-size:clamp(16px,1.4vw,20px);line-height:1}
.tag-go:hover{text-decoration:none;opacity:.9}
.tag-go[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* ---------- Page title block ---------- */
.intro{padding:20px var(--pad) 0}
.display{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:var(--fs-display);line-height:1.03;letter-spacing:-.03em;margin:0}
.lead{font-size:var(--fs-lead);line-height:1.1;margin:clamp(12px,3vw,48px) 0 0;max-width:24em}
.post-date{display:block;font-size:var(--fs-meta);margin-top:clamp(6px,.6vw,8px)}
.count{display:block;font-size:var(--fs-meta);color:var(--mute);margin-top:8px}

/* ---------- Feed (daily) ---------- */
.feed{padding:clamp(24px,4vw,72px) 0 0}
.entry{margin:0 0 clamp(20px,3vw,48px)}
.entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:clamp(16px,2vw,32px) var(--gut) clamp(8px,1vw,16px);font-size:var(--fs-label);line-height:1.1}
.entry-head a{color:var(--fg)}
.entry-head time{color:var(--mute);white-space:nowrap;flex:none}
.entry-title{font-size:inherit;font-weight:400;margin:0;min-width:0}

/* Post content: photos near full bleed, everything else tidy */
.content{font-size:var(--fs-meta);line-height:1.2}
.content > *{margin:0}
.content p,.content div,.content span,.content font{font-size:inherit!important;text-align:left!important}
.content p, .content > div{padding:0 var(--gut)}
.content p:empty{display:none}
.content br+br{display:none}
.content img{display:block;width:100%!important;height:auto!important;max-width:none;float:none!important;margin:0 0 var(--gut)!important;border:0}
.content a:has(> img){display:block}
.content p > img:only-child, .content p > a:only-child > img{margin-bottom:0!important}
.content p:has(img){padding:0}
.content img.is-small{width:auto!important;max-width:100%!important;margin-inline:var(--gut)!important}
.content p + p, .content p + div, .content div + p{margin-top:var(--gut)}
.content :is(p,div) + :is(p,div):not(:has(img)){padding-top:4px}
.content a:not(:has(img)){text-decoration:underline;text-underline-offset:.15em;text-decoration-color:var(--mute)}
.content figure{margin:0 0 var(--gut)}
.content figcaption,.content .wp-caption-text{padding:8px var(--gut) 0;color:var(--fg)}
.content iframe,.content video,.content embed,.content object{display:block;width:100%;max-width:100%;aspect-ratio:16/9;height:auto;border:0}
.content .wp-caption{width:auto!important;max-width:100%}
.single .content{padding-top:clamp(24px,4vw,72px)}
.single .content > :is(p,div):not(:has(img)){padding:clamp(10px,1vw,16px) var(--gut) clamp(16px,2vw,32px)}

/* ---------- Monthly grid ---------- */
.month-block{padding-top:clamp(24px,4vw,72px)}
.month-title{font-size:var(--fs-label);font-weight:400;line-height:1.1;margin:0;padding:0 var(--gut) clamp(10px,1vw,16px)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);padding:0 var(--gut)}
.tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#111}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.tile:hover img{transform:scale(1.03)}
.tile-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 8px 8px;font-size:var(--fs-caption);line-height:1.25;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0))}
.tile:hover{text-decoration:none}
.tile-empty{display:grid;place-items:center;font-size:var(--fs-caption);color:var(--mute);padding:12px;text-align:center}

/* ---------- Footer nav ---------- */
.pager{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:clamp(40px,5vw,72px) var(--pad) 0;padding:40px 0 clamp(32px,5vw,90px);border-top:1px solid var(--line);font-size:var(--fs-nav);line-height:1.1}
.pager a{display:flex;align-items:center;gap:clamp(8px,1.1vw,16px);min-width:0}
.pager a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager .next{margin-left:auto;text-align:right}
.pager svg{width:.42em;height:.75em;flex:none}
.end-note{margin:clamp(40px,5vw,72px) var(--pad) 0;padding:40px 0 clamp(32px,5vw,90px);border-top:1px solid var(--line);font-size:var(--fs-label);line-height:1.15}
.empty{padding:40px var(--pad);font-size:var(--fs-label)}

/* ---------- Tablet ---------- */
@media (max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- Phone (≤ 700px): Peter's "alt" layout ---------- */
@media (max-width:700px){
  .bar{padding:8px 20px;border-bottom:0;gap:12px}
  .logo{width:32px;height:32px}
  .nav{gap:4px}
  .nav-item{width:48px;height:44px;justify-content:center;gap:0}
  .nav-item .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .nav-item .ico,.nav-item .ico svg{width:24px;height:24px}
  .intro{padding:28px 20px 0}
  .lead{margin-top:12px}
  .pager,.end-note{border-top:0;margin-inline:20px;padding-top:24px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .tile-cap{display:none}
  .entry-head{padding-top:28px}

  /* Panels become full-screen sheets under the top bar */
  .panel{position:fixed;inset:60px 0 0 0;overflow:auto;padding:0 20px 120px;border-bottom:0;-webkit-overflow-scrolling:touch}
  .panel-head{display:flex;justify-content:space-between;align-items:center;height:64px;font-size:20px;position:sticky;top:0;background:var(--bg);z-index:2}
  .panel-head .back{display:none;align-items:center;gap:10px}
  .panel-head .back svg{width:12px;height:20px}
  .panel.has-year .panel-head .title{display:none}
  .panel.has-year .panel-head .back{display:flex}
  .dates{display:block}
  .decade{display:block;margin:0 0 20px}
  .decade-label{display:block;font-size:13px;color:var(--mute);margin:0 0 6px}
  .decade-years{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
  .year,.month{font-size:18px;height:40px;display:flex;align-items:center}
  .dates.has-year .decade{display:none}
  .months{display:none;grid-template-columns:repeat(3,1fr);gap:0}
  .months.is-open{display:grid}
  .months .month{height:48px}
  .months-all{grid-column:1/-1;font-size:18px;height:48px}
  .tags{gap:8px}
  .tag{font-size:15px;color:#d9d9d9;border:1px solid var(--dark);border-radius:20px;padding:9px 14px}
  .tag[aria-pressed="true"],.tag-all[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
  .tag-actions{position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--bg);gap:20px}
  .tag-go{flex:1;text-align:center;padding:15px 20px;font-size:16px}
  .tag-clear{font-size:16px}
  body.panel-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }