/* ==========================================================================
   Sanman Realty — site styles

   The design is "The Monograph": an architectural monograph. An asymmetric
   sheet with a wide left rail carrying folios and marginalia, and type doing
   the work rather than photography.

   Colours and type are taken verbatim from "Sanman Realty I Brand Guide.pdf"
   (palette p.36, typography p.39-42). Do not invent new ones.

   The navigation is three links and needs no JavaScript at all: it stacks on
   a phone and sits inline on a desktop. Nothing on this site requires script
   to be readable.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anek+Gujarati:wdth,wght@75..125,100..800&family=Gantari:wght@100..900&display=swap');


:root{
  --plum:#3C3440;
  --slate:#565D72;
  --bone:#F3EBE0;
  --sand:#DABCA4;
  --charcoal:#3A3A3A;
  --terracotta:#A65532;
  --white:#FFFFFF;

  --hair:rgba(86,93,114,.26);          /* slate hairline on bone      */
  --hair-dark:rgba(243,235,224,.20);   /* bone hairline on plum       */

  --ff-display:'Anek Gujarati','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --ff-text:'Gantari','Helvetica Neue',Arial,sans-serif;

  --gut:clamp(20px,5vw,80px);          /* page gutter                 */
  --colgap:clamp(26px,4.2vw,64px);     /* grid column gap             */
  --rail:0px;                          /* marginalia rail, desktop only*/
  --sheet:1440px;
}
@media (min-width:880px){ :root{ --rail:150px } }
@media (min-width:1180px){ :root{ --rail:208px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; scroll-behavior:smooth }
section[id],footer[id]{ scroll-margin-top:clamp(110px,9vw,120px) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--bone);
  color:var(--plum);
  font-family:var(--ff-text);
  font-weight:300;
  font-size:1rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit }
::selection{ background:var(--sand); color:var(--plum) }
:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px }

/* ── type primitives ───────────────────────────────────────────── */

.d{                                     /* the display face         */
  font-family:var(--ff-display);
  font-weight:var(--dw,200);
  font-variation-settings:'wdth' 118,'wght' var(--dw,200);
  text-transform:uppercase;
  margin:0;
}
.lbl{                                   /* small caps, wide track   */
  font-family:var(--ff-text);
  font-weight:400;
  font-size:.75rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--slate);
  line-height:1.5;
  margin:0;
}
.rule{                                  /* terracotta punctuation   */
  display:inline-block;
  width:42px; height:1px;
  background:var(--terracotta);
  vertical-align:.32em;
  margin-right:16px;
}
.folio{                                 /* big accent numeral       */
  --dw:300;
  font-family:var(--ff-display);
  font-weight:300;
  font-variation-settings:'wdth' 118,'wght' 300;
  font-size:1.75rem;      /* ≥24px: large text, accent passes AA   */
  line-height:1;
  letter-spacing:.04em;
  color:var(--terracotta);
}

/* ── the sheet: wide left rail + main column ───────────────────── */

.sheet{
  max-width:var(--sheet);
  margin-inline:auto;
  padding-inline:var(--gut);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:var(--colgap);
  row-gap:clamp(22px,3vw,34px);
}
@media (min-width:880px){
  .sheet{ grid-template-columns:var(--rail) minmax(0,1fr) }
  .sheet > .rail{ grid-column:1 }
  .sheet > .main{ grid-column:2 }
}

.rail{ align-self:start }
.rail__head{ display:flex; align-items:baseline; gap:.75rem }
.rail__hair{ border:0; border-top:1px solid var(--hair); margin:1.1rem 0 0 }

.vrun{                                  /* vertical running head    */
  display:none;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--slate);
  white-space:nowrap;
}
@media (min-width:1180px){ .vrun{ display:block } }

/* ── header ────────────────────────────────────────────────────── */

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--plum); color:var(--bone);
  padding:.75rem 1.25rem; z-index:50;
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:0 }

