/* ==========================================================================
   Lake Pros Dock & Lift Service — demonstration site
   Archetype G: single-screen with anchored panels. No JavaScript.
   Nothing is fixed, sticky or floating anywhere: the page does not scroll
   far enough to need it, which is the point.
   ========================================================================== */

:root{
  --night:#132227;
  --night2:#0d191d;
  --steel:#a8c3c8;
  --amber:#f2a72c;
  --paper:#f2f0ea;
  --face:#fbfaf6;
  --ink:#161c1c;
  --muted:#4a5351;
  --pine:#25543c;
  --burnt:#8a4308;
  --line:#d9d6cc;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  overflow-wrap:break-word;
}

.mono{font-family:var(--mono)}

a{color:var(--pine)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--burnt);
  outline-offset:3px;
}
.office a:focus-visible{outline-color:var(--amber)}

.shell{max-width:1180px;margin:0 auto}

/* ---------------------------------------------------------------- office */

.office{background:var(--night);color:var(--paper)}
.office-in{padding:1.4rem 1.15rem 1.5rem}

.ident{display:flex;align-items:center;gap:.8rem}
.mark{width:52px;height:52px;flex:0 0 auto}
.ident-t{display:flex;flex-direction:column;line-height:1.15}
.biz{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.biz2{font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.tag{margin-top:.3rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}

/* the two links the live site never made clickable */
.reach{display:flex;flex-direction:column;gap:.6rem;margin:1.25rem 0 0}
.reach-btn{
  display:block;text-decoration:none;border-radius:6px;
  padding:.72rem .9rem;
}
.reach-k{
  display:block;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.reach-v{display:block;font-weight:800;letter-spacing:-.02em}

.call{background:var(--amber);color:#20160a}
.call .reach-k{color:#3d2a08}
.call .reach-v{font-size:clamp(1.7rem,7.6vw,2.5rem);line-height:1.1}

.mail{background:#1e343a;color:var(--paper);border:1px solid #375056}
.mail .reach-k{color:var(--steel)}
.mail .reach-v{font-size:clamp(.95rem,3.9vw,1.2rem);line-height:1.25}

.office h1{
  margin:1.5rem 0 .55rem;
  font-size:clamp(1.45rem,5.2vw,2.25rem);
  line-height:1.2;
  letter-spacing:-.018em;
  font-weight:800;
  max-width:22ch;
}
.sub{margin:0;color:var(--steel);font-size:1rem;max-width:52ch}

.openline{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid #2a4046;
  font-size:.78rem;color:var(--steel);
}
.deskaddr{display:none}
.dot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:0 0 auto}

/* --------------------------------------------------------- season index */

.seasons{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border-bottom:1px solid var(--line);
}
.s{
  display:block;text-decoration:none;background:var(--paper);color:var(--ink);
  padding:.62rem .7rem;border-left:4px solid transparent;
}
.s b{display:block;font-size:.86rem;font-weight:800;letter-spacing:.01em}
.s i{display:block;font-style:normal;font-size:.72rem;color:var(--muted);line-height:1.3}
.s:hover{background:#e7e4da}
.s0,.s5{grid-column:1 / -1}

/* active tab: colour AND a bar AND weight — never colour alone */
.shell:not(:has(.panel:target)) .s0,
.shell:has(#start:target)  .s0,
.shell:has(#spring:target) .s1,
.shell:has(#summer:target) .s2,
.shell:has(#fall:target)   .s3,
.shell:has(#winter:target) .s4,
.shell:has(#shop:target)   .s5{
  background:var(--night);border-left-color:var(--amber);color:var(--paper);
}
.shell:not(:has(.panel:target)) .s0 b,
.shell:has(#start:target)  .s0 b,
.shell:has(#spring:target) .s1 b,
.shell:has(#summer:target) .s2 b,
.shell:has(#fall:target)   .s3 b,
.shell:has(#winter:target) .s4 b,
.shell:has(#shop:target)   .s5 b{color:var(--paper)}
.shell:not(:has(.panel:target)) .s0 i,
.shell:has(#start:target)  .s0 i,
.shell:has(#spring:target) .s1 i,
.shell:has(#summer:target) .s2 i,
.shell:has(#fall:target)   .s3 i,
.shell:has(#winter:target) .s4 i,
.shell:has(#shop:target)   .s5 i{color:var(--steel)}

/* -------------------------------------------------------------- panels */

.panels{padding:1.35rem 1.15rem 2rem}

/* Pure-CSS panel swap. Without :has() every panel simply shows, stacked,
   and the page still reads correctly — no content is ever lost. */
.panel{display:none}
.panel:target{display:block}
.shell:not(:has(.panel:target)) #start{display:block}

.eyebrow{
  margin:0 0 .5rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--burnt);font-weight:700;
}
.panel h2{
  margin:0 0 .7rem;
  font-size:clamp(1.3rem,4.6vw,1.9rem);
  line-height:1.25;letter-spacing:-.015em;font-weight:800;
  max-width:26ch;
}
.lede{margin:0 0 1.2rem;font-size:1.05rem;color:var(--muted);max-width:62ch}

/* start panel: four seasons as blocks */
.quad{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.7rem}
.quad a{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--face);border:1px solid var(--line);border-left:5px solid var(--pine);
  border-radius:5px;padding:.8rem .9rem;
}
.quad a:hover{background:#fff;border-left-color:var(--burnt)}
.quad b{font-family:var(--mono);font-size:.78rem;color:var(--burnt);margin-right:.45rem}
.quad a{font-weight:700}
.quad span{display:block;margin-top:.25rem;font-weight:400;font-size:.94rem;color:var(--muted)}

.storm{
  background:var(--night);color:var(--paper);border-radius:6px;
  padding:1.1rem 1rem 1.2rem;
}
.storm-act{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.storm .sm{margin:0;font-size:.72rem;letter-spacing:.06em;color:#8ea7ac;max-width:26ch}
.ptop > *:first-child > h2, .ptop > h2{margin-top:0}
.storm h3{margin:0 0 .45rem;font-size:1.12rem;color:var(--amber)}
.storm p{margin:0 0 .9rem;color:var(--steel);font-size:.98rem;max-width:60ch}
.storm .inline-call{
  display:inline-block;background:var(--amber);color:#20160a;
  padding:.6rem .95rem;border-radius:5px;font-weight:800;text-decoration:none;
}

/* service list */
.svc{list-style:none;margin:0 0 1.4rem;padding:0;counter-reset:svc}
.svc li{
  counter-increment:svc;
  border-top:1px solid var(--line);
  padding:1rem 0 .2rem;
}
.svc li:first-child{border-top:2px solid var(--ink)}
.svc h3{
  margin:0 0 .35rem;font-size:1.06rem;font-weight:800;letter-spacing:-.01em;
}
.svc h3::before{
  content:counter(svc,decimal-leading-zero);
  font-family:var(--mono);font-size:.74rem;color:var(--burnt);
  margin-right:.55rem;vertical-align:.12em;
}
.svc p{margin:0 0 .9rem;color:var(--muted);font-size:.98rem;max-width:62ch}

/* photo placeholder frames */
.frame{margin:0 0 1.3rem}
.ph{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;border:2px dashed #b9b4a6;border-radius:5px;
  background:repeating-linear-gradient(135deg,#eae7dd 0 12px,#e3e0d5 12px 24px);
  padding:1rem;text-align:center;
}
.ph span{font-size:.68rem;letter-spacing:.16em;color:#514b3d;font-weight:700}
.frame figcaption{
  margin-top:.5rem;font-size:.85rem;color:var(--muted);
  border-left:3px solid var(--line);padding-left:.7rem;max-width:60ch;
}

.book{margin:0;font-size:.98rem;color:var(--muted)}
a.inline-call{
  font-weight:800;color:var(--burnt);text-decoration-thickness:2px;
  text-underline-offset:2px;white-space:nowrap;
}

/* shop panel */
.shopgrid{display:grid;gap:.8rem;margin:0 0 1.5rem}
.card{background:var(--face);border:1px solid var(--line);border-radius:5px;padding:.95rem 1rem}
.card h3{margin:0 0 .5rem;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.card h3.h3b{margin-top:1rem}
.card p{margin:0 0 .6rem;font-size:.95rem;color:var(--muted)}
.card p:last-child{margin-bottom:0}
.addr{color:var(--ink) !important;font-size:.88rem !important;line-height:1.5}
.maplink{font-weight:700}

.hours{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.18rem .9rem;font-size:.86rem}
.hours dt{font-weight:700;color:var(--ink)}
.hours dd{margin:0;color:var(--muted)}

/* quote form */
.quote{background:var(--night);color:var(--paper);border-radius:6px;padding:1.2rem 1rem 1.4rem}
.quote h3{margin:0 0 .4rem;font-size:1.1rem;color:var(--amber)}
.qs{margin:0 0 1.1rem;color:var(--steel);font-size:.93rem;max-width:52ch}
.f{margin:0 0 .85rem}
.f label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.3rem}
.f input,.f textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--face);
  border:1px solid #6d8288;border-radius:5px;padding:.6rem .65rem;
}
.f textarea{resize:vertical}
.quote button{
  font:inherit;font-weight:800;font-size:1rem;cursor:pointer;
  background:var(--amber);color:#20160a;border:0;border-radius:5px;
  padding:.75rem 1.3rem;width:100%;
}
.quote button:hover{background:#ffbc4d}

/* -------------------------------------------------------------- footer */

.foot{background:var(--night2);color:var(--steel)}
.foot-in{padding:1.5rem 1.15rem 1.8rem}
.foot a{color:var(--amber)}
.foot-biz{margin:0 0 .9rem;font-size:.93rem;line-height:1.65}
.foot-biz strong{color:var(--paper);font-size:1rem}
.foot-c{margin:0 0 .9rem;font-size:.82rem}
.foot-d{
  margin:0;font-size:.76rem;line-height:1.6;color:#8ea7ac;
  border-top:1px solid #24393e;padding-top:.9rem;max-width:70ch;
}

/* ============================ 620px and up ============================= */
@media (min-width:620px){
  .office-in{padding:2rem 1.8rem 1.9rem}
  .reach{flex-direction:row;align-items:stretch;gap:.7rem}
  .reach-btn{flex:1 1 0;display:flex;flex-direction:column;justify-content:center}
  .seasons{grid-template-columns:repeat(3,1fr)}
  .s0,.s5{grid-column:auto}
  .panels{padding:1.9rem 1.8rem 2.6rem}
  .quad{grid-template-columns:1fr 1fr}
  .shopgrid{grid-template-columns:1fr 1fr}
  .foot-in{padding:2rem 1.8rem 2.2rem}
  .storm,.quote{padding:1.5rem 1.6rem 1.7rem}
  .ptop{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:2.4rem;align-items:end}
  .ptop .lede{margin-bottom:.6rem}
}

/* ============================ 980px and up ============================= */
@media (min-width:980px){
  body{font-size:1.1rem}
  .office-in{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr);
    column-gap:2.6rem;align-items:end;padding:2.4rem 2.4rem 2.1rem;
  }
  .ident{grid-column:1;grid-row:1}
  .office h1{grid-column:1;grid-row:2;margin:1.3rem 0 .55rem;max-width:20ch}
  .sub{grid-column:1;grid-row:3}
  .deskaddr{display:block;grid-column:2;grid-row:3;align-self:end;font-size:.78rem;line-height:1.6;color:var(--steel)}
  .deskaddr p{margin:0 0 .25rem}
  .deskaddr a{color:var(--amber);font-weight:700;font-size:.8rem}
  .reach{grid-column:2;grid-row:1 / span 2;flex-direction:column;margin:0;align-self:start;justify-content:flex-start}
  .reach-btn{flex:0 0 auto}
  .openline{grid-column:1 / -1;grid-row:4;margin-top:1.5rem}
  .seasons{grid-template-columns:repeat(6,1fr)}
  .s{padding:.8rem .85rem}
  .panels{padding:2.4rem 2.4rem 3.2rem;min-height:38vh}
  .quad{grid-template-columns:repeat(4,1fr)}
  .shopgrid{grid-template-columns:repeat(3,1fr)}
  .panel h2{font-size:clamp(1.6rem,2.5vw,2.05rem)}
  .storm{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:2.6rem;align-items:center}
  .storm p{margin-bottom:0}
  .svc{display:grid;grid-template-columns:1fr 1fr;column-gap:2.4rem}
  .frame{max-width:640px}
  .quote-form{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
  .f:nth-child(3){grid-column:1 / -1}
  .quote button{grid-column:1 / -1;width:auto;justify-self:start;padding:.8rem 2.2rem}
  .foot-in{padding:2.4rem 2.4rem 2.6rem;display:grid;grid-template-columns:1fr 1fr;column-gap:2.6rem}
  .foot-biz{grid-column:1;grid-row:1}
  .foot-c{grid-column:1;grid-row:2;margin:0}
  .foot-d{grid-column:2;grid-row:1 / span 2;border-top:0;border-left:1px solid #24393e;padding:0 0 0 2rem}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}