/* P D Patel & Co — Geetha Wood Industries, Madhavaram
   Shared stylesheet. Colours are fixed; see :root below. */

:root{
  --ink:#13110D; --ink-2:#1C1914; --ink-3:#26221C;
  --wash:#E4E5DE; --wash-2:#DADBD2;
  --teak:#C89152; --teak-deep:#8A5A28;
  --padauk:#B4462C; --padauk-deep:#8E3420;

  --bg:var(--ink); --surface:var(--ink-2); --surface-2:var(--ink-3);
  --fg:#EFECE4; --fg-2:#B0A99C; --fg-3:#7C7568;
  --rule:#312C25; --rule-2:#473F35;
  --accent:var(--teak); --hot:var(--padauk);

  --display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --body:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'Cascadia Mono',Consolas,'SF Mono',ui-monospace,monospace;

  --col:min(1600px,100% - 5rem);
  --measure:44rem;

  /* brand brown #684525 is too dark to read on the ink ground, so the
     logo is lifted on dark themes and left untouched on light ones */
  --logo-filter:brightness(1.85) saturate(1.02);
}
@media (max-width:640px){ :root{ --col:min(1600px,100% - 2.2rem) } }

@media (prefers-color-scheme: light){
  :root{
    --bg:var(--wash); --surface:#EDEEE8; --surface-2:var(--wash-2);
    --fg:#17150F; --fg-2:#4F493D; --fg-3:#7E7768;
    --rule:#C5C6BB; --rule-2:#ADAEA2;
    --accent:var(--teak-deep); --hot:var(--padauk-deep);
    --logo-filter:none;
  }
}
:root[data-theme="light"]{
  --bg:var(--wash); --surface:#EDEEE8; --surface-2:var(--wash-2);
  --fg:#17150F; --fg-2:#4F493D; --fg-3:#7E7768;
  --rule:#C5C6BB; --rule-2:#ADAEA2;
  --accent:var(--teak-deep); --hot:var(--padauk-deep);
  --logo-filter:none;
}
:root[data-theme="dark"]{
  --bg:var(--ink); --surface:var(--ink-2); --surface-2:var(--ink-3);
  --fg:#EFECE4; --fg-2:#B0A99C; --fg-3:#7C7568;
  --rule:#312C25; --rule-2:#473F35;
  --accent:var(--teak); --hot:var(--padauk);
  --logo-filter:brightness(1.85) saturate(1.02);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
canvas{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;
  letter-spacing:-.014em}
p{margin:0}
ul{margin:0}
a{color:var(--accent)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#17130C;
  padding:.7rem 1.1rem;font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;z-index:60}
.skip:focus{left:.5rem;top:.5rem}

.wrap{width:var(--col);margin-inline:auto}
.rail{padding-left:0}
@media (min-width:1000px){ .rail{padding-left:5rem} }

/* ---------- scroll rule ---------- */
.tape{position:fixed;left:0;top:0;bottom:0;width:5rem;border-right:1px solid var(--rule);
  background:var(--bg);z-index:40;display:none}
@media (min-width:1000px){ .tape{display:block} }
.tape canvas{position:absolute;inset:0;width:100%;height:100%}
.tape-read{position:absolute;left:0;right:0;bottom:1rem;text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--fg-3)}

/* ---------- masthead ---------- */
.nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.1rem;flex-wrap:wrap}
.mark{font-family:var(--display);line-height:1.14;text-decoration:none;color:inherit;
  display:flex;align-items:center;gap:.85rem}
