@font-face {
  font-family:Giia Editorial;
  src:url(assets/type/editorial-17-regular.woff) format("woff");
  font-display:swap;
}

@font-face {
  font-family:Giia Editorial;
  src:url(assets/type/editorial-12-italic.woff) format("woff");
  font-display:swap;
  font-style:italic;
}

:root {
  --paper:#faf7ef;
  --cream:#f3efe3;
  --ink:#342f26;
  --muted:#605e51;
  --olive:#515538;
  --clay:#925b40;
  --line:#d7d1c1;
  --serif:"Giia Editorial",Georgia,serif;
  --gutter:clamp(20px,5.3vw,90px);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:22px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 Arial,Helvetica,sans-serif;
  -webkit-text-size-adjust:100%;
}

[hidden] {
  display:none!important;
}

a {
  color:inherit;
  text-decoration:none;
}

button,summary {
  cursor:pointer;
}

button {
  color:inherit;
  font:inherit;
}

a,button,summary {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #bd7140;
  outline-offset:4px;
}

img {
  display:block;
  max-width:100%;
}

figure,blockquote,h1,h2,h3,h4,p {
  margin:0;
}

h1,h2,h3,.brand,blockquote {
  font-family:var(--serif);
  font-weight:400;
}

h1,h2,h3 {
  line-height:1.01;
}

h2 {
  font-size:clamp(43px,4.8vw,78px);
  letter-spacing:-.056em;
}

h3 {
  font-size:clamp(30px,2.5vw,42px);
  letter-spacing:-.04em;
}

em {
  color:var(--clay);
  font-weight:400;
}

.shell {
  width:min(100%,1560px);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section {
  padding-block:clamp(60px,7vw,108px);
}

.skip {
  position:fixed;
  top:-6em;
  left:12px;
  background:var(--paper);
  padding:12px;
  z-index:20;
}

.skip:focus {
  top:10px;
}

.mast {
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:relative;
  z-index:3;
}

.mast-in,.foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.mast-in {
  min-height:82px;
}

.brand {
  display:inline-flex;
  align-items:baseline;
  font-size:43px;
  line-height:1;
  letter-spacing:-.08em;
  white-space:nowrap;
}

.brand i {
  font-weight:400;
}

.brand span {
  color:var(--olive);
  font:16px Georgia;
  margin-left:5px;
  align-self:flex-start;
}

nav,.actions,.direct,.arrows {
  display:flex;
  align-items:center;
}

nav {
  gap:clamp(20px,2.5vw,44px);
}

nav a,.text-link,.direct a,.foot a:not(.brand) {
  font-size:14px;
}

nav a:hover,.foot a:hover,.direct a:hover,.text-link:hover {
  color:var(--clay);
}

.button {
  background:var(--olive);
  color:white;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  border-radius:50px;
  padding:14px 24px;
  min-height:50px;
  font-size:15px;
  font-weight:500;
  transition:background .2s,transform .2s;
}

.button:hover {
  background:#383d29;
  transform:translateY(-2px);
}

.button b,.text-link b {
  font:19px/1 Arial;
}

.header-book {
  min-height:44px;
  padding:10px 19px;
  font-size:14px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-color:#aba287;
  text-decoration-thickness:1px;
}

.hero {
  background:var(--cream);
  overflow:hidden;
}

.hero-grid {
  position:relative;
  display:grid;
  grid-template-columns:.94fr 1.06fr;
  gap:clamp(35px,4vw,80px);
  align-items:center;
  padding-block:clamp(30px,3.3vw,55px) 24px;
}

.intro {
  position:relative;
  padding-block:14px 48px;
}

.kicker,.ribbon-in,.card-image>span,.studio-photo figcaption,.frame-name>span {
  font-size:11px;
  line-height:1.5;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.17em;
}

.kicker {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--olive);
}

.rule {
  display:inline-block;
  width:29px;
  height:1px;
  background:currentColor;
}

.dot {
  color:#8d866c;
}

h1 {
  font-size:clamp(74px,7.45vw,120px);
  letter-spacing:-.065em;
  line-height:.97;
  margin:30px 0 24px;
}

h1 em {
  display:block;
}

.hero-copy {
  max-width:390px;
  color:var(--muted);
  font-size:clamp(16px,1.18vw,20px);
  line-height:1.65;
}

.actions {
  flex-wrap:wrap;
  gap:clamp(20px,2.1vw,38px);
  margin-top:29px;
}

