/* TGTC v3.1 — Sharp-faithful navigation, equal islands and photo detail pages */

:root{
 --sharp-bg:#e5e5e5;
 --sharp-text:#373737;
 --sharp-dark:#333333;
 --sharp-border:#cccccc;
 --sharp-breadcrumb-border:#bdbdbd;
 --sharp-light:#f1f1f1;
 --sharp-link:#0074d8;
}

*{box-sizing:border-box}

html,body{
 background:var(--sharp-bg);
}

body{
 margin:20px;
 padding:0;
 text-align:center;
 color:var(--sharp-text);
 font:0.75em helvetica, arial, sans-serif;
 letter-spacing:1px;
 line-height:2.0em;
}

a:link,
a:visited{
 color:var(--sharp-link);
 text-decoration:none;
}

a:hover,
a:active{
 color:var(--sharp-text);
}

#container{
 width:auto;
 margin:0 auto;
 text-align:left;
 color:#333333;
 background:transparent;
}

#pageHeader{
 background:#333333;
 height:110px;
 margin:0 0 15px;
 padding:0;
 position:relative;
 border:0;
}

#pageHeader .brand{
 display:block;
 text-decoration:none;
}

#pageHeader h1{
 color:#ffffff;
 margin:0;
 padding:30px 20px 0;
 letter-spacing:2px;
 font-size:2.2em;
 font-weight:bold;
 line-height:1.2em;
}

#pageHeader h2{
 color:#cccccc;
 font-weight:normal;
 letter-spacing:2px;
 margin:0;
 padding-left:20px;
 font-size:1.5em;
 line-height:1.4em;
}

.body-grid{
 display:grid;
 grid-template-columns:minmax(0,1fr) 200px;
 gap:20px;
 align-items:stretch;
 margin:0 0 15px;
 padding:0;
 background:transparent;
}

#contentContainer{
 min-width:0;
 margin:0;
 padding:0;
 background:transparent;
 display:flex;
}

#contentContainer #content{
 padding:20px;
 background:#ffffff;
 border:1px solid #cccccc;
 min-width:0;
 width:100%;
 flex:1 1 auto;
}

#sidebarContainer{
 width:200px;
 margin:0;
 padding:0;
 border:1px solid #cccccc;
 background:#ffffff;
 position:relative;
}

#navcontainer{
 background:#ffffff;
 line-height:2.0em;
 position:relative;
 top:0;
 width:100%;
 display:block;
}

#navcontainer ul{
 list-style:none;
 margin:0;
 padding:0;
}

#navcontainer a{
 display:block;
 color:#333333;
 text-decoration:none;
 padding-left:10px;
 border-bottom:1px solid #cccccc;
 height:25px;
 line-height:25px;
 margin:0;
 font:inherit;
}

#navcontainer a:hover{
 background:#f1f1f1;
}

#navcontainer a.current,
#navcontainer a.currentAncestor{
 color:#333333;
 font-weight:bold;
 background:#f1f1f1;
}

#navcontainer ul ul li{
 background:#ffffff;
}

#navcontainer ul ul a{
 color:#c3c3c3;
 padding:0 0 0 30px;
}

#navcontainer ul ul a.current{
 font-weight:bold;
 background:#f9f9f9;
}

#navcontainer ul ul a.currentAncestor{
 font-weight:bold;
 background:#f9f9f9;
}

#navcontainer ul ul ul a{
 padding:0 0 0 50px;
 color:#808080;
}

#navcontainer ul ul ul a.current{
 font-weight:bold;
 background:#fdfdfd;
}

#navcontainer ul ul ul a.currentAncestor{
 font-weight:bold;
}

#navcontainer ul ul ul ul a{
 color:#999999;
 padding:0 0 0 70px;
}
#navcontainer ul ul ul ul ul a{
 color:#b3b3b3;
 padding:0 0 0 90px;
}
#navcontainer ul ul ul ul ul ul a{
 color:#cccccc;
 padding:0 0 0 110px;
}

.search{
 display:flex;
 margin:18px 10px 10px;
 padding:0;
 border:0;
 gap:0;
}
.search input{
 width:100%;
 min-width:0;
 border:1px solid #cccccc;
 padding:3px 5px;
 background:#ffffff;
 color:#333333;
 font:1em helvetica,arial,sans-serif;
 letter-spacing:1px;
 line-height:1.4em;
}
.search button{
 border:1px solid #cccccc;
 border-left:0;
 background:#f1f1f1;
 padding:0 7px;
 color:#333333;
 cursor:pointer;
 font:1em helvetica,arial,sans-serif;
}
.demo-note{
 margin:10px;
 color:#808080;
 font-size:.9em;
}

.album-wrapper{
 display:grid;
 grid-template-columns:repeat(auto-fill,144px);
 grid-auto-rows:144px;
 gap:0;
 justify-content:start;
 align-items:start;
}

.thumbnail-wrap{
 width:144px;
 height:144px;
 text-align:center;
 overflow:visible;
}

.thumbnail-wrap>a{
 display:block;
 width:144px;
 height:144px;
 color:#333333;
}

.thumbnail-frame{
 width:144px;
 height:128px;
 display:flex;
 align-items:flex-end;
 justify-content:center;
 background:transparent;
 padding:0;
}

.thumbnail-frame img,
.empty-cover{
 display:block;
 width:auto;
 height:auto;
 max-width:128px;
 max-height:128px;
 border:1px solid #cccccc;
 padding:1px;
 box-shadow:none;
 background:#ffffff;
 box-sizing:content-box;
}

.thumbnail-wrap a:hover img{
 opacity:1;
}

.thumbnail-caption{
 display:block;
 margin:0;
 padding:0;
 color:#333333;
 font:inherit;
 line-height:1.35em;
 letter-spacing:1px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

.category-grid .thumbnail-caption,
.period-grid .thumbnail-caption{
 color:#333333;
 font-weight:normal;
}

.empty-cover{
 width:89px;
 height:128px;
 background:#f9f9f9;
}
.category-grid .category-tile:nth-child(6) .empty-cover{
 width:128px;
 height:88px;
}

.gallery-head{
 display:flex;
 justify-content:space-between;
 align-items:baseline;
 margin:0 0 20px;
 padding:0;
 border:0;
}
.gallery-head h3,
.prose h3,
.plain-heading{
 margin:0;
 color:#333333;
 font:inherit;
 font-weight:bold;
}
.gallery-head span{
 color:#808080;
 font-size:.9em;
}
.empty-state{padding:20px 0;color:#808080}

.photo-background{
 margin:10px;
 text-align:left;
}

.photo-navigation{
 background:#333333;
 margin-bottom:10px;
 padding:5px;
}

.photo-links{
 margin:0;
 padding:0;
}

.photo-navigation a:hover{
 color:#ffffff;
}

.photo-title{
 font-size:1.7em;
 font-weight:normal;
 letter-spacing:2px;
 color:#ffffff;
 margin:0;
 padding:0;
}

.photo-caption{
 color:#cccccc;
 letter-spacing:2px;
 margin:0;
 padding:0;
}

.lightbox-trigger{
 display:inline-block;
 line-height:0;
}

.photo-frame{
 background:#333333;
 padding:5px;
 border:0;
 box-shadow:none;
 box-sizing:content-box;
 display:block;
 width:auto;
 height:auto;
 max-width:calc(100% - 10px);
 max-height:602px;
 margin:0;
 cursor:zoom-in;
}

.prose{max-width:610px}
.prose h3{margin-bottom:10px}

.new-list{max-width:690px}
.new-entry{
 margin-bottom:40px;
 padding:0;
 border:0;
 text-align:left;
}
.new-entry-title{
 color:#333333;
 font-size:1.7em;
 font-weight:normal;
 letter-spacing:2px;
 margin:0;
 line-height:1.4em;
}
.new-entry-title a{color:#333333}
.new-entry-title a:hover{color:#0074d8}
.new-entry-date{
 color:#cccccc;
 letter-spacing:2px;
 margin-bottom:10px;
}
.new-entry-body img{
 display:block;
 max-width:294px;
 max-height:320px;
 width:auto;
 height:auto;
 margin:0 0 7px;
 border:1px solid #ffffff;
 box-shadow:0 0 0 1px #cccccc;
}
.new-entry-tags{color:#666666;margin:5px 0 0}

.sidebar-tags{
 margin:10px;
 padding:0;
 border:0;
}
.blog-tag-cloud{
 margin:0 0 10px;
 padding:0;
 text-align:justify;
 list-style:none;
}
.blog-tag-cloud li{
 display:inline;
 padding-right:5px;
}
.blog-tag-cloud a{
 color:#333333;
 font:inherit;
}

.tag-index{
 list-style:none;
 margin:13px 0 0;
 padding:0;
 columns:3;
 column-gap:30px;
}
.tag-index li{break-inside:avoid;margin:0 0 4px}
.tag-index small{color:#999999}

#breadcrumbcontainer{
 text-align:left;
 border:1px solid #bdbdbd;
 margin:0 0 15px;
 padding:10px 0;
 background:#f1f1f1;
 color:#373737;
 font:inherit;
}

#breadcrumbcontainer ul{
 list-style:none;
 padding:0;
 margin:0;
 display:flex;
 flex-wrap:wrap;
}
#breadcrumbcontainer li{
 margin:0;
 padding:0;
}
#breadcrumbcontainer a{
 padding:0 0 0 20px;
 color:#0074d8;
}

#footer{
 text-align:left;
 height:50px;
 background:#333333;
 margin:0;
 padding:0;
 color:#ffffff;
 font:inherit;
}

#footer p{
 color:#ffffff;
 padding-top:15px;
 padding-left:20px;
 margin:0;
}