.head{
  position:sticky; top:0; z-index:40;
  background:var(--bone);
  border-bottom:1px solid var(--hair);
}
.head__in{
  max-width:var(--sheet);
  margin-inline:auto;
  padding:14px var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.head__logo{ display:block; flex:0 0 auto }
.head__logo img{ width:150px; height:68.65px }   /* brand minimum    */

.nav{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.18rem;
}
.nav a{
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--plum);
  padding:2px 0;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
.nav a:hover{ border-bottom-color:var(--terracotta) }
@media (min-width:880px){
  .head__in{ padding:20px var(--gut) }
  .head__logo img{ width:164px; height:75.04px }
  .nav{ flex-direction:row; align-items:center; gap:clamp(22px,2.4vw,40px) }
  .nav a{ font-size:.75rem; letter-spacing:.21em }
}

/* ── hero ──────────────────────────────────────────────────────── */

.hero{ padding-block:clamp(44px,6vw,76px) clamp(52px,7vw,88px) }
.hero__sheet{ row-gap:clamp(26px,3.4vw,46px) }

.hero__eyebrow{
  margin:0 0 clamp(18px,2.2vw,26px);
  color:var(--plum);
  font-size:.6875rem;
  letter-spacing:.15em;
}
.hero__eyebrow .nb{ white-space:nowrap }
@media (min-width:880px){
  .hero__eyebrow{ font-size:.75rem; letter-spacing:.17em }
}
.hero__title{
  --dw:200;
  font-size:clamp(3rem,10.2vw,8.5rem);
  line-height:.88;
  letter-spacing:.012em;
  color:var(--plum);
}
.hero__title em{
  font-style:normal;
  color:var(--slate);
}
.hero__lede{
  margin:0;
  max-width:31em;
  font-size:1.0625rem;
  font-weight:300;
  line-height:1.74;
  color:var(--charcoal);
  text-wrap:pretty;
}
.keys{
  list-style:none;
  display:flex; flex-wrap:wrap;
  margin:clamp(22px,2.6vw,30px) 0 0;
  padding:0;
}
.keys li{
  font-size:.6875rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--slate);
  padding-right:1.15rem; margin-right:1.15rem;
  border-right:1px solid var(--hair);
  line-height:1.2;
}
.keys li:last-child{ border-right:0; padding-right:0; margin-right:0 }

.plate{ margin:0 }
.plate img{ width:100% }
.plate figcaption{
  margin-top:.85rem;
  padding-top:.7rem;
  border-top:1px solid var(--terracotta);
  font-size:.6875rem; font-weight:400;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--slate);
}

@media (min-width:880px){
  .hero__sheet{
    grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,300px);
  }
  .hero__rail { grid-column:1; grid-row:1 / span 2; align-self:end; justify-self:start }
  .hero__body { grid-column:2 / 4; grid-row:1 }
  .hero__lede-w{ grid-column:2; grid-row:2; align-self:start }
  .hero__fig  { grid-column:3; grid-row:2; align-self:end }
}
@media (min-width:1180px){
  .hero__sheet{ grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,360px) }
}

/* ── section furniture ─────────────────────────────────────────── */

.sec{ padding-block:clamp(56px,7.5vw,112px) }
.sec--rule{ border-top:1px solid var(--hair) }
.sec__title{
  --dw:200;
  font-size:clamp(2.125rem,5.4vw,4.25rem);
  line-height:.96;
  letter-spacing:.015em;
  color:var(--plum);
  margin:0 0 clamp(26px,3vw,40px);
}

/* ── I. practice ───────────────────────────────────────────────── */

.story{
  margin:0;
  max-width:29em;
  font-size:clamp(1.125rem,1.55vw,1.3125rem);
  font-weight:200;
  line-height:1.64;
  color:var(--plum);
  text-wrap:pretty;
}
.story__after{
  margin:clamp(26px,3vw,36px) 0 0;
  padding-top:1.15rem;
  border-top:1px solid var(--terracotta);
  max-width:29em;
  font-size:.9375rem;
  font-weight:300;
  line-height:1.72;
  color:var(--charcoal);
}
.portrait{ margin:.5rem 0 0; max-width:170px }
/* desktop: portrait drops into the rail. mobile: it follows the text. */
@media (min-width:880px){
  .sheet--about > .rail    { grid-column:1; grid-row:1 }
  .sheet--about > .main    { grid-column:2; grid-row:1 / span 2 }
  .sheet--about > .portrait{ grid-column:1; grid-row:2; align-self:start; margin-top:0 }
}
.portrait img{ width:100% }
.portrait figcaption{
  margin-top:.7rem;
  font-size:.6875rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); line-height:1.6;
}
@media (max-width:879px){ .portrait{ max-width:150px } }

/* ── II. projects ──────────────────────────────────────────────── */

.projects{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(42px,5vw,56px);
}
@media (min-width:720px){
  .projects{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(44px,5vw,76px);
  }
}
.proj__head{
  display:flex; align-items:baseline; gap:1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--hair);
  margin-bottom:clamp(18px,2vw,24px);
}
.proj__name{
  --dw:400;
  font-size:clamp(1.25rem,1.6vw,1.5rem);
  line-height:1.1;
  letter-spacing:.055em;
  color:var(--plum);
}
.proj__plate{ margin:0 0 clamp(18px,2vw,24px) }
.proj__plate img{ width:100% }