.mark img{width:2.9rem;height:auto;flex:none;display:block;filter:var(--logo-filter)}
.mark .names{display:block}
.mark span{display:block;font-size:1.18rem;letter-spacing:-.01em}
.mark small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  color:var(--fg-3);text-transform:uppercase;margin-top:.42rem}
.nav ul{display:flex;gap:2rem;list-style:none;padding:0;flex-wrap:wrap;
  font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.nav a{color:var(--fg-2);text-decoration:none;padding-block:.35rem;
  border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:1.6rem}
.theme-toggle{background:none;border:1px solid var(--rule-2);color:var(--fg-2);
  width:2.4rem;height:2.4rem;display:grid;place-items:center;cursor:pointer;
  border-radius:0;padding:0;flex:none}
.theme-toggle:hover,.theme-toggle:focus-visible{color:var(--accent);border-color:var(--accent)}
.theme-toggle svg{width:17px;height:17px;display:none}
.theme-toggle[data-mode="dark"] .i-moon{display:block}
.theme-toggle[data-mode="light"] .i-sun{display:block}

/* ---------- sections ---------- */
.sec{padding-block:6.5rem;border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.5rem}
.h2{font-size:clamp(2rem,3.5vw,3.05rem);line-height:1.14;max-width:22ch}
.lede{max-width:var(--measure);color:var(--fg-2);font-size:1.18rem;line-height:1.62}
.stack{display:flex;flex-direction:column;gap:1.1rem}

/* ---------- hero ---------- */
.hero{display:grid;gap:3rem;align-items:center;grid-template-columns:1fr;
  padding-block:5.5rem 6.5rem}
@media (min-width:900px){ .hero{grid-template-columns:1.08fr .92fr;gap:5rem} }
.hero h1{font-size:clamp(2.7rem,5.2vw,4.7rem);line-height:1.03;max-width:17ch}
.hero h1 em{font-style:italic;color:var(--accent)}
.stamp{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);display:flex;gap:1rem;align-items:center;margin-bottom:1.7rem;flex-wrap:wrap}
.stamp i{width:2.4rem;height:1px;background:var(--rule-2);display:block}
.plate{position:relative;border:1px solid var(--rule);background:var(--surface);
  overflow:hidden;margin:0}
.plate canvas,.plate img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.plate figcaption{position:absolute;left:0;right:0;bottom:0;padding:.75rem 1rem;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:#EFE2CE;background:linear-gradient(to top,rgba(9,7,4,.85),transparent)}

/* ---------- the house ---------- */
.gens{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);
  margin-top:3.5rem;grid-template-columns:1fr}
@media (min-width:1080px){ .gens{grid-template-columns:repeat(3,1fr)} }
.gen{background:var(--bg);padding:2.4rem 2.1rem;display:flex;flex-direction:column;gap:1rem}
.gen .yr{font-family:var(--mono);font-size:13px;letter-spacing:.19em;color:var(--hot)}
.gen h3{font-size:1.62rem}
.gen .role{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin-top:-.6rem}
.gen p{color:var(--fg-2);font-size:1.05rem;line-height:1.62}

/* ---------- timber, forced 3 across ---------- */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-top:3rem;grid-template-columns:1fr}
@media (min-width:700px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .grid{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--bg);padding:1.8rem 1.7rem;display:flex;flex-direction:column;gap:1.05rem}
.card canvas,.card img{width:100%;height:auto;aspect-ratio:2.3;border:1px solid var(--rule);object-fit:cover}
.card h3{font-size:1.42rem}
.card .sci{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;color:var(--fg-3);
  margin-top:-.7rem;font-style:italic}
.card p{color:var(--fg-2);font-size:1rem;line-height:1.58}

.lists{display:grid;gap:3rem;margin-top:3.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.lists h4{font-size:1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--rule-2);
  margin-bottom:1rem}
.lists ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.55rem}
.lists li{font-size:1.03rem;color:var(--fg-2)}

/* ---------- calculator ---------- */
.calcsec{background:var(--surface)}
.dedication{border-left:2px solid var(--hot);padding-left:1.6rem;max-width:var(--measure);
  margin:2.4rem 0 3rem}
.dedication p{font-family:var(--display);font-size:1.42rem;line-height:1.4}
.dedication .sub{font-family:var(--body);font-size:1.03rem;color:var(--fg-2);
  margin-top:.9rem;line-height:1.6}

.calc{border:1px solid var(--rule-2);background:var(--bg)}
.calc-tabs{display:flex;border-bottom:1px solid var(--rule-2)}
.calc-tabs button{flex:1;background:none;border:0;border-right:1px solid var(--rule-2);
  padding:1.15rem .8rem;font-family:var(--mono);font-size:13px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);cursor:pointer}
