:root{
    --bg:#000000;
    --ink:#f1efe9;
    --ink-dim:#8c8a83;
    --ink-faint:#a9a192;
    --line:rgba(241,239,233,0.5);
    --line-strong:rgba(241,239,233,0.68);
    --font:"Titillium Web", -apple-system, "Segoe UI", sans-serif;
    --content-w:1360px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:rgba(241,239,233,0.25);color:var(--ink);}
  a{color:inherit;}
  button{font-family:inherit;}
  img{max-width:100%;display:block;}

  .content{max-width:var(--content-w);margin:0 auto;padding:0 56px;}
  .eyebrow{
    font-family:var(--font);font-weight:400;font-size:11px;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--ink-faint);
  }

  .mockup-banner{
    background:#111;border-bottom:1px solid var(--line);padding:9px 28px;
    font-family:var(--font);font-weight:400;font-size:12px;color:var(--ink-dim);
    display:flex;justify-content:center;text-align:center;gap:14px;
  }
  .mockup-banner strong{color:var(--ink);font-weight:600;}
  .mockup-banner button{
    background:none;border:1px solid var(--line);color:var(--ink-dim);
    padding:3px 10px;border-radius:3px;cursor:pointer;font-size:11px;font-family:var(--font);
  }
  .mockup-banner button:hover{border-color:var(--line-strong);color:var(--ink);}

  /* ---- persistent template: header / rule / content / footer ---- */
  header.site{
    padding:17px 0 16px;overflow:hidden;
    position:sticky;top:0;z-index:20;background:var(--bg);
  }
  .hwrap{
    max-width:var(--content-w);margin:0 auto;padding:0 56px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  }
  /* shifted left so the long leg of the "H" (61.4% across the logo's own width, ~114px at this
     size) lines up with the page's left content edge, using the otherwise-empty gutter rather
     than pushing page content over */
  .logo{
    background:none;border:none;padding:0;cursor:pointer;display:block;position:relative;
    margin-left:-114px;
  }
  .logo-img{height:82px;width:auto;opacity:0.95;display:block;}
  /* line picks up exactly where the user's header.png Photoshop sample put it: measured at
     76.8% down / 62.6% across the logo's own box (right after the H-stroke hook), then runs
     off the right edge. Positioned in % of the logo box so it scales with the logo. */
  .logo-rule{
    position:absolute;left:62.6%;top:76.8%;height:1px;width:1250px;
    background:var(--line);pointer-events:none;
  }
  .navlinks{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
  .navlinks button, .navlinks a{
    font-family:var(--font);font-weight:300;font-size:15px;letter-spacing:0.01em;
    background:none;border:none;color:var(--ink-dim);cursor:pointer;padding:2px 0;
    text-decoration:none;transition:color .15s ease;
  }
  .navlinks button.current, .navlinks a.current{color:var(--ink);font-weight:400;}
  .navlinks button:hover, .navlinks a:hover{color:var(--ink);}

  /* sticky footer: shell fills the viewport, footer's auto top-margin pushes it to the
     bottom on short pages, and it flows normally after content on tall ones */
  .shell{display:flex;flex-direction:column;min-height:100vh;}
  main{flex:1 0 auto;}
  .page{display:none;padding:8px 0 44px;}
  .page.active{display:block;}

  footer{flex:none;border-top:1px solid var(--line);padding:20px 0 26px;}
  .footer-inner{display:flex;justify-content:center;}
  .copyright{
    font-family:var(--font);font-weight:300;font-style:italic;font-size:12.5px;
    letter-spacing:0.02em;color:var(--ink-faint);text-align:center;margin:0;white-space:nowrap;
  }
  @media (max-width:640px){ .copyright{white-space:normal;} }

  /* ---- front page ---- */
  /* the hero is meant to be seen whole, no scrolling — height is capped to what's left of the
     viewport after the sticky header, page padding, and footer, and the image scales down
     (never up, never cropped) to fit inside that on any screen, laptop included */
  .hero-frame{
    display:flex;justify-content:center;width:100%;background:none;border:none;padding:0;cursor:pointer;
    max-width:1180px;margin:0 auto;
  }
  .hero-photo{display:block;max-width:100%;max-height:calc(100vh - 290px);width:auto;height:auto;}

  /* ---- about ---- */
  #page-about{padding-top:156px;}
  .about-grid{display:grid;grid-template-columns:216px 1fr;gap:56px;align-items:start;}
  .about-photo{aspect-ratio:3/2;overflow:hidden;}
  .about-photo img{width:100%;height:100%;object-fit:cover;object-position:center;}
  .about-text{margin-top:-8px;}
  .about-text h1{font-size:26px;font-weight:400;margin:0 0 22px;letter-spacing:0.01em;}
  .about-text p{
    font-weight:300;font-size:16px;line-height:1.85;color:var(--ink-dim);max-width:62ch;margin:0 0 18px;
  }
  .about-text p.lead{color:var(--ink);font-weight:400;font-size:17.5px;line-height:1.7;}

  /* ---- index: toggle + lists ---- */
  .index-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:34px;}
  .view-toggle{display:flex;align-items:center;gap:12px;}
  .toggle-btn{
    background:none;border:none;cursor:pointer;font-family:var(--font);
    font-size:13px;font-weight:300;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--ink-faint);padding:0 0 5px;border-bottom:1px solid transparent;
  }
  .toggle-btn.active{color:var(--ink);font-weight:400;border-bottom-color:var(--ink);}
  .toggle-btn:hover{color:var(--ink);}
  .view-toggle .sep{color:var(--ink-faint);font-weight:200;}

  .view-panel{display:none;}
  .view-panel.active{display:block;}
  .free-note{
    font-family:var(--font);font-weight:300;font-size:14px;color:var(--ink-dim);
    margin:0 0 24px;max-width:56ch;
  }

  .folderlist{border-top:1px solid var(--line);}
  .folderrow{
    display:grid;grid-template-columns:140px 1fr auto;gap:24px;align-items:baseline;
    padding:18px 0;border-bottom:1px solid var(--line);
    background:none;border-left:none;border-right:none;border-top:none;
    width:100%;text-align:left;cursor:pointer;color:var(--ink);
  }
  .folderrow:hover .fname{color:var(--ink);text-decoration:underline;text-underline-offset:4px;}
  .fdate{
    font-family:var(--font);font-weight:300;font-size:12.5px;letter-spacing:0.08em;
    color:var(--ink-faint);text-transform:uppercase;white-space:nowrap;
  }
  .fname{font-size:18px;font-weight:300;color:var(--ink-dim);transition:color .15s ease;}
  .fkw{
    font-family:var(--font);font-weight:300;font-size:11.5px;letter-spacing:0.06em;
    color:var(--ink-faint);margin-top:6px;text-transform:uppercase;
  }
  .fcount{
    font-family:var(--font);font-weight:300;font-size:12.5px;color:var(--ink-faint);white-space:nowrap;
  }

  .category-list{border-top:1px solid var(--line);max-width:520px;}
  .category-row{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:16px 0;border-bottom:1px solid var(--line);
    background:none;border-left:none;border-right:none;border-top:none;width:100%;
    cursor:pointer;color:var(--ink-dim);font-size:17px;font-weight:300;text-align:left;
  }
  .category-row:hover{color:var(--ink);}
  .category-row .n{font-size:12px;color:var(--ink-faint);}

  .filtered-panel{margin-top:40px;display:none;}
  .filtered-panel.show{display:block;}
  .filtered-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
  .filtered-head h2{font-size:20px;font-weight:400;margin:0;}
  .back-to-cats{
    background:none;border:none;color:var(--ink-faint);cursor:pointer;font-family:var(--font);
    font-size:12.5px;letter-spacing:0.05em;text-transform:uppercase;padding:0;margin-bottom:18px;
  }
  .back-to-cats:hover{color:var(--ink);}

  /* ---- gallery (best-of) ---- */
  .page-head{margin-bottom:36px;}
  .page-head h1{font-size:26px;font-weight:400;margin:8px 0 0;}
  .bestgrid{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px;}
  .btile{
    aspect-ratio:3/2;background:#0a0a0a;border:none;padding:0;cursor:pointer;position:relative;overflow:hidden;
  }
  .btile img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .4s ease;}
  .btile:hover img{transform:scale(1.035);}
  .btile .lbl{
    position:absolute;bottom:0;left:0;right:0;padding:10px 12px;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
    font-family:var(--font);font-weight:300;font-size:11px;letter-spacing:0.04em;color:var(--ink-dim);
    opacity:0;transition:opacity .15s ease;
  }
  .btile:hover .lbl{opacity:1;}

  /* ---- folder detail ---- */
  .backlink{
    display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-faint);
    font-family:var(--font);font-weight:300;font-size:13px;cursor:pointer;padding:0;margin-bottom:26px;
  }
  .backlink:hover{color:var(--ink);}
  .gallery-head{margin-bottom:30px;}
  .gallery-head h2{font-size:24px;font-weight:400;margin:8px 0 12px;}
  .gallery-head .kwlist{display:flex;gap:16px;flex-wrap:wrap;}
  .gallery-head .kwlist span{
    font-family:var(--font);font-weight:300;font-size:11.5px;color:var(--ink-faint);
    text-transform:uppercase;letter-spacing:0.06em;
  }
  .pgrid{display:grid;grid-template-columns:repeat(4, 1fr);gap:3px;}
  .ptile{aspect-ratio:3/2;background:#0a0a0a;border:none;padding:0;cursor:pointer;position:relative;overflow:hidden;}
  .ptile img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .4s ease;}
  .ptile:hover img{transform:scale(1.035);}
  .ptile .lbl{
    position:absolute;bottom:0;left:0;right:0;padding:8px 10px;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
    font-family:var(--font);font-weight:300;font-size:10.5px;color:var(--ink-dim);
    opacity:0;transition:opacity .15s ease;
  }
  .ptile:hover .lbl{opacity:1;}

  /* ---- lightbox ---- */
  .lightbox{
    position:fixed;inset:0;background:rgba(0,0,0,0.96);z-index:50;
    display:none;align-items:center;justify-content:center;padding:40px;
  }
  .lightbox.open{display:flex;}
  .lightbox-inner{max-width:1100px;width:100%;}
  .lightbox-art{
    width:100%;max-height:76vh;border:2px solid var(--line);background:#050505;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .lightbox-art img{max-width:100%;max-height:76vh;display:block;object-fit:contain;}
  .lightbox-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:18px;}
  .lightbox-meta .info .fdate{font-size:11.5px;}
  .lightbox-meta .info .kw{font-family:var(--font);font-weight:300;font-size:12px;color:var(--ink-dim);margin-top:5px;}
  .lightbox-close{
    position:absolute;top:24px;right:28px;background:none;border:none;color:var(--ink-dim);
    font-size:30px;cursor:pointer;line-height:1;font-weight:200;
  }
  .lightbox-close:hover{color:var(--ink);}

  .btn{
    font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:0.03em;
    padding:12px 22px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
    transition:all .15s ease;cursor:pointer;border:1px solid var(--line-strong);color:var(--ink);background:none;
  }
  .btn:hover{background:var(--ink);color:#000;border-color:var(--ink);}
  .display-only{
    font-family:var(--font);font-weight:300;font-style:italic;font-size:12.5px;
    color:var(--ink-faint);letter-spacing:0.02em;
  }

  /* ---- contact ---- */
  .page-narrow{max-width:640px;}
  .page-narrow h1{font-size:24px;font-weight:400;margin:8px 0 20px;}
  .page-narrow > p{font-size:15px;line-height:1.8;color:var(--ink-dim);margin:0 0 26px;font-weight:300;}
  .field{margin-bottom:18px;}
  .field label{
    display:block;font-family:var(--font);font-weight:300;font-size:11px;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;
  }
  .field input, .field textarea{
    width:100%;background:#0a0a0a;border:1px solid var(--line);color:var(--ink);
    padding:12px 14px;font-family:var(--font);font-weight:300;font-size:14px;
  }
  .field input:focus, .field textarea:focus{outline:none;border-color:var(--line-strong);}
  .field textarea{resize:vertical;min-height:110px;}
  .captcha-mock{
    border:1px dashed var(--line);padding:13px 15px;display:flex;align-items:center;gap:10px;
    font-family:var(--font);font-weight:300;font-size:11.5px;color:var(--ink-faint);margin-bottom:22px;
  }
  .captcha-mock .box{width:16px;height:16px;border:1px solid var(--ink-faint);flex:none;}

  /* ---- admin (dev-only in this mockup) ---- */
  .admin-shell{border:1px solid var(--line);}
  .admin-bar{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-bottom:1px solid var(--line);}
  .admin-bar .title{font-size:13px;font-weight:400;color:var(--ink-dim);}
  .admin-bar .who{font-size:11.5px;color:var(--ink-faint);}
  .admin-body{padding:26px;}
  .admin-toprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
  .folder-list-admin{display:flex;flex-direction:column;}
  .folder-row-admin{
    display:grid;grid-template-columns:120px 1fr auto auto;gap:16px;align-items:center;
    padding:13px 0;border-bottom:1px solid var(--line);
  }
  .folder-row-admin .fdate{color:var(--ink-faint);}
  .folder-row-admin .fname{font-size:14px;color:var(--ink);}
  .folder-row-admin .fkw{font-size:10.5px;color:var(--ink-faint);}
  .folder-row-admin .fcount{font-size:11px;color:var(--ink-dim);}
  .new-folder-modal{
    border:1px solid var(--line);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;
  }
  .new-folder-modal .full{grid-column:1/-1;}
  .modal-title{grid-column:1/-1;font-size:16px;font-weight:400;margin:0 0 4px;}
  .modal-sub{grid-column:1/-1;font-size:12px;color:var(--ink-dim);margin:0 0 4px;font-weight:300;}
  .kw-select{display:flex;flex-wrap:wrap;gap:8px;}
  .kw-select span{
    font-size:10.5px;letter-spacing:0.04em;text-transform:uppercase;font-weight:300;
    border:1px solid var(--line);padding:6px 11px;color:var(--ink-dim);cursor:pointer;
  }
  .kw-select span.sel{border-color:var(--ink);color:var(--ink);}
  .dropzone{
    grid-column:1/-1;border:1.5px dashed var(--line);padding:32px;text-align:center;
    font-size:12px;color:var(--ink-faint);font-weight:300;
  }
  .dropzone b{color:var(--ink-dim);font-weight:400;}
  .upload-preview{
    grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin-top:4px;
  }
  .upload-thumb{border:1px solid var(--line);}
  .upload-thumb .upload-img-wrap{aspect-ratio:3/2;overflow:hidden;}
  .upload-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
  .upload-toggles{display:flex;flex-direction:column;gap:1px;background:var(--line);}
  .dl-toggle{
    font-family:var(--font);font-weight:300;font-size:9.5px;letter-spacing:0.05em;text-transform:uppercase;
    text-align:center;padding:6px 4px;background:#0a0a0a;border:none;
    color:var(--ink-faint);cursor:pointer;
  }
  .dl-toggle.on{color:var(--ink);}
  /* the one deliberate exception to the site's monochrome rule — a destructive action
     should read as different at a glance, not just by its label */
  .dl-toggle-danger{color:#a56a5c;}
  .dl-toggle-danger:hover{color:#d99483;background:rgba(165,106,92,0.14);}

  /* per-photo category editor — a native <details> disclosure, no JS needed, and click-to-open
     works reliably on touch screens where double-click does not */
  .kw-editor{border-top:1px solid var(--line);}
  .kw-editor summary{
    font-family:var(--font);font-weight:300;font-size:9.5px;letter-spacing:0.04em;text-transform:uppercase;
    padding:8px 6px;color:var(--ink-faint);cursor:pointer;list-style:none;
  }
  .kw-editor summary::-webkit-details-marker{display:none;}
  .kw-editor summary:hover{color:var(--ink-dim);}
  .kw-editor[open] summary{color:var(--ink-dim);border-bottom:1px solid var(--line);}
  .kw-editor .kw-select{padding:10px 6px;gap:6px;}
  .kw-editor .kw-pill{font-size:9px;padding:4px 8px;}
  .kw-editor .btn{font-size:10.5px;padding:8px 14px;margin:0 6px 10px;}

  @media (max-width:820px){
    .about-grid{grid-template-columns:1fr;}
    /* 3 columns, not 2 — a curated count like 9 divides evenly (3 clean rows) instead of
       leaving one photo orphaned on its own row, and 3-across is a normal phone thumbnail
       grid size (matches how most photo apps show grids on a phone) */
    .bestgrid{grid-template-columns:repeat(3,1fr);gap:3px;}
    .pgrid{grid-template-columns:repeat(3,1fr);}
    .folderrow{grid-template-columns:1fr;gap:6px;}
    .fcount{display:none;}
    .new-folder-modal{grid-template-columns:1fr;}
    .content{padding:0 24px;}
    .hwrap{padding:0 24px;}
    .navlinks{gap:18px;}
    .logo{margin-left:0;}
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

/* real functional keyword checkboxes styled as the mockup's pill toggles, no JS needed */
.kw-pill-wrap{display:inline-flex;cursor:pointer;position:relative;}
.kw-checkbox{position:absolute;opacity:0;width:1px;height:1px;}
.kw-pill{
  font-family:var(--font);font-size:10.5px;letter-spacing:0.04em;text-transform:uppercase;font-weight:300;
  border:1px solid var(--line);padding:6px 11px;color:var(--ink-dim);transition:all .15s ease;
}
.kw-checkbox:checked + .kw-pill{border-color:var(--ink);color:var(--ink);}
.kw-checkbox:focus-visible + .kw-pill{outline:2px solid var(--ink);outline-offset:2px;}