.spec{ margin:0; font-size:.875rem }
.spec__row{
  display:grid;
  grid-template-columns:7.5rem minmax(0,1fr);
  gap:0 1rem;
  padding:.6rem 0;
  border-top:1px solid var(--hair);
}
.spec__row:last-child{ border-bottom:1px solid var(--hair) }
.spec dt{
  font-size:.6875rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate);
  line-height:2;
}
.spec dd{
  margin:0;
  font-weight:300;
  line-height:1.5;
  color:var(--plum);
}
.spec dd span{
  display:block;
  color:var(--slate);
  font-size:.8125rem;
}
.spec dd.dash{ color:var(--slate) }

/* ── III. enquiries / footer ───────────────────────────────────── */

.foot{
  background:var(--plum);
  color:var(--bone);
  padding-block:clamp(56px,7.5vw,104px) clamp(26px,3vw,38px);
}
.foot .lbl{ color:var(--sand) }
.foot .folio{ color:var(--sand) }
.foot .rail__hair{ border-top-color:var(--hair-dark) }
.foot__title{
  --dw:200;
  font-size:clamp(2.125rem,5.4vw,4.25rem);
  line-height:.96;
  letter-spacing:.015em;
  color:var(--bone);
  margin:0 0 clamp(30px,3.4vw,44px);
}
.foot__mark{
  display:block;
  width:56px; height:2px;
  background:var(--terracotta);
  margin-bottom:clamp(26px,3vw,36px);
}
.contact{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,3vw,40px);
  max-width:56rem;
}
@media (min-width:640px){
  .contact{ grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) }
}
.contact dt{
  font-size:.6875rem; font-weight:400;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--sand);
  padding-bottom:.7rem;
  margin-bottom:.9rem;
  border-bottom:1px solid var(--hair-dark);
}
.contact dd{
  margin:0;
  font-size:.9375rem; font-weight:300;
  line-height:1.78;
  color:var(--bone);
}
.contact a{
  color:var(--bone);
  text-decoration:none;
  border-bottom:1px solid rgba(218,188,164,.55);
  padding-bottom:1px;
  transition:border-color .18s ease;
  overflow-wrap:anywhere;
}
.contact a:hover{ border-bottom-color:var(--sand) }

.colophon{
  margin-top:clamp(52px,6.5vw,88px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--hair-dark);
  display:flex; flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:26px;
}
.colophon img{
  width:150px; height:68.65px;
  filter:invert(1) brightness(1.6);
  opacity:.9;
}
.colophon__right{ text-align:left }
.colophon__tag{
  --dw:300;
  font-family:var(--ff-display);
  font-weight:300;
  font-variation-settings:'wdth' 118,'wght' 300;
  text-transform:uppercase;
  font-size:.9375rem;
  letter-spacing:.3em;
  color:var(--sand);
  margin:0 0 .5rem;
}
.colophon__fine{
  margin:0;
  font-size:.6875rem; font-weight:300;
  letter-spacing:.09em;
  color:rgba(243,235,224,.62);
}
@media (min-width:640px){ .colophon__right{ text-align:right } }

/* ── mobile marginalia strip ───────────────────────────────────── */

@media (max-width:879px){
  .rail__head{ gap:.65rem }
  .rail__hair{ margin-top:.85rem }
}

/* ==========================================================================
   Corrections and additions

   The two faults an audit at 320px and 375px found in the original design,
   plus the components the four real pages need and the demo did not have.
   ========================================================================== */

/* ---------------------------------------------- readable on a phone ---- */
/* 14px body text is fine on a desk and tiring on a phone held at arm's
   length in daylight. Nothing that carries meaning drops below 15px. */
.spec { font-size: .9375rem; }
.spec dd span { font-size: .875rem; }
@media (min-width: 880px) {
  .spec { font-size: .875rem; }
  .spec dd span { font-size: .8125rem; }
}

/* ------------------------------------------------- reachable by thumb -- */
/* A link 16px tall is a link most people miss. On anything touch-sized the
   navigation and the contact details get a 44px target, which is the size
   Apple and Google both settled on. */
@media (max-width: 879px) {
  .nav a { padding: .75rem 0; min-height: 44px; display: flex; align-items: center; }
  .contact a { display: inline-block; padding-block: .45rem; }
  .keys li { padding-block: .3rem; }
}

/* The current page is marked, so a visitor always knows where they are. */
.nav a[aria-current="page"] { border-bottom-color: var(--terracotta); color: var(--plum); }

/* --------------------------------------------------------- long text -- */
.prose { max-width: 34em; }
.prose p { margin: 0 0 1.15em; font-size: 1rem; line-height: 1.75; color: var(--charcoal); }
.prose p:last-child { margin-bottom: 0; }
.prose p strong { font-weight: 500; color: var(--plum); }
.prose h3 {
  --dw: 400;
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 118, 'wght' 400;
  text-transform: uppercase;
  font-size: 1.0625rem; letter-spacing: .05em;
  margin: clamp(28px, 3vw, 40px) 0 .75rem;
  color: var(--plum);
}

