html{ scroll-behavior:smooth; }

:root{
  --cream:#F5F2EC;
  --tile:#EFEBE3;
  --ink:#14161C;
  --soft:#5E5B55;
  --hair:#D9D3C8;
  --gutter:clamp(18px,3.4vw,44px);
  --serif:"EB Garamond","Iowan Old Style",Georgia,serif;
  --display:"Bodoni Moda","Didot",Georgia,serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--serif); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:var(--ink); background:none; border:0; cursor:pointer; }
:focus-visible{ outline:1.5px solid var(--ink); outline-offset:3px; }

.wrap{ padding-inline:var(--gutter); }

/* ---------- announcement ---------- */
.ann{ padding:11px var(--gutter); text-align:center; }
.ann__msg{ font-size:13.5px; letter-spacing:.03em; }
.rule{ height:3px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }

/* ---------- masthead ---------- */
.mast{ padding:26px 0 14px; text-align:center; }
.mast__h{ margin:0; font-weight:400; }
.mast__mark{ width:clamp(190px,26vw,300px); margin:0 auto; opacity:.94; }

.bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:18px; padding-bottom:20px;
}
.bar__l{ font-size:13.5px; color:var(--soft); }
.bar__r{ text-align:right; font-size:14.5px; }
.bar--solo{ grid-template-columns:1fr 1fr; }
.bar__r a{
  font-size:14.5px; letter-spacing:.015em;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.bar__r a:hover{ border-bottom-color:var(--ink); }

/* ---------- hero ---------- */
/* the photograph is printed onto the page's own cream and its edges are
   feathered into it, so there is no panel here to draw a border round --
   only a width that keeps it from becoming a billboard on a wide screen */
.hero{
  max-width:940px; margin:clamp(20px,3vw,42px) auto 0;
  padding-inline:var(--gutter);
}
.hero__shot{ width:100%; height:auto; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--hair); }
.foot__in{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  flex-wrap:wrap; padding:26px 0; font-size:13.5px; color:var(--soft);
}
.foot__mark{ width:104px; opacity:.55; }

/* Desktop: cap the hero so the whole frame fits under the header,
   which puts the bird in the centre of what's actually on screen.
   Mobile keeps the 1/1 frame below. */
@media (max-width:820px){
  .bar{ grid-template-columns:1fr; gap:12px; }
  .bar__l,.bar__r{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- custom page ---------- */
.custom{
  max-width:1180px; margin:clamp(40px,6vw,76px) auto 0;
  padding-bottom:clamp(56px,7vw,96px);
}
/* one measure holds the whole page: heading, copy, spec and form all
   run to the same width, so nothing steps in or out down the column */
.custom__in{ max-width:560px; margin:0 auto; }

/* the heading and its lede open centred; everything below stays left,
   where a spec list and a form belong */
.custom__head{ text-align:center; }
.custom__t{
  font-family:var(--display); font-weight:400; line-height:1.16;
  font-size:clamp(1.8rem,3.6vw,2.5rem); margin:0;
}
.custom__lede{ margin:19px 0 0; color:var(--soft); }
.custom__d{ margin:14px 0 0; color:var(--soft); }

.custom__enq{
  margin:clamp(40px,5.4vw,60px) 0 0; padding-top:clamp(34px,4.4vw,46px);
  border-top:1px solid var(--hair);
}
.custom__st{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,2vw,1.4rem); margin:0;
}
.enq{ margin:26px 0 0; }
.enq__f{ margin:0 0 14px; }
.enq__l{
  display:block; margin:0 0 7px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft);
}
.enq__in{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  padding:11px 14px; background:transparent;
  border:1px solid var(--hair); border-radius:0;
}
textarea.enq__in{ min-height:132px; resize:vertical; }

/* the file input itself covers the box, so a click anywhere opens the
   picker while the input keeps its own focus and label */
.enq__opt{ text-transform:none; letter-spacing:0; font-size:12.5px; opacity:.65; }
.enq__file{
  position:relative; display:flex; align-items:center; gap:14px;
  border:1px solid var(--hair); padding:9px 12px; overflow:hidden;
}
.enq__file input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.enq__file:focus-within{ border-color:var(--ink); }
.enq__fb{
  flex:none; padding:6px 15px; border:1px solid var(--hair);
  font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--soft);
}
.enq__file:hover .enq__fb{ border-color:var(--ink); color:var(--ink); }
.enq__fn{
  font-size:14.5px; color:var(--soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.enq__in::placeholder{ color:#9C968B; }
.enq__in:focus{ border-color:var(--ink); outline:none; }
.enq__b{
  padding:11px 30px; font-size:14px; letter-spacing:.09em; text-transform:uppercase;
  background:var(--ink); color:var(--cream); border:1px solid var(--ink);
  transition:background .2s,color .2s; cursor:pointer;
}
.enq__b:hover{ background:transparent; color:var(--ink); }
.enq__n{ margin:15px 0 0; font-size:14.5px; color:var(--soft); }
.enq__alt{
  margin:22px 0 0; padding-top:20px; border-top:1px solid var(--hair);
  font-size:14.5px; color:var(--soft);
}
.enq__alt a{ color:var(--ink); border-bottom:1px solid var(--hair); }
.enq__alt a:hover{ border-bottom-color:var(--ink); }
.foot__in a{ border-bottom:1px solid transparent; }
.foot__in a:hover{ border-bottom-color:var(--soft); }
.enq__b[disabled]{ opacity:.55; cursor:default; }
.enq__b[disabled]:hover{ background:var(--ink); color:var(--cream); }
/* the honeypot: out of sight, out of the tab order, unread by screen readers */
.enq__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }