/* martyBtv.com — "Marty's Superb Web Site" 1996 edition (draft) */
:root{
  --bg:#000000; --yellow:#FFFF66; --green:#66FF66; --blue:#33CCCC; --link:#33CCCC;
  --red:#FF3333; --white:#FFFFFF; --gray:#C0C0C0; --gold:#E8D44D;
  --serif:"Times New Roman",Times,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--blue);font-family:var(--serif);font-size:19px;line-height:1.45}
a{color:var(--green);text-decoration:underline}
a:hover{color:var(--yellow)}
a.r,.r{color:var(--red)}
.y{color:var(--yellow)} .g{color:var(--green)}
img,video{display:block}
button,select{font:inherit}
:focus-visible{outline:2px dotted var(--yellow);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--yellow);color:#000;padding:6px 10px}
.skip:focus{left:8px}
.skip-label{position:absolute;left:-999px}

/* Disclaimer */
.disclaimer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;padding:10px 16px;background:#C0C0C0;color:#000;border-bottom:3px outset #fff;font-size:16px;text-align:center}
.disclaimer p{margin:0;max-width:820px}
.disclaimer .return{padding:2px 10px;background:#C0C0C0;color:#000;border:3px outset #fff;font-weight:700;text-decoration:none;white-space:nowrap}
.disclaimer .return:hover{color:#000080}
.disclaimer .return:active{border-style:inset}

/* Chrome bar dividers */
hr.chrome{border:0;height:12px;max-width:960px;margin:40px auto;border-radius:6px;
  background:linear-gradient(#5a5a5a 0%,#f2f2f2 35%,#9a9a9a 60%,#3a3a3a 100%)}

/* Nav: yellow-bordered table */
.top{position:sticky;top:0;z-index:20;background:#000;padding:10px 12px;border-bottom:1px solid #333}
.navtable{margin:0 auto;border:4px double var(--gold);border-collapse:separate;border-spacing:3px;background:#000}
.navtable td{border:2px solid var(--gold);padding:3px 14px;text-align:center;font-size:19px}

/* Hero */
.hero{text-align:center;padding:28px 16px 0}
.welcome{margin:0;color:var(--yellow);font-weight:700;font-size:24px}
.logo{margin:8px auto 0;max-width:720px}
.logo img{width:100%;height:auto}
.chips{margin:14px 0 26px;font-weight:700;font-size:clamp(18px,2.4vw,28px);letter-spacing:1px;color:var(--white)}
.monitor{max-width:820px;margin:0 auto;border:6px ridge var(--gray);background:#000;box-shadow:8px 8px 0 #333}
.hero-vid{width:100%;aspect-ratio:16/9;object-fit:cover}
.caption{margin:12px 0 0;font-size:16px}

/* Intro */
.intro{max-width:1100px;margin:0 auto;padding:0 20px;text-align:center}
.intro p{margin:0 0 14px;color:var(--yellow)}
.intro .big{font-size:24px;font-weight:700}
.intro .best{color:var(--blue)}

/* Section headings */
h2,h3{font-family:var(--serif)}
.work h2,.about h2,.bts h3{margin:0 0 6px;text-align:center;color:var(--yellow);font-size:clamp(28px,4vw,40px)}
.hint{margin:0 0 18px;text-align:center;font-size:16px;color:var(--blue)}
.new{display:inline-block;vertical-align:middle;margin-right:8px;padding:1px 6px;background:var(--yellow);color:var(--red);font-size:14px;font-weight:700;border:2px outset #fff;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Work grid: yellow table cells */
.work{padding:0 20px}
.grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:240px;grid-auto-flow:dense;gap:6px;padding:6px;border:4px double var(--gold)}
.tile{position:relative;display:block;overflow:hidden;border:2px solid var(--gold);background:#000;padding:0;cursor:pointer;text-align:left}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .ov{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:#000;border-top:2px solid var(--gold);opacity:0;transition:opacity .15s}
.tile:hover .ov,.tile:focus-visible .ov{opacity:1}
.tile .ov b{color:var(--green);text-decoration:underline;font-size:20px;font-weight:700}
.tile .ov i{font-style:normal;color:var(--red);font-size:15px}
.s-xl{grid-column:span 4;grid-row:span 2}
.s-tall{grid-column:span 2;grid-row:span 2}
.s-wide{grid-column:span 3}
.s-small{grid-column:span 2}
.s-full{grid-column:span 6}

/* About */
.about{padding:0 20px}
.about-inner{max-width:1100px;margin:16px auto 0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:start}
.about-photo{margin:0}
.about-photo img{width:100%;height:auto;border:2px solid #fff;box-shadow:8px 8px 6px #555}
.about-photo figcaption{margin-top:10px;font-size:14px;color:var(--blue)}
.about-text p{margin:0 0 16px;color:var(--green)}
.about-text .lead{color:var(--yellow);font-weight:700}

/* BTS */
.bts{max-width:1100px;margin:0 auto}
.bts-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:170px;grid-auto-flow:dense;gap:10px}
.bts-grid img{width:100%;height:100%;object-fit:cover;border:3px solid var(--link);grid-column:span 2;cursor:zoom-in}
.bts-grid img:hover{border-color:var(--red)}
.bts-grid img.t{grid-row:span 2}
.bts-grid img.f{grid-column:span 4;grid-row:span 2}
.bts-grid img.w{grid-column:span 4}

/* Cards: table */
.cards{max-width:1100px;width:100%;margin:0 auto;border:4px double var(--gold);border-collapse:separate;border-spacing:4px}
.cards td{vertical-align:top;border:2px solid var(--gold);padding:14px 16px;width:33%}
.cards h3{margin:0 0 10px;color:var(--yellow);font-size:24px;text-decoration:underline}
.cards ul{margin:0;padding-left:20px;color:var(--green);font-size:16px}
.cards li{margin-bottom:8px}
.cards b{color:var(--white)}

/* Footer */
.foot{max-width:1100px;margin:0 auto;padding:0 20px 40px;text-align:center}
.foot p{margin:0 0 14px}
.counter{color:var(--blue)}
.err{display:inline-block;padding:0 6px;background:#fff;color:#000;font-weight:700;font-family:"Courier New",monospace;border:2px inset #999}
.please{color:var(--blue);font-weight:700;font-size:24px}
.guest{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:10px 0 24px}
.gbtn{display:flex;flex-direction:column;align-items:flex-start;min-width:260px;padding:8px 18px;background:#fff;border:6px solid #3B8E2E;color:#2E7D2E;text-decoration:none;font-family:"Comic Sans MS","Chalkboard SE",cursive;font-weight:700;font-size:40px;line-height:1}
.gbtn small{font-size:22px}
.gbtn:hover{color:#2E7D2E;border-color:var(--yellow)}
.rate select{min-width:260px;padding:3px 6px}
.rate button{padding:3px 10px;background:#e0e0e0;border:2px outset #fff;cursor:pointer}
.foot hr{border:0;border-top:2px solid #777;margin:24px 0}
.totop{color:var(--blue)}
.copy{font-size:14px;color:#888}
.credit{font-size:14px;color:var(--yellow)}

/* Viewer */
body.locked{overflow:hidden}
.viewer{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:#000;padding:16px 28px 24px;overflow-y:auto}
.viewer[hidden]{display:none}
.v-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px}
.v-name{display:flex;align-items:center;gap:14px}
.v-name img{height:70px;width:auto}
.v-name h2{margin:0;color:var(--yellow);font-size:clamp(24px,3.5vw,40px)}
.v-client{color:var(--red);font-size:17px}
.v-nav{display:flex;gap:8px}
.round{min-width:46px;height:36px;padding:0 10px;background:#C0C0C0;color:#000;border:3px outset #fff;font-family:"Courier New",monospace;font-weight:700;font-size:16px;cursor:pointer}
.round:active{border-style:inset}
.round.sm{min-width:34px;height:30px}
.v-stage{flex:1 1 auto;min-height:280px;background:#000;border:6px ridge var(--gray);display:flex;align-items:center;justify-content:center;overflow:hidden}
.v-stage video{width:100%;height:100%;max-height:calc(100vh - 230px);object-fit:contain}
.v-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 10px;background:#C0C0C0;border:3px outset #fff;color:#000}
.pp{width:36px;height:30px;background:#C0C0C0;border:3px outset #fff;display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.pp span{width:4px;height:12px;background:#000}
.pp.paused span{display:none}
.pp.paused::after{content:"";border-left:12px solid #000;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.tc{font-family:"Courier New",monospace;font-weight:700;font-size:15px}
#v-seek{flex:1 1 160px;accent-color:#000080}
.tabs{display:flex;gap:6px}
.tab{padding:3px 10px;background:#C0C0C0;color:#000;border:3px outset #fff;font-family:var(--serif);font-weight:700;font-size:15px;cursor:pointer}
.tab[aria-selected="true"]{border-style:inset;background:#a8a8a8}
.v-panel{position:relative;margin-top:16px;padding:16px 60px 16px 18px;border:4px double var(--gold);background:#000;display:flex;flex-direction:column;gap:10px}
.v-panel[hidden]{display:none}
#v-panel-close{position:absolute;top:12px;right:12px}
.v-panel .lbl{color:var(--yellow);font-weight:700;letter-spacing:1px}
.v-panel p{margin:0;color:var(--green);max-width:860px}
.v-panel .big{color:var(--white);font-size:26px;font-weight:700}
.v-panel .big2{margin-top:-8px;color:var(--red);font-size:18px}
.crew{list-style:none;margin:4px 0 0;padding:10px 0 0;border-top:2px solid #555;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 20px}
.crew li{display:flex;flex-direction:column}
.crew b{color:var(--green)} .crew span{color:var(--blue);font-size:15px}

/* Photo lightbox (built by site.js) */
.lb{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center;gap:16px;padding:20px}
.lb[hidden]{display:none}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:calc(100vw - 180px)}
.lb img{max-width:100%;max-height:calc(100vh - 100px);border:2px solid #fff;box-shadow:8px 8px 6px #555}
.lb figcaption{color:var(--yellow);text-align:center}
.lb .round{min-width:46px}
.lb-close{position:absolute;top:16px;right:16px}

/* Responsive */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}
  .s-xl,.s-full,.s-wide{grid-column:span 2}
  .s-tall{grid-column:span 1;grid-row:span 2}
  .s-small{grid-column:span 1}
  .about-inner{grid-template-columns:200px minmax(0,1fr);gap:24px}
  .bts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bts-grid img{grid-column:span 1}
  .bts-grid img.f,.bts-grid img.w{grid-column:span 2}
  .cards,.cards tbody,.cards tr,.cards td{display:block;width:100%}
  .cards td{margin-bottom:4px}
}
@media (max-width:640px){
  body{font-size:17px}
  .navtable td{padding:2px 6px;font-size:15px}
  .grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .s-xl,.s-tall,.s-wide,.s-small,.s-full{grid-column:span 1;grid-row:span 1}
  .tile .ov{opacity:1}
  .about-inner{grid-template-columns:1fr}
  .about-photo{max-width:240px}
  .bts-grid{grid-auto-rows:130px;gap:6px}
  .gbtn{min-width:0;width:100%;font-size:32px}
  .viewer{padding:10px 10px 16px}
  .v-name img{display:none}
  .lb figure{max-width:100%}
  .lb-prev,.lb-next{position:absolute;bottom:16px}
  .lb-prev{left:calc(50% - 56px)} .lb-next{left:calc(50% + 6px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .new{animation:none}
  .tile .ov{transition:none}
}

/* Guestbook */
.gbgif{display:inline-block;line-height:0}
.gbgif img{width:300px;max-width:100%;height:auto}
.counter-img{display:inline-block;vertical-align:middle;line-height:0}
.counter-img img{display:inline-block;height:auto}
.gb{max-width:900px;margin:0 auto;padding:28px 20px 48px;text-align:center}
.gb h1{margin:6px 0 10px;color:var(--yellow);font-size:clamp(30px,5vw,48px)}
.gb-form{text-align:left}
.gb-table{width:100%;border:4px double var(--gold);border-collapse:separate;border-spacing:4px}
.gb-table td{border:2px solid var(--gold);padding:10px 12px;vertical-align:top;color:var(--green)}
.gb-table td:first-child{width:34%;color:var(--yellow);font-weight:700}
.gb-table input[type=text],.gb-table input[type=email],.gb-table input[type=url],.gb-table select,.gb-table textarea{width:100%;padding:4px 6px;font:inherit;font-size:17px;background:#fff;color:#000;border:2px inset #999}
.radios{display:flex;flex-direction:column;gap:6px}
.hp{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}
.gb-status{min-height:1.4em;text-align:center;color:var(--blue);font-weight:700}
.gb-status .thanks{color:var(--green)}
.gb-error{color:var(--red);font-weight:700;text-align:center}
.gb-buttons{display:flex;justify-content:center;gap:12px;margin-top:18px}
.gb-buttons button{padding:4px 18px;background:#C0C0C0;color:#000;border:3px outset #fff;font-weight:700;cursor:pointer}
.gb-buttons button:active{border-style:inset}
@media (max-width:640px){
  .gb-table,.gb-table tbody,.gb-table tr,.gb-table td{display:block;width:100%}
  .gb-table td:first-child{width:100%;border-bottom:0;padding-bottom:2px}
}