/* Photographic interiors. All imagery is decorative; account controls remain live HTML. */
.auth-door{display:none}
dialog.auth-dialog[open]{display:grid;grid-template-columns:46% 54%;width:min(1120px,calc(100vw - 64px));max-width:none;max-height:calc(100svh - 64px);padding:0;overflow:auto;border:0;border-radius:14px;background:#fbf9f2;box-shadow:0 30px 120px #071f3566;color:#173f35}
.auth-dialog #auth-art{position:relative;grid-column:1;grid-row:1/3;min-height:650px;overflow:hidden;background:#194c55}
#auth-art img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:45% 55%}
.auth-dialog .modal-head{grid-column:2;position:relative;gap:15px;justify-content:flex-start;align-items:center;padding:52px 52px 0;margin:0}
.auth-dialog .modal-head .eyebrow{font-size:10px;letter-spacing:.17em}
.auth-dialog .close{position:absolute;top:20px;right:20px;border:1px solid #d5dcd2;width:34px;height:34px;border-radius:50%;font-size:25px;display:grid;place-items:center;padding:0;background:#fbf9f2;z-index:2}
.auth-door,.door-icon{background-repeat:no-repeat;flex-shrink:0;box-shadow:0 1px 4px #173f351f}
.auth-dialog .auth-door{display:block;width:42px;height:64px;border-radius:15px 15px 2px 2px;background-image:url('assets/door-blue.jpg');background-size:218% auto;background-position:47% 43%;border:2px solid #fff}
.auth-dialog #modal-content{grid-column:2;padding:30px 52px 52px;position:relative}
.auth-dialog h2{font-size:46px;line-height:1.05;letter-spacing:-.045em;max-width:440px;margin-bottom:18px}
.auth-dialog #modal-content>p{font-size:14px;line-height:1.65;max-width:420px;margin-bottom:28px;color:#5b6f67}
.auth-dialog .form-grid{grid-template-columns:1fr;gap:20px}
.auth-dialog label{font-size:13px;font-weight:500}
.auth-dialog input{padding:14px 15px;font-size:16px;min-height:49px;background:#fffefa;border-color:#cbd4ca;border-radius:3px;margin-top:8px}
.auth-dialog .auth-actions{margin-top:32px;display:grid;grid-template-columns:1fr;gap:25px}
.auth-dialog .auth-actions .button{grid-row:1;width:100%;font-size:15px;min-height:52px;border-radius:3px}
.auth-dialog .auth-switch{font-size:13px;max-width:none;justify-self:start}
.auth-dialog .registration-form .form-grid{grid-template-columns:1fr 1fr;gap:18px}
.auth-dialog .registration-form label:has(input[name=username]){grid-column:1/-1}
.auth-dialog .registration-form .form-grid>.hint{align-self:center;margin:0;line-height:1.5}
.auth-dialog .registration-form .auth-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.auth-dialog .registration-form .auth-actions .button{width:auto;font-size:14px;padding:15px 20px}
.auth-dialog[data-auth=register] #auth-art{background:#cbdcbd;min-height:870px}
.auth-dialog[data-auth=register] #auth-art img{width:220%;height:220%;left:-60%;top:-60%;object-position:center 53%}
.auth-dialog[data-auth=register] h2{font-size:40px}
.auth-dialog[data-auth=register] .auth-door,.auth-dialog[data-auth=staff] .auth-door{background-image:url('assets/door-green.jpg');background-position:55% 44%}
.auth-dialog[data-auth=staff] #auth-art img{object-position:50% 60%}
.auth-dialog[data-auth=master] #auth-art{background:#453524}
.auth-dialog[data-auth=master] #auth-art img{width:150%;height:160%;left:-25%;top:-25%;object-position:50% 45%}
.auth-dialog[data-auth=master] .auth-door{background-image:url('assets/door-lilac.jpg');background-position:53% 38%}
.auth-dialog[data-auth=master] .button{background:#5e4263;border-color:#5e4263}
.auth-dialog[data-auth=master] .button:hover{background:#75557b}
.auth-dialog #modal-content:after{content:'';position:absolute;display:block;right:28px;bottom:24px;width:54px;height:54px;margin:0;background:url('assets/photo-ammonite.jpg') 49% 51% / 166% auto;border-radius:50%;opacity:.64;pointer-events:none}
.auth-dialog[data-auth=master] #modal-content:after{background-image:url('assets/agate-blue.jpg');background-size:240% auto;background-position:47% 53%}
.auth-dialog[data-auth=register] #modal-content:after{display:none}
/* Door photographs become recognisable navigation markers within the workspaces. */
.door-icon{display:inline-block;width:21px;height:32px;border-radius:7px 7px 1px 1px;background-size:218% auto;background-position:47% 43%;border:1px solid #fffcf6;vertical-align:middle}
.door-blue{background-image:url('assets/door-blue.jpg')}.door-green{background-image:url('assets/door-green.jpg');background-position:55% 44%}.door-lilac{background-image:url('assets/door-lilac.jpg');background-position:53% 38%}
.door-navy{background-image:url('assets/door-navy.jpg');background-size:200% auto;background-position:47% 52%}
.door-turquoise{background-image:url('assets/door-turquoise.jpg');background-position:38% 46%}
.door-slate{background-image:url('assets/door-slate.jpg');background-position:41% 47%}
.door-white{background-image:url('assets/door-white.jpg');background-position:44% 41%}
.door-black{background-image:url('assets/door-black.jpg');background-position:44% 44%}
#sidebar button:has(.door-icon){display:flex;align-items:center;gap:11px}
#sidebar button:has(.door-icon)>span:last-child{min-width:0;line-height:1.45}
#sidebar button:focus-visible{outline:2px solid #886b3e;outline-offset:3px}
@media(min-width:701px){#sidebar{overflow-y:auto}#sidebar button:has(.door-icon){padding:10px 12px}}
/* A small photographic window beside selected headings. Text never overlays the image. */
.page-heading.photo-heading{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:32px;row-gap:16px;align-items:center;min-height:154px}
.photo-heading>div{grid-column:1;min-width:0}
.photo-heading>div p{max-width:520px;line-height:1.65}
.photo-heading>.button{grid-column:1;justify-self:start}
.heading-photo{grid-column:2;grid-row:1/3;margin:0;align-self:stretch;min-height:154px;max-height:200px;overflow:hidden;border-radius:60px 5px 5px 5px;background:#e3e9df;position:relative}
.heading-photo img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 55%}
.scene-coastal-village .heading-photo img{object-position:41% 57%}
.scene-harbour .heading-photo img{object-position:43% 54%}
.scene-cafe .heading-photo img{object-position:50% 70%}
@media(min-width:701px) and (max-width:1100px){.page-heading.photo-heading{grid-template-columns:minmax(0,1fr) 150px;column-gap:22px}.photo-heading h1{font-size:38px}.heading-photo{max-height:190px}}
@media(max-width:700px){.page-heading.photo-heading{grid-template-columns:minmax(0,1fr) 88px;column-gap:16px;row-gap:14px;min-height:0;align-items:start}.photo-heading h1{font-size:32px}.photo-heading>div{grid-column:1}.heading-photo{grid-row:1;min-height:112px;max-height:132px;border-radius:30px 4px 4px 4px}.photo-heading>.button{grid-column:1/-1}}
#sidebar .side-foot{display:flex;flex-direction:column;gap:14px;align-items:flex-start;font-size:8px;letter-spacing:.14em;line-height:1.4}
.shell-detail{display:block;width:70px;height:70px;border-radius:50%;background:url('assets/photo-ammonite.jpg') 49% 51% / 166% auto;opacity:.72}
body:not(.homepage) .welcome-card{position:relative;isolation:isolate;overflow:hidden}
body:not(.homepage) .welcome-card:after{content:'';position:absolute;width:210px;height:210px;right:-70px;bottom:-125px;z-index:-1;border-radius:50%;background:url('assets/agate-blue.jpg') center 52% / 240% auto;opacity:.18;pointer-events:none}
body[data-role=student] .welcome-card:after{background-image:url('assets/agate-green.jpg')}
body[data-role=advisor] .welcome-card:after{background-image:url('assets/agate-rose.jpg')}
@media(max-width:1000px){dialog.auth-dialog[open]{grid-template-columns:44% 56%;width:calc(100vw - 40px)}.auth-dialog .modal-head{padding:42px 32px 0}.auth-dialog #modal-content{padding:24px 32px 36px}.auth-dialog h2{font-size:40px}.auth-dialog[data-auth=register] h2{font-size:34px}.auth-dialog .registration-form .form-grid{gap:14px}}
@media(max-width:700px){dialog.auth-dialog[open]{display:block;width:calc(100vw - 28px);max-height:calc(100svh - 28px);border-radius:10px}.auth-dialog #auth-art{height:190px;min-height:0!important}.auth-dialog #auth-art img{object-position:45% 44%}.auth-dialog[data-auth=student] #auth-art{height:230px}.auth-dialog[data-auth=student] #auth-art img{object-position:45% 55%}.auth-dialog .modal-head{padding:24px 25px 0}.auth-dialog .close{margin-left:auto;position:absolute;right:18px;top:18px}.auth-dialog .auth-door{width:29px;height:44px;border-radius:10px 10px 2px 2px}.auth-dialog .modal-head .eyebrow{font-size:9px}.auth-dialog #modal-content{padding:22px 25px 30px}.auth-dialog h2,.auth-dialog[data-auth=register] h2{font-size:35px}.auth-dialog #modal-content>p{font-size:13px;margin-bottom:22px}.auth-dialog .form-grid,.auth-dialog .registration-form .form-grid{grid-template-columns:1fr;gap:15px}.auth-dialog .registration-form .form-grid>.hint{margin-top:-8px}.auth-dialog[data-auth=register] #auth-art img{height:450%;top:-230%}.auth-dialog #modal-content:after{width:36px;height:36px;right:20px;bottom:18px}.auth-dialog .auth-actions{gap:22px}.auth-dialog .registration-form .auth-actions{display:grid}.auth-dialog .registration-form .auth-actions .button{width:100%}#sidebar .side-foot{display:none}.door-icon{width:15px;height:23px}#sidebar button:has(.door-icon){gap:7px}}
@media(prefers-reduced-motion:reduce){.auth-dialog{scroll-behavior:auto}}