.calc-tabs button:last-child{border-right:0}
.calc-tabs button[aria-selected="true"]{color:var(--bg);background:var(--accent)}
.calc-body{display:grid;grid-template-columns:1fr}
@media (min-width:860px){ .calc-body{grid-template-columns:1.1fr .9fr} }
.calc-inputs{display:flex;flex-direction:column}
.fields{padding:2.4rem 2.1rem 1.4rem;display:grid;gap:1.4rem 1.5rem;align-content:start;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-inputs .note{padding:0 2.1rem 2.2rem;margin-top:auto}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.field input{background:var(--surface-2);border:1px solid var(--rule-2);color:var(--fg);
  font-family:var(--mono);font-size:1.2rem;padding:.7rem .75rem;width:100%;
  font-variant-numeric:tabular-nums;border-radius:0}
.field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.out{padding:2.4rem 2.1rem;background:var(--surface-2);border-left:1px solid var(--rule-2);
  display:flex;flex-direction:column;gap:1.15rem}
@media (max-width:859px){ .out{border-left:0;border-top:1px solid var(--rule-2)} }
.row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px dotted var(--rule-2);padding-bottom:.5rem}
.row span:first-child{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3)}
.row span:last-child{font-family:var(--mono);font-size:1.28rem;font-variant-numeric:tabular-nums}
.row.big span:last-child{font-size:2.25rem;color:var(--accent)}
.note{font-size:14px;color:var(--fg-3);line-height:1.55}
.btn{background:var(--accent);color:#17130C;border:0;padding:.95rem 1rem;cursor:pointer;
  font-family:var(--mono);font-size:13px;letter-spacing:.15em;text-transform:uppercase;
  border-radius:0;width:100%;display:block;text-align:center;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.btn.ghost{background:none;color:var(--fg-2);border:1px solid var(--rule-2)}
.btn.ghost:hover{color:var(--accent);border-color:var(--accent);filter:none}

/* ---------- projects ---------- */
.roll{list-style:none;padding:0;margin-top:3rem;border-top:1px solid var(--rule);
  columns:2;column-gap:4rem}
@media (max-width:760px){ .roll{columns:1} }
.roll li{border-bottom:1px solid var(--rule);padding:1.25rem .2rem;display:flex;
  justify-content:space-between;gap:1.5rem;align-items:baseline;flex-wrap:wrap;
  break-inside:avoid}
.roll .n{font-family:var(--display);font-size:1.45rem}
.roll .k{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3)}

/* ---------- contact ---------- */
.info{display:grid;gap:3rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.info h3{font-size:1.2rem;margin-bottom:.75rem}
.info address{font-style:normal;color:var(--fg-2);font-size:1.03rem;line-height:1.7}
.info .mono{font-family:var(--mono);font-size:1rem;font-variant-numeric:tabular-nums}
.info a{text-decoration:none;border-bottom:1px solid transparent}
.info a:hover,.info a:focus-visible{border-bottom-color:currentColor}
.caveat{color:var(--fg-3);font-size:.92rem;line-height:1.55;margin-top:.5rem}

footer{padding-block:4rem;color:var(--fg-3);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  align-items:flex-end}
footer .legal{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;max-width:32rem;line-height:2}

/* ---------- pre-launch photo placeholders ----------
   Remove class "is-prelaunch" from <body> once real photographs are in. */
.slots{display:grid;gap:1.2rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr))}

/* a photograph that is actually in */
.shot{margin:0}
.shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  border:1px solid var(--rule);background:var(--surface)}
.shot figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);padding-top:.7rem;line-height:1.5}

/* a photograph still to be taken: only ever shown before launch */
.slot{display:none}
.is-prelaunch .slot{border:1px dashed var(--rule-2);background:var(--surface);aspect-ratio:4/3;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;padding:1.4rem;
  position:relative;overflow:hidden}
.slot::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 12px,var(--rule) 12px 13px);
  opacity:.45}
.slot b,.slot em{position:relative}
.slot b{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hot);font-weight:400}
.slot em{font-style:normal;font-size:15px;color:var(--fg-2);line-height:1.45}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:1.6rem;bottom:1.6rem;z-index:45;width:3rem;height:3rem;
  border:1px solid var(--rule-2);background:var(--surface);color:var(--fg);
  display:grid;place-items:center;cursor:pointer;border-radius:0;padding:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover,.to-top:focus-visible{border-color:var(--accent);color:var(--accent)}
.to-top svg{width:20px;height:20px}
@media (min-width:1000px){ .to-top{right:2rem;bottom:2rem} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}