.cover {
  min-width:0;
  position:relative;
}

.portrait {
  position:relative;
  border-radius:48% 48% 3px 3px / 40% 40% 3px 3px;
  overflow:hidden;
  background:#a37951;
}

.portrait img {
  width:100%;
  height:clamp(385px,32vw,530px);
  object-fit:cover;
  object-position:50% 49%;
}

.seal {
  position:absolute;
  width:clamp(82px,7.6vw,115px);
  height:auto;
  bottom:67px;
  left:0;
  transform:translateX(-47%) rotate(-12deg);
  filter:drop-shadow(0 3px 4px #312b2218);
}

.cover figcaption,.catalog-note,.section-title,.studio-photo figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.cover figcaption {
  padding:11px 0 0;
}

.frame-name {
  display:flex;
  align-items:center;
  gap:15px;
}

.frame-name>span {
  font-size:10px;
  letter-spacing:.11em;
  color:var(--muted);
  border-right:1px solid #b6af99;
  padding-right:14px;
}

.frame-name i {
  font:italic 23px var(--serif);
}

.arrows {
  gap:4px;
}

.arrows button {
  border:1px solid var(--line);
  background:transparent;
  border-radius:50%;
  width:44px;
  height:44px;
  font-size:19px;
}

.arrows button:hover {
  border-color:var(--olive);
  background:var(--paper);
}

.ribbon {
  background:var(--olive);
  color:#f4f0e1;
}

.ribbon-in {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:16px;
  font-weight:500;
  font-size:10px;
  letter-spacing:.16em;
}

.orn {
  font-size:16px;
  color:#c7c49e;
}

.section-title {
  align-items:end;
  margin:15px 0 35px;
}

.section-title>p {
  color:var(--muted);
  max-width:395px;
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,34px);
  align-items:start;
}

.card {
  min-width:0;
}

.card-image {
  overflow:hidden;
  position:relative;
  background:var(--cream);
}

.card-image img {
  width:100%;
  height:auto;
  aspect-ratio:1.75;
  object-fit:cover;
  transition:transform .5s ease;
}

.card:hover .card-image img {
  transform:scale(1.024);
}

.card-image>span {
  position:absolute;
  left:13px;
  bottom:13px;
  background:var(--paper);
  padding:4px 11px;
  border-radius:20px;
  letter-spacing:.11em;
  font-size:10px;
  color:var(--olive);
}

.card-body {
  padding:21px 0 0;
}

.card-body>p {
  color:var(--muted);
  margin:9px 0 18px;
  min-height:3.1em;
}

.card details,.faq details {
  border-block:1px solid var(--line);
}

summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:49px;
  font-size:15px;
  font-weight:600;
}

summary::-webkit-details-marker {
  display:none;
}

summary:after {
  content:"+";
  font:23px/1 Arial;
  color:var(--olive);
}

details[open]>summary:after {
  content:"−";
}

summary:hover {
  color:var(--clay);
}

.card ul {
  padding:0;
  margin:0;
  list-style:none;
}

.card li {
  border-top:1px solid var(--line);
  padding:14px 0;
}

.card li h4 {
  font-size:16px;
}

.card li p {
  margin:4px 0;
  color:var(--muted);
  font-size:15px;
}

.service-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:14px;
}

.service-action span {
  color:var(--clay);
  font-weight:600;
}

.service-action a,.direct a,.foot>a:not(.brand) {
  padding-block:12px;
}

.service-action a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.catalog-note {
  margin-top:25px;
  color:var(--muted);
  font-size:13px;
}

.catalog-note .text-link {
  flex-shrink:0;
}

.studio {
  background:#eae6d7;
}

.studio-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,7vw,100px);
  align-items:center;
  padding-block:clamp(52px,6vw,92px);
}

.studio-photo img {
  width:100%;
  height:auto;
  aspect-ratio:1.36;
  object-fit:cover;
  border-radius:2px;
}

.studio-photo figcaption {
  flex-wrap:wrap;
  gap:4px;
  padding-top:11px;
  letter-spacing:.08em;
  font-size:10px;
}

.studio-photo figcaption span {
  font:12px/1.5 Arial;
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
}

.studio h2,.contact h2,.faq h2 {
  margin:20px 0;
}

.studio-grid>div>p:not(.kicker) {
  margin:14px 0;
  color:var(--muted);
  max-width:460px;
}

