/* SURFACE 48 · Careers · /careers/ · v13 Opus 5.5 improvement pass (2026-10-22).
   Paper register (body.light-warm, tokens from v13-shared.css). Page classes are cr-* so nothing bleeds into the injected nav / footer.
   Vocabulary follows the approved 36-wine hub: editorial hero grid, paper/card alternation, gray pre-footer closer, dark signature band.
   No label device above headings, no ordinals, no counters. */


.cr-wrap{max-width:1280px;margin:0 auto;padding:0 56px}
.cr-sec{padding:clamp(84px,9vw,120px) 0;border-top:1px solid var(--rule-warm-2);scroll-margin-top:96px}
.cr-paper{background:var(--paper)}
.cr-card{background:var(--card)}
.cr-h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.012em;margin:0;color:var(--ink-warm);text-wrap:pretty}
.cr-h2 em,.cr-h3 em{font-style:italic;font-weight:500;color:var(--burgundy)}
.cr-h2 .ln{display:block}
.cr-h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1.04;letter-spacing:-.008em;margin:0;color:var(--ink-warm);text-wrap:pretty}
.cr-p{margin:0;font-family:"Lora",Georgia,serif;font-size:17px;line-height:1.72;color:var(--ink-warm-2);text-wrap:pretty}
.cr-p a{color:var(--burgundy);text-decoration:none;border-bottom:1px solid rgba(82,0,0,.35);transition:border-color .2s}
.cr-p a:hover{border-bottom-color:var(--burgundy)}
.cr-meta{font-family:"Josefin Sans",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rhino-warm);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cr-meta .sep{color:var(--burgundy)}
.cr-head{margin-bottom:clamp(44px,5vw,68px);max-width:880px}
.cr-photo{position:relative;overflow:hidden;background-color:#1a1614;border:1px solid var(--rule-warm-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.cr-photo-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.96) contrast(1.03)}

/* Buttons · burgundy pair on paper (36-wine pattern) */
.cr-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch;max-width:560px}
.cr-ctas .btn{font-weight:600;font-size:13px;min-height:52px;flex:1 1 0;min-width:max-content;justify-content:center;white-space:nowrap}
.cr-ctas .btn:only-child{flex:0 0 auto}
.rhinory-careers .cr-ctas .btn-primary{background:var(--acacia);color:#1C1916;border:1px solid var(--acacia);box-shadow:0 12px 34px -14px rgba(185,119,39,.5)}
.rhinory-careers .cr-ctas .btn-primary:hover{background:var(--reserve);border-color:var(--reserve);color:var(--ivory);transform:translateY(-1px)}
.rhinory-careers .cr-ctas .btn-outline{border:1px solid rgba(82,0,0,.45);color:var(--burgundy);background:transparent}
.rhinory-careers .cr-ctas .btn-outline:hover{border-color:var(--burgundy);background:rgba(82,0,0,.05);transform:none}

/* Reveal · editorial stagger 0/100/200ms */
.cr-reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.cr-reveal[data-d="1"]{transition-delay:.1s}
.cr-reveal[data-d="2"]{transition-delay:.2s}
.cr-reveal.is-in{opacity:1;transform:none}

/* HERO · one image, one statement, two CTAs. Copy sits beside the photo, never over it. */
.cr-hero{padding:clamp(56px,7vw,96px) 0 clamp(72px,8vw,110px);background:var(--paper)}
.cr-hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,88px);align-items:center}
.cr-hero h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(54px,7vw,104px);line-height:.94;letter-spacing:-.014em;margin:0 0 40px;color:var(--ink-warm);text-wrap:balance}
.cr-hero h1 em{display:block;font-style:italic;font-weight:500;color:var(--burgundy)}
.cr-hero-fig{margin:0}
.cr-hero-fig .cr-photo{aspect-ratio:3/2}

/* WHAT YOUR WORK CHANGES · three equal image-led columns */
.cr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,48px)}
/* Grid cells, so no flow-layout gap: WordPress gave columns 2 and 3 its 24px block gap as a top margin, and the first photo sat higher (Erik 11-05). */
.cr-cols>.cr-col{margin-block-start:0}
.cr-col{display:flex;flex-direction:column;gap:18px}
.cr-col .cr-photo{aspect-ratio:4/3;margin-bottom:8px}

/* WHY PEOPLE STAY · tall photo beside a hairline list */
.cr-stay{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:center}
.cr-stay-fig{margin:0}
.cr-stay-fig .cr-photo{aspect-ratio:4/5}
.cr-stay .cr-h2{margin-bottom:clamp(32px,4vw,48px)}
.cr-why{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule-warm-2)}
.cr-why li{padding:clamp(24px,2.6vw,32px) 0;border-bottom:1px solid var(--rule-warm-2);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px clamp(24px,3vw,40px);align-items:baseline}

