:root{--brown:#4b2a17;--orange:#ee9c3b;--cream:#fff8e8;--ink:#372519}*{box-sizing:border-box}body{margin:0;background-color:#e8d5af;background-image:radial-gradient(#d7bf94 1px,transparent 1px);background-size:18px 18px;color:var(--ink);font:16px/1.5 Verdana,Geneva,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.shell{max-width:1070px;margin:auto}.masthead{background:linear-gradient(#704326,#372012);border-bottom:7px solid #aa5d22;color:#fff}.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 15px}.logo{color:#ffd25a;font:900 clamp(30px,5vw,57px)/1 Georgia,serif;letter-spacing:-2px;text-decoration:none;display:flex;align-items:center;gap:9px;text-shadow:3px 3px #170d07}.logo small{display:block;color:#ffe1a7;font:bold 11px/1.5 Verdana,sans-serif;letter-spacing:2px;margin-top:7px}.sticker{border:2px dashed #ffdb9c;border-radius:8px;padding:10px;text-align:center;transform:rotate(5deg);font-weight:800;color:#ffe0a6}.nav{background:#ef9d3d;border-bottom:4px solid #914920}.nav .shell{display:flex;flex-wrap:wrap}.nav button,.nav a{border:0;background:none;padding:13px 12px;font-weight:800;color:#4a270d;font-size:13px;text-decoration:none;display:inline-block}.nav button:hover,.nav button.active,.nav a:hover,.nav a:focus-visible{background:#4a2916;color:#fff1c9}.columns{display:grid;grid-template-columns:minmax(0,1fr) 247px;gap:20px;padding:24px 14px}.panel{background:var(--cream);border:3px solid #79502c;border-radius:6px;box-shadow:5px 5px #bf9f69;overflow:hidden;margin-bottom:20px}.panel h2{margin:0;padding:11px 16px;font-size:18px;color:#ffefcb;background:linear-gradient(#80502c,#563018);text-shadow:1px 2px #281407}.inner{padding:18px}.inner>h1{font:900 clamp(24px,4vw,35px) Georgia,serif;margin:8px 0}.eyebrow{font-size:12px;letter-spacing:2px;color:#9a591d;text-transform:uppercase;font-weight:bold}.menu button{display:block;width:100%;background:none;border:0;border-bottom:1px solid #ead2a4;text-align:left;padding:10px 4px;color:#753c1b;font-weight:700}.menu button:hover{text-decoration:underline}.meter{text-align:center}.meter strong{display:block;font:900 45px Georgia,serif;color:#8f4a1d}.meter span{display:block}.tiny{color:#765f4a;font-size:12px}.message,.notice{background:#ffedb5;border:1px dashed #b47c37;border-radius:4px;padding:12px;margin:0 0 16px}.message.error{background:#ffe4da;border-color:#a53e27}.text-field{display:block;width:100%;padding:11px;margin:6px 0 15px;border:2px solid #c8a373;border-radius:5px;background:#fff}.check{display:flex;gap:9px;align-items:start;padding:10px 0}.check input{margin-top:6px}.btn{padding:11px 16px;font-weight:bold;color:#361c0d;border:2px solid #733914;border-radius:5px;background:linear-gradient(#ffbb67,#dd7528);box-shadow:0 3px #904a26}.btn.secondary{background:#fff0bf}.btn:hover:not(:disabled){filter:brightness(1.08)}.photo{display:flex;justify-content:center;align-items:center;min-height:320px;background:#dfc499;border:8px solid white;outline:1px solid #cfb083;box-shadow:0 4px 8px #0002}.photo img{display:block;max-width:100%;width:auto;max-height:420px;object-fit:contain}.viewer-title{text-align:center;font:900 23px Georgia,serif;margin:18px 0 4px}.meta{text-align:center;color:#715337;font-size:13px}.voting{text-align:center;margin:18px 0}.vote-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:14px 0}.vote-buttons button{width:44px;height:44px;border-radius:4px;background:#ffda87;border:2px solid #875023;font-weight:800;color:#482711}.vote-buttons button:hover:not(:disabled){background:#70401b;color:white}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:15px 0}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:14px}.tile{border:2px solid #cca16b;border-radius:4px;background:#fff0cc;padding:9px;text-align:left;min-width:0}.tile:hover{border-color:#8d4217}.tile img{width:100%;height:125px;object-fit:cover;background:#dbc09b}.tile strong,.tile small{display:block;overflow-wrap:anywhere}.tile small{color:#735638}.moderator{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}.mod-card{background:#fff0ce;border:2px solid #bd9162;padding:10px}.mod-card img{width:100%;height:200px;object-fit:contain}.mod-card button{margin:4px}.foot{text-align:center;color:#67472d;padding:21px;font-size:12px}.foot button{border:0;background:transparent;text-decoration:underline;color:inherit}.honey{position:absolute;left:-10000px;width:1px;height:1px}.page[hidden],.message[hidden]{display:none!important}/* The default experience remains desktop-first when JavaScript is disabled. */
.mobile-menu-toggle,.mobile-quick-nav{display:none}
.field-hint{margin:-7px 0 15px;font-size:13px;color:#6b5035}
button,a,input{touch-action:manipulation}
:focus-visible{outline:3px solid #1767b5;outline-offset:3px}
img{height:auto}
.photo img{height:auto}
.panel,.columns>main,.columns>aside{min-width:0}
h1,h2,h3,p,.notice,.message{overflow-wrap:break-word}
#upload-status{min-height:1.5em;overflow-wrap:anywhere}
@media(max-width:760px){
  .columns{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 10px}
  .mast-inner{padding:14px 12px;gap:12px}
  .sticker{display:none}
  .logo{font-size:clamp(25px,7.2vw,34px);gap:6px;letter-spacing:-1px;min-width:0}
  .logo small{letter-spacing:1px;font-size:9px;margin-top:5px}
  .js .mobile-menu-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex-shrink:0;min-width:52px;min-height:50px;color:#fff1c9;background:#6c3d20;border:2px solid #d4a667;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.5px}
  .mobile-menu-toggle .menu-symbol{font-size:24px;line-height:1.2}
  .js .nav:not(.is-open){display:none}
  .nav .shell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:7px;gap:4px}
  .nav button{width:100%;min-height:46px;border-radius:4px;padding:10px 7px;font-size:13px;line-height:1.2}
  .js .mobile-quick-nav{display:flex;position:fixed;inset:auto 0 0;z-index:30;gap:4px;background:#4b2a17;border-top:3px solid #ee9c3b;padding:7px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));box-shadow:0 -4px 14px #0003}
  .mobile-quick-nav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:52px;background:none;border:0;color:#ffe5ae;font-weight:800;font-size:12px;border-radius:7px}
  .mobile-quick-nav button span:first-child{font-size:21px;line-height:1.2}
  .mobile-quick-nav button.active,.mobile-quick-nav button:focus-visible{background:#8c502b;color:white}
  .js body{padding-bottom:calc(77px + env(safe-area-inset-bottom))}
  .panel{box-shadow:3px 3px #bf9f69;margin-bottom:14px}
  .panel h2{font-size:16px;padding:10px 13px}
  .inner{padding:12px}
  .inner>h1{font-size:clamp(24px,7vw,31px);line-height:1.17}
  .inner p{line-height:1.6}
  .photo{min-height:220px;border-width:5px}
  .photo img{max-height:min(62vh,420px)}
  .viewer-title{font-size:21px}
  .vote-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:14px 0}
  .vote-buttons button{width:100%;min-width:0;height:auto;min-height:52px;border-radius:7px;font-size:18px}
  .actions{gap:9px}
  .actions .btn{min-width:0;flex:1;min-height:48px;padding:10px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .tile{padding:7px}
  .tile img{height:115px}
  .moderator{grid-template-columns:minmax(0,1fr)}
  .mod-card button,.btn{min-height:46px}
  .text-field{font-size:16px;min-height:48px;max-width:100%;min-width:0}
  input[type="file"].text-field{height:auto;padding:12px 8px}
  .check{line-height:1.5;padding:13px 0}
  .check input{width:21px;height:21px;flex-shrink:0;margin-top:2px}
  #upload-submit,#load-pending{width:100%;min-height:52px}
  .message{position:sticky;top:5px;z-index:3}
  .foot{padding:14px 15px 22px;line-height:2}
}
@media(max-width:350px){
  .logo{font-size:25px}
  .logo small{font-size:8px;letter-spacing:.25px}
  .mast-inner{padding:10px 9px}
  .columns{padding:12px 8px}
  .vote-buttons{gap:5px}
  .tile img{height:100px}
}
@media(max-height:520px) and (orientation:landscape) and (max-width:950px){
  .mast-inner{padding-top:7px;padding-bottom:7px}
  .logo small{margin-top:2px}
  .photo{min-height:180px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* SEO landing pages: keep accessible text links styled like existing nav controls. */
.nav a{text-decoration:none;display:inline-block}.inner a:not(.btn){text-underline-offset:3px}.inner a.btn{display:inline-block;text-decoration:none}.inner ul{padding-left:22px}.inner li{margin-bottom:9px}.foot a{color:inherit;text-decoration:underline}

/* Moderator authentication stays readable on narrow screens. */
#admin-login-form{max-width:620px}
#admin-login .check{max-width:600px}
.admin-hint{display:block;margin:3px 0 0;font-size:13px;line-height:1.5}
.admin-session-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid #dcc4a1}
.admin-session-actions p{flex:1;min-width:200px}
@media(max-width:760px){.admin-session-actions{display:block}.admin-session-actions p{min-width:0}#admin-login-form .btn,.admin-session-actions .btn{width:100%;min-height:50px}}

/* Accessible in-place navigation: no visible page URL changes. */
.text-link{display:inline;border:0;padding:0;background:none;color:#794114;text-decoration:underline;text-underline-offset:3px;font:inherit;font-weight:700;cursor:pointer}
.text-link:hover,.text-link:focus-visible{color:#45200e;text-decoration-thickness:2px}
