/* Refinement of the existing studio: clearer navigation, project affordances,
   disclosure states, and a dedicated paper surface for the final note. */
:root{--ui-muted:#606458;--ui-rule:#929687;--ui-error:#8c301b;--ui-radius:6px}

.studio-header nav a{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.work-caption{gap:22px}
.work-caption>div{flex:1;min-width:0}
.work-caption-arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid #eeeee666;border-radius:50%;flex:none;margin-top:2px}
.work-caption-arrow .ui-arrow{width:19px;height:19px;transition:transform .25s var(--ease-out)}
.work-card[href]:is(:hover,:focus-visible) .work-caption-arrow{background:var(--studio-paper);color:var(--studio-ink);border-color:var(--studio-paper)}
.work-card[href]:is(:hover,:focus-visible) .work-caption-arrow .ui-arrow{transform:translate(2px,-2px)}

.faq-list{border-top:1px solid #bfc0b8}
.faq-item{border-top:0;border-bottom:1px solid #bfc0b8;padding-inline:24px}
.faq-item summary{font-size:18px;align-items:center;min-height:84px;gap:24px;padding:24px 0}
.faq-item summary .expand-icon{width:32px;height:32px;border:1px solid #929687;border-radius:50%;flex:none}
.faq-item summary .expand-icon:before,.faq-item summary .expand-icon:after{width:14px;left:8px;top:15px}
.faq-item[open]{background:#e1e3d7}
.faq-item[open] summary{font-weight:550}
.faq-item[open] summary .expand-icon{background:var(--studio-ink);border-color:var(--studio-ink);color:var(--studio-paper)}
.faq-item p{max-width:62ch;font-size:16px;line-height:1.75;padding-bottom:28px;color:#454b40}
.faq-heading a{text-decoration:underline;text-underline-offset:5px}

.contact-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,112px)}
.contact-form{background:var(--studio-paper);color:var(--studio-ink);padding:clamp(25px,3vw,44px);border-radius:var(--ui-radius)}
.form-heading{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #c6c9bc}
.form-heading h3{font-size:clamp(27px,2.5vw,38px);line-height:1.12;letter-spacing:-.025em}
.form-heading p{font-size:12px;color:var(--ui-muted);margin-top:12px}
.contact-form .form-grid{gap:27px}
.contact-form .field-label{font-size:13px;margin-bottom:7px;font-weight:500}
.contact-form .field-input{font-size:17px;border-bottom-color:var(--ui-rule);padding:10px 0 13px}
.contact-form .field-input::placeholder{color:var(--ui-muted)}
.contact-form .field-textarea{font-size:16px;min-height:146px}
.contact-form .field-input:focus{outline:2px solid var(--studio-ink);outline-offset:5px}
.contact-form .field-input[aria-invalid="true"]{border-bottom-color:var(--ui-error)}
.contact-form .field-error,.contact-form .form-status.is-error{color:var(--ui-error)}
.contact-form .form-privacy{margin-block:22px 18px;color:#454b40}
.contact-form .form-consent{color:#454b40;gap:10px}
.contact-form .form-submit{min-height:57px;border-radius:var(--ui-radius);padding:18px 21px;font-size:16px}
.contact-form .form-note{font-size:12px;color:var(--ui-muted);line-height:1.6}
.contact-form .note-count{color:var(--ui-muted)}
.contact-form .note-tools{gap:0 15px}
.contact-form .note-tools button:not(:disabled):hover{color:var(--ui-error)}
.contact-receipt{border-radius:var(--ui-radius)}
.brief-starter>summary{padding-block:25px;font-size:20px}
.brief-starter>summary small{font-size:14px;line-height:1.5}
.brief-starter .brief-intro{font-size:15px;line-height:1.65}
.brief-steps{gap:12px;margin-bottom:30px}
.brief-steps button{gap:9px;font-size:13px;border-bottom-width:1px;padding-block:9px}
.brief-step-number{display:grid;place-items:center;width:26px;height:26px;flex:none;border:1px solid #18191888;border-radius:50%;font-size:11px;font-variant-numeric:tabular-nums}
.brief-steps button[aria-current="step"]{border-bottom:2px solid var(--studio-ink)}
.brief-steps button[aria-current="step"] .brief-step-number{background:var(--studio-ink);color:var(--studio-paper);border-color:var(--studio-ink)}
.brief-step h3{font-size:clamp(26px,2.3vw,36px)}
.brief-options{gap:9px}
.brief-options span{font-size:14px;padding:12px 15px;border-radius:var(--ui-radius)}
.brief-paper{padding:clamp(22px,2.5vw,34px);border-radius:var(--ui-radius)}
.brief-preview{font-size:15px;line-height:1.7}
.brief-use,.brief-next{border-radius:var(--ui-radius);min-height:52px;font-size:15px}
.brief-navigation{gap:22px}
.brief-starter .field-label{font-size:13px;line-height:1.5}
.brief-starter .field-input:focus{outline:2px solid var(--studio-ink);outline-offset:5px}
.studio-footer{font-size:12px;row-gap:16px}
.studio-footer nav{gap:26px}

@media(min-width:900px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
  .exhibition-desktop .work-caption>div{width:auto}
  .exhibition-desktop .work-exhibition-nav button{display:flex;align-items:center;gap:12px;padding:8px 12px;letter-spacing:0}
  .work-nav-number{font-size:11px;font-variant-numeric:tabular-nums;opacity:.8}
  .work-nav-name{font-size:13px;line-height:1.3}
  .exhibition-desktop .work-exhibition-nav button[aria-current="true"]{background:var(--studio-paper);color:var(--studio-ink);border-color:var(--studio-paper)}
  .exhibition-desktop .work-exhibition-nav button[aria-current="true"]:before{display:none}
}
@media(max-width:1000px) and (min-width:768px){
  .contact-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px}
  .contact-form{padding:25px}
  .contact-form .form-grid{grid-template-columns:1fr;gap:23px}
  .brief-steps{gap:8px}
  .brief-steps button{font-size:12px;gap:6px}
}
@media(max-width:767px){
  .studio-header{height:auto;min-height:80px;flex-wrap:wrap;gap:10px 16px;padding-top:18px;padding-bottom:4px}
  .studio-header nav{display:flex;order:3;width:100%;justify-content:space-between;gap:24px;border-top:1px solid #c6c9bc}
  .studio-header nav a{font-size:13px;min-height:42px;padding-block:10px}
  .studio-header nav a:after{bottom:6px}
  .studio-hero{padding-top:17px}
  .work-caption{gap:14px;align-items:flex-start}
  .work-caption-arrow{width:38px;height:38px}
  .work-caption h3{font-size:26px;line-height:1.12}
  .work-caption p{font-size:14px;line-height:1.6}
  .faq-heading h2{font-size:42px}
  .faq-item{padding-inline:16px}
  .faq-item summary{font-size:16px;gap:16px;min-height:82px;padding-block:22px}
  .faq-item p{font-size:15px;padding-right:0;line-height:1.7}
  .contact-layout{grid-template-columns:minmax(0,1fr);gap:42px;padding-top:50px}
  .contact-form{padding:27px 22px}
  .form-heading{margin-bottom:27px;padding-bottom:22px}
  .form-heading h3{font-size:29px}
  .contact-form .form-grid{grid-template-columns:1fr;gap:23px}
  .contact-form .field-input,.contact-form .field-textarea{font-size:16px}
  .contact-form .field-textarea{min-height:168px}
  .contact-form .form-submit{font-size:15px;padding-inline:18px}
  .contact-form .note-tools{gap:0 13px}
  .contact-form .note-count{margin-left:0;flex-basis:100%;margin-top:6px}
  .brief-steps{gap:10px}
  .brief-steps button{gap:7px;font-size:12px}
  .brief-starter>summary{font-size:19px}
  .brief-options span{font-size:13px;padding-inline:13px}
  .studio-footer{padding-top:27px;gap:18px 22px}
  .studio-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;font-size:13px;border-top:1px solid #18191855;padding-top:15px}
}
@media(max-width:359px){
  .contact-form{padding:24px 18px}
  .form-heading h3{font-size:26px}
  .brief-steps{gap:7px}
  .brief-step-number{width:24px;height:24px}
  .work-caption h3{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.work-caption-arrow .ui-arrow{transition:none}}