/* Periit · periit.co · styles_v3
   Layout: white page, logo lockup top-left and plain text nav top-right, generous whitespace,
   photographs in a two-column grid with letter-spaced uppercase titles, thin grey rules between
   sections, label-left / content-right rows for reference material. Single light theme by design. */
:root{
  --bg:#FFFFFF;
  --surface:#F4F4F2;
  --ink:#121212;
  --text:#1E1E1E;
  --muted:#707070;
  --line:#DCDCDC;
  --accent:#A4622C;        /* warm bronze, links and the double i only */
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.75; letter-spacing:.03em;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:0;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{text-wrap:balance; margin:0}
p{margin:0}
.page{max-width:1240px; margin:0 auto}

/* ---- header ---- */
.top{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-block:40px 32px}
.logo{display:grid; gap:5px; text-decoration:none; color:var(--ink); line-height:1}
.logo .word{font-size:30px; font-weight:600; letter-spacing:.22em; text-transform:uppercase}
.logo .sub{font-size:9px; font-weight:500; letter-spacing:.36em; text-transform:uppercase; color:var(--muted); padding-left:.1em}
.ii{color:var(--accent)}
.top nav{display:flex; gap:28px; flex-wrap:wrap}
.top nav a{
  font-size:14px; letter-spacing:.1em; color:#333; text-decoration:none; padding-block:6px;
  border-bottom:1px solid transparent; transition:color .15s,border-color .15s;
}
.top nav a:hover,.top nav a:focus-visible{color:var(--ink); border-bottom-color:var(--ink); outline:none}
.top nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}

/* ---- type ---- */
.eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.title{font-size:28px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); line-height:1.2}
.sub{font-size:21px; font-weight:300; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); line-height:1.3}
.statement{
  font-size:clamp(22px, 2.4vw, 30px); font-weight:300; letter-spacing:.005em; line-height:1.4;
  color:var(--ink); max-width:30ch;
}
.lede{color:var(--text); max-width:72ch}
.prose{max-width:78ch; display:grid; gap:18px}
.prose p{max-width:78ch}
.quiet{color:var(--muted)}
.small{font-size:13px}
.cap{font-size:12px; font-style:italic; letter-spacing:.08em; color:var(--text); margin-top:10px}
.cap b{font-style:normal; font-weight:500; text-transform:uppercase}
a.link{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s}
a.link:hover,a.link:focus-visible{border-bottom-color:var(--accent); outline:none}

/* ---- sections ---- */
section{padding-block:56px}
section.hair{border-top:1px solid var(--line)}
.intro{display:grid; gap:22px; padding-block:24px 64px}
.head{display:grid; gap:14px; margin-bottom:36px}

/* photo grid */
.works{display:grid; grid-template-columns:1fr 1fr; gap:40px 28px}
.work{min-width:0}
.work .photo{aspect-ratio:4/3; background:var(--surface); overflow:hidden; max-width:100%}
.work .photo img{display:block; width:100%; height:100%; object-fit:cover}
.work h3{font-size:16px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); margin-top:16px; line-height:1.4}
.work small{display:block; font-size:12px; letter-spacing:.06em; color:var(--muted); margin-top:4px}
.note{font-size:12px; font-style:italic; letter-spacing:.06em; color:var(--muted); margin-top:28px}

/* three columns */
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:48px}
.cols3 > div{min-width:0; display:grid; gap:14px; align-content:start}
.cols3 h3{font-size:13px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink)}

/* label / content rows */
.rows{display:grid; grid-template-columns:230px 1fr; gap:26px 56px; align-items:start}
.rows .lab{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding-top:3px; min-width:0}
.rows .val{min-width:0; max-width:78ch; display:grid; gap:4px}
.rows .val h4{font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink)}
.rows .val p{max-width:78ch}
.rows.tight{gap:18px 56px}

/* two column */
.two{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.two > div{min-width:0}
.two.wide{grid-template-columns:7fr 5fr}
.photo{background:var(--surface); overflow:hidden; max-width:100%}
.photo img{display:block; width:100%; height:100%; object-fit:cover}
.photo.r32{aspect-ratio:3/2}
.photo.r43{aspect-ratio:4/3}
.photo.r45{aspect-ratio:4/5}
.photo.rsq{aspect-ratio:1/1}
.photo.print{background:#FFFFFF}

/* buttons */
.btn{
  display:inline-block; font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--bg); text-decoration:none; border:1px solid var(--ink); padding:13px 24px;
  cursor:pointer; border-radius:0; transition:background .15s,color .15s;
}
.btn:hover{background:var(--ink); color:var(--bg)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:disabled{opacity:.5; cursor:default}

/* arch drawing */
.figure svg{width:100%; max-width:520px; height:auto; display:block; margin-left:auto}
#arch .ink line,#arch .ink path{stroke:var(--ink); stroke-width:1; fill:none; vector-effect:non-scaling-stroke; stroke-linecap:square}
#arch .ink .key{fill:#EFEFED}
#arch .ink .grade{stroke-width:1.25}
#arch .ink .spring{stroke:#A8A8A8; stroke-dasharray:3 4}
#arch .dims line{stroke:#A8A8A8; stroke-width:1; fill:none; vector-effect:non-scaling-stroke}
#arch .dims .tick{stroke:var(--ink)}
#arch .cl{stroke:#A8A8A8; stroke-width:1; fill:none; stroke-dasharray:14 4 2 4; vector-effect:non-scaling-stroke}
#arch text{font-family:var(--sans); font-size:10px; fill:var(--muted); letter-spacing:.14em}
@media (max-width:600px){ #arch text{font-size:14px} }

/* contact form */
.form{display:grid; gap:18px; max-width:620px}
.field{display:grid; gap:8px; min-width:0}
.field label{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:15px; letter-spacing:.02em; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:0; padding:12px 14px; width:100%; min-width:0;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none; border-color:var(--ink)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form .foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.form .msg{font-size:13px; letter-spacing:.04em; color:var(--muted)}
.copy{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; background:none;
  border:1px solid var(--line); color:var(--muted); padding:6px 10px; cursor:pointer; border-radius:0; margin-left:12px;
  transition:border-color .15s,color .15s; vertical-align:middle;
}
.copy:hover{border-color:var(--ink); color:var(--ink)}
.copy:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.email{font-size:17px; letter-spacing:.02em}

/* credits */
.credits{display:grid; gap:0; border-top:1px solid var(--line)}
.credits li{display:grid; grid-template-columns:2fr 2fr 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; letter-spacing:.03em; min-width:0; list-style:none}
.credits li span{min-width:0; overflow-wrap:anywhere}
.credits{padding:0; margin:0}

/* footer */
footer{border-top:1px solid var(--line); padding-block:28px 64px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
footer a{text-decoration:none; color:var(--muted)}
footer a:hover{color:var(--ink)}

/* ---- responsive ---- */
@media (max-width:900px){
  .cols3{grid-template-columns:1fr}
  .two,.two.wide{grid-template-columns:1fr; gap:40px}
  .rows{grid-template-columns:1fr; gap:6px 0}
  .rows .lab{padding-top:0; margin-top:18px}
  .rows .lab:first-child{margin-top:0}
  .top{padding-block:28px 24px}
  .top nav{gap:20px}
  .figure svg{margin-left:0}
}
@media (max-width:640px){
  .works{grid-template-columns:1fr; gap:34px}
  .row2{grid-template-columns:1fr}
  .credits li{grid-template-columns:1fr}
  .logo .word{font-size:26px}
  section{padding-block:44px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }