/* ============================================================
   TENON & CO. — YEAR 2000 EDITION
   A deliberate early-web / GeoCities / table-layout inspired
   carpenter concept. Still responsive, still usable.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#2b1707;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.55;
  background:
    repeating-linear-gradient(90deg, rgba(72,38,12,.18) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 22px),
    linear-gradient(135deg,#7a4218,#c88942 35%,#6b3410 70%,#2a1508);
  background-attachment:fixed;
}
a{color:#0000ee;text-decoration:underline}
a:visited{color:#551a8b}
a:hover{color:#ff0000;background:#ffff00}
img,svg{max-width:100%}
:focus-visible{outline:3px dashed #ff0;outline-offset:3px}

.topbar{
  background:#000080;
  color:white;
  border-bottom:4px ridge #c0c0c0;
  font-family:"Courier New",monospace;
  padding:6px 10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.topbar b{color:#ffff00}
.blink{animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}

.page{
  width:960px;
  max-width:calc(100% - 18px);
  margin:12px auto 28px;
  background:#f7e6bf;
  border:5px ridge #d7ba80;
  box-shadow:0 0 0 3px #2b1707, 12px 12px 0 rgba(0,0,0,.35);
}

/* old-school header */
.header{
  position:relative;
  padding:16px;
  background:
    radial-gradient(circle at 16% 20%,rgba(255,255,255,.5),transparent 16%),
    linear-gradient(90deg,#3c200c,#9c5a22 42%,#f0bd70);
  color:#fff6db;
  border-bottom:5px ridge #d7ba80;
  overflow:hidden;
}
.header:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(0,0,0,.16) 16px 18px),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255,255,255,.08) 52px 55px);
  pointer-events:none;
}
.header-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 210px;gap:16px;align-items:center}
.logo{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo-badge{
  width:86px;height:86px;
  border:4px outset #e2c68b;
  background:#f7e6bf;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  box-shadow:4px 4px 0 #211006;
}
.logo-badge svg{width:66px;height:66px}
h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:46px;
  line-height:.95;
  margin:0;
  text-shadow:3px 3px 0 #261305, 5px 5px 0 #000;
  letter-spacing:-1px;
}
.tagline{
  font-family:"Courier New",monospace;
  color:#ffff00;
  font-size:15px;
  margin-top:8px;
  text-shadow:2px 2px 0 #000;
}
.header-card{
  background:#ffffcc;
  color:#2b1707;
  border:4px ridge #c0c0c0;
  padding:10px;
  font-family:"Courier New",monospace;
  font-size:12px;
  transform:rotate(2deg);
}
.header-card b{color:#800000}
.marquee{
  background:#000;
  color:#00ff00;
  border-top:3px inset #aaa;
  border-bottom:3px inset #aaa;
  font-family:"Courier New",monospace;
  white-space:nowrap;
  overflow:hidden;
}
.marquee span{
  display:inline-block;
  padding:7px 0;
  animation:scroll 28s linear infinite;
}
@keyframes scroll{
  from{transform:translateX(100%)}
  to{transform:translateX(-100%)}
}
@media (prefers-reduced-motion:reduce){.marquee span{animation:none;transform:none;white-space:normal;padding:7px 10px}}

/* classic table layout */
.layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:0;
}
.sidebar{
  background:#d7ba80;
  border-right:5px ridge #ad7b3e;
  padding:12px;
}
.content{background:#fff8df;padding:14px}

.box{
  background:#ffffcc;
  border:4px ridge #c0c0c0;
  margin-bottom:14px;
}
.box-title{
  background:#000080;
  color:#fff;
  font-family:"Courier New",monospace;
  font-weight:bold;
  padding:5px 7px;
  border-bottom:3px groove #c0c0c0;
}
.box-body{padding:10px}
.nav a{
  display:block;
  background:#f3d88f;
  border:3px outset #d7ba80;
  margin:0 0 7px;
  padding:7px 8px;
  color:#000080;
  font-weight:bold;
  text-decoration:none;
}
.nav a:hover{
  border-style:inset;
  background:#ffff00;
  color:#800000;
}
.counter{
  background:#000;
  color:#00ff00;
  font-family:"Courier New",monospace;
  border:3px inset #777;
  padding:8px;
  text-align:center;
  letter-spacing:2px;
  font-size:18px;
}
.badges{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
}
.badge{
  border:3px outset #bbb;
  background:#e8e8e8;
  padding:7px;
  text-align:center;
  font-size:11px;
  font-weight:bold;
  color:#000;
}
.badge.red{background:#ff0000;color:white}
.badge.blue{background:#0033cc;color:white}
.badge.yellow{background:#ffff00;color:#000}
hr{
  border:0;
  border-top:4px double #8c5a22;
  margin:18px 0;
}

.hero-box{
  border:4px double #7a4218;
  background:
    linear-gradient(rgba(255,248,223,.88),rgba(255,248,223,.88)),
    repeating-linear-gradient(45deg,#d6a05f 0 8px,#bc7a37 8px 16px);
  padding:18px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:center;
}
.kicker{
  display:inline-block;
  background:#ff0000;
  color:white;
  font-weight:bold;
  font-family:"Courier New",monospace;
  padding:3px 8px;
  border:2px solid #800000;
  box-shadow:3px 3px 0 #000;
  margin-bottom:10px;
}
h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:36px;
  line-height:1.05;
  color:#4a260c;
  margin:4px 0 10px;
}
.lead{font-size:16px;color:#3d2a16}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-block;
  background:#ffff00;
  color:#000080!important;
  border:4px outset #d7ba80;
  padding:9px 13px;
  font-weight:bold;
  text-decoration:none;
  font-family:Verdana,Arial,sans-serif;
}
.btn:hover{border-style:inset;background:#00ff00;color:#000!important}
.btn.dark{background:#000080;color:white!important}
.btn.dark:hover{background:#ff0000;color:white!important}

.desktop-window{
  border:4px outset #c0c0c0;
  background:#c0c0c0;
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
}
.win-title{
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff;
  font-family:"Courier New",monospace;
  font-weight:bold;
  padding:4px 7px;
  display:flex;
  justify-content:space-between;
}
.win-content{
  background:#f5e5c0;
  padding:12px;
  text-align:center;
}
.saw-anim{
  animation:saw 1.1s ease-in-out infinite alternate;
  transform-origin:50% 50%;
}
@keyframes saw{from{transform:rotate(-6deg) translateX(-4px)}to{transform:rotate(6deg) translateX(4px)}}
@media (prefers-reduced-motion:reduce){.saw-anim{animation:none}}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.service-card{
  background:#fff2c8;
  border:4px ridge #d7ba80;
  padding:12px;
}
.service-card h3{
  margin:8px 0 6px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px;
  color:#4a260c;
}
.icon{
  width:56px;height:56px;
  background:#7a4218;
  border:3px outset #d7ba80;
  display:grid;
  place-items:center;
  color:#ffff00;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.project{
  background:#fff;
  border:4px ridge #c0c0c0;
}
.project-img{
  height:135px;
  background:#d7ba80;
  border-bottom:4px ridge #c0c0c0;
  display:grid;
  place-items:center;
}
.project-body{padding:10px}
.project h3{font-family:Georgia,"Times New Roman",serif;font-size:22px;margin:0 0 5px;color:#4a260c}

.timeline{
  display:grid;
  gap:9px;
}
.step{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:10px;
  align-items:start;
  background:#fff2c8;
  border:3px ridge #d7ba80;
  padding:8px;
}
.step-no{
  background:#000080;
  color:#fff;
  border:3px outset #c0c0c0;
  font-family:"Courier New",monospace;
  font-weight:bold;
  text-align:center;
  padding:10px 0;
}
.step h3{margin:0;font-size:19px;font-family:Georgia,"Times New Roman",serif;color:#4a260c}

.material-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:4px ridge #c0c0c0;
}
.material-table th{
  background:#800000;
  color:#fff;
  padding:8px;
  border:2px solid #000;
  font-family:"Courier New",monospace;
}
.material-table td{
  padding:8px;
  border:2px solid #8c5a22;
}
.material-table tr:nth-child(even){background:#fff2c8}
.wood-chip{
  display:inline-block;
  width:52px;height:18px;
  border:2px solid #2b1707;
  vertical-align:middle;
  margin-right:6px;
  background:repeating-linear-gradient(90deg,#c88942 0 5px,#9c5a22 5px 9px);
}
.wood-chip.walnut{background:repeating-linear-gradient(90deg,#4a260c 0 5px,#7a4218 5px 9px)}
.wood-chip.ash{background:repeating-linear-gradient(90deg,#f4d99a 0 5px,#d6b56e 5px 9px)}
.wood-chip.fir{background:repeating-linear-gradient(90deg,#b8732f 0 5px,#d49a58 5px 9px)}

.contact-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field{margin-bottom:10px}
label{display:block;font-weight:bold;color:#4a260c;margin-bottom:4px}
input,select,textarea{
  width:100%;
  font-family:Verdana,Arial,sans-serif;
  border:3px inset #c0c0c0;
  background:#fff;
  padding:8px;
  font-size:14px;
}
textarea{min-height:110px;resize:vertical}
.notice{
  background:#ffff00;
  border:3px dashed #ff0000;
  padding:8px;
  font-family:"Courier New",monospace;
  font-size:12px;
  font-weight:bold;
  color:#800000;
}
.footer{
  background:#2b1707;
  color:#f7e6bf;
  border-top:5px ridge #d7ba80;
  padding:18px;
  font-family:"Courier New",monospace;
  font-size:12px;
}
.footer a{color:#ffff00}

.under-construction{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#ffff00;
  color:#000;
  border:3px dashed #000;
  padding:4px 8px;
  font-family:"Courier New",monospace;
  font-weight:bold;
  transform:rotate(-2deg);
}

@media(max-width:760px){
  .header-inner,.layout,.hero-box,.contact-panel{grid-template-columns:1fr}
  .sidebar{border-right:0;border-bottom:5px ridge #ad7b3e}
  h1{font-size:36px}
  h2{font-size:30px}
  .grid3,.gallery{grid-template-columns:1fr}
  .page{max-width:calc(100% - 10px);margin-top:6px}
}


/* multipage additions */
.nav a.active{
  background:#000080;
  color:#ffff00;
  border-style:inset;
}
.page-intro{
  border:4px double #7a4218;
  background:
    linear-gradient(rgba(255,248,223,.9),rgba(255,248,223,.9)),
    repeating-linear-gradient(45deg,#d6a05f 0 8px,#bc7a37 8px 16px);
  padding:18px;
  margin-bottom:16px;
}
.page-intro h2{margin-top:0}
.noticebar{
  background:#000;
  color:#00ff00;
  border:3px inset #777;
  padding:8px 10px;
  font-family:"Courier New",monospace;
  margin:12px 0;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.download-box{
  background:#e8e8e8;
  border:4px ridge #c0c0c0;
  padding:12px;
}
.download-box h3{font-family:Georgia,"Times New Roman",serif;color:#4a260c;margin:0 0 8px;font-size:22px}
.spec-list{margin:0;padding-left:20px}
.spec-list li{margin:6px 0}
.fake-banner{
  background:#ff0000;
  color:#fff;
  border:3px dashed #ffff00;
  font-family:"Courier New",monospace;
  font-weight:bold;
  padding:8px;
  text-align:center;
  margin-bottom:14px;
}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}


/* real-photo additions — still deliberately 2000-ish */
.photo-window{
  border:4px outset #c0c0c0;
  background:#c0c0c0;
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
  margin:12px 0;
}
.photo-title{
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff;
  font-family:"Courier New",monospace;
  font-weight:bold;
  padding:4px 7px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}
.photo-frame{
  background:#f5e5c0;
  border:3px inset #c0c0c0;
  padding:8px;
}
.photo-frame img,
.project-img img,
.polaroid img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.photo-frame img{
  height:260px;
  border:3px solid #2b1707;
  image-rendering:auto;
}
.photo-caption{
  background:#000;
  color:#00ff00;
  font-family:"Courier New",monospace;
  padding:5px 7px;
  font-size:12px;
  border-top:3px inset #777;
}
.web-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:14px 0;
}
.polaroid{
  background:#fff;
  border:4px ridge #c0c0c0;
  padding:7px;
  box-shadow:5px 5px 0 rgba(0,0,0,.25);
}
.polaroid img{
  height:128px;
  border:2px solid #2b1707;
}
.polaroid small{
  display:block;
  margin-top:6px;
  font-family:"Courier New",monospace;
  color:#800000;
  font-weight:bold;
  text-align:center;
}
.hero-box .photo-frame img{height:230px}
.project-img{height:165px;overflow:hidden;position:relative}
.project-img img{border:0}
.project-img .photo-caption{position:absolute;left:0;right:0;bottom:0}
.step-photo{
  width:100%;
  max-height:150px;
  object-fit:cover;
  border:4px ridge #c0c0c0;
  margin-top:7px;
}
.sidebar-photo{
  width:100%;
  height:122px;
  object-fit:cover;
  border:3px inset #c0c0c0;
  background:#000;
}
@media(max-width:760px){
  .web-gallery{grid-template-columns:1fr}
  .photo-frame img,.hero-box .photo-frame img{height:210px}
}