/* OPEN ROLES · operator-filled slot + "no openings" state */
.cr-roles{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule-warm-2)}
.cr-role{padding:clamp(32px,3.6vw,48px) 0;border-bottom:1px solid var(--rule-warm-2)}
.cr-role-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:16px clamp(28px,4vw,56px);align-items:start}
.cr-role-top .cr-meta{margin-top:14px}
.cr-sum{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(21px,1.9vw,25px);line-height:1.36;color:var(--ink-warm-2);text-wrap:pretty;max-width:42ch}
.cr-role .cr-ctas{max-width:none}
.cr-more{margin-top:22px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:0 clamp(28px,4vw,56px)}
.cr-more>*{grid-column:2}
.cr-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:"Josefin Sans",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy);width:max-content}
.cr-more summary::-webkit-details-marker{display:none}
.cr-more summary::after{content:"+";font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:500;line-height:1;letter-spacing:0;transition:transform .25s}
.cr-more details[open] summary::after{transform:rotate(45deg)}
.cr-more-body{padding:10px 0 4px;display:flex;flex-direction:column;gap:18px;max-width:62ch}
.cr-more-body h4{margin:6px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:24px;line-height:1.1;color:var(--ink-warm)}
.cr-more-body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cr-more-body li{font-family:"Lora",Georgia,serif;font-size:17px;line-height:1.6;color:var(--ink-warm-2);padding-left:24px;position:relative}
.cr-more-body li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:1px;background:var(--burgundy)}
.cr-none{border-top:1px solid var(--rule-warm-2);border-bottom:1px solid var(--rule-warm-2);padding:clamp(40px,5vw,72px) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px clamp(40px,6vw,96px);align-items:end}
.cr-none .cr-p{max-width:54ch}
#openings[data-roles="open"] .cr-none,#openings[data-roles="none"] .cr-roles,#openings[data-roles="none"] .cr-roles-head{display:none}

/* HOW TO APPLY · gray pre-footer closer (canon § 5: oklab mix until a shared --closer-gray exists) */
.cr-apply{background:color-mix(in oklab,var(--rhino-warm) 16%,var(--paper))}
.cr-apply-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.cr-intro{position:sticky;top:120px}
.cr-intro .cr-p{margin-top:28px;max-width:44ch;font-size:18px}
/* Application form · Commerce7 "careers-application", styled to the 51 Groups (gp-form) field vocabulary. C7 draws its own reCAPTCHA. */
.cr-form{display:flex;flex-direction:column;gap:22px}
.cr-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cr-field{display:flex;flex-direction:column;gap:10px;min-width:0}
.cr-field label{font-family:"Lora",Georgia,serif;font-size:17px;font-weight:600;line-height:1.5;color:var(--ink-warm)}
.cr-opt{font-family:"Lora",Georgia,serif;font-style:italic;font-size:16px;font-weight:400;color:var(--ink-warm-2);margin-left:6px}
.cr-field input,.cr-field select,.cr-field textarea{font-family:"Lora",Georgia,serif;font-size:17px;line-height:1.5;color:var(--ink-warm);background:var(--paper);border:1px solid rgba(45,41,38,.28);border-radius:2px;padding:13px 16px;min-height:52px;width:100%;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
.cr-field input::placeholder{color:var(--rhino-warm)}
.cr-field select{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--burgundy) 50%),linear-gradient(135deg,var(--burgundy) 50%,transparent 50%);background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.cr-field textarea{resize:vertical;min-height:150px}
.cr-field input:hover,.cr-field select:hover,.cr-field textarea:hover{border-color:rgba(45,41,38,.5)}
.cr-field input:focus,.cr-field select:focus,.cr-field textarea:focus{outline:none;border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(82,0,0,.14)}
.cr-field[data-invalid] input,.cr-field[data-invalid] select,.cr-field[data-invalid] textarea{border-color:var(--burgundy)}
.cr-err{display:none;margin:0;font-family:"Lora",Georgia,serif;font-size:15px;line-height:1.4;color:var(--burgundy)}
.cr-field[data-invalid] .cr-err{display:block}
.cr-form .cr-ctas{padding-top:6px}
.cr-done{display:none;border-top:1px solid var(--rule-warm-2);border-bottom:1px solid var(--rule-warm-2);padding:clamp(40px,5vw,64px) 0}
.cr-done .cr-p{margin-top:20px;max-width:46ch}
.cr-done h3:focus{outline:none}
#apply[data-state="sent"] .cr-form{display:none}
#apply[data-state="sent"] .cr-done{display:block}
.cr-alt{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--rule-warm-2);font-family:"Lora",Georgia,serif;font-size:16px;line-height:1.6;color:var(--ink-warm-2)}
.cr-alt a{color:var(--burgundy);text-decoration:none;border-bottom:1px solid rgba(82,0,0,.35);transition:border-color .2s}
.cr-alt a:hover{border-bottom-color:var(--burgundy)}