.studio .text-link {
  margin-top:6px;
}

.gallery {
  padding-bottom:clamp(48px,5vw,76px);
}

.gallery-band {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#4c5038;
  color:#faf7eb;
  padding:clamp(30px,4.3vw,70px);
  margin-top:22px;
}

.gallery-band h2 em {
  color:#ded5b6;
}

.gallery-band p {
  margin:17px 0 23px;
  max-width:480px;
  color:#f0eee1;
}

.gallery-orn {
  position:absolute;
  right:-2%;
  top:-15%;
  height:130%;
  width:44%;
  z-index:-1;
  background:center/contain no-repeat url(assets/bloom.svg);
  opacity:.85;
}

.button.light {
  background:var(--paper);
  color:var(--olive);
}

.button.light:hover {
  background:#fff;
}

.work-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:22px;
  margin-top:24px;
}

.work-grid img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.work-grid figcaption {
  padding:8px 0;
}

.opinions {
  padding-bottom:clamp(60px,7vw,108px);
}

.quotes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,65px);
}

.quotes figure {
  position:relative;
  border-block:1px solid var(--line);
  padding:28px 10px 26px 47px;
}

.quotes figure>span {
  position:absolute;
  left:0;
  top:17px;
  font:58px var(--serif);
  color:var(--clay);
}

blockquote {
  font-size:clamp(25px,2.15vw,35px);
  line-height:1.19;
}

.quotes figcaption {
  margin-top:22px;
  font-size:15px;
}

.quotes small {
  color:var(--muted);
  display:block;
  margin-top:2px;
  font-size:14px;
}

.contact {
  background:var(--cream);
}

.contact-grid,.faq {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,7vw,120px);
}

.contact-grid {
  margin-top:20px;
}

.contact-grid h2 {
  margin:0 0 24px;
}

.contact-grid p {
  font-size:17px;
}

.contact-grid p.bus {
  font-size:14px;
  color:var(--muted);
  margin-top:15px;
}

.contact-card {
  background:var(--paper);
  padding:clamp(22px,3vw,44px);
  border:1px solid var(--line);
}

dl {
  margin:16px 0 8px;
}

dl>div {
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:8px 0;
}

dd {
  margin:0;
}

.contact-card small {
  display:block;
  color:var(--muted);
  font-size:13px;
}

.contact-card>.button {
  margin:19px 0 3px;
}

.direct {
  flex-wrap:wrap;
  gap:0 20px;
}

.direct a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.faq details+details {
  border-top:0;
}

.faq details p {
  color:var(--muted);
  padding:0 10px 18px 0;
}

.faq details a,.legal p a {
  text-decoration:underline;
}

footer {
  border-top:1px solid var(--line);
}

.foot {
  flex-wrap:wrap;
  padding-block:25px;
  justify-content:start;
}

.foot .brand {
  font-size:34px;
}

.foot>span {
  margin-right:auto;
  font-size:13px;
  color:var(--muted);
}

.mobile-book {
  display:none;
}

.legal {
  max-width:880px;
}

.legal h1 {
  font-size:clamp(62px,7vw,98px);
}

.legal h2 {
  font-size:34px;
  margin:30px 0 12px;
}

.legal p {
  max-width:660px;
  margin-bottom:12px;
}

@media(min-width:861px) and (prefers-reduced-motion:no-preference) {
  .intro,.cover {
    animation:arrive .6s both;
  }
  .cover {
    animation-delay:.08s;
  }
  @keyframes arrive {
    from {
      opacity:.3;
      transform:translateY(8px);
    }
    to {
      opacity:1;
      transform:translateY(0);
    }
  }
}

@media(max-width:860px) {
  .mast-in {
    min-height:67px;
    flex-wrap:wrap;
    gap:8px;
  }
  .brand {
    font-size:37px;
  }
  .header-book {
    margin-left:auto;
  }
  #menu-button {
    border:0;
    background:none;
    min-height:44px;
    padding-inline:10px;
    font-size:15px;
  }
  #menu-button span {
    margin-left:5px;
  }
  nav {
    width:100%;
    order:4;
    gap:0;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:5px 0 12px;
  }
  nav a {
    padding:10px 5px;
  }
  .hero-grid {
    gap:25px;
  }
  .intro {
    padding-bottom:20px;
  }
  h1 {
    font-size:clamp(64px,8.5vw,78px);
  }
  .portrait img {
    height:350px;
  }
  .section-title>p {
    max-width:320px;
  }
  .cards {
    gap:18px;
  }
  .studio-grid {
    gap:35px;
  }
  .ribbon-in {
    font-size:9px;
  }
  .foot {
    gap:10px 18px;
  }
}