#footer a:link,
#footer a:visited{
 color:#0074d8;
}

#footer a:hover,
#footer a:active{
 color:#ffffff;
 text-decoration:none;
}

.admin-link{opacity:1}
.nav-toggle{display:none}

.lightbox{
 position:fixed;
 inset:0;
 background:#000e;
 z-index:20;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:35px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto}
.lightbox-close{
 position:fixed;
 right:18px;
 top:10px;
 border:0;
 background:none;
 color:#fff;
 font:32px/1 Arial;
 cursor:pointer;
}

.admin-body{
 margin:0;
 background:#efefec;
 color:#303030;
 font:13px/1.45 Arial,Helvetica,sans-serif;
 letter-spacing:0;
 text-align:left;
}
.admin-shell{
 max-width:1100px;
 margin:40px auto;
 background:#fff;
 padding:30px 35px;
 border:1px solid #d5d5d2;
 box-shadow:0 2px 12px #0001;
}
.admin-shell.narrow{max-width:560px}
.admin-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 border-bottom:1px solid #ddd;
 padding-bottom:17px;
 margin-bottom:26px;
}
.admin-top h1,.admin-shell>h1{font:normal 25px Georgia,serif}
.admin-top nav{display:flex;gap:14px}
.admin-top a{color:#444}
.admin-form{display:grid;gap:15px}
.admin-form.wide{max-width:900px}
.admin-form label{display:grid;gap:5px;font-weight:bold;color:#555}
.admin-form input,.admin-form select,.admin-form textarea{
 font:14px Arial;
 padding:9px 10px;
 border:1px solid #c8c8c5;
 background:#fff;
}
.admin-form textarea{resize:vertical}
.form-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.form-columns>div{display:grid;gap:15px}
.admin-form .check{display:flex;align-items:center;gap:8px;font-weight:normal}
.button{
 display:inline-block;
 border:0;
 background:#292929;
 color:white!important;
 padding:9px 13px;
 cursor:pointer;
 text-decoration:none!important;
 width:max-content;
}
.button.secondary{background:#777}
.notice{padding:10px 12px;margin:0 0 18px;border:1px solid}
.notice.success{background:#eff7ef;border-color:#b9d7b9}
.notice.error{background:#fff0f0;border-color:#e0b4b4}
.admin-grid{display:grid;grid-template-columns:2fr 1fr;gap:35px}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{text-align:left;border-bottom:1px solid #e4e4e1;padding:9px 7px;vertical-align:middle}
.admin-table th{font-size:11px;text-transform:uppercase;color:#888}
.cards-table img{width:42px;height:42px;object-fit:contain;background:#f2f2f0}
.link-button{border:0;background:none;padding:0;text-decoration:underline;cursor:pointer}
.danger{color:#9a2424}
.admin-list-head{display:flex;justify-content:space-between;align-items:center}
.form-thumb{max-width:120px;max-height:120px;margin-top:5px;border:1px solid #ddd;padding:3px}

@media(max-width:760px){
 body{
   margin:10px;
   text-align:left;
   font-size:0.75em;
 }

 #container{width:auto;margin:0}

 #pageHeader{
   height:90px;
   margin-bottom:10px;
 }
 #pageHeader h1{
   padding:22px 52px 0 14px;
   font-size:1.7em;
 }
 #pageHeader h2{
   padding-left:14px;
   font-size:1.15em;
 }

 .body-grid{
   display:block;
   margin-bottom:10px;
 }
  .nav-toggle{
    display:none;
  }

 #contentContainer #content{
   padding:14px;
 }

 #sidebarContainer{
   display:none;
   width:auto;
   margin-top:10px;
 }
 #sidebarContainer.open{display:block}

 .album-wrapper{
   grid-template-columns:repeat(2,144px);
   justify-content:space-around;
 }

 #breadcrumbcontainer{
   margin-bottom:10px;
 }

 .tag-index{columns:2}

 .form-columns,.admin-grid{grid-template-columns:1fr}
 .admin-shell{margin:0;padding:22px}
 .admin-top{align-items:flex-start;gap:12px}
 .admin-top nav{flex-wrap:wrap;font-size:12px}
 .lightbox{padding:20px}
}

@media(max-width:340px){
 .album-wrapper{
   grid-template-columns:144px;
   justify-content:center;
 }
 .tag-index{columns:1}
}

/* TGTC v3.6 — gallery spacing refinement */

.thumbnail-frame{
  margin-bottom:8px;
}

.album-wrapper{
  row-gap:18px;
  column-gap:8px;
}

.thumbnail-wrap{
  height:162px;
}

.thumbnail-wrap>a{
  height:162px;
}

.category-grid .thumbnail-wrap,
.period-grid .thumbnail-wrap{
  height:158px;
}

.category-grid .thumbnail-wrap>a,
.period-grid .thumbnail-wrap>a{
  height:158px;
}

.gallery-head{
  margin:0 0 28px;
  align-items:flex-end;
}

.gallery-head h3{
  font-size:1.5em;
  letter-spacing:2px;
  line-height:1.4em;
}

.gallery-head span{
  font-size:1em;
  color:#808080;
}

.album-wrapper:not(.category-grid):not(.period-grid){
  row-gap:22px;
  column-gap:12px;
}

.album-wrapper:not(.category-grid):not(.period-grid) .thumbnail-wrap{
  height:168px;
}

.album-wrapper:not(.category-grid):not(.period-grid) .thumbnail-wrap>a{
  height:168px;
}

.thumbnail-caption{
  padding-top:2px;
}


/* TGTC v3.6b — extra vertical spacing to match original Sharp galleries */

.album-wrapper{
  row-gap:32px;
}

.thumbnail-wrap{
  height:174px;
}

.thumbnail-wrap>a{
  height:174px;
}

.category-grid .thumbnail-wrap,
.period-grid .thumbnail-wrap{
  height:168px;
}

.category-grid .thumbnail-wrap>a,
.period-grid .thumbnail-wrap>a{
  height:168px;
}

.album-wrapper:not(.category-grid):not(.period-grid){
  row-gap:36px;
}

.album-wrapper:not(.category-grid):not(.period-grid) .thumbnail-wrap,
.album-wrapper:not(.category-grid):not(.period-grid) .thumbnail-wrap>a{
  height:180px;
}


/* TGTC v38b — remove black frame only; keep original background */

.photo-frame{
  background:transparent;
  padding:0;
  border:0;
  box-shadow:none;
}