/* An action that is not a form button: the house "read on" link. */
.more {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--plum);
  padding-block: .55rem;
  border-bottom: 1px solid var(--terracotta);
}
.more::after { content: '\2192'; font-size: 1rem; line-height: 1; }
.more:hover { color: var(--terracotta); }
.foot .more { color: var(--bone); border-bottom-color: var(--sand); }

/* ------------------------------------------------------------- form --- */
/* Lives on the plum footer ground, so it inherits the footer's colours. */
.form { max-width: 30rem; }
.field { position: relative; margin-bottom: 1.6rem; }
.field label {
  display: block;
  font-size: .6875rem; font-weight: 400;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--sand);
  margin-bottom: .5rem;
}
.field input, .field textarea {
  width: 100%;
  min-height: 44px;                 /* a thumb-sized target again */
  background: transparent;
  border: 0; border-bottom: 1px solid var(--hair-dark);
  border-radius: 0;                 /* iOS rounds these otherwise */
  color: var(--bone);
  font-family: var(--ff-text);
  font-size: 1rem;                  /* under 16px, iOS zooms the page in */
  font-weight: 300;
  padding: .55rem 0;
}
.field textarea { resize: vertical; min-height: 5rem; line-height: 1.6; }
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--terracotta);
}
.btn {
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 44px;
  background: none; border: 0; cursor: pointer;
  padding: .6rem 0;
  color: var(--sand);
  font-family: var(--ff-text);
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid var(--terracotta);
}
.btn::after { content: '\2192'; font-size: 1rem; line-height: 1; }
.btn:hover { color: var(--bone); }
.form-status { margin: 1.1rem 0 0; font-size: .875rem; color: var(--sand); min-height: 1.4rem; }

/* ---------------------------------------------------- placeholders ---- */
/* Marks what is not real yet. Deliberately conspicuous: it should be
   impossible to publish an unfinished page by accident. */
.todo {
  border: 1px dashed var(--terracotta);
  background: rgba(166, 85, 50, .055);
  padding: 1.15rem 1.3rem;
  margin: clamp(26px, 3vw, 38px) 0 0;
  max-width: 34em;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--charcoal);
}
.todo b {
  display: block;
  font-weight: 500; font-size: .6875rem;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .5rem;
}
.todo ul { margin: .7rem 0 0; padding-left: 1.1rem; }
.todo li { margin-bottom: .35rem; }

/* ------------------------------------------------------------ 404 ----- */
.lost { padding-block: clamp(72px, 12vw, 160px); }
.lost__links { list-style: none; margin: clamp(28px,3vw,40px) 0 0; padding: 0; }
.lost__links li { margin-bottom: .2rem; }

/* ------------------------------------------------------- utilities ---- */
.stack > * + * { margin-top: 1.15em; }
.measure { max-width: 34em; }

/* ------------------------------------------------------- dark band ---- */
/* A section on the plum ground, mid-page. The contact form lives in one, so
   the form controls inherit the same colours they do in the footer. */
.sec--dark { background: var(--plum); color: var(--bone); }
.sec--dark .sec__title { color: var(--bone); }
.sec--dark .lbl { color: var(--sand); }
.sec--dark .folio { color: var(--sand); }
.sec--dark .rail__hair { border-top-color: var(--hair-dark); }
.sec--dark .prose p { color: rgba(243, 235, 224, .84); }
.sec--dark .prose p strong { color: var(--bone); }
.sec--dark .story { color: var(--bone); }
.sec--dark .story__after { color: rgba(243, 235, 224, .78); }

/* ------------------------------------------- last of the phone fixes --- */
/* Measured at 320-414px, where these were the only things left failing. */

/* The "read on" link came out 39px tall — one pixel under a reliable thumb
   target, which is exactly the kind of near-miss that never gets noticed. */
@media (max-width: 879px) {
  .more { min-height: 44px; }
  .btn  { min-height: 44px; }
}

/* Eyebrows and the colophon were set at 11px. That is fine print on a desk
   and a squint on a phone held at arm's length, so they grow on small
   screens and shrink back on large ones — the opposite of the usual
   instinct, and the right way round. */
.hero__eyebrow { font-size: .9375rem; }
.colophon__fine { font-size: .9375rem; }
@media (min-width: 880px) {
  .hero__eyebrow { font-size: .75rem; }
  .colophon__fine { font-size: .6875rem; }
}

/* A telephone number and an email address inside a schedule are the two most
   likely things anyone taps on a phone, so they get the same treatment as the
   ones in the footer — and the address is allowed to break rather than push
   the page sideways on a 320px screen. */
.spec a { overflow-wrap: anywhere; }
@media (max-width: 879px) {
  .spec a {
    display: inline-block;
    min-height: 44px;
    padding-block: .55rem;
  }
}