/* DARK SIGNATURE BAND · 36-wine closer */
.cr-dark{background:#1A1512;color:var(--ivory);padding:72px 0 76px;text-align:center}
.cr-dark .cr-wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.cr-sig{display:inline-flex;align-items:center;gap:22px;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--ivory)}
.cr-sig::before,.cr-sig::after{content:"";width:48px;height:1px;background:var(--acacia)}
.cr-triad{font-family:"Josefin Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--acacia)}

/* Review-only roles-state switcher (deliberately non-brand; removed before build) */
.rv-switch{position:fixed;left:18px;bottom:18px;z-index:120;display:flex;align-items:center;border:1.5px dashed var(--burgundy);background:#FFF6D8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5c5340}
.rv-switch span{padding:0 12px;border-right:1px dashed rgba(82,0,0,.5)}
.rv-switch button{background:transparent;border:0;border-right:1px dashed rgba(82,0,0,.5);padding:11px 14px;font:inherit;color:inherit;cursor:pointer;min-height:40px}
.rv-switch button:last-child{border-right:0}
.rv-switch button[aria-pressed="true"]{background:var(--burgundy);color:#FFF6D8}

/* RESPONSIVE */
@media (max-width:1024px){.cr-wrap{padding:0 40px}.cr-role-top{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.cr-role-top .cr-ctas{grid-column:2}.cr-more{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
@media (max-width:900px){
  .cr-hero-grid,.cr-stay,.cr-apply-grid,.cr-none{grid-template-columns:1fr;gap:32px}
  .cr-intro{position:static}
  .cr-apply-grid{gap:40px}
  .cr-hero h1{margin-bottom:32px}
  .cr-cols{grid-template-columns:1fr;gap:48px}
  .cr-stay-fig .cr-photo{aspect-ratio:4/3}
  .cr-role-top,.cr-more{grid-template-columns:1fr}
  .cr-role-top .cr-ctas,.cr-more>*{grid-column:1}
}
@media (max-width:640px){
  .cr-wrap{padding:0 22px}
  .cr-hero{padding-top:40px}
  .cr-why li{grid-template-columns:1fr}
  .cr-row{grid-template-columns:1fr}
  .cr-intro .cr-p{margin-top:20px;font-size:17px}
  .cr-ctas{max-width:none}
  .cr-ctas .btn,.cr-ctas .btn:only-child{flex:1 1 100%;min-width:0}
  .cr-sig::before,.cr-sig::after{width:24px}
  .rv-switch{left:8px;right:8px;bottom:8px;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  .cr-reveal{opacity:1;transform:none;transition:none}
  .cr-more summary::after{transition:none}
  .cr-field input,.cr-field select,.cr-field textarea{transition:none}
}

.rhinory-careers{--paper:#FBF7EE;--card:#F4EEE0;--ink-warm:#2D2926;--ink-warm-2:#4A443D;--burgundy:#520000;--rhino-warm:#8A8177;--rule-warm-2:rgba(45,41,38,.2);background:var(--paper);color:var(--ink-warm)}
.rhinory-careers .cr-photo-img{margin:0;width:100%;height:100%}.rhinory-careers .cr-photo-img img{width:100%;height:100%;object-fit:cover}
.rhinory-careers .cr-none{display:none}.rhinory-careers .cr-openings:not(:has(.cr-role)) .cr-none{display:block}
.rhinory-careers .cr-ctas .cr-action{margin:0;display:flex;flex:1}.rhinory-careers .btn{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;text-decoration:none;font-family:"Josefin Sans",sans-serif;text-transform:uppercase;letter-spacing:.1em}

.rhinory-careers{display:block}.rhinory-careers > *{margin-block:0}.rhinory-careers .cr-hero h1 em{font-style:italic;color:#520000}
/* CD r2 (goal batch 3 item 4c): the hero says whether any role is open
   (data-roles from inc/careers-page.php); with none, its one CTA is "Send a
   general application". The hero lede, the apply photo. */
.cr-hero[data-roles="open"] .cr-when-none,.cr-hero[data-roles="none"] .cr-when-open{display:none}
.cr-hero .cr-lede{margin:-12px 0 36px;max-width:40ch;font-size:18px}
.cr-apply-fig{margin:clamp(32px,4vw,48px) 0 0}
.cr-apply-fig .cr-photo{aspect-ratio:3/2}
@media (max-width:560px){.cr-hero .cr-lede{margin:-8px 0 28px;font-size:17px}}