/* Office-course: native form controls in an editorial invitation. */
@import url('/fonts/office-course-fonts.css');
:root{--oc-teal:#173f43;--oc-teal-hover:#24585b;--oc-paper:#f7f9fa;--oc-ink:#202c31;--oc-muted:#5f6d73;--oc-line:#cbd4d8;--oc-serif:"Source Serif 4",Georgia,serif;--oc-sans:"Manrope",system-ui,sans-serif;}
.oc-page{margin:0;min-height:100dvh;background:#dfe6e8;padding:40px 24px;box-sizing:border-box;display:grid;place-items:center;font-family:var(--oc-sans);color:var(--oc-ink);}
.oc-panel,.oc-panel *,.oc-dialog,.oc-hero-entry,.oc-announcement,.oc-mobile-cta{box-sizing:border-box;}
.oc-panel [hidden],.oc-mobile-cta[hidden]{display:none!important;}
.oc-panel{width:100%;max-width:1120px;display:grid;grid-template-columns:39% minmax(0,1fr);border-radius:18px;background:var(--oc-paper);overflow:hidden;text-align:left;font:400 15px/1.5 var(--oc-sans);color:var(--oc-ink);}
.oc-panel p,.oc-panel h1,.oc-panel h2{margin:0;}
.oc-panel a{color:inherit;}
.oc-panel button,.oc-panel input{font:inherit;}
.oc-panel button,.oc-panel a,.oc-panel input{touch-action:manipulation;}
.oc-panel :focus-visible{outline:3px solid #437f84;outline-offset:4px;}
.oc-panel h1:focus,.oc-panel h2:focus{outline:none;}
.oc-invitation{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:32px 34px;background:#08282e;color:#eef5f4;}
.oc-cover-identity{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:15px;}
.oc-wordmark{font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.4;}
.oc-cover-type{font-size:11px;font-weight:500;line-height:1.4;color:#c1d6d7;}
.oc-cover-heading{position:relative;z-index:1;margin-top:46px;}
.oc-cover-title{font:500 clamp(32px,3vw,40px)/1.12 var(--oc-serif);letter-spacing:-.025em;text-wrap:balance;}
.oc-cover-title em{font-weight:500;color:#c6e1df;}
.oc-cover-author{margin-top:18px!important;font:400 15px/1.5 var(--oc-sans);color:#e0eeec;}
.oc-cover-art{position:relative;z-index:0;flex:1;min-height:230px;margin:-3px -34px -10px;overflow:hidden;pointer-events:none;}
/* Keep the mask on the actual 3:2 image bounds, including when the art box is taller. */
.oc-cover-art img{display:block;position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;mix-blend-mode:luminosity;--oc-art-fade:transparent 0%,#00000008 4%,#0003 8%,#0008 12%,#000c 16%,#000 22%,#000 78%,#000c 84%,#0008 88%,#0003 92%,#00000008 96%,transparent 100%;-webkit-mask-image:linear-gradient(90deg,var(--oc-art-fade)),linear-gradient(var(--oc-art-fade));mask-image:linear-gradient(90deg,var(--oc-art-fade)),linear-gradient(var(--oc-art-fade));-webkit-mask-composite:source-in;mask-composite:intersect;}
.oc-cover-footer{position:relative;z-index:1;display:grid;gap:24px;padding-top:23px;border-top:1px solid #a1c8c52e;}
.oc-cover-footer>p{font-size:13px;line-height:1.75;color:#d2e4e2;}
.oc-cover-footer>span{display:flex;justify-content:space-between;gap:14px;font-size:10px;line-height:1.5;color:#bad0d0;}
.oc-cover-footer b{font-weight:500;}
.oc-content{position:relative;padding:36px 40px 30px;min-width:0;}
.oc-close{position:absolute;z-index:2;top:20px;right:20px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #d2dbde;border-radius:50%;text-decoration:none;background:var(--oc-paper);transition:background .16s,border-color .16s;}
.oc-close span{font:300 29px/1 system-ui;transform:translateY(-1px);}
.oc-close:hover{background:#e5ecee;border-color:#819a9e;}
.oc-heading{padding-right:12px;}
.oc-eyebrow{font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.15em;text-transform:uppercase;color:var(--oc-teal);}
.oc-heading h1{font:500 clamp(32px,3.2vw,43px)/1.15 var(--oc-serif);letter-spacing:-.022em;margin:12px 0 12px;text-wrap:balance;}
.oc-lead{font-size:13px;line-height:1.7;color:var(--oc-muted);max-width:56ch;}
.oc-form{margin-top:24px;display:grid;gap:13px;}
.oc-field{min-width:0;}
.oc-field label{display:block;margin-bottom:6px;font-size:12px;font-weight:600;line-height:1.5;}
.oc-required{color:#487477;}
.oc-field input{display:block;width:100%;height:48px;min-width:0;border:1px solid var(--oc-line);border-radius:6px;padding:10px 13px;background:#f0f4f5;color:var(--oc-ink);font-size:16px;line-height:1.4;box-shadow:0 1px 0 #fff inset;transition:background .16s,border-color .16s,box-shadow .16s;}
.oc-field input::placeholder{color:#6f7e85;opacity:1;font-size:14px;}
.oc-field input:hover{border-color:#9aaaae;}
.oc-field input:focus{outline:none;border-color:#326d73;background:#fff;box-shadow:0 0 0 2px #326d731c;}
.oc-field input[aria-invalid=true]{border-color:#a73d3d;background:#fffafa;}
.oc-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.oc-field-error{display:block;font-size:11px;line-height:1.5;color:#a22f35;margin-top:4px;}
.oc-field-error:empty{display:none;}
.oc-required-note{font-size:11px;color:var(--oc-muted);}
.oc-consent{font-size:11px;line-height:1.7;color:#536167;}
.oc-consent label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:2px 0;}
.oc-consent input{flex:0 0 auto;width:18px;height:18px;accent-color:var(--oc-teal);margin:1px 0 0;}
.oc-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;width:100%;border:1px solid transparent;border-radius:8px;padding:15px 19px;background:var(--oc-teal);color:#fff!important;text-decoration:none;font:600 12px/1.6 var(--oc-sans);cursor:pointer;transition:background .16s,transform .16s;}
.oc-submit:hover{background:var(--oc-teal-hover);}
.oc-submit:active{transform:translateY(1px);}
.oc-submit:disabled{cursor:wait;opacity:.75;}
.oc-arrow{font:400 25px/1 var(--oc-sans);transition:transform .18s;flex:0 0 auto;}
.oc-submit:hover .oc-arrow{transform:translateX(3px);}
.oc-sending{font-size:11px;color:var(--oc-muted);text-align:center;}
.oc-sending:empty{display:none;}
.oc-feedback{padding:12px 14px;background:#f7e9e9;border-radius:6px;color:#8c292f;font-size:12px;line-height:1.6;}
.oc-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.oc-success{display:flex;flex-direction:column;justify-content:center;min-height:590px;max-width:100%;padding:40px 0;}
.oc-success__mark{display:grid;place-items:center;width:60px;height:60px;border:1px solid #9eb7b8;color:var(--oc-teal);border-radius:50%;font-size:27px;margin-bottom:40px;}
.oc-success h2{font:500 clamp(32px,3.5vw,46px)/1.15 var(--oc-serif);margin:14px 0 20px;letter-spacing:-.025em;}
.oc-success h2 em{font-weight:500;color:var(--oc-teal);}
.oc-success>p:not(.oc-eyebrow){color:var(--oc-muted);font-size:14px;}
.oc-success .oc-submit{margin-top:45px;max-width:320px;}
.oc-dialog{border:0;padding:0;width:min(1120px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;border-radius:18px;background:var(--oc-paper);box-shadow:0 35px 100px #09282e40;overscroll-behavior:contain;}
.oc-dialog::backdrop{background:#142529a8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.oc-dialog[open]{animation:oc-appear .24s cubic-bezier(.22,1,.32,1);}
.oc-dialog[open]::backdrop{animation:oc-dim .18s ease-out;}
@keyframes oc-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes oc-dim{from{opacity:0}to{opacity:1}}
html.oc-is-open{overflow:hidden!important;}
.oc-hero-entry{display:flex;align-items:center;gap:17px;margin-top:26px;max-width:490px;}
.oc-hero-entry__label{flex:0 0 auto;color:#34545a;font:600 11px/1.45 var(--font);letter-spacing:.08em;text-transform:uppercase;}
.oc-booking-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:56px;padding:15px 23px;border:1px solid #28555c;border-radius:10px;background:#173f43;color:#fff!important;font:600 14px/1.5 var(--font);text-decoration:none;box-shadow:0 5px 15px #143d431a;transition:background .18s,transform .18s;}
.oc-booking-btn:hover{background:#275d61;}
.oc-booking-btn:active{transform:translateY(1px);}
.oc-booking-btn>span[aria-hidden]{font-size:24px;line-height:1;transition:transform .18s;}
.oc-booking-btn:hover>span[aria-hidden]{transform:translateX(3px);}
.oc-booking-btn[aria-busy=true]{opacity:.7;cursor:wait;}
.oc-announcement{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:35px 60px;margin-top:6px;padding:40px 0 0;border-top:1px solid #ffffff30;scroll-margin-top:100px;}
.oc-announcement__kicker{font:600 11px/1.5 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#b7d4d5;margin-bottom:16px;}
.oc-announcement h3{font:500 clamp(34px,4vw,52px)/1.08 var(--font-display);color:#fff;letter-spacing:-.02em;}
.oc-announcement h3 em{font-weight:500;color:#c3dcde;}
.oc-announcement__details{align-self:center;max-width:440px;}
.oc-announcement__details>p{font-size:15px;line-height:1.8;color:#d1dfe1;}
.oc-announcement__meta{display:block;font-size:12px;line-height:1.7;color:#bfd2d5;margin-top:15px;}
.oc-announcement .oc-booking-btn{margin-top:24px;background:#eff5f5;color:#173f43!important;border-color:#eff5f5;box-shadow:none;}
.oc-announcement .oc-booking-btn:hover{background:#d9e9ea;}
.oc-mobile-cta{display:none;}
@media(max-width:799px){
 .oc-page{padding:0;display:block;background:var(--oc-paper);}
 .oc-panel{grid-template-columns:1fr;border-radius:0;min-height:100dvh;}
 .oc-invitation{padding:23px 24px 22px;min-height:135px;}
 .oc-cover-identity{padding-right:36px;gap:12px;justify-content:flex-start;}
 .oc-wordmark{font-size:9px;letter-spacing:.15em;}
 .oc-cover-type{font-size:9px;white-space:nowrap;}
 .oc-cover-heading{margin-top:14px;max-width:calc(100% - 85px);}
 .oc-cover-title{font-size:23px;line-height:1.15;}
 .oc-cover-footer{display:none;}
 .oc-cover-author{font-size:11px;line-height:1.5;margin-top:8px!important;}
 .oc-cover-art{position:absolute;inset:auto 6px -6px auto;width:150px;height:118px;min-height:0;margin:0;}
 .oc-cover-art img{opacity:.85;}
 .oc-content{padding:26px 24px 30px;}
 .oc-close{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;width:36px;height:36px;background:#eff5f5;color:#173f43!important;}
 .oc-heading{padding-right:0;}
 .oc-heading h1{font-size:34px;}
 .oc-dialog{width:100%;height:100dvh;max-height:100dvh;max-width:100vw;margin:0;border-radius:0;}
 .oc-dialog .oc-invitation{padding-top:max(24px,env(safe-area-inset-top));}
 .oc-dialog .oc-content{padding-bottom:max(28px,env(safe-area-inset-bottom));}
 .oc-success{min-height:60dvh;padding:35px 0;}
 .oc-hero-entry{gap:12px;margin-top:20px;align-items:stretch;}
 .oc-hero-entry__label{align-self:center;font-size:10px;}
 .oc-booking-btn{font-size:13px;padding:13px 17px;gap:14px;min-height:54px;}
 .oc-announcement{grid-template-columns:1fr;gap:20px;padding-top:30px;}
 .oc-announcement h3{font-size:39px;}
 .oc-mobile-cta{position:fixed;z-index:48;bottom:0;left:0;right:0;display:flex;padding:10px 20px max(12px,env(safe-area-inset-bottom));background:#f5f8f9f5;border-top:1px solid #cad5d7;box-shadow:0 -8px 28px #1236380c;}
 .oc-mobile-cta .oc-booking-btn{width:100%;justify-content:center;}
 html.oc-has-dock body{padding-bottom:90px;}
 html.menu-open .oc-mobile-cta,html.oc-is-open .oc-mobile-cta{display:none;}
}
@media(max-width:479px){
 .oc-field-pair{grid-template-columns:1fr;gap:13px;}
 .oc-heading h1{font-size:31px;}
 .oc-field input{height:50px;}
 .oc-submit{font-size:12px;gap:12px;padding:14px;}
 .oc-hero-entry{flex-direction:column;gap:7px;}
 .oc-hero-entry__label{align-self:flex-start;}
 .oc-hero-entry__label br{display:none;}
 .oc-hero-entry .oc-booking-btn{justify-content:space-between;}
}
@media(min-width:800px) and (max-width:1050px){
 .oc-invitation{padding-inline:26px;}
 .oc-cover-identity{align-items:flex-start;flex-direction:column;gap:5px;}
 .oc-cover-heading{margin-top:38px;}
 .oc-cover-title{font-size:clamp(29px,3.2vw,34px);}
 .oc-cover-art{margin-inline:-26px;}
 .oc-content{padding-inline:30px;}
 .oc-heading h1{font-size:35px;}
}
@media(min-width:800px) and (prefers-reduced-motion:no-preference){
 .oc-dialog[open] .oc-cover-art img{animation:oc-cover-arrive .55s cubic-bezier(.22,1,.32,1) both;}
 @keyframes oc-cover-arrive{from{opacity:0;transform:translateY(9px) scale(1.025)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){.oc-panel *,.oc-booking-btn,.oc-dialog[open],.oc-dialog[open]::backdrop{animation:none!important;transition:none!important;}}