@media(max-width:740px) {
  .hero-grid {
    grid-template-columns:1fr;
    gap:23px;
    padding-block:27px 13px;
  }
  .intro {
    padding:0;
  }
  .kicker {
    font-size:10px;
    gap:10px;
  }
  h1 {
    font-size:clamp(60px,12.7vw,82px);
    line-height:.93;
    margin:19px 0 15px;
  }
  h1 br {
    display:none;
  }
  h1 br:after {
    content:" ";
  }
  h1 em {
    display:inline;
  }
  .hero-copy {
    font-size:16px;
    line-height:1.5;
    max-width:440px;
  }
  .actions {
    margin-top:17px;
    gap:20px;
  }
  .button {
    padding:11px 19px;
    min-height:46px;
  }
  .cover {
    margin:0 0 0 13px;
  }
  .portrait {
    border-radius:46% 46% 2px 2px / 49% 49% 2px 2px;
  }
  .portrait img {
    height:clamp(210px,58vw,340px);
  }
  .seal {
    width:68px;
    bottom:57px;
    transform:translateX(-26%) rotate(-12deg);
  }
  .cover figcaption {
    padding-top:5px;
  }
  .frame-name i {
    font-size:21px;
  }
  .ribbon-in {
    justify-content:center;
    padding-block:10px;
    gap:17px;
    font-size:9px;
  }
  .ribbon-in span:nth-child(-n+2) {
    display:none;
  }
  .section-title {
    display:block;
    margin:13px 0 25px;
  }
  .section-title>p {
    margin-top:12px;
    max-width:100%;
  }
  .cards,.studio-grid,.contact-grid,.faq,.quotes {
    grid-template-columns:1fr;
  }
  .cards {
    gap:32px;
  }
  .card-body {
    padding-top:17px;
  }
  .card-body>p {
    min-height:0;
    margin-bottom:14px;
  }
  .card-image img {
    aspect-ratio:1.95;
  }
  .card-image>span {
    font-size:11px;
  }
  .catalog-note {
    align-items:start;
    gap:5px;
    flex-direction:column;
  }
  .studio-grid {
    gap:24px;
  }
  .studio-grid>div {
    order:-1;
  }
  .studio h2 {
    margin:16px 0;
  }
  .studio-photo img {
    aspect-ratio:1.55;
  }
  .gallery-band {
    padding:31px 23px;
  }
  .gallery-band p {
    max-width:90%;
  }
  .gallery-orn {
    width:74%;
    right:-34%;
    top:10%;
    opacity:.48;
  }
  .quotes {
    gap:16px;
  }
  .contact-grid {
    gap:24px;
  }
  .faq {
    gap:12px;
  }
  .faq h2 {
    margin-bottom:0;
  }
  .foot {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .foot>span {
    margin:0;
  }
  .foot>a:last-child {
    grid-column:1/-1;
  }
  .mobile-book {
    display:inline-flex;
    position:fixed;
    right:15px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:4;
    box-shadow:0 3px 12px #302d2630;
    border:1px solid #ede9db;
  }
  body:has(.mobile-book) {
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
    scroll-padding-bottom:70px;
  }
  .header-book {
    display:none;
  }
  #menu-button {
    margin-left:auto;
  }
  html {
    scroll-padding-bottom:78px;
  }
}

@media(max-width:380px) {
  :root {
    --gutter:16px;
  }
  .actions {
    gap:14px;
  }
  .ribbon-in {
    gap:8px;
    letter-spacing:.08em;
  }
  .frame-name {
    gap:10px;
  }
  .foot {
    grid-template-columns:1fr;
  }
  .foot a:not(.brand) {
    padding:5px 0;
  }
}

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

@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    .studio-photo,.gallery-band {
      animation:soft-entry both linear;
      animation-timeline:view();
      animation-range:entry 0% entry 22%;
    }
    @keyframes soft-entry {
      from {
        transform:translateY(9px);
        opacity:.85;
      }
      to {
        transform:none;
        opacity:1;
      }
    }
  }
}

.frame-name>span {
  white-space:nowrap;
}